feat(platform): support 'canvas' chart

DevCloudFE · Jul 5, 2023 · 212b760 · 212b760
1 parent 7d36f78
commit 212b760
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/packages/platform/src/app/components/chart/Chart.tsx b/packages/platform/src/app/components/chart/Chart.tsx
@@ -10,16 +10,15 @@ import { getClassName } from '@react-devui/utils';
 import { STORAGE_KEY } from '../../config/storage';
 import chartTheme from './theme.json';
 
-echarts.registerTheme('light', chartTheme.light);
-echarts.registerTheme('dark', merge(cloneDeep(chartTheme.light), chartTheme.dark));
-
 export interface AppChartProps<O extends echarts.EChartsOption> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   aOption: O | null;
+  aRenderer?: 'canvas' | 'svg';
 }
 
 function Chart<O extends echarts.EChartsOption>(props: AppChartProps<O>, ref: React.ForwardedRef<echarts.ECharts>): JSX.Element | null {
   const {
     aOption,
+    aRenderer = 'canvas',
 
     ...restProps
   } = props;
@@ -35,17 +34,40 @@ function Chart<O extends echarts.EChartsOption>(props: AppChartProps<O>, ref: Re
 
   const async = useAsync();
 
-  const themeStorage = useStorage<AppTheme>(...STORAGE_KEY.theme);
-
   const [instance, setInstance] = useState<echarts.ECharts | null>(null);
+  const [theme, setTheme] = useState<AppTheme>(useStorage.SERVICE.getItem(STORAGE_KEY.theme[0]));
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setTheme(document.body.className.includes('dark') ? 'dark' : 'light');
+    });
+    observer.observe(document.body, { attributeFilter: ['class'] });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
 
   useEffect(() => {
-    const instance = containerRef.current ? echarts.init(containerRef.current, themeStorage.value, { renderer: 'svg' }) : null;
+    const instance = containerRef.current
+      ? echarts.init(
+          containerRef.current,
+          JSON.parse(
+            JSON.stringify(theme === 'light' ? chartTheme.light : merge(cloneDeep(chartTheme.light), chartTheme.dark)).replace(
+              /var\((.+?)\)/g,
+              (match, p1) => {
+                return getComputedStyle(document.body).getPropertyValue(p1);
+              }
+            )
+          ),
+          { renderer: aRenderer }
+        )
+      : null;
     setInstance(instance);
     return () => {
       instance?.dispose();
     };
-  }, [themeStorage.value]);
+  }, [aRenderer, theme]);
 
   useEffect(() => {
     if (instance && aOption) {