fix: 修复首页饼状图暗黑模式切换

@@ -22,9 +22,12 @@
     shallowReactive,
     shallowReactive,
     onUnmounted,
     onUnmounted,
     nextTick,
     nextTick,
+    computed,
+    watch,
   } from 'vue';
   } from 'vue';
   import * as echarts from 'echarts';
   import * as echarts from 'echarts';
   import { seriesDataT } from './props';
   import { seriesDataT } from './props';
+  import { useAppStore } from '/@/store/modules/app';
 
 
   export default defineComponent({
   export default defineComponent({
     props: {
     props: {
@@ -35,10 +38,29 @@
     },
     },
 
 
     setup(props) {
     setup(props) {
+      const appStore = useAppStore();
+      const skinName = computed(() => {
+        return appStore.getDarkMode === 'light' ? '#ffffff' : '#151515';
+      });
+
       const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
       const chartsInstance = shallowReactive<{ [key: string]: echarts.ECharts }>({});
 
 
       const { seriesStatusData } = toRefs(props);
       const { seriesStatusData } = toRefs(props);
 
 
+      watch(
+        () => appStore.getDarkMode,
+        (target) => {
+          const backgroundColor = target === 'light' ? '#ffffff' : '#151515';
+          for (const item of seriesStatusData.value) {
+            const { key } = item;
+            chartsInstance[key!]?.setOption({ backgroundColor });
+          }
+        },
+        {
+          immediate: true,
+        }
+      );
+
       const total = seriesStatusData.value
       const total = seriesStatusData.value
         .map((m) => m.value)
         .map((m) => m.value)
         .reduce((prev, cur) => prev! + cur!, 0);
         .reduce((prev, cur) => prev! + cur!, 0);
@@ -61,8 +83,9 @@
           chartsInstance[key!] = echarts.init(
           chartsInstance[key!] = echarts.init(
             document.getElementById(`chartPie${key}`) as HTMLElement
             document.getElementById(`chartPie${key}`) as HTMLElement
           );
           );
+          console.log('11', skinName.value);
           const option = {
           const option = {
-            backgroundColor: '#ffffff',
+            backgroundColor: skinName.value,
             tooltip: {
             tooltip: {
               trigger: 'item',
               trigger: 'item',
               formatter: `${legendKey}设备${((value! / total!) * 100).toFixed(2)}%`,
               formatter: `${legendKey}设备${((value! / total!) * 100).toFixed(2)}%`,
@@ -101,6 +124,9 @@
             ],
             ],
           };
           };
           chartsInstance[key!].setOption(option);
           chartsInstance[key!].setOption(option);
+          // chartsInstance[key!].setOption({
+          //   backgroundColor: skinName,
+          // });
         }
         }
       });
       });
 
 

@@ -5,10 +5,11 @@
   /></div>
   /></div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted, toRefs } from 'vue';
+  import { defineComponent, PropType, ref, Ref, onMounted, toRefs, computed, watch } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { useECharts } from '/@/hooks/web/useECharts';
   import { Empty } from 'ant-design-vue';
   import { Empty } from 'ant-design-vue';
   import { seriesDataT } from './props';
   import { seriesDataT } from './props';
+  import { useAppStore } from '/@/store/modules/app';
 
 
   export default defineComponent({
   export default defineComponent({
     components: { Empty },
     components: { Empty },
@@ -35,23 +36,22 @@
       },
       },
     },
     },
     setup(props) {
     setup(props) {
+      const appStore = useAppStore();
       const { legendData, seriesData } = toRefs(props);
       const { legendData, seriesData } = toRefs(props);
       const dataSeries: Ref<seriesDataT[]> = ref([]);
       const dataSeries: Ref<seriesDataT[]> = ref([]);
       const legendDatas: Ref<seriesDataT[]> = ref([]);
       const legendDatas: Ref<seriesDataT[]> = ref([]);
       dataSeries.value = seriesData.value as unknown as seriesDataT[];
       dataSeries.value = seriesData.value as unknown as seriesDataT[];
       legendDatas.value = legendData.value as unknown as seriesDataT[];
       legendDatas.value = legendData.value as unknown as seriesDataT[];
-
+      const skinName = computed(() => {
+        return appStore.getDarkMode === 'light' ? '#ffffff' : '#151515';
+      });
       const chartRef = ref<HTMLDivElement | null>(null);
       const chartRef = ref<HTMLDivElement | null>(null);
+
       const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
       const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const labelLine = {
-        normal: {
-          show: true,
-          length2: 1,
-        },
-      } as any;
-      onMounted(() => {
-        setOptions({
-          backgroundColor: '#ffffff',
+
+      const getOptions: any = () => {
+        return {
+          backgroundColor: skinName.value,
           tooltip: {
           tooltip: {
             trigger: 'item',
             trigger: 'item',
             formatter: '{b} {d}%',
             formatter: '{b} {d}%',
@@ -72,7 +72,29 @@
               labelLine,
               labelLine,
             },
             },
           ],
           ],
-        });
+        };
+      };
+
+      watch(
+        () => appStore.getDarkMode,
+        (target) => {
+          const backgroundColor = target === 'light' ? '#ffffff' : '#151515';
+          setOptions &&
+            setOptions({
+              ...getOptions(),
+              backgroundColor,
+            });
+        }
+      );
+
+      const labelLine = {
+        normal: {
+          show: true,
+          length2: 1,
+        },
+      } as any;
+      onMounted(() => {
+        setOptions(getOptions());
         //自适应
         //自适应
         window.addEventListener('resize', () => resize());
         window.addEventListener('resize', () => resize());
       });
       });