优化图表

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/assets/charts.js

@@ -39,7 +39,7 @@ var options = {
     },
   },
   grid: {
-    left: "1%",
+    left: "10px",
     right: "0%",
     top: "16%",
     bottom: "5%",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue

@@ -1,52 +1,55 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'日累计感知事件趋势'"></WgtTitle>
     <div class="board">
-      <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
+      <Empty
-      <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="daytotal"></div>
+        v-show="!dataList || dataList.length <= 0"
+        text="暂无数据..."
+      ></Empty>
+      <div
+        v-show="dataList && dataList.length > 0"
+        style="width: 450px"
+        class="charts keep-ratio"
+        id="daytotal"
+      ></div>
     </div>
   </div>
 </template>
-  
-<script>
 
-import WgtTitle from '../../../widgets/title'
+<script>
+import WgtTitle from "../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
-import { getDailyCumulative } from '../../../../../../../api/event/perceiveEvent';
+import { getDailyCumulative } from "../../../../../../../api/event/perceiveEvent";
 import moment from "moment";
 
 export default {
-  name: 'RailWayDay',
+  name: "RailWayDay",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-      dataList: []
+      dataList: [],
-    }
+    };
-  },
-
-  created() {
-
   },
-  methods: {
 
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('daytotal'));
+        var myChart = echarts.init(document.getElementById("daytotal"));
 
-        getDailyCumulative().then(res => {
+        getDailyCumulative().then((res) => {
           if (res.code == 200) {
-            this.dataList = res.data
+            this.dataList = res.data;
             let data = res.data;
             let timer = [];
             let number = [];
 
             data.forEach((it) => {
-              timer.push(moment(it.time).format('HH:mm'));
+              timer.push(moment(it.time).format("HH:mm"));
               number.push(it.number);
             });
 
@@ -55,32 +58,34 @@ export default {
 
             myChart.setOption(chartsStatistics);
           }
-
         });
-
       });
     });
   },
-}
+};
 </script>
-  
+
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
   .board {
     height: 200px;
     width: 100%;
-    padding: 0px 20px;
+    // padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
   }
 }
 
@@ -89,4 +94,3 @@ export default {
   width: 100%;
 }
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/assets/charts3.js

@@ -54,7 +54,7 @@ let options = {
       name: "（起）",
       nameTextStyle: {
         color: "#fff",
-        fomtSize: 10,
+        fontSize: 10,
         align: "right",
       },
       min: 0,

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/monthStatistics/index.vue

@@ -1,42 +1,44 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
     <div class="board">
-      <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
+      <Empty
-      <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="monthStatistics">
+        v-show="!dataList || dataList.length <= 0"
-      </div>
+        text="暂无数据..."
+      ></Empty>
+      <div
+        v-show="dataList && dataList.length > 0"
+        style="width: 450px"
+        class="charts keep-ratio"
+        id="monthStatistics"
+      ></div>
     </div>
   </div>
 </template>
-  
-<script>
 
-import WgtTitle from '../../../widgets/title'
+<script>
+import WgtTitle from "../../../widgets/title";
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
-import { getDailyCumulativeMonth } from '../../../../../../../api/event/perceiveEvent';
+import { getDailyCumulativeMonth } from "../../../../../../../api/event/perceiveEvent";
 
 export default {
-  name: 'MonthStatistics',
+  name: "MonthStatistics",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-      dataList: []
+      dataList: [],
-    }
+    };
-  },
-
-  created() {
-
   },
-  methods: {
 
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('monthStatistics'));
+        var myChart = echarts.init(document.getElementById("monthStatistics"));
         getDailyCumulativeMonth().then((res) => {
           console.log(res);
           if (res.code == 200) {
@@ -64,31 +66,34 @@ export default {
 
             myChart.setOption(chartsStatistics);
           }
-
         });
       });
     });
   },
-}
+};
 </script>
-  
+
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
   .board {
     height: 200px;
     width: 100%;
-    padding: 0px 20px;
+    // padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
   }
 }
 
@@ -97,4 +102,3 @@ export default {
   width: 100%;
 }
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js

@@ -58,7 +58,7 @@ var options = {
   grid: {
     top: "15%", //上边距
     right: "0", //右边距
-    left: "0", //左边距
+    left: "10px", //左边距
     bottom: "0%", //下边距
     containLabel: true,
   },

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue

@@ -1,42 +1,44 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'路段日感知事件'"></WgtTitle>
     <div class="board">
-      <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
+      <Empty
-      <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="railwayDay">
+        v-show="!dataList || dataList.length <= 0"
-      </div>
+        text="暂无数据..."
+      ></Empty>
+      <div
+        v-show="dataList && dataList.length > 0"
+        style="width: 450px"
+        class="charts keep-ratio"
+        id="railwayDay"
+      ></div>
     </div>
   </div>
 </template>
 
 <script>
-
+import WgtTitle from "../../../widgets/title";
-import WgtTitle from '../../../widgets/title'
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
-import { getSectionPerceivedNumber } from '../../../../../../../api/event/perceiveEvent';
+import { getSectionPerceivedNumber } from "../../../../../../../api/event/perceiveEvent";
 
 export default {
-  name: 'RailWayDay',
+  name: "RailWayDay",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
     return {
-      dataList: []
+      dataList: [],
-    }
+    };
   },
 
-  created() {
+  created() {},
-
+  methods: {},
-  },
-  methods: {
-
-  },
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('railwayDay'));
+        var myChart = echarts.init(document.getElementById("railwayDay"));
         getSectionPerceivedNumber().then((res) => {
           if (res.code == 200) {
             this.dataList = res.data;
@@ -44,9 +46,11 @@ export default {
             if (data.length > 0) {
               let texts = [];
               let datas = [];
-              const maxObject = data.reduce((prev, current) => (current.number > prev.number ? current : prev));
+              const maxObject = data.reduce((prev, current) =>
+                current.number > prev.number ? current : prev
+              );
 
-              data.forEach(it => {
+              data.forEach((it) => {
                 texts.push(it.sectionName);
 
                 if (it.number == maxObject.number) {
@@ -54,62 +58,69 @@ export default {
                     value: it.number,
                     itemStyle: {
                       color: {
-                        type: 'linear',
+                        type: "linear",
                         x: 0,
                         y: 0,
                         x2: 0,
                         y2: 1,
-                        colorStops: [{
+                        colorStops: [
-                          offset: 0, color: '#0469FF' // 0% 处的颜色
+                          {
-                        }, {
+                            offset: 0,
-                          offset: 1, color: '#699CFF' // 100% 处的颜色
+                            color: "#0469FF", // 0% 处的颜色
-                        }],
+                          },
-                        global: false // 缺省为 false
+                          {
+                            offset: 1,
+                            color: "#699CFF", // 100% 处的颜色
+                          },
+                        ],
+                        global: false, // 缺省为 false
                       },
-                      borderRadius: 6
+                      borderRadius: 6,
                     },
                   });
                 } else {
                   datas.push({
                     value: it.number,
                     itemStyle: {
-                      borderRadius: 6
+                      borderRadius: 6,
                     },
                   });
                 }
-
               });
 
               chartsStatistics.xAxis.data = texts;
               chartsStatistics.series[0].data = datas;
             }
             myChart.setOption(chartsStatistics);
-
           }
-        })
+        });
       });
     });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
   .board {
     height: 200px;
     width: 100%;
-    padding: 0px 20px;
+    // padding: 0px 20px;
     background: linear-gradient(180deg, rgba(6, 66, 88, 0.2) 0%, #064258 100%);
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
   }
 }