更改

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

@@ -4,7 +4,7 @@ window.echartsData = [
   { value: 35, name: "已处理" },
 ];
 
-window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC"];
+window.colorList = ["#FFee0B", "#61D8FF", "#6AE0BC", "#1DA7FF"];
 window.count = 0;
 
 echartsData.forEach((it) => {
@@ -66,10 +66,10 @@ var options = {
     {
       name: "",
       type: "pie",
-      radius: "60px",
+      radius: "70%",
-      width: "200px",
+      // width: "200px",
       center: ["130px", "50%"],
-      roseType: "radius",
+      // roseType: "radius",
       label: {
         show: false,
         position: "outside",
@@ -111,11 +111,11 @@ var options = {
     {
       name: "",
       type: "pie",
-      radius: "70px",
+      radius: "80%",
       hoverAnimation: false,
       emphasis: { scale: false },
       center: ["130px", "50%"],
-      roseType: "radius",
+      // roseType: "radius",
       label: {
         show: false,
         position: "outside",

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

@@ -1,58 +1,63 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'日事件处置情况占比'"></WgtTitle>
     <div class="board">
-      <div class="charts keep-ratio " id="dailyDisposal"></div>
+      <div class="charts keep-ratio" id="dailyDisposal"></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 { getWarningStateDay } from '../../../../../../../api/event/perceiveEvent';
+import { getWarningStateDay } from "../../../../../../../api/event/perceiveEvent";
 
 const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
   ctx.beginPath();
   ctx.fillStyle = gr;
-  ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
+  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
   ctx.lineTo(width - radius + x, y);
-  ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
+  ctx.arc(
+    width - radius + x,
+    radius + y,
+    radius,
+    (Math.PI * 3) / 2,
+    Math.PI * 2
+  );
   ctx.lineTo(width + x, height + y - radius);
-  ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
+  ctx.arc(
+    width - radius + x,
+    height - radius + y,
+    radius,
+    0,
+    (Math.PI * 1) / 2
+  );
   ctx.lineTo(radius + x, height + y);
-  ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
+  ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
   ctx.closePath();
   //ctx.stroke();
-  ctx.fill()
+  ctx.fill();
-}
+};
 
 export default {
-  name: 'dailyDisposal',
+  name: "dailyDisposal",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
-    return {
+    return {};
-
-    }
-  },
-
-  created() {
-
   },
-  methods: {
 
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('dailyDisposal'));
+        var myChart = echarts.init(document.getElementById("dailyDisposal"));
 
-        getWarningStateDay().then(res => {
+        getWarningStateDay().then((res) => {
           if (res.code == 200) {
             let data = res.data;
             if (data.length > 0) {
@@ -69,90 +74,85 @@ export default {
                   // it.number = 86;
                   echartsData.push({
                     name: "上报",
-                    value: it.number
+                    value: it.number,
                   });
                 }
                 if (it.warningState == 2) {
                   echartsData.push({
                     name: "已完成",
-                    value: it.number
+                    value: it.number,
                   });
-
                 }
                 if (it.warningState == 3) {
                   echartsData.push({
                     name: "已终止",
-                    value: it.number
+                    value: it.number,
                   });
-
                 }
                 if (it.warningState == 4) {
                   echartsData.push({
                     name: "自动结束",
-                    value: it.number
+                    value: it.number,
                   });
-
                 }
-
-
               }
 
-              chartsStatistics.legend.data = window.echartsData?.map(x => x);
+              chartsStatistics.legend.data = window.echartsData?.map((x) => x);
-              chartsStatistics.series[0].data = echartsData.map((item, index) => {
+              chartsStatistics.series[0].data = echartsData.map(
-                return {
+                (item, index) => {
-                  ...item,
+                  return {
-                  label: {
+                    ...item,
-                    color: colorList[index]
+                    label: {
-                  }
+                      color: colorList[index],
+                    },
+                  };
                 }
-              })
+              );
-              chartsStatistics.series[1].data = echartsData.map((item, index) => {
+              chartsStatistics.series[1].data = echartsData.map(
-                return {
+                (item, index) => {
-                  ...item,
+                  return {
-                  label: {
+                    ...item,
-                    color: colorList[index]
+                    label: {
-                  }
+                      color: colorList[index],
+                    },
+                  };
                 }
-              })
+              );
             }
           }
 
           myChart.setOption(chartsStatistics);
         });
 
-
-
-
         const domMap = document.getElementById("dailyDisposal");
         let parentDiv = domMap.firstChild;
         // 创建canvas
-        let canvas = document.createElement('canvas');
+        let canvas = document.createElement("canvas");
         canvas.width = parentDiv.offsetWidth;
         canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
-        const context = canvas.getContext('2d');
+        const context = canvas.getContext("2d");
 
         // 填充渐变颜色
         var gr = context.createLinearGradient(230, 0, 360, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
+        gr.addColorStop(1, "rgba(92,197,255,0)");
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
-
 
         context.lineWidth = 1; // 设置线段宽度
 
         // 绘制圆角矩形
-        drawRoundRect(context, 230, 36, 180, 24, 12, gr)
+        drawRoundRect(context, 230, 36, 180, 24, 12, gr);
-        drawRoundRect(context, 230, 63, 180, 24, 12, gr)
+        drawRoundRect(context, 230, 63, 180, 24, 12, gr);
-        drawRoundRect(context, 230, 90, 180, 24, 12, gr)
+        drawRoundRect(context, 230, 90, 180, 24, 12, gr);
-        drawRoundRect(context, 230, 117, 180, 24, 12, gr)
+        drawRoundRect(context, 230, 117, 180, 24, 12, gr);
       });
     });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
@@ -164,11 +164,15 @@ export default {
     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;
-
   }
 }
 
@@ -177,4 +181,3 @@ export default {
   width: 100%;
 }
 </style>
-