feat: dark mode

src/hooks/web/useECharts.ts

@@ -1,31 +1,46 @@
 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '@vueuse/core';
-import { unref, Ref, nextTick } from 'vue';
+import { unref, Ref, nextTick, watch, computed, ref } from 'vue';
 import type { EChartsOption } from 'echarts';
 import { useDebounce } from '/@/hooks/core/useDebounce';
 import { useEventListener } from '/@/hooks/event/useEventListener';
 import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
 
 import echarts from '/@/plugins/echarts';
+import { useRootSetting } from '../setting/useRootSetting';
 
 export function useECharts(
   elRef: Ref<HTMLDivElement>,
   theme: 'light' | 'dark' | 'default' = 'light'
 ) {
+  const { getDarkMode } = useRootSetting();
   let chartInstance: echarts.ECharts | null = null;
   let resizeFn: Fn = resize;
+  const cacheOptions = ref<EChartsOption>({});
   let removeResizeFn: Fn = () => {};
 
   const [debounceResize] = useDebounce(resize, 200);
   resizeFn = debounceResize;
 
-  function initCharts() {
+  const getOptions = computed(
+    (): EChartsOption => {
+      if (getDarkMode.value !== 'dark') {
+        return cacheOptions.value;
+      }
+      return {
+        backgroundColor: '#151515',
+        ...cacheOptions.value,
+      };
+    }
+  );
+
+  function initCharts(t = theme) {
     const el = unref(elRef);
     if (!el || !unref(el)) {
       return;
     }
 
-    chartInstance = echarts.init(el, theme);
+    chartInstance = echarts.init(el, t);
     const { removeEvent } = useEventListener({
       el: window,
       name: 'resize',
@@ -41,22 +56,23 @@ export function useECharts(
   }
 
   function setOptions(options: EChartsOption, clear = true) {
+    cacheOptions.value = options;
     if (unref(elRef)?.offsetHeight === 0) {
       useTimeoutFn(() => {
-        setOptions(options);
+        setOptions(unref(getOptions));
       }, 30);
       return;
     }
     nextTick(() => {
       useTimeoutFn(() => {
         if (!chartInstance) {
-          initCharts();
+          initCharts(getDarkMode.value);
 
           if (!chartInstance) return;
         }
         clear && chartInstance?.clear();
 
-        chartInstance?.setOption(options);
+        chartInstance?.setOption(unref(getOptions));
       }, 30);
     });
   }
@@ -65,6 +81,17 @@ export function useECharts(
     chartInstance?.resize();
   }
 
+  watch(
+    () => getDarkMode.value,
+    (theme) => {
+      if (chartInstance) {
+        chartInstance.dispose();
+        initCharts(theme);
+        setOptions(cacheOptions.value);
+      }
+    }
+  );
+
   tryOnUnmounted(() => {
     if (!chartInstance) return;
     removeResizeFn();