From dc4441da642f206976297b8803b34a807a8346f0 Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Mon, 19 Feb 2024 16:51:10 +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/dayTotal/index.vue | 4 +- .../monthStatistics/assets/charts.js | 410 +++++++++--------- .../components/monthStatistics/index.vue | 5 +- .../components/railway/index.vue | 5 +- 4 files changed, 216 insertions(+), 208 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue index 42c25323..9d533bae 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue @@ -2,8 +2,8 @@
- -
+ +
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 c7b9fe97..cabe3b62 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 @@ -1,218 +1,224 @@ import * as echarts from "echarts"; var options = { + color: ["#5090FF", "#01B3E4"], + tooltip: { + trigger: "axis", + textStyle: { + color: "#333", + }, + }, + grid: { + left: "0%", + right: "5%", + bottom: "10%", + top: "30px", + containLabel: true, + }, - color: ["#5090FF", "#01B3E4"], - tooltip: { - trigger: "axis", - textStyle: { - color: "#333", - }, - }, - grid: { - left: "2%", - right: "5%", - bottom: "10%", - top: "30px", - containLabel: true, - }, - - dataZoom: [ - { - type: 'slider', - xAxisIndex: 0, - startValue: 0, - endValue: 7, - filterMode: 'filter', - height: 14, - bottom: 5, - handleSize: '200%', - handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", - // 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==', - handleStyle: { - color: '#0BDADA', - borderWidth: 0, - }, - moveHandleStyle: { - color: 'transparent', - borderWidth: 0, - opacity: 0, - }, - selectedDataBackground: { - color: 'transparent', - areaStyle: { - opacity: 0 - }, - lineStyle: { - opacity: 0 - } - }, - backgroundColor: new echarts.graphic.LinearGradient( - 0, 0, 1, 0, - [{ - offset: 0, - color: 'rgba(71, 180, 124, 0.70)' - }, - { - offset: 1, - color: 'rgba(71, 180, 124, 0)' - } - ], - false - ), - // shadowColor: 'rgba(255, 214, 62, 0.10)', - // shadowBlur: 10 - - fillerColor: 'transparent', - borderColor: 'transparent', - textStyle: { - color: 'transparent' - }, - dataBackground: { - areaStyle: { - opacity: 0 - }, - lineStyle: { - opacity: 0 - } - } - } - ], - legend: { - show: true, - icon: "rect", - orient: "horizontal", - left: "right", - itemWidth: 12, - itemHeight: 12, - formatter: ["{a|{name}}"].join("\n"), - textStyle: { - fontSize: 12, - color: "#6A93B9", - height: 8, - rich: { - a: { - verticalAlign: "bottom", - }, - }, + dataZoom: [ + { + type: "slider", + xAxisIndex: 0, + startValue: 0, + endValue: 7, + filterMode: "filter", + height: 14, + bottom: 5, + handleSize: "200%", + handleIcon: + "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", + // 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==', + handleStyle: { + color: "#0BDADA", + borderWidth: 0, }, - data: ["魅力值"], - }, - xAxis: { - type: "category", - axisLine: { - lineStyle: { - color: "#BDD8FB", - fontSize: 12, - }, + moveHandleStyle: { + color: "transparent", + borderWidth: 0, + opacity: 0, }, - axisLabel: { - // interval:0, - color: "#BDD8FB", - fontSize: 12, + selectedDataBackground: { + color: "transparent", + areaStyle: { + opacity: 0, + }, + lineStyle: { + opacity: 0, + }, }, - axisTick: { - show: false, + backgroundColor: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 0, + [ + { + offset: 0, + color: "rgba(71, 180, 124, 0.70)", + }, + { + offset: 1, + color: "rgba(71, 180, 124, 0)", + }, + ], + false + ), + // shadowColor: 'rgba(255, 214, 62, 0.10)', + // shadowBlur: 10 + + fillerColor: "transparent", + borderColor: "transparent", + textStyle: { + color: "transparent", }, - data: [ - "0点至1点", - "1点至2点", - "2点至3点", - "3点至4点", - "4点至5点", - "5点至6点", - "6点至7点", - "7点至8点", - "8点至9点", - "9点至10点", - "10点至11点", - "11点至12点", - "12点至13点", - "13点至14点", - "14点至15点", - "15点至16点", - "16点至17点", - "17点至18点", - "18点至19点", - "19点至20点", - "20点至21点", - "21点至22点", - "22点至23点", - "23点至24点", - ], - }, - yAxis: { - type: "value", - min: 0, - minInterval: 1, - nameTextStyle: { - fontSize: 12, - color: "#BDD8FB", - align: "center", + dataBackground: { + areaStyle: { + opacity: 0, + }, + lineStyle: { + opacity: 0, + }, }, - splitLine: { - lineStyle: { - color: "rgba(255, 255, 255, 0.15)", - // type: 'dashed', // dotted 虚线 - }, + }, + ], + legend: { + show: true, + icon: "rect", + orient: "horizontal", + left: "right", + itemWidth: 12, + itemHeight: 12, + formatter: ["{a|{name}}"].join("\n"), + textStyle: { + fontSize: 12, + color: "#6A93B9", + height: 8, + rich: { + a: { + verticalAlign: "bottom", + }, }, - splitArea: { show: false }, - axisLine: { - show: false, + }, + data: ["魅力值"], + }, + xAxis: { + type: "category", + axisLine: { + lineStyle: { + color: "#BDD8FB", + fontSize: 12, }, - axisTick: { - show: false, + }, + axisLabel: { + // interval:0, + color: "#BDD8FB", + fontSize: 12, + }, + axisTick: { + show: false, + }, + data: [ + "0点至1点", + "1点至2点", + "2点至3点", + "3点至4点", + "4点至5点", + "5点至6点", + "6点至7点", + "7点至8点", + "8点至9点", + "9点至10点", + "10点至11点", + "11点至12点", + "12点至13点", + "13点至14点", + "14点至15点", + "15点至16点", + "16点至17点", + "17点至18点", + "18点至19点", + "19点至20点", + "20点至21点", + "21点至22点", + "22点至23点", + "23点至24点", + ], + }, + yAxis: { + type: "value", + min: 0, + minInterval: 1, + nameTextStyle: { + fontSize: 12, + color: "#BDD8FB", + align: "center", + }, + splitLine: { + lineStyle: { + color: "rgba(255, 255, 255, 0.15)", + // type: 'dashed', // dotted 虚线 }, - axisLabel: { - fontSize: 12, - fontFamily: "Bebas", - color: "#BDD8FB", + }, + splitArea: { show: false }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + fontSize: 12, + fontFamily: "Bebas", + color: "#BDD8FB", + }, + }, + series: [ + { + type: "line", + // 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, + ], // 纵坐标数据 + lineStyle: { + color: "#39B1FF", }, - }, - series: [ - { - type: "line", - // 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], // 纵坐标数据 - lineStyle: { - color: "#39B1FF" - }, - areaStyle: { - // 区域颜色 - // color: new graphic.LinearGradient(0, 0, 0, 1, [ - // { - // offset: 0, - // color: "#5090FF", - // }, - // { - // offset: 1, - // color: "#1057E5", - // }, - // ]), - color: { - type: 'linear', - x: 0, //右 - y: 0, //下 - x2: 0, //左 - y2: 1, //上 - colorStops: [ - { - offset: 0.1, - color: '#39B1FF' // 0% 处的颜色 - }, - { - offset: 1, - opacity: 0.01, - color: '#39b1ff01' // 100% 处的颜色 - } - ] + areaStyle: { + // 区域颜色 + // color: new graphic.LinearGradient(0, 0, 0, 1, [ + // { + // offset: 0, + // color: "#5090FF", + // }, + // { + // offset: 1, + // color: "#1057E5", + // }, + // ]), + color: { + type: "linear", + x: 0, //右 + y: 0, //下 + x2: 0, //左 + y2: 1, //上 + colorStops: [ + { + offset: 0.1, + color: "#39B1FF", // 0% 处的颜色 + }, + { + offset: 1, + opacity: 0.01, + color: "#39b1ff01", // 100% 处的颜色 }, - }, + ], + }, }, - - ], + }, + ], }; -export default options; \ No newline at end of file +export default options; 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 4b38111a..9a758274 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,8 +2,9 @@
- -
+ +
+
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue index 784a1f57..aac78436 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue @@ -6,8 +6,9 @@
路段车流量Top10
断面交通量Top10
--> - -
+ +