style: gauge dark style

src/components/echarts/config.ts

@@ -31,13 +31,16 @@ export default function useChartConfig() {
   const { useToken } = theme;
   const { token } = useToken();
 
+  console.log('token:', token);
+
   const chartColorMap = useMemo(() => {
     return {
       titleColor: token.colorText,
       splitLineColor: token.colorBorder,
       tickLineColor: token.colorSplit,
       axislabelColor: token.colorTextTertiary,
-      gaugeSplitLineColor: isDarkTheme ? '#b8b8b8' : 'rgba(255, 255, 255, 1)',
+      gaugeBgColor: token.colorFillSecondary,
+      gaugeSplitLineColor: isDarkTheme ? '#ccc' : 'rgba(255, 255, 255, 1)',
       colorBgContainerHover: isDarkTheme ? '#424242' : '#fff'
     };
   }, [userSettings.theme, isDarkTheme]);

src/components/echarts/gauge.tsx

@@ -7,7 +7,11 @@ import { ChartProps } from './types';
 const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
   props
 ) => {
-  const { gaugeItemConfig, title: titleConfig } = useChartConfig();
+  const {
+    gaugeItemConfig,
+    title: titleConfig,
+    chartColorMap
+  } = useChartConfig();
   const { value, height, width, labelFormatter, title, color } = props;
   if (!value && value !== 0) {
     return <EmptyData height={height} title={title}></EmptyData>;
@@ -30,7 +34,7 @@ const GaugeChart: React.FC<Omit<ChartProps, 'seriesData' | 'xAxisData'>> = (
               ...gaugeItemConfig.axisLine.lineStyle,
               color: [
                 [value / 100, color],
-                [1, 'rgba(221, 221, 221, 0.5)']
+                [1, chartColorMap.gaugeBgColor]
               ]
             }
           },