From 8431115d606fe139aaf1db281437dbd675a211f5 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Thu, 9 Nov 2023 15:09:46 +0800
Subject: [PATCH] feat: update echarts graphs style

---
 src/hooks/useEcharts.ts             |  4 +++-
 src/views/dashboard/graphs/Bar.vue  |  7 ++++++-
 src/views/dashboard/graphs/Line.vue | 13 +++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index cc28c467..41e5c8ac 100644
--- a/src/hooks/useEcharts.ts
+++ b/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;
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 8db91881..47f5c574 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/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: {
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index a9cda6f9..e984b1f0 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/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: {