图表

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

@@ -28,7 +28,7 @@ var options = {
         ast: {
           align: "left",
           fontSize: 12,
-          width: 35,
+          width: 50,
         },
         bst: {
           align: "left",
@@ -36,6 +36,12 @@ var options = {
           marginLeft: 10,
           color: "#37E7FF",
         },
+        cst: {
+          align: "left",
+          fontSize: 12,
+          marginLeft: 10,
+          color: "#37E7FF",
+        },
       },
     },
     formatter: (params) => {
@@ -47,9 +53,9 @@ var options = {
       let obj = echartsData.filter((it) => {
         return it.name == params;
       });
-      return `{ast|${obj[0].name}}          {bst|${Math.round(
+      return `{ast|${obj[0].name}}     {bst|${Math.round(
         (obj[0].value / count) * 100
-      )}%}`;
+      )}%}    {cst|${obj[0].value}件}`;
     },
     data: echartsData?.map((x) => x),
   },

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

@@ -141,10 +141,10 @@ export default {
         context.lineWidth = 1; // 设置线段宽度
 
         // 绘制圆角矩形
-        drawRoundRect(context, 270, 36, 120, 24, 12, gr)
-        drawRoundRect(context, 270, 63, 120, 24, 12, gr)
-        drawRoundRect(context, 270, 90, 120, 24, 12, gr)
-        drawRoundRect(context, 270, 117, 120, 24, 12, gr)
+        drawRoundRect(context, 242, 36, 180, 24, 12, gr)
+        drawRoundRect(context, 242, 63, 180, 24, 12, gr)
+        drawRoundRect(context, 242, 90, 180, 24, 12, gr)
+        drawRoundRect(context, 242, 117, 180, 24, 12, gr)
       });
     });
   },

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

@@ -115,9 +115,9 @@ var options = {
           width: 70,
           color: "#fff",
           fontSize: 26,
-          align: 'center'
-        }
-      }
+          align: "center",
+        },
+      },
     },
     subtextStyle: {
       fontSize: 18,
@@ -130,26 +130,34 @@ var options = {
   },
   color: colorList,
   legend: {
-    top: "15%",
-    right: -5,
+    top: 10,
+    right: 0,
     orient: "vertical", //改变排列方式
     icon: "circle", //改变legend小图标形状
     itemGap: 20, // 设置legend的间距
     itemWidth: 10, // 设置宽度
     itemHeight: 10, // 设置高度
     textStyle: {
-      right: -19,
-      fontSize: 30,
+      right: 50,
+      fontSize: 12,
       color: "#fff",
       rich: {
         a: {
+          align: "left",
           width: 45,
           fontSize: 12,
         },
         b: {
-          fontSize: 14,
+          align: "left",
+          fontSize: 12,
+          color: "#37E7FF",
+          marginLeft: 0,
+        },
+        c: {
+          align: "left",
+          fontSize: 12,
           color: "#37E7FF",
-          marginLeft: -0,
+          marginLeft: 0,
         },
       },
     },

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

@@ -297,9 +297,10 @@ export default {
             }
             var arr = [
               '{a|' + name + '}',
-              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
+              '{b|' + ((target / total) * 100).toFixed(2) + '%}  ',
+              "{c|" + target + "件}",
             ]
-            return arr.join('  ')
+            return arr.join(' ')
           };
 
           chart2.title.text = `{zb|${total}}`;

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

@@ -134,7 +134,8 @@ var options = {
       }
       var arr = [
         "{ast|" + name + "}",
-        "{bst|" + (target * 100).toFixed(0) + "%}",
+        "{bst|" + (target * 100).toFixed(0) + "%  }",
+        "{cst|" + target+ "件}",
       ];
       return arr.join("  ");
     },
@@ -153,6 +154,13 @@ var options = {
           marginLeft: 20,
           color: "#37E7FF",
         },
+        cst: {
+          align: "left",
+          fontSize: 12,
+          marginLeft: 30,
+          width: 60,
+          color: "#37E7FF",
+        },
       },
     },
   },

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

@@ -175,12 +175,12 @@ export default {
         let gr = context.createLinearGradient(230, 0, 360, 0);
         gr.addColorStop(1, 'rgba(92,197,255,0)');
         gr.addColorStop(0, 'rgba(92,197,255,0.3)');
-        drawRoundRect(context, 248, 15, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 42, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 69, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 96, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 123, 134, 21, 12, gr);
-        drawRoundRect(context, 248, 150, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 15, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 42, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 69, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 96, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 123, 134, 21, 12, gr);
+        drawRoundRect(context, 214, 150, 134, 21, 12, gr);
 
         context.lineWidth = 1; // 设置线段宽度
 

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

@@ -24,7 +24,7 @@ var options = {
     orient: "vertical",
     top: "10",
     icon: "circle",
-    right: 40,
+    right: 0,
     itemGap: 16,
     itemWidth: 8,
     itemHeight: 8,
@@ -33,14 +33,21 @@ var options = {
       fontSize: 12,
       rich: {
         ast: {
-          align: "left",
+          marginLeft: 0,
           fontSize: 12,
-          width: 30,
+          width: 40,
         },
         bst: {
           align: "left",
           fontSize: 12,
-          marginLeft: 20,
+          color: "#37E7FF",
+          width: 30,
+        },
+        cst: {
+          align: "right",
+          fontSize: 12,
+          width: 40,
+          // marginLeft: 20,
           color: "#37E7FF",
         },
       },
@@ -54,9 +61,9 @@ var options = {
         return it.name == params;
       });
       // console.log(obj);
-      return `{ast|${obj[0].name}}        {bst|${
+      return `{ast|${obj[0].name}}    {bst|${
         Math.round((obj[0].value / count) * 100) || 0
-      }%}`;
+      }%} {cst|${obj[0].value}件}`;
     },
     // data: typeAnalysisData?.map(x => x.name),
   },
@@ -70,7 +77,7 @@ var options = {
       radius: "70%",
       center: ["30%", "50%"],
       clockwise: false,
-      roseType: "radius",
+      // roseType: "area",
       startAngle1: 180,
       label: {
         show: false,
@@ -114,7 +121,7 @@ var options = {
       emphasis: { scale: false },
       clockwise: false,
       center: ["30%", "50%"],
-      roseType: "radius",
+      // roseType: "area",
       label: {
         show: false,
         position: "outside",