更改

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

@@ -28,33 +28,33 @@ import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 import { getWarningTypeDay } from "../../../../../../../api/event/perceiveEvent";
 
-const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
+// const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
-  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
+//   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
-  ctx.beginPath();
+//   ctx.beginPath();
-  ctx.fillStyle = gr;
+//   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.lineTo(width - radius + x, y);
-  ctx.arc(
+//   ctx.arc(
-    width - radius + x,
+//     width - radius + x,
-    radius + y,
+//     radius + y,
-    radius,
+//     radius,
-    (Math.PI * 3) / 2,
+//     (Math.PI * 3) / 2,
-    Math.PI * 2
+//     Math.PI * 2
-  );
+//   );
-  ctx.lineTo(width + x, height + y - radius);
+//   ctx.lineTo(width + x, height + y - radius);
-  ctx.arc(
+//   ctx.arc(
-    width - radius + x,
+//     width - radius + x,
-    height - radius + y,
+//     height - radius + y,
-    radius,
+//     radius,
-    0,
+//     0,
-    (Math.PI * 1) / 2
+//     (Math.PI * 1) / 2
-  );
+//   );
-  ctx.lineTo(radius + x, height + y);
+//   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.closePath();
-  //ctx.stroke();
+//   //ctx.stroke();
-  ctx.fill();
+//   ctx.fill();
-};
+// };
 
 export default {
   name: "TypeAnalysis",
@@ -187,29 +187,29 @@ export default {
           myChart.setOption(chartsStatistics);
         });
 
-        const domMap = document.getElementById("typeAnalysis");
+        // const domMap = document.getElementById("typeAnalysis");
-        let parentDiv = domMap.firstChild;
+        // let parentDiv = domMap.firstChild;
-        // 创建canvas
+        // // 创建canvas
-        let canvas = document.createElement("canvas");
+        // let canvas = document.createElement("canvas");
-        canvas.width = parentDiv.offsetWidth;
+        // canvas.width = parentDiv.offsetWidth;
-        canvas.height = parentDiv.offsetHeight;
+        // canvas.height = parentDiv.offsetHeight;
-        parentDiv.appendChild(canvas);
+        // parentDiv.appendChild(canvas);
-        const context = canvas.getContext("2d");
+        // const context = canvas.getContext("2d");
 
-        // 填充渐变颜色
+        // // 填充渐变颜色
-        var gr = context.createLinearGradient(230, 0, 360, 0);
+        // 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; // 设置线段宽度
+        // context.lineWidth = 1; // 设置线段宽度
 
-        // 绘制圆角矩形
+        // // 绘制圆角矩形
-        drawRoundRect(context, 228, 8, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 8, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 36, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 36, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 64, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 64, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 92, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 92, 280, 24, 12, gr);
-        drawRoundRect(context, 228, 120, 280, 24, 12, gr);
+        // drawRoundRect(context, 228, 120, 280, 24, 12, gr);
       });
     });
   },
@@ -289,7 +289,7 @@ export default {
         .legend-name {
           width: 60px;
           margin-left: 10px;
-          font-size: 14px;
+          font-size: 12px;
         }
         .legend-num,
         .legend-percert {
@@ -297,7 +297,7 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
-          font-size: 14px;
+          font-size: 12px;
           color: #37e7ff;
           font-weight: bold;
         }