From 4ae433b8e26f82dd0a05cb763793c1f5fcdd2ecd Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Mon, 19 Feb 2024 15:14:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dailyDisposal/assets/charts.js | 247 ++++++++--------- .../components/eventSource/assets/charts.js | 4 +- .../components/monthStatistics/index.vue | 6 +- .../components/typeAnalysis/assets/charts.js | 251 +++++++++--------- .../components/typeAnalysis/index.vue | 2 +- 5 files changed, 260 insertions(+), 250 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js index 0e26ca6a..d3f76436 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dailyDisposal/assets/charts.js @@ -1,148 +1,151 @@ window.echartsData = [ - { value: 25, name: '处理中' }, - { value: 40, name: '待处理' }, - { value: 35, name: '已处理' },] + { value: 25, name: "处理中" }, + { value: 40, name: "待处理" }, + { value: 35, name: "已处理" }, +]; -window.colorList = [ - "#FFee0B", - "#61D8FF", - "#6AE0BC", - -] +window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC"]; window.count = 0; echartsData.forEach((it) => { - count += it.value; -}) - + count += it.value; +}); var options = { - color: colorList, - legend: { - orient: 'vertical', - top: "center", - icon: "circle", - right: 15, - itemGap: 16, - itemWidth: 8, - itemHeight: 8, - textStyle: { - color: "#fff", - fontSize: 12, - rich: { - ast: { - align: "left", - fontSize: 12, - width: 35, - }, - bst: { - align: "left", - fontSize: 12, - marginLeft: 20, - color: "#37E7FF" - } - } - }, - formatter: (params) => { - let count = 0; - echartsData.forEach((it) => { - count += it.value; - }) - if (count == 0) count = 1; - let obj = echartsData.filter(it => { return it.name == params }) - return `{ast|${obj[0].name}} {bst|${Math.round(obj[0].value / count * 100)}%}` + color: colorList, + legend: { + orient: "vertical", + top: "center", + icon: "circle", + right: 15, + itemGap: 16, + itemWidth: 8, + itemHeight: 8, + textStyle: { + color: "#fff", + fontSize: 12, + rich: { + ast: { + align: "left", + fontSize: 12, + width: 35, + }, + bst: { + align: "left", + fontSize: 12, + marginLeft: 10, + color: "#37E7FF", + }, }, - data: echartsData?.map(x => x), - }, - tooltip: { - trigger: 'item', - }, - series: [{ - name: '', - type: 'pie', - radius: '78%', - center: ['40%', '50%'], - roseType: 'radius', + }, + formatter: (params) => { + let count = 0; + echartsData.forEach((it) => { + count += it.value; + }); + if (count == 0) count = 1; + let obj = echartsData.filter((it) => { + return it.name == params; + }); + return `{ast|${obj[0].name}} {bst|${Math.round( + (obj[0].value / count) * 100 + )}%}`; + }, + data: echartsData?.map((x) => x), + }, + tooltip: { + trigger: "item", + }, + series: [ + { + name: "", + type: "pie", + radius: "120px", + width: "200px", + center: ["130px", "50%"], + roseType: "radius", label: { - show: false, - position: 'outside', - fontSize: 16, - formatter: (params) => { - return `{a|${params.name}} {b|${params.value / count}%}` - }, - rich: { - a: { - align: "left", - fontSize: 12, - }, - b: { - align: "left", - fontSize: 12, - } - }, + show: false, + position: "outside", + fontSize: 16, + formatter: (params) => { + return `{a|${params.name}} {b|${params.value / count}%}`; + }, + rich: { + a: { + align: "left", + fontSize: 12, + }, + b: { + align: "left", + fontSize: 12, + }, + }, }, itemStyle: { - normal: { - shadowColor: "rgba(0, 0, 0, 0.5)", - shadowBlur: 50, - }, + normal: { + shadowColor: "rgba(0, 0, 0, 0.5)", + shadowBlur: 50, + }, }, labelLine: { - show: false, - length: 10, - length2: 30, + show: false, + length: 10, + length2: 30, }, data: echartsData.map((item, index) => { - return { - ...item, - label: { - color: colorList[index] - } - } - }) - }, { - name: '', - type: 'pie', - radius: '90%', + return { + ...item, + label: { + color: colorList[index], + }, + }; + }), + }, + { + name: "", + type: "pie", + radius: "130px", hoverAnimation: false, emphasis: { scale: false }, - center: ['40%', '50%'], - roseType: 'radius', + center: ["130px", "50%"], + roseType: "radius", label: { - show: false, - position: 'outside', - fontSize: 16, - formatter: (params) => { - return `{a|${params.name}} ` - }, - rich: { - a: { - align: "left", - fontSize: 12, - } - }, + show: false, + position: "outside", + fontSize: 16, + formatter: (params) => { + return `{a|${params.name}} `; + }, + rich: { + a: { + align: "left", + fontSize: 12, + }, + }, }, itemStyle: { - normal: { - opacity: 0.3, - shadowColor: "rgba(0, 0, 0, 0.8)", - shadowBlur: 50, - }, + normal: { + opacity: 0.3, + shadowColor: "rgba(0, 0, 0, 0.8)", + shadowBlur: 50, + }, }, labelLine: { - show: false, - length: 10, - length2: 30, + show: false, + length: 10, + length2: 30, }, data: echartsData.map((item, index) => { - return { - ...item, - label: { - color: colorList[index] - } - } - }) - }] + return { + ...item, + label: { + color: colorList[index], + }, + }; + }), + }, + ], }; -export default options; \ No newline at end of file +export default options; 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 e07369e8..1ab98b94 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 @@ -117,8 +117,8 @@ var options = { orient: "vertical", //改变排列方式 icon: "circle", //改变legend小图标形状 itemGap: 15, // 设置legend的间距 - itemWidth: 10, // 设置宽度 - itemHeight: 15, // 设置高度 + itemWidth: 8, // 设置宽度 + // itemHeight: 15, // 设置高度 itemStyle: { borderColor: "transparent", diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue index 9bd095b6..4b38111a 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue @@ -2,7 +2,8 @@
-
+ +
@@ -21,7 +22,7 @@ export default { }, data() { return { - + dataList: [] } }, @@ -38,6 +39,7 @@ export default { getDailyCumulativeMonth().then((res) => { console.log(res); if (res.code == 200) { + this.dataList = res.data; let data = res.data; let timeData = []; let datasN = []; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js index 373f01a7..bc311a9f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/assets/charts.js @@ -1,151 +1,156 @@ window.typeAnalysisData = [ - { value: 100, name: '行人' }, - // { value: 90, name: '非机动车' }, - // { value: 80, name: '拥堵' }, - // { value: 60, name: '逆行' }, - // { value: 50, name: '抛洒物' }, - // { value: 45, name: '烟火' } -] + // { value: 100, name: '行人' }, + // { value: 90, name: '非机动车' }, + // { value: 80, name: '拥堵' }, + // { value: 60, name: '逆行' }, + // { value: 50, name: '抛洒物' }, + // { value: 45, name: '烟火' } +]; window.colorList = [ - "#019AFF", - "#3CC3F0", - "#51D5AD", - "#FFDD69", - "#F6A73C", - "#7390FD",] + "#019AFF", + "#3CC3F0", + "#51D5AD", + "#FFDD69", + "#F6A73C", + "#7390FD", +]; -window.colorList1 = [ - "#61D8FF", - "#FFB905", - "#6AE0BC",] +window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"]; var options = { - color: colorList, - legend: { - orient: 'vertical', - top: "10", - icon: "circle", - right: 40, - itemGap: 16, - itemWidth: 8, - itemHeight: 8, - textStyle: { - color: "#fff", - fontSize: 12, - rich: { - ast: { - align: "left", - fontSize: 12, - width: 30, - }, - bst: { - align: "left", - fontSize: 12, - marginLeft: 20, - color: "#37E7FF" - } - } + color: colorList, + legend: { + orient: "vertical", + top: "10", + icon: "circle", + right: 40, + itemGap: 16, + itemWidth: 8, + itemHeight: 8, + textStyle: { + color: "#fff", + fontSize: 12, + rich: { + ast: { + align: "left", + fontSize: 12, + width: 30, + }, + bst: { + align: "left", + fontSize: 12, + marginLeft: 20, + color: "#37E7FF", + }, }, - formatter: (params) => { - let count = 0; - typeAnalysisData.forEach((it) => { - count += it.value; - }) - let obj = typeAnalysisData.filter(it => { return it.name == params }) - // console.log(obj); - return `{ast|${obj[0].name}} {bst|${Math.round((obj[0].value / count) * 100)}%}` - }, - // data: typeAnalysisData?.map(x => x.name), - }, - tooltip: { - trigger: 'item', - }, - series: [{ - name: '', - type: 'pie', - radius: '80%', - center: ['40%', '50%'], + }, + formatter: (params) => { + let count = 0; + typeAnalysisData.forEach((it) => { + count += it.value; + }); + let obj = typeAnalysisData.filter((it) => { + return it.name == params; + }); + // console.log(obj); + return `{ast|${obj[0].name}} {bst|${ + Math.round((obj[0].value / count) * 100) || 0 + }%}`; + }, + // data: typeAnalysisData?.map(x => x.name), + }, + tooltip: { + trigger: "item", + }, + series: [ + { + name: "", + type: "pie", + radius: "70%", + center: ["30%", "50%"], clockwise: false, - roseType: 'radius', + roseType: "radius", startAngle1: 180, label: { - show: false, - position: 'outside', - fontSize: 16, - formatter: (params) => { - return `{a|${params.name}}` - }, - rich: { - a: { - align: "left", - fontSize: 12, - } - }, + show: false, + position: "outside", + fontSize: 16, + formatter: (params) => { + return `{a|${params.name}}`; + }, + rich: { + a: { + align: "left", + fontSize: 12, + }, + }, }, itemStyle: { - normal: { - shadowColor: "rgba(0, 0, 0, 0.8)", - shadowBlur: 50, - }, + normal: { + shadowColor: "rgba(0, 0, 0, 0.8)", + shadowBlur: 50, + }, }, labelLine: { - show: false, - length: 10, - length2: 30, + show: false, + length: 10, + length2: 30, }, data: typeAnalysisData.map((item, index) => { - return { - ...item, - label: { - color: colorList[index] - } - } - }) - }, { - name: '', - type: 'pie', - radius: '90%', + return { + ...item, + label: { + color: colorList[index], + }, + }; + }), + }, + { + name: "", + type: "pie", + radius: "80%", hoverAnimation: false, emphasis: { scale: false }, clockwise: false, - center: ['40%', '50%'], - roseType: 'radius', + center: ["30%", "50%"], + roseType: "radius", label: { - show: false, - position: 'outside', - fontSize: 16, - formatter: (params) => { - return `{a|${params.name}}` - }, - rich: { - a: { - align: "left", - fontSize: 12, - } - }, + show: false, + position: "outside", + fontSize: 16, + formatter: (params) => { + return `{a|${params.name}}`; + }, + rich: { + a: { + align: "left", + fontSize: 12, + }, + }, }, itemStyle: { - normal: { - opacity: 0.3, - shadowColor: "rgba(0, 0, 0, 0.8)", - shadowBlur: 50, - }, + normal: { + opacity: 0.3, + shadowColor: "rgba(0, 0, 0, 0.8)", + shadowBlur: 50, + }, }, labelLine: { - show: false, - length: 10, - length2: 30, + show: false, + length: 10, + length2: 30, }, data: typeAnalysisData.map((item, index) => { - return { - ...item, - label: { - color: colorList[index] - } - } - }) - }] + return { + ...item, + label: { + color: colorList[index], + }, + }; + }), + }, + ], }; -export default options; \ No newline at end of file +export default options; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue index 5b74735f..a31445f2 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/typeAnalysis/index.vue @@ -6,7 +6,7 @@ - +