更改图表样式

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/StatsDialogVisible/index.vue

@@ -1,7 +1,7 @@
 <template>
     <Dialog v-model="modelVisible" title="收费站管制统计" style="width: 100%;">
         <div class="search">
-            <InputSearch style="width: 502px;" />
+            <InputSearch :formList="searchFormList" @handleSearch="handleSearch" style="width: 502px;" />
         </div>
 
         <div class="StatsDetail">
@@ -69,6 +69,20 @@ export default {
         return {
             tableData: [],
             weatherNum: [],
+            startTime: "",
+            endTime: "",
+            searchFormList: [
+                {
+                    label: "日期:",
+                    key: "date",
+                    required: true,
+                    type: "datePicker",
+                    options: {
+                        valueFormat: "yyyy-MM-dd",
+                        type: "daterange"
+                    }
+                },
+            ],
         }
 
     },
@@ -84,6 +98,9 @@ export default {
     },
 
     methods: {
+        handleSearch(data) {
+            this.getSelectTollStation(data)
+        },
         arraySpanMethod({ row, column, rowIndex, columnIndex }) {
             // console.log("+++++++", row, column, rowIndex, columnIndex)
             if (!row.causeTypeName) {
@@ -128,9 +145,18 @@ export default {
             }
 
         },
-        getSelectTollStation() {
+        getSelectTollStation(data) {
-            let startTime = new Date("2024-01-01 11:12:21"); // 要转换的字符串日期
+            console.log(45, data)
-            let endTime = new Date("2024-01-26 11:12:36");
+            let startTime = ""
+            let endTime = ""
+            if (data) {
+                startTime = data.date[0] + ' 00:00:00'
+                endTime = data.date[1] + ' 23:59:59'
+            } else {
+                startTime = new Date("2024-01-01 11:12:21")
+                startTime = new Date("2024-01-26 11:12:36")
+            }
+
             var formData = new FormData();
             formData.append("controlType", '1');
             formData.append("startTime", startTime);
@@ -158,13 +184,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.dialog {
+    min-height: 800px;
+}
+
 .search {
     display: flex;
     flex-direction: row-reverse;
+}
+
+::v-deep .is-scrolling-none {
+    background: #0B6581;
 
 }
 
+::v-deep .el-table__empty-text {
+    color: #3AE0F8;
+}
+
 .StatsDetail {
+    // height: 770px;
     margin: 20px 0;
     width: 100%;
     display: flex;
@@ -173,6 +212,7 @@ export default {
 
 .el-table {
     border: 1px solid #07AEC6;
+    background: #0B6581;
 }
 
 ::v-deep .has-gutter {}

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/assets/charts.js

@@ -1,7 +1,8 @@
 import * as echarts from "echarts";
+import Group from "./Group.png";
 var options = {
   tooltip: {
-    showContent: true,
+    showContent: false,
     trigger: "axis",
     backgroundColor: "rgba(8,36,68,.7)",
     color: "#fff",
@@ -65,11 +66,33 @@ var options = {
         show: false,
       },
       inverse: true,
-      data: [],
+      data: ["测试"],
       axisLabel: {
         color: "#fff",
         fontSize: 14,
         margin: 20,
+        formatter: function (value) {
+          return "{" + value + "| }\n{value|" + value + "}";
+        },
+        rich: {
+          value: {
+            width: 20,
+            height: 20,
+            fontSize: 14,
+            // backgroundColor: {
+            //   image: Group,
+            // },
+            // backgroundPosition: "50px",
+          },
+          测试: {
+            width: 20,
+            height: 40,
+            align: "center",
+            backgroundColor: {
+              image: Group,
+            },
+          },
+        },
       },
     },
     {
@@ -100,13 +123,13 @@ var options = {
         color: "#0BA7DA32",
       },
       label: {
-        show: false,
+        show: true,
-        // color: '#A7D6F4',
+        color: "#D8DCDE",
-        // fontSize: 14,
+        fontSize: 13,
-        // distance: 20, // 距离
+        // distance: 35, // 距离
-        // formatter: '{c} ', // 这里是数据展示的时候显示的数据
+        formatter: "{c}次", // 这里是数据展示的时候显示的数据
-        // align: "center",
+        align: "center",
-        // position: [290, 0]
+        position: [280, 0],
       }, // 柱子上方的数值
       itemStyle: {
         barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下）
@@ -144,13 +167,13 @@ var options = {
         color: "#0BA7DA32",
       },
       label: {
-        show: false,
+        show: true,
-        // color: '#A7D6F4',
+        color: "#D8DCDE",
-        // fontSize: 14,
+        fontSize: 13,
-        // distance: 20, // 距离
+        distance: 5, // 距离
-        // formatter: '{c} ', // 这里是数据展示的时候显示的数据
+        formatter: "{c}次", // 这里是数据展示的时候显示的数据
-        // align: "center",
+        align: "center",
-        position: ["100%", 0],
+        position: [280, 0],
       }, // 柱子上方的数值
       itemStyle: {
         barBorderRadius: [0, 4, 4, 0], // 圆角（左上、右上、右下、左下）

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/auditAnalytics/index.vue

@@ -20,6 +20,7 @@ import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 import { tollStationAnalysis } from "@/api/event/governanceAnalysis"
 import StatsDialogVisible from "./StatsDialogVisible/index.vue"
+import Group from "./assets/Group.png";
 
 export default {
   name: 'RailWayDay',
@@ -57,9 +58,25 @@ export default {
           trafficClose.push(item.trafficClose)
         });
 
+        for (let i = 0; i < facilityName.length; i++) {
+          chartsStatistics.yAxis[0].axisLabel.rich[facilityName[i]] = {
+            height: 40,
+            align: 'center',
+            backgroundColor: {
+              image: Group
+            }
+          }
+        }
+        chartsStatistics.yAxis[0].axisLabel.formatter = function (params) {
+
+        }
+        console.log("----------", facilityName)
+        chartsStatistics.yAxis[0].axisLabel.rich
         chartsStatistics.yAxis[0].data = facilityName;
         chartsStatistics.series[0].data = trafficClose;
         chartsStatistics.series[1].data = trafficRestriction;
+        console.log("++++++++++++", chartsStatistics)
+
       })
     }
   },

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/assets/charts.js

@@ -144,6 +144,7 @@ var options = {
     containLabel: true,
   },
   tooltip: {
+    show: false,
     trigger: "item",
     formatter: "{b} : {c}:{d}",
   },

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/channelAnalytics/index.vue

@@ -51,7 +51,16 @@ export default {
           }
         }
         console.log(6666, data, nameData)
-
+        chartsStatistics.legend.formatter = function (name) {
+          let tarValue = 0;
+          for (let i = 0; i < response.data.length; i++) {
+            if (response.data[i].eventSourceName === name) {
+              tarValue = response.data[i].num;
+            }
+          }
+          var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+          return `{text|${name}} {number|${percert}%}`;
+        };
         chartsStatistics.legend.data = nameData;
         chartsStatistics.title[0].text = total;
         chartsStatistics.series[2].data = data;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/assets/charts.js

@@ -173,15 +173,18 @@ var options = {
     containLabel: true,
   },
   tooltip: {
+    show: false,
     trigger: "item",
     formatter: "{b} : {c}:{d}",
   },
   legend: {
-    width: 200,
+    type: "scroll",
+    show: true,
+    // width: 200,
     orient: "",
     left: "10%",
     top: "68%",
-    right: "30%",
+    // right: "30%",
     itemWidth: 10,
     itemHeight: 10,
     icon: "circle",
@@ -207,20 +210,7 @@ var options = {
       },
     },
     data: legendData,
-    // formatter(name) {
+    formatter(params) {},
-    //   const newData = res;
-    //   let tarValue = 0;
-    //   let total = 0;
-    //   for (let i = 0; i < newData.length; i++) {
-    //     total += newData[i].value;
-    //     if (newData[i].name === name) {
-    //       tarValue = newData[i].value;
-    //     }
-    //   }
-    //   var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
-    //   const arr = name + "  " + tarValue;
-    //   return `{text|${name}} {number|${percert}%}`;
-    // },
   },
   series: [
     /** 饼图上刻度 */

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/eventTypeAnalysis/index.vue

@@ -50,8 +50,17 @@ export default {
             nameData.push(data[i].name)
           }
         }
-        console.log(888, data)
         chartsStatistics.legend.data = nameData;
+        chartsStatistics.legend.formatter = function (name) {
+          let tarValue = 0;
+          for (let i = 0; i < response.data.length; i++) {
+            if (response.data[i].eventName === name) {
+              tarValue = response.data[i].num;
+            }
+          }
+          var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
+          return `{text|${name}} {number|${percert}%}`;
+        };
         chartsStatistics.title[0].text = total;
         chartsStatistics.series[2].data = data;
       })

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsDay/assets/charts.js

@@ -5,11 +5,13 @@ var options = {
     icon: "circle",
     itemHeight: 8,
     itemWidth: 8,
+    fontSize: 12,
     top: "5%",
     x: "right",
     textStyle: {
-      color: "#fff",
+      color: "#E5E7E8",
     },
+    color: ["#51BFA4", "#E2BA74"],
   },
   grid: {
     top: "15%", //上边距
@@ -31,8 +33,8 @@ var options = {
     },
     axisLabel: {
       show: true,
-      color: "#B6E6FF",
+      color: "#E5E7E8",
-      fontSize: 8,
+      fontSize: 10,
       fontFamily: "Source Han Sans CN-Regular",
     },
   },
@@ -44,19 +46,16 @@ var options = {
       min: 0,
       splitNumber: 5,
       nameTextStyle: {
-        color: "#B6E6FF",
+        color: "#BDC4C7",
-        fontSize: 13,
+        fontSize: 10,
         fontFamily: "Source Han Sans CN-Regular",
         align: "left",
         verticalAlign: "center",
       },
       axisLabel: {
-        fontSize: 13,
+        fontSize: 10,
-        color: "#B6E6FF",
+        color: "#E5E7E8",
         fontFamily: "HarmonyOS Sans-Regular",
-        // formatter:function(value,index){
-        //    return yList[index]
-        // }
       },
       axisLine: {
         show: false,
@@ -96,7 +95,7 @@ var options = {
       },
       // yAxisIndex: 1, // 与第二个 y 轴关联
       itemStyle: {
-        color: "#32BB8A90",
+        color: "#51BFA4",
       },
       lineStyle: {
         width: 2,
@@ -112,7 +111,7 @@ var options = {
 
       // yAxisIndex: 1, // 与第二个 y 轴关联
       itemStyle: {
-        color: "#E2BA7490",
+        color: "#E2BA74",
       },
       lineStyle: {
         width: 2,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts.js

@@ -25,7 +25,7 @@ let options = {
     },
     textStyle: {
       color: "#fff",
-      fontSize: 14,
+      fontSize: 12,
     },
     backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
     borderColor: "rgba(3, 31, 71, .0)",
@@ -34,8 +34,8 @@ let options = {
   grid: {
     left: "0",
     right: "0",
-    top: "100px",
+    top: "70px",
-    bottom: "5%",
+    bottom: "20px",
     containLabel: true,
   },
   xAxis: {
@@ -49,7 +49,7 @@ let options = {
     },
     axisLine: {
       lineStyle: {
-        color: "#1C82C5",
+        color: "#2A6278",
       },
     },
     axisLabel: {
@@ -58,14 +58,16 @@ let options = {
       rotate: "1",
       margin: "20",
       textStyle: {
-        fontSize: 12,
+        fontSize: 10,
-        color: "#50A2C1",
+        color: "#E5E7E8",
       },
     },
   },
   yAxis: [
     {
+      max: 900,
       min: 0,
+      interval: 100,
       axisLine: {
         lineStyle: {
           color: "#1C82C5",
@@ -74,14 +76,40 @@ let options = {
       splitLine: {
         show: true,
         lineStyle: {
-          color: "rgba(28, 130, 197, .3)",
+          color: "#2A6278",
           type: "solid",
         },
       },
       axisLabel: {
-        color: "#DEEBFF",
+        color: "#E5E7E8",
         textStyle: {
-          fontSize: 12,
+          fontSize: 10,
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+    },
+    {
+      max: 90,
+      min: 0,
+      interval: 10,
+      axisLine: {
+        lineStyle: {
+          color: "#1C82C5",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#2A6278",
+          type: "solid",
+        },
+      },
+      axisLabel: {
+        color: "#E5E7E8",
+        textStyle: {
+          fontSize: 10,
         },
       },
       axisTick: {
@@ -94,7 +122,7 @@ let options = {
     // icon: "circle",
     itemHeight: 8,
     itemWidth: 8,
-    top: "5%",
+    top: "20",
     right: "0%",
     textStyle: {
       color: "#fff",
@@ -133,6 +161,7 @@ let options = {
   series: [
     {
       name: "事故总量",
+      yAxisIndex: 1,
       type: "bar",
       barWidth: "10px",
       selectedMode: false,
@@ -193,6 +222,7 @@ let options = {
     // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
     {
       name: "百公里事故总量",
+      yAxisIndex: 1,
       type: "bar",
       barWidth: "10px",
       barGap: "120%",
@@ -251,9 +281,9 @@ let options = {
       },
       data: data2,
     },
-    // 进度条的小圆圈
     {
       name: "去年事故总量",
+      yAxisIndex: 1,
       type: "bar",
       barWidth: "10px",
       selectedMode: false,

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts2.js

@@ -3,13 +3,14 @@ let lc = [450, 500, 250, 340, 450, 500];
 let lc2 = [400, 550, 200, 140, 400, 550];
 let options = {
   tooltip: {
-    show: true,
+    show: false,
     trigger: "axis",
     backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
     textStyle: {
       color: "#fff",
     },
-    formatter: "{b}：{c}人",
+    fontSize: 12,
+    // formatter: "{b}：{c}人",
   },
   grid: {
     right: "4%",
@@ -25,8 +26,8 @@ let options = {
     axisLabel: {
       interval: 0,
       textStyle: {
-        color: "rgba(255, 255, 255, 0.80)",
+        color: "#E5E7E8",
-        fontSize: 16,
+        fontSize: 10,
       },
     },
     axisTick: {
@@ -36,7 +37,7 @@ let options = {
     axisLine: {
       //坐标轴轴线相关设置
       lineStyle: {
-        color: "#fff",
+        color: "#2A6278",
       },
     },
     splitLine: {
@@ -47,12 +48,20 @@ let options = {
   yAxis: [
     {
       type: "value",
-      splitNumber: 6,
+      // splitNumber: 6,
+      name: "(起)",
+      nameTextStyle: {
+        color: "#2A6278",
+        marginright: 20,
+      },
+      min: 0,
+      max: 900,
+      interval: 100,
       axisLabel: {
         show: true,
         textStyle: {
-          color: "rgba(255, 255, 255, 0.90)",
+          color: "#E5E7E8",
-          fontSize: 16,
+          fontSize: 10,
         },
       },
       axisLine: {
@@ -64,7 +73,39 @@ let options = {
       splitLine: {
         show: true,
         lineStyle: {
-          color: "rgba(255, 255, 255, 0.40)",
+          color: "#2A6278",
+        },
+      },
+    },
+    {
+      type: "value",
+      // splitNumber: 6,
+      name: "(分钟)",
+      nameTextStyle: {
+        color: "#2A6278",
+        marginLeft: 20,
+      },
+      min: 0,
+      max: 90,
+      interval: 10,
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#fff",
+          fontSize: 10,
+          formatter: "{value} °C",
+        },
+      },
+      // axisLine: {
+      //   show: false,
+      // },
+      // axisTick: {
+      //   show: false,
+      // },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#2A6278",
         },
       },
     },
@@ -193,6 +234,7 @@ let options = {
     },
     {
       name: "平均处置时长",
+      yAxisIndex: 1,
       data: [],
       type: "line",
       symbol: "none",
@@ -207,6 +249,7 @@ let options = {
     },
     {
       name: "去年同期平均处置时长",
+      yAxisIndex: 1,
       data: [],
       type: "line",
       symbol: "none",

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/assets/charts3.js

@@ -53,27 +53,24 @@ var options = {
       show: true,
       lineStyle: {
         width: 1,
-        color: "#545454",
+        color: "#2A6278",
       },
     },
     axisTick: {
       show: false,
     },
     axisLabel: {
-      color: "#B5C5D4",
+      color: "#E5E7E8",
       fontSize: "10px",
       interval: 0,
     },
   },
   yAxis: [
     {
-      // type: 'value',
-      // min: function (value) {
-      //   return value.min*0.9;
-      // },
       type: "value",
       min: 0,
       max: 900,
+      interval: 100,
       splitNumber: 9,
       // max: yAxisMax,
       axisLine: {
@@ -95,8 +92,42 @@ var options = {
         show: false,
       },
       axisLabel: {
-        color: "#B5C5D4",
+        color: "#E5E7E8",
-        fontSize: "12px",
+        fontSize: "10px",
+        formatter: (value) => {
+          return value;
+          //  + minNumber;
+        },
+      },
+    },
+    {
+      // type: 'value',
+      // min: function (value) {
+      //   return value.min*0.9;
+      // },
+      type: "value",
+      min: 0,
+      max: 90,
+      interval: 10,
+      splitNumber: 9,
+      // max: yAxisMax,
+      axisLine: {
+        show: false,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#2A6278",
+          opacity: 0.3,
+          type: "dotted",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        color: "#E5E7E8",
+        fontSize: "10px",
         formatter: (value) => {
           return value;
           //  + minNumber;
@@ -121,6 +152,7 @@ var options = {
     {
       barGap: "10%",
       name: "平均处置时长（分钟）",
+      yAxisIndex: 1,
       data: [],
       type: "pictorialBar",
       symbol: "roundRect",

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/governanceAnalysis/components/postTrendsMonth/index.vue

@@ -100,8 +100,8 @@ export default {
     }
   },
 
-  created() {
+  async created() {
-    this.searchQuery()
+    await this.searchQuery()
   },
   methods: {
     getSelectRoadSection(formData) {
@@ -210,16 +210,16 @@ export default {
       await this.getSelectRoadSection(formData)
       await this.getSelectEventType(formData)
       await this.getSelectAccidentVehicle(formData)
+      this.renderCharts()
+
     },
     handleClear() {
       this.direction = "1"
       this.type = "1"
       this.quarter = "1"
       this.dateTime = "2024-01-01 00:00:00"
-    }
+    },
-  },
+    renderCharts() {
-  mounted() {
-    setTimeout(() => {
       this.$nextTick(() => {
         var myChart = echarts.init(document.getElementById('chart1'));
         myChart.setOption(chartsStatistics);
@@ -230,7 +230,10 @@ export default {
         var myChart2 = echarts.init(document.getElementById('chart3'));
         myChart2.setOption(chartsStatistics3);
       });
-    }, 1000);
+    },
+  },
+  mounted() {
+
   },
 }
 </script>
@@ -285,7 +288,7 @@ export default {
       font-size: 14px;
       margin-bottom: 10px;
       left: 20px;
-      top: 2px;
+      top: 10px;
       z-index: 100;
 
       div {
@@ -352,7 +355,7 @@ export default {
 }
 
 .charts {
-  height: 300px;
+  height: 330px;
   width: 100%;
 }
 </style>