根据demo页面改echart白色版本

src/components/chart/combination/area-line-chart.vue

@@ -311,10 +311,10 @@ export default {
           axisPointer: {
             type: "cross",
           },
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: 14,
           },
         },
@@ -325,9 +325,9 @@ export default {
           icon: "ract",
           itemWidth: 8,
           itemHeight: 8,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -335,7 +335,7 @@ export default {
           {
             type: "category",
             axisLabel: {
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
             },
             axisLine: {
               show: false,
@@ -363,12 +363,12 @@ export default {
             name: this.units[0],
             axisLabel: {
               formatter: "{value} ",
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
             },
             axisLine: {
               type: "dashed",
               lineStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
               width: 5,
             },
@@ -379,7 +379,7 @@ export default {
               lineStyle: {
                 type: "dashed",
                 dashOffset: 10,
-                color: partten.getColor("gray") + 80,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 80,
               },
             },
           },
@@ -463,6 +463,11 @@ export default {
       this.initChart();
     });
   },
+  watch: {
+      "$store.state.themeName"() {
+        this.initChart();
+      },
+    },
 };
 </script>
 

src/components/chart/combination/multiple-bar-line-chart.vue

@@ -222,6 +222,9 @@ export default {
       },
       deep: true,
     },
+	"$store.state.themeName"() {
+	  this.initChart();
+	},
   },
   computed: {
     legend() {
@@ -310,10 +313,10 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: 12,
           },
         },
@@ -324,9 +327,9 @@ export default {
           icon: "ract",
           itemWidth: 8,
           itemHeight: 8,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -359,7 +362,7 @@ export default {
           name: this.newlineData.name,
           axisLabel: {
             formatter: "{value} ",
-            color: partten.getColor("gray"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           },
           axisLine: {
             show: false,
@@ -372,7 +375,7 @@ export default {
             lineStyle: {
               type: "dashed",
               dashOffset: 10,
-              color: partten.getColor("gray") + 80,
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 80,
             },
           },
         });

src/components/chart/combination/scatter-line-chart.vue

@@ -588,14 +588,14 @@ export default {
                 type: "max",
                 name: "最大值",
                 label: {
-                  color: partten.getColor("gray"),
+                  color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
                 },
               },
               {
                 type: "min",
                 name: "最小值",
                 label: {
-                  color: partten.getColor("gray"),
+                  color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
                 },
               },
             ],
@@ -645,11 +645,11 @@ export default {
         tooltip: {
           trigger: "item",
           showDelay: 0,
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
             fontSize: util.vh(16),
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
           },
           formatter(params) {
             if (params.componentType == "markLine") {
@@ -677,9 +677,9 @@ export default {
           right: "40",
           icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -787,6 +787,11 @@ export default {
   unmounted() {
     window.removeEventListener("resize", this.resize);
   },
+  watch: {
+      "$store.state.themeName"() {
+        this.initChart();
+      },
+    },
 };
 </script>
 

src/components/chart/combination/vertival-bar-line-chart.vue

@@ -75,6 +75,9 @@ export default {
       },
       deep: true,
     },
+	"$store.state.themeName"() {
+	  this.initChart();
+	},
   },
   computed: {
     legend() {
@@ -95,10 +98,10 @@ export default {
         },
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: 14,
           },
         },
@@ -109,9 +112,9 @@ export default {
           icon: "ract",
           itemWidth: 8,
           itemHeight: 8,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -119,7 +122,7 @@ export default {
           {
             type: "category",
             axisLabel: {
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
             },
             axisLine: {
               show: false,
@@ -136,12 +139,12 @@ export default {
             name: this.units[0],
             axisLabel: {
               formatter: "{value} ",
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
             },
             axisLine: {
               type: "dashed",
               lineStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
               width: 5,
             },
@@ -152,7 +155,7 @@ export default {
               lineStyle: {
                 type: "dashed",
                 dashOffset: 10,
-                color: partten.getColor("gray") + 80,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 80,
               },
             },
           },
@@ -161,7 +164,7 @@ export default {
             name: this.units[1],
             axisLabel: {
               formatter: "{value} ",
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               align: "left",
             },
             axisLine: {

src/components/chart/line/marker-line-chart.vue

@@ -120,6 +120,9 @@ export default {
       type: Boolean,
       default: false,
     },
+	myUnit: {
+      type: String,
+    },
   },
   data() {
     return {
@@ -259,7 +262,7 @@ export default {
           },
         },
         grid: {
-          top: 16,
+          top: this.myUnit === 'MW' ? 32 : 16,
           left: 32,
           right: 8,
           bottom: 24,

src/components/chart/line/multi-arrow-line-chart.vue

@@ -128,7 +128,7 @@ export default {
           //分格线
           splitLine: {
             lineStyle: {
-              color: partten.getColor("gray") + 55,
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 55,
               type: "dashed",
             },
           },
@@ -182,10 +182,10 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
-          textStyle: {
-            color: "#fff",
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+			borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
+			textStyle: {
+			  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
         },
@@ -195,9 +195,9 @@ export default {
           right: 56,
           icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -215,7 +215,7 @@ export default {
               formatter: "{value}",
               fontSize: util.vh(14),
               textStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             data: this.xdata,

src/components/chart/line/multiple-line-chart.vue

@@ -263,7 +263,7 @@ export default {
           zlevel: index,
           lineStyle: {
             normal: {
-              // color: index != 0 ? partten.getColor("gray") : this.color[index],
+              // color: index != 0 ? this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" : this.color[index],
               color: this.color[index],
               width: 1,
             },
@@ -348,7 +348,7 @@ export default {
           splitLine: {
             show: index == 0,
             lineStyle: {
-              color: partten.getColor("gray"),
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               type: "dashed",
             },
           },
@@ -383,11 +383,11 @@ export default {
                   type: "cross",
                 }
               : {},
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
             fontSize: util.vh(16),
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
           },
         },
         legend: {
@@ -396,9 +396,9 @@ export default {
           right: 56,
           icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -417,7 +417,7 @@ export default {
               formatter: "{value}",
               fontSize: util.vh(14),
               textStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             axisLine: {

src/components/chart/line/normal-line-chart.vue

@@ -162,7 +162,7 @@ export default {
           //分格线
           splitLine: {
             lineStyle: {
-              color: partten.getColor("gray") + 55,
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 55,
               type: "dashed",
             },
           },
@@ -204,10 +204,10 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
-          textStyle: {
-            color: "#fff",
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+			borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
+			textStyle: {
+			  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
         },
@@ -217,9 +217,9 @@ export default {
           right: 56,
           icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -237,7 +237,7 @@ export default {
               formatter: "{value}",
               fontSize: util.vh(14),
               textStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             data: this.xdata,

src/components/chart/line/zoom-line-chart.vue

@@ -162,7 +162,7 @@ export default {
           //分格线
           splitLine: {
             lineStyle: {
-              color: partten.getColor("gray") + 55,
+              color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000" + 55,
               type: "dashed",
             },
           },
@@ -204,10 +204,10 @@ export default {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
         },
@@ -217,9 +217,9 @@ export default {
           right: 56,
           icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: partten.getColor("grayl"),
+            color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -248,10 +248,10 @@ export default {
             moveHandleSize: 0,
             dataBackground: {
               lineStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
               areaStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             selectedDataBackground: {
@@ -264,9 +264,9 @@ export default {
             },
             fillerColor: "transparent",
             textStyle: {
-              color: partten.getColor("grayl"),
+              color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
             },
-            borderColor: partten.getColor("gray"),
+            borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
             brushSelect: false,
           },
         ],
@@ -278,7 +278,7 @@ export default {
               formatter: "{value}",
               fontSize: util.vh(14),
               textStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("grayl") : "#000",
               },
             },
             data: this.xdata,
@@ -316,6 +316,11 @@ export default {
   unmounted() {
     window.removeEventListener("resize", this.resize);
   },
+  watch: {
+      "$store.state.themeName"() {
+        this.initChart();
+      },
+    },
 };
 </script>
 

src/components/chart/pie/normal-pie-chart.vue

@@ -60,10 +60,10 @@ export default {
         color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+          borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
         },
@@ -80,7 +80,7 @@ export default {
           right: "0",
           align: "left",
           textStyle: {
-            color: "#fff",
+            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
           },
           itemGap: 8,
         },

src/components/chart/radar/direction-radar-chart.vue

@@ -215,7 +215,7 @@ export default {
                     },
                     {
                       offset: 1,
-                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                      color: this.$store.state.themeName === "dark" ? partten.getColor("green") : partten.getColor("deepblue") + 60, // 100% 处的颜色
                     },
                   ],
                   global: false, // 缺省为 false
@@ -268,11 +268,11 @@ export default {
                     new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                       {
                         offset: 0,
-                        color: partten.getColor(this.color) + 10,
+                        color: this.$store.state.themeName === "dark" ? partten.getColor(this.color) + 10 : partten.getColor("deepblue") + 10,
                       },
                       {
                         offset: 1,
-                        color: partten.getColor(this.color) + 99,
+                        color: this.$store.state.themeName === "dark" ? partten.getColor(this.color) + 99 : partten.getColor("deepblue") + 99,
                       },
                     ]),
                   ],
@@ -369,6 +369,11 @@ export default {
   updated() {
     this.initChart();
   },
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
 };
 </script>
 

src/components/chart/radar/radar-chart.vue

@@ -63,29 +63,53 @@ export default {
     return {
       id: "",
       chart: null,
-      lineStyles: [
-        {
-          areaStyle: {
-            color: "rgba(75,85,174, 0.9)",
-          },
-          lineStyle: {
-            color: "rgba(255,255,255, 0.85)",
-          },
-          itemStyle: {
-            color: "rgba(75,85,174, 0.5)",
-            borderColor: "rgba(255,255,255, 0.5)",
-            borderWidth: 0.5,
-          },
-        },
-      ],
+      lineStyles: [],
+	  green:{
+	        areaStyle: {
+	          color: "rgba(165,228,175, 0.9)",
+	        },
+	        lineStyle: {
+	          color: "rgba(255,255,255, 0.85)",
+	        },
+	        itemStyle: {
+	          color: "rgba(165,228,175, 0.5)",
+	          borderColor: "rgba(255,255,255, 0.5)",
+	          borderWidth: 0.5,
+	        },
+	      },
+	  blue:{
+	        areaStyle: {
+	          color: 'rgba(75,85,174, 0.9)',
+	        },
+	        lineStyle: {
+	          color: "rgba(255,255,255, 0.85)",
+	        },
+	        itemStyle: {
+	          color:'rgba(75,85,174, 0.9)',
+	          borderColor: "rgba(255,255,255, 0.5)",
+	          borderWidth: 0.5,
+	        },
+	      }
     };
   },
   computed: {},
   methods: {
     initChart() {
+		let themeName = '';
+		let theme = this.$store.state.themeName;
+		if(theme == 'dark' || theme == 'light'){
+			themeName = theme;
+		}else{
+			themeName = theme.split(' ')[1];
+		}
       let chart = echarts.init(this.$el);
 
       let maxValue = -1;
+	  if(themeName === "dark"){
+	  	this.lineStyles = [this.green,this.blue];
+	  }else{
+	  	this.lineStyles = [this.blue,this.green];
+	  }
       if (this.value.data)
         this.value.data.forEach((item, index) => {
           item.value.forEach((value) => {
@@ -116,10 +140,10 @@ export default {
         },
         tooltip: {
           trigger: "item",
-          backgroundColor: "rgba(0,0,0,0.4)",
-          borderColor: partten.getColor("gray"),
-          textStyle: {
-            color: "#fff",
+          backgroundColor: this.$store.state.themeName === "dark" ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.5)",
+			borderColor: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
+			textStyle: {
+			  color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
             fontSize: util.vh(16),
           },
           position: function(pos, params, dom, rect, size) {
@@ -140,20 +164,20 @@ export default {
             nameGap: "4",
             name: {
               textStyle: {
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
                 fontSize: 12,
                 padding: [0, 16],
               },
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
               },
             },
             splitArea: {
@@ -174,7 +198,7 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
                 shadowBlur: 1,
                 shadowColor: "#fff",
                 shadowOffsetX: 0.5,
@@ -184,7 +208,7 @@ export default {
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
                 shadowColor: "#fff",
                 shadowBlur: 0,
                 shadowOffsetX: 0.5,
@@ -208,13 +232,13 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             splitArea: {
@@ -232,7 +256,7 @@ export default {
                     },
                     {
                       offset: 1,
-                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                      color: this.$store.state.themeName === "dark" ? partten.getColor("green") + 60 : partten.getColor("deepblue") + 60, // 100% 处的颜色
                     },
                   ],
                   global: false, // 缺省为 false
@@ -251,13 +275,13 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             splitArea: {
@@ -275,7 +299,7 @@ export default {
                     },
                     {
                       offset: 1,
-                      color: partten.getColor("green") + 60, // 100% 处的颜色
+                      color: this.$store.state.themeName === "dark" ? partten.getColor("green") + 60 : partten.getColor("deepblue") + 60, // 100% 处的颜色
                     },
                   ],
                   global: false, // 缺省为 false
@@ -294,13 +318,13 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             splitArea: {
@@ -321,13 +345,13 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: partten.getColor("gray") + 40,
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") + 40 : "#000"  + 40,
               },
             },
             splitLine: {
               lineStyle: {
                 width: 1,
-                color: partten.getColor("gray"),
+                color: this.$store.state.themeName === "dark" ? partten.getColor("gray") : "#000",
               },
             },
             splitArea: {
@@ -366,6 +390,11 @@ export default {
       this.initChart();
     });
   },
+  watch: {
+      "$store.state.themeName"() {
+        this.initChart();
+      },
+    },
 };
 </script>
 

src/views/Agc/components/agc-panel.vue

@@ -83,7 +83,7 @@
     <!-- <MultipleLineChart v-if="chartType === 'multiple'" height="13.889vh" :list="data.tb || chartData" :hoverType="'axis'"></MultipleLineChart> -->
   	<el-dialog v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
 			:close-on-click-modal="true">
-      <DoubleLineChart height="70vh" :list="data.tb || chartData" ></DoubleLineChart>
+      <DoubleLineChart height="70vh" :list="data.tb || chartData" myUnit='MW'></DoubleLineChart>
 		</el-dialog>
   </ComPanel>
 </template>

src/views/Demo.vue

@@ -69,7 +69,7 @@
     <h3>折线图：multi-arrow-line-chart</h3>
     <multi-arrow-line-chart :height="'200px'" />
 
-    <h3>折线图：multiple-line-chart</h3>
+    <h3>折线图：normal-line-chart</h3>
     <normal-line-chart />
 
     <h3>折线图：simple-line-chart</h3>
@@ -108,7 +108,7 @@
       <normal-radar-chart :height="'500px'" />
     </div>
 
-    <h3>饼图：normal-radar-chart</h3>
+    <h3>饼图：radar-chart</h3>
     <div style="height: 500px">
       <radar-chart :height="'500px'" />
     </div>