From f843d62090af18451c0845320812a8c9e4d5303b Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Tue, 20 Feb 2024 09:37:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E6=84=9F=E7=9F=A5=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E6=A3=80=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/eventQuery/assets/charts.js | 229 ++++++++++-------- .../components/eventQuery/assets/charts2.js | 24 +- .../components/eventQuery/assets/charts3.js | 19 +- .../components/eventQuery/index.vue | 48 ++-- .../monthStatistics/assets/charts.js | 27 +-- .../pages/perception/eventDetection/index.vue | 5 +- 6 files changed, 196 insertions(+), 156 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js index 4f5f83cb..c08c28e5 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts.js @@ -1,130 +1,155 @@ - /* 数据 */ -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]; // 人数 +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% 处的颜色 }, - borderRadius: 6 - }, - label: { show: false } - }) - } else { - dataList.push({ - name: item, - value: valueList[index], - itemStyle: { - borderRadius: 6 - } - }) - } -}) - -var options = { - grid: { - top: '7%',//上边距 - right: '0',//右边距 - left: '0',//左边距 - bottom: "2%",//下边距 - containLabel: true, - }, - tooltip: { - - }, - xAxis: { - type: 'category', - data: nameList, - axisTick: { - show: false //隐藏X轴刻度 + { + offset: 1, + color: "#FF6969", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + borderRadius: 6, }, - axisLine: { - lineStyle: { - color: "rgba(49, 217, 255, 0.8)" - } + label: { show: false }, + }); + } else { + dataList.push({ + name: item, + value: valueList[index], + itemStyle: { + borderRadius: 6, }, - axisLabel: { - show: true, - color: '#B6E6FF', - fontSize: 8, - fontFamily: 'Source Han Sans CN-Regular', + }); + } +}); + +var options = { + grid: { + top: "7%", //上边距 + right: "0", //右边距 + left: "0", //左边距 + bottom: "2%", //下边距 + containLabel: true, + }, + tooltip: {}, + xAxis: { + type: "category", + data: [], + axisTick: { + show: false, //隐藏X轴刻度 + }, + axisLine: { + lineStyle: { + color: "rgba(49, 217, 255, 0.8)", }, - }, - yAxis: [{ - type: 'value', + }, + axisLabel: { + show: true, + color: "#fff", + fontSize: "10px", + fontFamily: "Source Han Sans CN-Regular", + }, + }, + yAxis: [ + { + type: "value", name: "", splitNumber: 5, nameTextStyle: { - color: '#B6E6FF', - fontSize: 13, - fontFamily: 'Source Han Sans CN-Regular', - align: "left", - verticalAlign: "center", + color: "#B6E6FF", + fontSize: 10, + 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: "10px", + color: "#fff", + 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: [{ - type: 'bar', - data: dataList, + }, + ], + series: [ + { + type: "bar", + data: [], z: 4, itemStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 0, - y2: 1, - colorStops: [{ - offset: 0, color: '#06D7B1' // 0% 处的颜色 - }, { - offset: 1, color: '#80F1BB' // 100% 处的颜色 - }], - global: false // 缺省为 false - }, - borderRadius: [4, 4, 0, 0] + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#06D7B1", // 0% 处的颜色 + }, + { + offset: 1, + color: "#80F1BB", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + borderRadius: [4, 4, 0, 0], }, barWidth: 10, label: { - show: false, - } - }, - ] -} + show: false, + }, + }, + ], +}; export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js index 9637be33..679b922f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts2.js @@ -105,8 +105,8 @@ var options = { }, title: { //圆环中间内容 - text: "{zb|12}", - subtext: "类型分析", + text: "{zb|0}", + subtext: " 类型分析", left: "17.5%", top: "40%", textStyle: { @@ -114,18 +114,20 @@ var options = { zb: { width: 70, color: "#fff", - fontSize: 26, - align: 'center' - } - } + fontSize: 30, + align: "center", + fontFamily: "PangMenZhengDao", + }, + }, }, subtextStyle: { - fontSize: 18, + fontSize: 16, fontWeight: "400", - top: -8, - + width: 200, + // top: -18, + // marginLeft: 50, align: "center", - color: "#fff", + color: "#74868D", }, }, color: colorList, @@ -200,7 +202,7 @@ var options = { length2: 80, }, }, - data: pieData1, + data: [], label: { show: false, formatter: function (params) {}, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js index b4c3416c..e1183d2a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js @@ -20,12 +20,12 @@ let options = { grid: { left: "2%", right: "4%", - top: "5%", + top: "30px", bottom: "5%", containLabel: true, }, xAxis: { - data: xData, + data: [], show: true, axisTick: { show: false, @@ -44,13 +44,18 @@ let options = { rotate: "1", margin: "20", textStyle: { - fontSize: 12, - color: "#50A2C1", + fontSize: 10, + color: "#fff", }, }, }, yAxis: [ { + name: "(起) ", + nameTextStyle: { + color: "#E5E7E8", + fomtSize: 10, + }, min: 0, axisLine: { lineStyle: { @@ -67,7 +72,7 @@ let options = { axisLabel: { color: "#DEEBFF", textStyle: { - fontSize: 12, + fontSize: 10, }, }, axisTick: { @@ -162,7 +167,7 @@ let options = { ); }, }, - data: data1, + data: [], }, // 进度条的小圆圈 { @@ -183,7 +188,7 @@ let options = { }, z: 2, zlevel: 10, - data: data1, + data: [], animationDelay: 500, }, ], diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue index 6e1b0a1b..73dbfff9 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue @@ -9,11 +9,13 @@ - + + :type="type == 'date' ? 'date' : type == 'month' ? 'month' : type == 'year' ? 'year' : ''" placeholder="请选择" + :clearable="false" /> 查询 重置 @@ -23,16 +25,19 @@
-
+ +
+
+
@@ -119,6 +124,9 @@ export default { selectIndex: 3, selectId: 3, type: "year", + chart1List: [], + chart2List: [], + chart3List: [], list: [ { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }, @@ -175,6 +183,7 @@ export default { "quarter": this.quarter }).then(res => { if (res.code == 200) { + this.chart1List = res.data let data = res.data; chart1.series[0].data = []; chart1.xAxis.data = []; @@ -247,7 +256,7 @@ export default { if (res.code == 200) { let types = []; let numbers = []; - + this.chart2List = res.data let data = res.data.warningTypeList; let total = res.data.total; @@ -307,22 +316,22 @@ export default { chart2.series[0].data = numbers; // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形 - this.myChart2.on('mouseover', (params) => { - if (params.componentType == 'graphic') { - return - } - // console.log(params); - chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`; - chart2.title.subtext = params.data.name; - this.myChart2.setOption(chart2); - }) + // this.myChart2.on('mouseover', (params) => { + // if (params.componentType == 'graphic') { + // return + // } + // // console.log(params); + // chart2.title.text = `{zb|${Math.round(params.data.value / total * 100)}%}`; + // chart2.title.subtext = params.data.name; + // this.myChart2.setOption(chart2); + // }) // 用户鼠标移出时，重新开始自动切换 - this.myChart2.on('mouseout', (params) => { - chart2.title.text = `{zb|${total}}`; - chart2.title.subtext = "类型分析"; - this.myChart2.setOption(chart2); - }) + // this.myChart2.on('mouseout', (params) => { + // chart2.title.text = `{zb|${total}}`; + // chart2.title.subtext = "类型分析"; + // this.myChart2.setOption(chart2); + // }) } this.myChart2.setOption(chart2); @@ -339,6 +348,7 @@ export default { chart3.series[1].data = []; chart3.xAxis.data = []; if (res.code == 200 && res.data.length > 0) { + this.chart3List = res.data let data = res.data; const maxObject = data.filter(it => it.sectionNumber > 0).reduce((prev, current) => (current.sectionNumber > prev.sectionNumber ? current : prev)); let zhs = []; @@ -562,7 +572,7 @@ export default { justify-content: space-between; align-items: center; flex-direction: column; - + --keep-ratio: scaleX(1); .searchPanel { display: flex; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js index cabe3b62..14e3cc68 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/assets/charts.js @@ -10,7 +10,7 @@ var options = { grid: { left: "0%", right: "5%", - bottom: "10%", + bottom: "30px", top: "30px", containLabel: true, }, @@ -22,7 +22,7 @@ var options = { startValue: 0, endValue: 7, filterMode: "filter", - height: 14, + height: 10, bottom: 5, handleSize: "200%", handleIcon: @@ -106,12 +106,12 @@ var options = { axisLine: { lineStyle: { color: "#BDD8FB", - fontSize: 12, + fontSize: 10, }, }, axisLabel: { // interval:0, - color: "#BDD8FB", + color: "#fff", fontSize: 12, }, axisTick: { @@ -145,14 +145,14 @@ var options = { ], }, yAxis: { + name: "(件) ", + nameTextStyle: { + color: "#fff", + fomtSize: 10, + }, type: "value", min: 0, minInterval: 1, - nameTextStyle: { - fontSize: 12, - color: "#BDD8FB", - align: "center", - }, splitLine: { lineStyle: { color: "rgba(255, 255, 255, 0.15)", @@ -169,7 +169,7 @@ var options = { axisLabel: { fontSize: 12, fontFamily: "Bebas", - color: "#BDD8FB", + color: "#fff", }, }, series: [ @@ -178,11 +178,8 @@ var options = { // symbol: "none", showSymbol: false, smooth: true, // 是否曲线 - name: "", // 图例对应类别 - data: [ - 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, - 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, - ], // 纵坐标数据 + // name: "", // 图例对应类别 + data: [], // 纵坐标数据 lineStyle: { color: "#39B1FF", }, diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue index ba9ca455..c4379cb6 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/index.vue @@ -10,7 +10,7 @@
-
+
@@ -128,5 +128,6 @@ export default { width: 493px; } } -} +} + \ No newline at end of file