-
-
-
-
- 拥挤度
-
-
- 饱和度
-
-
- 交通组成特征指数
-
-
-
-
-
- TOP{{ index + 1 }}
-
-
- {{ it.name }}
-
-
-
+
+
+
+
+
+ 拥挤度
+
+
+ 饱和度
+
+
+ 交通组成特征指数
+
+
+
+
+
+ TOP{{ index + 1 }}
+
+
+ {{ it.name }}
+
+
-
- {{ it.num }}
-
-
-
-
+
+
+
+ {{ it.num }}
+
+
+
-
+
+
-
+ });
+ },
+}
+
-
+}
+
+.charts {
+ height: 180px;
+ width: 100%;
+}
+
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
index 6d43ac32..cb4e8bdb 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
@@ -1,160 +1,187 @@
-
/* 数据 */
-let nameList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; // 类别
-let valueList = [800, 520, 650, 950, 420, 600, 450, 720, 303, 503 , 203 ,703 , 903 ]; // 人数
-var yList = [ "1000","800","轻度拥堵","基本畅通","畅通"]
+let nameList = [
+ "1月",
+ "2月",
+ "3月",
+ "4月",
+ "5月",
+ "6月",
+ "7月",
+ "8月",
+ "9月",
+ "10月",
+ "11月",
+ "12月",
+]; // 类别
+let valueList = [
+ 800, 520, 650, 950, 420, 600, 450, 720, 303, 503, 203, 703, 903,
+]; // 人数
+var yList = ["1000", "800", "轻度拥堵", "基本畅通", "畅通"];
/* 数据整合 */
let dataList = [];
nameList.map((item, index) => {
- if (index === 4) {
- dataList.push({
- name: item,
- value: valueList[index],
- itemStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: '#FFB904' // 0% 处的颜色
- }, {
- offset: 1, color: '#FF6969' // 100% 处的颜色
- }],
- global: false // 缺省为 false
+ if (index === 4) {
+ dataList.push({
+ name: item,
+ value: valueList[index],
+ itemStyle: {
+ color: {
+ type: "linear",
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: "#FFB904", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "#FF6969", // 100% 处的颜色
},
- borderRadius: 6
- },
- label: { show: false }
- })
- } else {
- dataList.push({
- name: item,
- value: valueList[index],
- itemStyle:{
- borderRadius: 6
- }
- })
- }
-})
+ ],
+ global: false, // 缺省为 false
+ },
+ borderRadius: 6,
+ },
+ label: { show: false },
+ });
+ } else {
+ dataList.push({
+ name: item,
+ value: valueList[index],
+ itemStyle: {
+ borderRadius: 6,
+ },
+ });
+ }
+});
var options = {
- legend: {
- // orient: 'vertical',
- icon: "circle",
- itemHeight: 8,
- itemWidth: 8,
- top: "5%",
- x: "right",
- textStyle: {
- color: "#fff",
- },
+ legend: {
+ // orient: 'vertical',
+ icon: "circle",
+ itemHeight: 8,
+ itemWidth: 8,
+ top: "5%",
+ x: "right",
+ textStyle: {
+ color: "#fff",
},
- grid: {
- top: '25%',//上边距
- right: '0',//右边距
- left: '0',//左边距
- bottom: "0%",//下边距
- containLabel: true,
- },
- xAxis: {
- type: 'category',
- data: nameList,
- axisTick: {
- show: false //隐藏X轴刻度
- },
- axisLine: {
- lineStyle: {
- color: "rgba(49, 217, 255, 0.8)"
- }
- },
- axisLabel: {
- show: true,
- color: '#B6E6FF',
- fontSize:8,
- fontFamily: 'Source Han Sans CN-Regular',
+ },
+ grid: {
+ top: "25%", //上边距
+ right: "0", //右边距
+ left: "0", //左边距
+ bottom: "0%", //下边距
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: nameList,
+ axisTick: {
+ show: false, //隐藏X轴刻度
+ },
+ axisLine: {
+ lineStyle: {
+ color: "rgba(49, 217, 255, 0.8)",
},
- },
- yAxis: [{
- type: 'value',
+ },
+ axisLabel: {
+ show: true,
+ color: "#B6E6FF",
+ fontSize: 8,
+ fontFamily: "Source Han Sans CN-Regular",
+ },
+ },
+ yAxis: [
+ {
+ type: "value",
name: "",
max: 1200,
- min:0,
- splitNumber:5,
+ min: 0,
+ splitNumber: 5,
nameTextStyle: {
- color: '#B6E6FF',
- fontSize: 13,
- fontFamily: 'Source Han Sans CN-Regular',
- align: "left",
- verticalAlign: "center",
+ color: "#B6E6FF",
+ fontSize: 13,
+ fontFamily: "Source Han Sans CN-Regular",
+ align: "left",
+ verticalAlign: "center",
},
axisLabel: {
- fontSize: 13,
- color: '#B6E6FF',
- fontFamily: 'HarmonyOS Sans-Regular',
- // formatter:function(value,index){
- // return yList[index]
- // }
+ fontSize: 13,
+ color: "#B6E6FF",
+ fontFamily: "HarmonyOS Sans-Regular",
+ // formatter:function(value,index){
+ // return yList[index]
+ // }
},
axisLine: {
- show: false,
+ show: false,
},
axisTick: {
- show: false
+ show: false,
},
splitLine: {
- lineStyle: {
- color: 'rgba(49, 217, 255, 0.5)',
- }
+ lineStyle: {
+ color: "rgba(49, 217, 255, 0.5)",
+ },
},
- }],
- series: [
- {
- name: '交通特征',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
+ },
+ ],
+ series: [
+ {
+ name: "交通特征",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#32BB8A',
- },
- lineStyle: {
- width:2,
- },
- data: [1000, 800, 520, 600, 900, 700, 700,1000, 800, 520, 600, 900, 700, 700], // 折线图的数据
- },
- {
- name: '饱和度',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#32BB8A",
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [
+ 1000, 800, 520, 600, 900, 700, 700, 1000, 800, 520, 600, 900, 700, 700,
+ ], // 折线图的数据
+ },
+ {
+ name: "饱和度",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#07A3FB',
- },
- lineStyle: {
- width: 2,
- },
- data: [600, 700, 900, 400, 500, 800, 600,600, 700, 900, 400, 500, 800, 600], // 折线图的数据
- },
- {
- name: '拥挤度',
- type: 'line',
- symbol: 'circle',
- symbolSize: 0,
- // yAxisIndex: 1, // 与第二个 y 轴关联
- itemStyle: {
- color: '#E2BA74',
- },
- lineStyle: {
- width: 2,
- },
- data: [850, 810, 712, 580, 480, 480, 780,850, 810, 712, 580, 480, 480, 780], // 折线图的数据
- },
- ]
-}
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#07A3FB",
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [
+ 600, 700, 900, 400, 500, 800, 600, 600, 700, 900, 400, 500, 800, 600,
+ ], // 折线图的数据
+ },
+ {
+ name: "拥挤度",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 0,
+ // yAxisIndex: 1, // 与第二个 y 轴关联
+ itemStyle: {
+ color: "#E2BA74",
+ },
+ lineStyle: {
+ width: 2,
+ },
+ data: [
+ 850, 810, 712, 580, 480, 480, 780, 850, 810, 712, 580, 480, 480, 780,
+ ], // 折线图的数据
+ },
+ ],
+};
export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
index 96fed411..e750558b 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
@@ -3,51 +3,59 @@ import * as echarts from "echarts";
function contains(arr, val) {
var i = arr.length;
while (i--) {
- if (arr[i].name === val) {
- return i;
- }
+ if (arr[i].name === val) {
+ return i;
+ }
}
return false;
}
let list = [
{
- name: '交通特征',
- max: 88,
+ name: "交通特征",
+ max: 88,
},
{
- name: '拥挤度',
- max: 88,
+ name: "拥挤度",
+ max: 88,
},
{
- name: '饱和度',
- max:188,
+ name: "饱和度",
+ max: 188,
},
];
let data1 = [[80, 50, 55, 80, 50, 80, 48, 43]];
let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]];
let options = {
-
tooltip: {
- show: true,
- trigger: 'item',
- formatter: (data) => {
- // console.log(data.seriesIndex);
- var tip = '
' + data.seriesName + '
';
- let tmpData = [];
- if (data.seriesIndex === 0) {
- tmpData = data1;
- } else if (data.seriesIndex === 1) {
- tmpData = data2;
- }
- console.log(tmpData)
- data.value.forEach((item, index) => {
- // console.log(list[index].name)
- tip += '
';
- tip += '
' + list[index].name + ': '+ tmpData[0][index] + '万
'
- tip += '
';
- });
- return tip;
- },
+ show: true,
+ trigger: "item",
+ formatter: (data) => {
+ // console.log(data.seriesIndex);
+ var tip = '
' + data.seriesName + "";
+ let tmpData = [];
+ if (data.seriesIndex === 0) {
+ tmpData = data1;
+ } else if (data.seriesIndex === 1) {
+ tmpData = data2;
+ }
+ console.log(tmpData);
+ data.value.forEach((item, index) => {
+ // console.log(list[index].name)
+ tip += "
";
+ tip +=
+ "
" + list[index].name + ": " + tmpData[0][index] + "万
";
+ tip += "
";
+ });
+ return tip;
+ },
+ },
+ grid: {
+ top: "5%", //上边距
+ right: "0", //右边距
+ left: "0", //左边距
+ bottom: "0%", //下边距
+ padding: "50px",
+ containLabel: true,
},
// legend: {
// show: true,
@@ -62,88 +70,92 @@ let options = {
// data: ['数据1', '数据2'],
// },
radar: {
- name: {
- textStyle: {
- color: '#fff',
- fontSize: 16,
- },
- rich: {
- a: {
- fontSize: 16,
- color: '#FFFFFF',
- padding: [0, 0, 8, 0],
- },
- b: {
- fontSize: 18,
- color: '#ACD3FF',
- },
- },
- formatter: (a) => {
- let i = contains(list, a); // 处理对应要显示的样式
- return `{a| ${a}}`;
- },
+ name: {
+ textStyle: {
+ color: "#fff",
+ fontSize: 16,
},
- center: ['50%', '50%'],
- radius: '60%',
- startAngle: 90,
- splitNumber: 5,
- shape: 'circle',
- splitArea: {
- areaStyle: {
- color: [ '#07A3FB99','#07A3FB8010', '#07A3FB30','#07A3FB60','#07A3FB80'],
- },
+ rich: {
+ a: {
+ fontSize: 12,
+ color: "#FFFFFF",
+ padding: [0, 0, 8, 0],
+ },
+ b: {
+ fontSize: 18,
+ color: "#ACD3FF",
+ },
},
- axisLabel: {
- show: false,
+ formatter: (a) => {
+ let i = contains(list, a); // 处理对应要显示的样式
+ return `{a| ${a}}`;
},
- axisLine: {
- show: false,
+ },
+ center: ["50%", "50%"],
+ radius: "60%",
+ startAngle: 90,
+ splitNumber: 5,
+ shape: "circle",
+ splitArea: {
+ areaStyle: {
+ color: [
+ "#07A3FB99",
+ "#07A3FB8010",
+ "#07A3FB30",
+ "#07A3FB60",
+ "#07A3FB80",
+ ],
},
- splitLine: {
- show: true,
- lineStyle: {
- color: 'rgba(50, 72, 130, 0.4)',
- },
+ },
+ axisLabel: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(50, 72, 130, 0.4)",
},
- indicator: list,
+ },
+ indicator: list,
},
series: [
- {
- name: '数据1',
- type: 'radar',
- symbol: 'circle',
- symbolSize: 3,
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 1,
- 0,
- 0,
- [
- {
- offset: 0,
- color: '#DC6A00',
- },
- {
- offset: 1,
- color: '#099CCD',
- },
- ],
- false
- ),
+ {
+ name: "数据1",
+ type: "radar",
+ symbol: "circle",
+ symbolSize: 3,
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 1,
+ 0,
+ 0,
+ [
+ {
+ offset: 0,
+ color: "#DC6A00",
+ },
+ {
+ offset: 1,
+ color: "#099CCD",
},
- },
- itemStyle: {
- color: 'rgba(245, 166, 35, 0.2)',
- borderColor: 'rgba(235, 171, 86, 00)',
- borderWidth: 10,
- },
- data: data1,
+ ],
+ false
+ ),
+ },
},
+ itemStyle: {
+ color: "rgba(245, 166, 35, 0.2)",
+ borderColor: "rgba(235, 171, 86, 00)",
+ borderWidth: 10,
+ },
+ data: data1,
+ },
],
};
-
-
-export default options;
\ No newline at end of file
+export default options;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
index 0e86d8aa..e43bf4ec 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
@@ -35,7 +35,7 @@