src/views/dashboard/charts/Bipv.vue

@@ -10,7 +10,7 @@
     :legend="legend"
     :series="series"
     :xAxis="xAxis"
-    :vHeight="20"
+    :vHeight="20.5"
     class="bipv-chart"
   />
 </template>
@@ -25,6 +25,7 @@ export default {
     legend: {
       type: Array,
       default: () => [
+        { label: "2024年目标值", color: "#f3c000" },
         { label: "2023年", color: "#12f7f1" },
         { label: "2024年", color: "#58adfa" },
       ],
@@ -36,6 +37,12 @@ export default {
     series: {
       type: Array,
       default: () => [
+        {
+          name: "2024年目标值",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
         {
           name: "2023年",
           data: Array.from({ length: 7 }, () =>

src/views/dashboard/charts/LeftChartBase.vue

@@ -178,9 +178,10 @@ export default {
     };
   },
   watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       this.options.series.map((item) => {
-        item.barWidth = val ? 24 : 12;
+        item.barWidth = val ? 18 : 12;
       });
       this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
       this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
@@ -218,8 +219,10 @@ export default {
     &::before {
       content: "";
       display: inline-block;
-      width: 10px;
+      // width: 10px;
-      height: 10px;
+      // height: 10px;
+      width: 0.531vw;
+      height: 0.531vw;
       background-color: #ccc;
       border-radius: 2px;
       margin-right: 0.22vw;

src/views/dashboard/charts/RightChartBase.vue

@@ -61,7 +61,7 @@ export default {
           left: "3%",
           right: "4%",
           bottom: "0",
-          top: "15%",
+          top: "18%",
           containLabel: true,
         },
         tooltip: {},
@@ -106,6 +106,41 @@ export default {
           },
         },
         series: [
+          {
+            name: "2024年目标值",
+            type: "line",
+            lineStyle: {
+              color: "#f3c000",
+            },
+            itemStyle: {
+              color: "#f3c000",
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#f3c000", // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.55,
+                    color: "#f3c00033",
+                  },
+                  {
+                    offset: 1,
+                    color: "transparent", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: this.series[0].data,
+          },
           {
             name: "2023年",
             type: "bar",
@@ -139,7 +174,7 @@ export default {
                 global: false, // 缺省为 false
               },
             },
-            data: this.series[0].data,
+            data: this.series[1].data,
           },
           {
             name: "2024年",
@@ -171,16 +206,17 @@ export default {
                 global: false, // 缺省为 false
               },
             },
-            data: this.series[1].data,
+            data: this.series[2].data,
           },
         ],
       },
     };
   },
   watch: {
+    /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     isFullscreen(val) {
       this.options.series.map((item) => {
-        item.barWidth = val ? 24 : 12;
+        item.barWidth = val ? 18 : 12;
       });
       this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
       this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
@@ -201,7 +237,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.left-chart-base {
+.right-chart-base {
   // position: relative;
 
   .legend {
@@ -218,8 +254,10 @@ export default {
     &::before {
       content: "";
       display: inline-block;
-      width: 10px;
+      // width: 10px;
-      height: 10px;
+      // height: 10px;
+      width: 0.531vw;
+      height: 0.531vw;
       background-color: #ccc;
       border-radius: 2px;
       margin-right: 0.22vw;
@@ -227,10 +265,38 @@ export default {
   }
 
   .legend-item:nth-child(1):before {
-    background-color: #12f7f1;
+    // width: 12px;
+    // height: 2px;
+    width: 0.638vw;
+    height: 0.1064vw;
+    background-color: #f3c000;
+    position: absolute;
+    top: 50%;
+    // left: -16px;
+    left: -0.851vw;
+    transform: translateY(-50%);
+  }
+  .legend-item:nth-child(1):after {
+    background-color: #f3c000;
+    content: "";
+    display: inline-block;
+    position: absolute;
+    // width: 6px;
+    // height: 6px;
+    width: 0.3191vw;
+    height: 0.3191vw;
+    border-radius: 100%;
+    top: 50%;
+    left: -0.851vw;
+    // left: -16px;
+    transform: translateY(-50%) translateX(50%);
   }
 
   .legend-item:nth-child(2):before {
+    background-color: #12f7f1;
+  }
+
+  .legend-item:nth-child(3):before {
     background-color: #58adfa;
   }