feat: update echarts graphs style

src/hooks/useEcharts.ts

@@ -30,6 +30,7 @@ import { useDebounceFn } from "@vueuse/core";
 import { useEventListener } from "./useEventListener";
 import { useBreakpoint } from "./useBreakpoint";
 import echarts from "@/utils/echarts";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 export type ECOption = echarts.ComposeOption<
   | BarSeriesOption
@@ -44,8 +45,9 @@ export type ECOption = echarts.ComposeOption<
 >;
 
 export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
+  const appStore = useAppStoreWithOut();
   const getDarkMode = computed(() => {
-    return theme === "default" ? "light" : theme;
+    return appStore.theme === "default" ? "light" : theme;
   });
   let chartInstance: Nullable<echarts.ECharts> = null;
   let resizeFn: Fn = resize;

src/views/dashboard/graphs/Bar.vue

@@ -24,6 +24,7 @@ limitations under the License. -->
   import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import Legend from "./components/Legend.vue";
+  import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -46,6 +47,7 @@ limitations under the License. -->
       default: () => ({}),
     },
   });
+  const appStore = useAppStoreWithOut();
   const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
   const option = computed(() => getOption());
 
@@ -91,8 +93,11 @@ limitations under the License. -->
         top: 0,
         left: 0,
         itemWidth: 12,
+        backgroundColor: appStore.theme === "dark" ? "#333" : "#fff",
+        borderColor: appStore.theme === "dark" ? "#333" : "#fff",
         textStyle: {
-          color: "#333",
+          fontSize: 12,
+          color: appStore.theme === "dark" ? "#eee" : "#333",
         },
       },
       grid: {

src/views/dashboard/graphs/Line.vue

@@ -31,6 +31,7 @@ limitations under the License. -->
   import Legend from "./components/Legend.vue";
   import useLegendProcess from "@/hooks/useLegendProcessor";
   import { isDef } from "@/utils/is";
+  import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global defineProps, defineEmits */
   const emits = defineEmits(["click"]);
@@ -40,7 +41,6 @@ limitations under the License. -->
       default: () => ({}),
     },
     intervalTime: { type: Array as PropType<string[]>, default: () => [] },
-    theme: { type: String, default: "light" },
     config: {
       type: Object as PropType<
         LineConfig & {
@@ -62,6 +62,7 @@ limitations under the License. -->
       }),
     },
   });
+  const appStore = useAppStoreWithOut();
   const setRight = ref<boolean>(false);
   const option = computed(() => getOption());
   function getOption() {
@@ -93,9 +94,11 @@ limitations under the License. -->
     const color: string[] = chartColors(keys);
     const tooltip = {
       trigger: "axis",
+      backgroundColor: appStore.theme === "dark" ? "#333" : "#fff",
+      borderColor: appStore.theme === "dark" ? "#333" : "#fff",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === "dark" ? "#eee" : "#333",
       },
       enterable: true,
       confine: true,
@@ -108,9 +111,11 @@ limitations under the License. -->
       confine: true,
       extraCssText: `height: 20px; padding:0 2px;`,
       trigger: "axis",
+      backgroundColor: appStore.theme === "dark" ? "#666" : "#eee",
+      borderColor: appStore.theme === "dark" ? "#666" : "#eee",
       textStyle: {
         fontSize: 12,
-        color: "#333",
+        color: appStore.theme === "dark" ? "#eee" : "#333",
       },
     };
 
@@ -125,7 +130,7 @@ limitations under the License. -->
         left: 0,
         itemWidth: 12,
         textStyle: {
-          color: props.theme === "dark" ? "#fff" : "#333",
+          color: appStore.theme === "dark" ? "#fff" : "#333",
         },
       },
       grid: {