更改

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

@@ -2,8 +2,8 @@
   <div class='congestion'>
     <WgtTitle :title="'日累计感知事件趋势'"></WgtTitle>
     <div class="board">
-      <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
-      <div v-else class="charts keep-ratio " id="daytotal"></div>
+      <Empty 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>

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

@@ -1,6 +1,5 @@
 import * as echarts from "echarts";
 var options = {
-
   color: ["#5090FF", "#01B3E4"],
   tooltip: {
     trigger: "axis",
@@ -9,7 +8,7 @@ var options = {
     },
   },
   grid: {
-      left: "2%",
+    left: "0%",
     right: "5%",
     bottom: "10%",
     top: "30px",
@@ -18,64 +17,69 @@ var options = {
 
   dataZoom: [
     {
-         type: 'slider',
+      type: "slider",
       xAxisIndex: 0,
       startValue: 0,
       endValue: 7,
-         filterMode: 'filter',
+      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",
+      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',
+        color: "#0BDADA",
         borderWidth: 0,
       },
       moveHandleStyle: {
-            color: 'transparent',
+        color: "transparent",
         borderWidth: 0,
         opacity: 0,
       },
       selectedDataBackground: {
-            color: 'transparent',
+        color: "transparent",
         areaStyle: {
-               opacity: 0
+          opacity: 0,
         },
         lineStyle: {
-               opacity: 0
-            }
+          opacity: 0,
+        },
       },
       backgroundColor: new echarts.graphic.LinearGradient(
-            0, 0, 1, 0,
-            [{
+        0,
+        0,
+        1,
+        0,
+        [
+          {
             offset: 0,
-               color: 'rgba(71, 180, 124, 0.70)'
+            color: "rgba(71, 180, 124, 0.70)",
           },
           {
             offset: 1,
-               color: 'rgba(71, 180, 124, 0)'
-            }
+            color: "rgba(71, 180, 124, 0)",
+          },
         ],
         false
       ),
       //  shadowColor: 'rgba(255, 214, 62, 0.10)',
       //  shadowBlur: 10
 
-         fillerColor: 'transparent',
-         borderColor: 'transparent',
+      fillerColor: "transparent",
+      borderColor: "transparent",
       textStyle: {
-            color: 'transparent'
+        color: "transparent",
       },
       dataBackground: {
         areaStyle: {
-               opacity: 0
+          opacity: 0,
         },
         lineStyle: {
-               opacity: 0
-            }
-         }
-      }
+          opacity: 0,
+        },
+      },
+    },
   ],
   legend: {
     show: true,
@@ -175,9 +179,12 @@ var options = {
       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], // 纵坐标数据
+      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"
+        color: "#39B1FF",
       },
       areaStyle: {
         // 区域颜色
@@ -192,7 +199,7 @@ var options = {
         // 	},
         // ]),
         color: {
-               type: 'linear',
+          type: "linear",
           x: 0, //右
           y: 0, //下
           x2: 0, //左
@@ -200,18 +207,17 @@ var options = {
           colorStops: [
             {
               offset: 0.1,
-                     color: '#39B1FF' // 0% 处的颜色
+              color: "#39B1FF", // 0% 处的颜色
             },
             {
               offset: 1,
               opacity: 0.01,
-                     color: '#39b1ff01' // 100% 处的颜色
-                  }
-               ]
+              color: "#39b1ff01", // 100% 处的颜色
+            },
+          ],
         },
       },
     },
-
   ],
 };
 

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

@@ -2,8 +2,9 @@
   <div class='congestion'>
     <WgtTitle :title="'近一月感知事件时段分布统计'"></WgtTitle>
     <div class="board">
-      <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
-      <div v-else class="charts keep-ratio " id="monthStatistics"></div>
+      <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
+      <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio " id="monthStatistics">
+      </div>
     </div>
   </div>
 </template>

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

@@ -6,8 +6,9 @@
           <div class="checked">路段车流量Top10</div>
           <div>断面交通量Top10</div>
         </div> -->
-      <Empty v-if="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
-      <div v-else class="charts keep-ratio" id="situationEchartBox"></div>
+      <Empty v-show="!dataList || dataList.length <= 0" text="暂无数据..."></Empty>
+      <div v-show="dataList && dataList.length > 0" style="width: 450px;" class="charts keep-ratio"
+        id="situationEchartBox"></div>
 
     </div>
   </div>