更改

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

@@ -1,25 +1,20 @@
 window.echartsData = [
-   { value: 25, name: '处理中' },
+  { value: 25, name: "处理中" },
-   { value: 40, name: '待处理' },
+  { value: 40, name: "待处理" },
-   { value: 35, name: '已处理' },]
+  { value: 35, name: "已处理" },
+];
 
-window.colorList = [
+window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC"];
-   "#FFee0B",
-   "#61D8FF",
-   "#6AE0BC",
-
-]
 window.count = 0;
 
 echartsData.forEach((it) => {
   count += it.value;
-})
+});
-
 
 var options = {
   color: colorList,
   legend: {
-      orient: 'vertical',
+    orient: "vertical",
     top: "center",
     icon: "circle",
     right: 15,
@@ -38,37 +33,43 @@ var options = {
         bst: {
           align: "left",
           fontSize: 12,
-               marginLeft: 20,
+          marginLeft: 10,
-               color: "#37E7FF"
+          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 })
+      let obj = echartsData.filter((it) => {
-         return `{ast|${obj[0].name}}       {bst|${Math.round(obj[0].value / count * 100)}%}`
+        return it.name == params;
+      });
+      return `{ast|${obj[0].name}}          {bst|${Math.round(
+        (obj[0].value / count) * 100
+      )}%}`;
     },
-      data: echartsData?.map(x => x),
+    data: echartsData?.map((x) => x),
   },
   tooltip: {
-      trigger: 'item',
+    trigger: "item",
-   },
+  },
-   series: [{
+  series: [
-      name: '',
+    {
-      type: 'pie',
+      name: "",
-      radius: '78%',
+      type: "pie",
-      center: ['40%', '50%'],
+      radius: "120px",
-      roseType: 'radius',
+      width: "200px",
+      center: ["130px", "50%"],
+      roseType: "radius",
       label: {
         show: false,
-         position: 'outside',
+        position: "outside",
         fontSize: 16,
         formatter: (params) => {
-            return `{a|${params.name}} {b|${params.value / count}%}`
+          return `{a|${params.name}} {b|${params.value / count}%}`;
         },
         rich: {
           a: {
@@ -78,7 +79,7 @@ var options = {
           b: {
             align: "left",
             fontSize: 12,
-            }
+          },
         },
       },
       itemStyle: {
@@ -96,30 +97,31 @@ var options = {
         return {
           ...item,
           label: {
-               color: colorList[index]
+            color: colorList[index],
-            }
+          },
-         }
+        };
-      })
+      }),
-   }, {
+    },
-      name: '',
+    {
-      type: 'pie',
+      name: "",
-      radius: '90%',
+      type: "pie",
+      radius: "130px",
       hoverAnimation: false,
       emphasis: { scale: false },
-      center: ['40%', '50%'],
+      center: ["130px", "50%"],
-      roseType: 'radius',
+      roseType: "radius",
       label: {
         show: false,
-         position: 'outside',
+        position: "outside",
         fontSize: 16,
         formatter: (params) => {
-            return `{a|${params.name}} `
+          return `{a|${params.name}} `;
         },
         rich: {
           a: {
             align: "left",
             fontSize: 12,
-            }
+          },
         },
       },
       itemStyle: {
@@ -138,11 +140,12 @@ var options = {
         return {
           ...item,
           label: {
-               color: colorList[index]
+            color: colorList[index],
-            }
+          },
-         }
+        };
-      })
+      }),
-   }]
+    },
+  ],
 };
 
 export default options;

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, // 设置宽度
+    itemWidth: 8, // 设置宽度
-    itemHeight: 15, // 设置高度
+    // itemHeight: 15, // 设置高度
 
     itemStyle: {
       borderColor: "transparent",

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

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

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

@@ -1,11 +1,11 @@
 window.typeAnalysisData = [
-   { value: 100, name: '行人' },
+  // { value: 100, name: '行人' },
   // { value: 90, name: '非机动车' },
   // { value: 80, name: '拥堵' },
   // { value: 60, name: '逆行' },
   // { value: 50, name: '抛洒物' },
   // { value: 45, name: '烟火' }
-]
+];
 
 window.colorList = [
   "#019AFF",
@@ -13,17 +13,15 @@ window.colorList = [
   "#51D5AD",
   "#FFDD69",
   "#F6A73C",
-   "#7390FD",]
+  "#7390FD",
+];
 
-window.colorList1 = [
+window.colorList1 = ["#61D8FF", "#FFB905", "#6AE0BC"];
-   "#61D8FF",
-   "#FFB905",
-   "#6AE0BC",]
 
 var options = {
   color: colorList,
   legend: {
-      orient: 'vertical',
+    orient: "vertical",
     top: "10",
     icon: "circle",
     right: 40,
@@ -43,44 +41,49 @@ var options = {
           align: "left",
           fontSize: 12,
           marginLeft: 20,
-               color: "#37E7FF"
+          color: "#37E7FF",
-            }
+        },
-         }
+      },
     },
     formatter: (params) => {
       let count = 0;
       typeAnalysisData.forEach((it) => {
         count += it.value;
-         })
+      });
-         let obj = typeAnalysisData.filter(it => { return it.name == params })
+      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)}%}`
+      return `{ast|${obj[0].name}}        {bst|${
+        Math.round((obj[0].value / count) * 100) || 0
+      }%}`;
     },
     // data: typeAnalysisData?.map(x => x.name),
   },
   tooltip: {
-      trigger: 'item',
+    trigger: "item",
-   },
+  },
-   series: [{
+  series: [
-      name: '',
+    {
-      type: 'pie',
+      name: "",
-      radius: '80%',
+      type: "pie",
-      center: ['40%', '50%'],
+      radius: "70%",
+      center: ["30%", "50%"],
       clockwise: false,
-      roseType: 'radius',
+      roseType: "radius",
       startAngle1: 180,
       label: {
         show: false,
-         position: 'outside',
+        position: "outside",
         fontSize: 16,
         formatter: (params) => {
-            return `{a|${params.name}}`
+          return `{a|${params.name}}`;
         },
         rich: {
           a: {
             align: "left",
             fontSize: 12,
-            }
+          },
         },
       },
       itemStyle: {
@@ -98,31 +101,32 @@ var options = {
         return {
           ...item,
           label: {
-               color: colorList[index]
+            color: colorList[index],
-            }
+          },
-         }
+        };
-      })
+      }),
-   }, {
+    },
-      name: '',
+    {
-      type: 'pie',
+      name: "",
-      radius: '90%',
+      type: "pie",
+      radius: "80%",
       hoverAnimation: false,
       emphasis: { scale: false },
       clockwise: false,
-      center: ['40%', '50%'],
+      center: ["30%", "50%"],
-      roseType: 'radius',
+      roseType: "radius",
       label: {
         show: false,
-         position: 'outside',
+        position: "outside",
         fontSize: 16,
         formatter: (params) => {
-            return `{a|${params.name}}`
+          return `{a|${params.name}}`;
         },
         rich: {
           a: {
             align: "left",
             fontSize: 12,
-            }
+          },
         },
       },
       itemStyle: {
@@ -141,11 +145,12 @@ var options = {
         return {
           ...item,
           label: {
-               color: colorList[index]
+            color: colorList[index],
-            }
+          },
-         }
+        };
-      })
+      }),
-   }]
+    },
+  ],
 };
 
 export default options;