Merge pull request #134 from xiangshu233/main

修复 useECharts Hooks 报错和暗色模式 bug

src/hooks/web/useECharts.ts

@@ -10,23 +10,27 @@ import { useBreakpoint } from '@/hooks/event/useBreakpoint';
 
 import echarts from '@/utils/lib/echarts';
 
-// import { useRootSetting } from '@/hooks/setting/useRootSetting';
+import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
 
 export function useECharts(
   elRef: Ref<HTMLDivElement>,
-  theme: 'light' | 'dark' | 'default' = 'light'
+  theme: 'light' | 'dark' | 'default' = 'default'
 ) {
-  // const { getDarkMode } = useRootSetting();
+  const { getDarkTheme: getSysDarkTheme } = useDesignSetting();
-  const getDarkMode = 'light';
+
+  const getDarkTheme = computed(() => {
+    const sysTheme: string = getSysDarkTheme.value ? 'dark' : 'light';
+    return theme === 'default' ? sysTheme : theme;
+  });
+
   let chartInstance: echarts.ECharts | null = null;
   let resizeFn: Fn = resize;
-  const cacheOptions = ref<EChartsOption>({});
+  const cacheOptions = ref({});
   let removeResizeFn: Fn = () => {};
-
   resizeFn = useDebounceFn(resize, 200);
 
   const getOptions = computed((): EChartsOption => {
-    if (getDarkMode !== 'dark') {
+    if (getDarkTheme.value !== 'dark') {
       return cacheOptions.value;
     }
     return {
@@ -67,7 +71,7 @@ export function useECharts(
     nextTick(() => {
       useTimeoutFn(() => {
         if (!chartInstance) {
-          initCharts(getDarkMode.value as 'default');
+          initCharts(getDarkTheme.value as 'default');
 
           if (!chartInstance) return;
         }
@@ -83,7 +87,7 @@ export function useECharts(
   }
 
   watch(
-    () => getDarkMode.value,
+    () => getDarkTheme.value,
     (theme) => {
       if (chartInstance) {
         chartInstance.dispose();
@@ -102,7 +106,7 @@ export function useECharts(
 
   function getInstance(): echarts.ECharts | null {
     if (!chartInstance) {
-      initCharts(getDarkMode.value as 'default');
+      initCharts(getDarkTheme.value as 'default');
     }
     return chartInstance;
   }