fix: minChart 图表主题色可选择

antvis · Jul 31, 2023 · 50ad074 · 50ad074
1 parent 3e70f33
commit 50ad074
Show file tree

Hide file tree

Showing 7 changed files with 458 additions and 8 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
@@ -2,12 +2,13 @@ import { Chart } from '@antv/g2';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash-es';
 import React, { useEffect, useRef } from 'react';
-import { formatNumber, numberFormatThousandsSeparator } from './helper';
+import { formatNumber, getChartTheme, numberFormatThousandsSeparator } from './helper';
 
 type Props = {
   className?: string;
   width: number;
   height: number;
+  theme: 'classic' | 'classicDark';
   data: Record<string, any>[];
   xField: string;
   yField: string;
@@ -21,6 +22,7 @@ const IntervalLine = ({
   height,
   width,
   data = [],
+  theme = 'classicDark',
   xField,
   yField,
   showLegend = false,
@@ -76,7 +78,7 @@ const IntervalLine = ({
     if (!plotRef.current) {
       const chart = new Chart({
         container: containerRef.current!,
-        theme: 'classicDark',
+        theme: theme,
         autoFit: true,
         style: { viewFill: 'transparent' },
         padding: 'auto',
@@ -109,6 +111,15 @@ const IntervalLine = ({
     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]);
+
   useEffect(() => {
     if (height && width && plotRef.current) {
       plotRef.current.forceFit();

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
@@ -1,7 +1,7 @@
 import { Chart } from '@antv/g2';
 import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
-import { formatNumber } from './helper';
+import { formatNumber, getChartTheme } from './helper';
 
 type PieProps = {
   className?: string;
@@ -12,9 +12,10 @@ type PieProps = {
   colorField: string;
   showLegend: boolean;
   isCount: boolean;
+  theme: 'classic' | 'classicDark';
 };
 
-const Pie = ({ className, height, width, data = [], angleField, colorField, showLegend, isCount }: PieProps) => {
+const Pie = ({ className, theme, height, width, data = [], angleField, colorField, showLegend, isCount }: PieProps) => {
   const plotRef = useRef<Chart>();
   const containerRef = useRef<HTMLDivElement | any>();
 
@@ -48,7 +49,7 @@ const Pie = ({ className, height, width, data = [], angleField, colorField, show
     if (!plotRef.current) {
       const chart = new Chart({
         container: containerRef.current!,
-        theme: 'classicDark',
+        theme: theme,
         autoFit: true,
         style: { viewFill: 'transparent', lineWidth: 2 },
         padding: 30,
@@ -77,14 +78,23 @@ const Pie = ({ className, height, width, data = [], angleField, colorField, show
       children: [{ ...commConfig }],
     });
     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 () => {