fix: 结构调整

antvis · Aug 1, 2023 · 6dd2258 · 6dd2258
1 parent 3634a61
commit 6dd2258
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 22 deletions.
diff --git a/packages/li-analysis-assets/src/widgets/MiniChart/Component/Chart/IntervalLine.tsx b/packages/li-analysis-assets/src/widgets/MiniChart/Component/Chart/IntervalLine.tsx
@@ -75,6 +75,8 @@ const IntervalLine = ({
       legend: showLegend,
     };
 
+    const themeCfg = getChartTheme(theme) as Record<string, any>;
+
     if (!plotRef.current) {
       const chart = new Chart({
         container: containerRef.current!,
@@ -84,7 +86,6 @@ const IntervalLine = ({
         paddingBottom: 30,
       });
 
-      const themeCfg = getChartTheme(theme) as Record<string, any>;
       chart.theme(themeCfg);
 
       chart.options({
@@ -109,17 +110,9 @@ const IntervalLine = ({
       type: 'view',
       children: [{ ...commConfig }],
     });
+    plotRef.current?.theme(themeCfg);
     plotRef.current?.render();
-  }, [data, xField, yField, showLegend, type, isCount]);
-
-  useEffect(() => {
-    if (theme && plotRef.current) {
-      const themeCfg = getChartTheme(theme) as Record<string, any>;
-      plotRef.current.theme(themeCfg);
-
-      plotRef.current.render();
-    }
-  }, [theme]);
+  }, [data, xField, yField, showLegend, type, isCount, theme]);
 
   useEffect(() => {
     if (height && width && plotRef.current) {

diff --git a/packages/li-analysis-assets/src/widgets/MiniChart/Component/Chart/Pie.tsx b/packages/li-analysis-assets/src/widgets/MiniChart/Component/Chart/Pie.tsx
@@ -46,6 +46,8 @@ const Pie = ({ className, theme, height, width, data = [], angleField, colorFiel
       ],
     };
 
+    const themeCfg = getChartTheme(theme) as Record<string, any>;
+
     if (!plotRef.current) {
       const chart = new Chart({
         container: containerRef.current!,
@@ -54,7 +56,6 @@ const Pie = ({ className, theme, height, width, data = [], angleField, colorFiel
         padding: 30,
       });
 
-      const themeCfg = getChartTheme(theme) as Record<string, any>;
       chart.theme(themeCfg);
 
       chart.options({
@@ -79,24 +80,17 @@ const Pie = ({ className, theme, height, width, data = [], angleField, colorFiel
       type: 'view',
       children: [{ ...commConfig }],
     });
+
+    plotRef.current?.theme(themeCfg);
     plotRef.current?.render();
-  }, [data, angleField, colorField, showLegend, isCount]);
+  }, [data, angleField, colorField, showLegend, isCount, theme]);
 
   useEffect(() => {
     if (height && width && plotRef.current) {
       plotRef.current.forceFit();
     }
   }, [height, width]);
 
-  useEffect(() => {
-    if (theme && plotRef.current) {
-      const themeCfg = getChartTheme(theme) as Record<string, any>;
-      plotRef.current.theme(themeCfg);
-
-      plotRef.current.render();
-    }
-  }, [theme]);
-
   useEffect(() => {
     // 组件销毁时销毁图表
     return () => {