代码提交

src/views/energyMonitoring/index.vue

@@ -134,16 +134,17 @@ function getDailyElectricityConsumption() {
     },
     buildPath: function (ctx, shape) {
       const xAxisPoint = shape.xAxisPoint;
-      const c0 = [shape.x, shape.y]; // 左侧面 右上点
+      const c0 = [shape.x - 10, shape.y];
-      const c1 = [shape.x - offsetX, shape.y - offsetY + 5]; // 左侧面  左上点
+      const c1 = [shape.x + 10, shape.y];
-      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
+      const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]];
-      const c3 = [xAxisPoint[0], xAxisPoint[1] + 5]; // 左侧面 右下点
+      const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]];
       ctx
         .moveTo(c0[0], c0[1])
         .lineTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .closePath();
+      ctx.stroke();
     },
   });
   // 绘制右侧面
@@ -154,16 +155,17 @@ function getDailyElectricityConsumption() {
     },
     buildPath: function (ctx, shape) {
       const xAxisPoint = shape.xAxisPoint;
-      const c1 = [shape.x, shape.y]; //右侧面左上点
+      const c1 = [shape.x + 9, shape.y];
-      const c2 = [xAxisPoint[0], xAxisPoint[1] + 5]; //右侧面 左下点
+      const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
-      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5]; //右侧面  右下点
+      const c3 = [xAxisPoint[0] + 9 + 8, xAxisPoint[1] - 10];
-      const c4 = [shape.x + offsetX, shape.y - offsetY + 5]; //右侧面 右上点
+      const c4 = [shape.x + 7 + 8, shape.y - 5];
       ctx
         .moveTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .lineTo(c4[0], c4[1])
         .closePath();
+      ctx.stroke();
     },
   });
   // 绘制顶面
@@ -173,16 +175,17 @@ function getDailyElectricityConsumption() {
       y: 0,
     },
     buildPath: function (ctx, shape) {
-      const c1 = [shape.x, shape.y + 5]; //顶部菱形下点
+      const c1 = [shape.x - 10, shape.y];
-      const c2 = [shape.x + offsetX, shape.y - offsetY + 5]; //顶部菱形右点
+      const c2 = [shape.x + 10, shape.y];
-      const c3 = [shape.x, shape.y - offsetX + 5]; //顶部菱形上点
+      const c3 = [shape.x + 15, shape.y - 5];
-      const c4 = [shape.x - offsetX, shape.y - offsetY + 5]; //顶部菱形左点
+      const c4 = [shape.x - 5, shape.y - 5];
       ctx
         .moveTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .lineTo(c4[0], c4[1])
         .closePath();
+      ctx.stroke();
     },
   });
   // 注册三个面图形
@@ -206,9 +209,9 @@ function getDailyElectricityConsumption() {
   // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
   // 蓝色渐变
   let colorArr = [
-    ["#71ddff"],
+    ["rgba(0, 170, 193, 1)"],
-    ["rgba(12, 149, 198, 1)", "rgba(13,8,16,0)"],
+    ["rgba(0, 224, 255, 1)", "rgba(13,8,16,0)"],
-    ["rgba(34, 188, 255, 1)", "rgba(14,156,185,0)"],
+    ["rgba(0, 224, 255, 1)", "rgba(14,156,185,0)"],
   ];
   let myChart = echarts.init(
     document.getElementById("dailyElectricityConsumption")
@@ -271,7 +274,8 @@ function getDailyElectricityConsumption() {
       splitLine: {
         show: true,
         lineStyle: {
-          color: "rgba(255,255,255,0.16)",
+          type: "dashed",
+          color: "rgba(1, 39, 37, 0.30)",
         },
       },
       // y轴刻度线
@@ -373,7 +377,7 @@ function getDailyElectricityConsumption() {
         type: "bar",
         label: {
           normal: {
-            show: true,
+            show: false,
             position: "top",
             formatter: (e) => {
               return e.value;
@@ -398,7 +402,7 @@ onMounted(() => {
   //实时负荷
   getRealTimeLoad();
   //当日累计用电量
-  getDailyElectricityConsumption()
+  getDailyElectricityConsumption();
 });
 </script>