style: ajust dark theme

src/components/echarts/bar-chart.tsx

@@ -25,34 +25,31 @@ const BarChart: React.FC<ChartProps> = (props) => {
     yAxis
   } = useChartConfig();
 
-  const options = {
-    title: {
-      text: ''
-    },
-    grid,
-    tooltip: {
-      ...tooltip
-      // axisPointer: {
-      //   type: 'shadow'
-      // }
-    },
-    xAxis: {
-      ...xAxis,
-      axisLabel: {
-        ...xAxis.axisLabel,
-        formatter: labelFormatter
-      },
-      data: []
-    },
-    yAxis,
-    legend: {
-      ...legend,
-      data: []
-    },
-
-    series: []
-  };
   const dataOptions = useMemo((): any => {
+    const options = {
+      title: {
+        text: ''
+      },
+      grid,
+      tooltip: {
+        ...tooltip
+      },
+      xAxis: {
+        ...xAxis,
+        axisLabel: {
+          ...xAxis.axisLabel,
+          formatter: labelFormatter
+        },
+        data: []
+      },
+      yAxis,
+      legend: {
+        ...legend,
+        data: []
+      },
+
+      series: []
+    };
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -79,7 +76,18 @@ const BarChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-  }, [seriesData, xAxisData, title]);
+  }, [
+    seriesData,
+    xAxisData,
+    title,
+    labelFormatter,
+    tooltip,
+    grid,
+    xAxis,
+    yAxis,
+    legend,
+    barItemConfig
+  ]);
 
   return (
     <>

src/components/echarts/config.ts

@@ -29,8 +29,7 @@ export const grid = {
 export default function useChartConfig() {
   const { userSettings, isDarkTheme } = useUserSettings();
   const { useToken } = theme;
-  const { token, hashId } = useToken();
-  console.log('token+++++++++++++++', token, hashId);
+  const { token } = useToken();
 
   const chartColorMap = useMemo(() => {
     return {
@@ -39,13 +38,13 @@ export default function useChartConfig() {
       tickLineColor: token.colorSplit,
       axislabelColor: token.colorTextTertiary,
       gaugeSplitLineColor: 'rgba(255, 255, 255, 0.38)',
-      colorBgBase: token.colorBgBase
+      colorBgContainerHover: isDarkTheme ? '#424242' : '#fff'
     };
-  }, [userSettings.theme]);
+  }, [userSettings.theme, isDarkTheme]);
 
   const tooltip = {
     trigger: 'axis',
-    backgroundColor: chartColorMap.colorBgBase,
+    backgroundColor: chartColorMap.colorBgContainerHover,
     borderColor: 'transparent',
     formatter(params: any, callback?: (val: any) => any) {
       let result = `<span class="tooltip-x-name">${params[0].axisValue}</span>`;

src/components/echarts/h-bar.tsx

@@ -24,32 +24,31 @@ const BarChart: React.FC<ChartProps> = (props) => {
     yAxis
   } = useChartConfig();
 
-  const options = {
-    title: {
-      ...titleConfig,
-      left: 'start'
-    },
-    grid,
-    tooltip: {
-      ...tooltip
-    },
-    xAxis: {
-      ...xAxis,
-      axisLabel: {
-        ...xAxis.axisLabel,
-        formatter: labelFormatter
-      }
-    },
-    yAxis,
-    legend: {
-      ...legend,
-      data: []
-    },
-
-    series: []
-  };
-
   const dataOptions = useMemo((): any => {
+    const options = {
+      title: {
+        ...titleConfig,
+        left: 'start'
+      },
+      grid,
+      tooltip: {
+        ...tooltip
+      },
+      xAxis: {
+        ...xAxis,
+        axisLabel: {
+          ...xAxis.axisLabel,
+          formatter: labelFormatter
+        }
+      },
+      yAxis,
+      legend: {
+        ...legend,
+        data: []
+      },
+
+      series: []
+    };
     const data = _.map(seriesData, (item: any) => {
       return {
         ...item,
@@ -103,7 +102,17 @@ const BarChart: React.FC<ChartProps> = (props) => {
       },
       series: data
     };
-  }, [seriesData, xAxisData, title]);
+  }, [
+    seriesData,
+    xAxisData,
+    title,
+    labelFormatter,
+    tooltip,
+    grid,
+    xAxis,
+    yAxis,
+    legend
+  ]);
 
   return (
     <>