From 9b8aeb4bac4f78a2148cc1bbb195515a82947b39 Mon Sep 17 00:00:00 2001 From: zhoule Date: Thu, 1 Feb 2024 10:41:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=84=9F=E7=9F=A5=E4=BA=8B=E4=BB=B6=E6=A3=80?= =?UTF-8?q?=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/eventQuery/assets/charts2.js | 15 ++++--- .../components/eventQuery/assets/charts3.js | 2 +- .../components/eventQuery/index.vue | 9 ++-- .../components/eventSource/assets/charts.js | 43 +++++++++++-------- .../components/eventSource/index.vue | 17 +++++--- .../trafficIndicators/assets/charts3.js | 2 +- .../tunnel/components/burglarAlarm.vue | 2 +- 7 files changed, 54 insertions(+), 36 deletions(-) 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 994bfc9a..875a0c74 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 @@ -95,7 +95,7 @@ for (let i = 0; i < chartData.length; i++) { pieData1.push(gapData); } -console.log(pieData1); +// console.log(pieData1); var options = { tooltip: { confine: true, @@ -105,14 +105,19 @@ var options = { }, title: { //圆环中间内容 - text: "100%", + text: "{zb|12}", subtext: "类型分析", left: "19%", top: "40%", textStyle: { - color: "#fff", - fontSize: 26, - align: "center", + rich: { + zb: { + width: 70, + color: "#fff", + fontSize: 26, + align: 'center' + } + } }, subtextStyle: { fontSize: 18, 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 ec3148c6..4dec699b 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 @@ -168,7 +168,7 @@ let options = { }, // 进度条的小圆圈 { - name: "小圈圈", + // name: "小圈圈", type: "scatter", emphasis: { scale: false 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 7638da9d..05a4403f 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 @@ -355,21 +355,24 @@ export default { return arr.join(' ') }; + chart2.title.text = `{zb|${total}}`; + chart2.title.subtext = "类型分析"; + chart2.series[0].data = numbers; // 用户鼠标悬浮到某一图形时，停止自动切换并高亮鼠标悬浮的图形 this.myChart2.on('mouseover', (params) => { if (params.componentType == 'graphic') { return } - console.log(params); - chart2.title.text = Math.round(params.data.value / total * 100) + "%"; + // 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 = total; + chart2.title.text = `{zb|${total}}`; chart2.title.subtext = "类型分析"; this.myChart2.setOption(chart2); }) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js index 734b892f..67527510 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js @@ -1,18 +1,18 @@ let data = [{ average: 30, - typeName: '视频识别', + name: '视频识别', percent: 0.2 }, { average: 25, - typeName: '雷达识别', + name: '雷达识别', percent: 0.25 }, { average: 15, - typeName: '锥桶', + name: '锥桶', percent: 0.08 }, { average: 30, - typeName: '护栏碰撞', + name: '护栏碰撞', percent: 0.14 }] @@ -22,12 +22,12 @@ let chartData = [], lengData = [], colorList = ['#006EDF', '#00FF00', '#FFC30D', for (let i = 0; i < data.length; i++) { chartData.push({ value: data[i].average, - name: data[i].typeName, + name: data[i].name, percent: data[i].percent, color: colorList[i] }) lengData.push({ - name: data[i].typeName, + name: data[i].name, color: colorList[i] }) } @@ -70,22 +70,29 @@ var options = { backgroundColor: "#ffffff", }, title: { //圆环中间内容 - text: '99% ', - subtext: ' 占比', + text: '{tb|1}', + subtext: '{zb|总数}', left: "22%", top: "40%", textStyle: { - color: "#fff", - fontSize: 21, - align: "center" + rich: { + tb: { + width: 45, + color: "#fff", + fontSize: 21, + align: 'center' + } + } }, subtextStyle: { - fontSize: 13, - fontWeight: '400', - top: 0, - marginLeft: 20, - align: "center", - color: '#fff' + rich: { + zb: { + width: 45, + color: '#fff', + fontSize: 13, + align: 'center' + } + } }, }, color: ['#5973FF', '#14d8b4', '#FFC30D', '#61D8FF', '#1DA7FF', '#2967EA'], @@ -123,7 +130,7 @@ var options = { for (let i = 0; i < data.length; i++) { if (window.mainData[i]) { total += window.mainData[i].percent - if (window.mainData[i].typeName === name) { + if (window.mainData[i].name === name) { target = window.mainData[i].percent } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue index 2d3a1c8e..300bcf59 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue @@ -115,7 +115,10 @@ export default { }) } window.mainData = mainData; - //console.log("--------------",mainData); + console.log('mainData',mainData) + chartsStatistics.title.text = `{tb|${total}}`; + chartsStatistics.title.subtext = "{zb|总数}"; + chartsStatistics.legend.data = lengData; chartsStatistics.series[0].data = mainData; @@ -123,17 +126,17 @@ export default { if (params.componentType == 'graphic') { return } - chartsStatistics.title.text = params.percent + "%"; - chartsStatistics.title.subtext = params.data.name; - chartsStatistics.title.left = "22%"; + chartsStatistics.title.text = `{tb|${params.percent}%}`; + chartsStatistics.title.subtext = `{zb|${params.data.name}}`; + // chartsStatistics.title.left = "22%"; myChart.setOption(chartsStatistics); }) // 用户鼠标移出时，重新开始自动切换 myChart.on('mouseout', (params) => { - chartsStatistics.title.text = total; - chartsStatistics.title.subtext = "总数"; - chartsStatistics.title.left = "25%"; + chartsStatistics.title.text = `{tb|${total}}`; + chartsStatistics.title.subtext = "{zb|总数}"; + // chartsStatistics.title.left = "25%"; myChart.setOption(chartsStatistics); }) } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js index fceb5480..77e793ab 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js @@ -181,7 +181,7 @@ let xData = [ }, // 进度条的小圆圈 { - name: "小圈圈", + // name: "小圈圈", type: "scatter", emphasis: { scale: false diff --git a/ruoyi-ui/src/views/bigscreen/tunnel/components/burglarAlarm.vue b/ruoyi-ui/src/views/bigscreen/tunnel/components/burglarAlarm.vue index bd753dfa..cbd9b36b 100644 --- a/ruoyi-ui/src/views/bigscreen/tunnel/components/burglarAlarm.vue +++ b/ruoyi-ui/src/views/bigscreen/tunnel/components/burglarAlarm.vue @@ -59,7 +59,7 @@ export default { calculable : true, series: [ { - name:'小圈圈', + // name:'小圈圈', type:'pie', center:['50%','40%'], radius:['28%','45%'],