From 2dbee0c6ed10267a5221e29b5c6dd9c5ba295f16 Mon Sep 17 00:00:00 2001
From: zhangqin2-yewu <zhangqin2_yewu@cmss.chinamobile.com>
Date: Wed, 9 Apr 2025 15:12:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=9A=97=E9=BB=91?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8Becharts=E5=9B=BE=E4=BE=8B=E5=92=8C?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E7=9A=84=E9=A2=9C=E8=89=B2=E7=AD=89=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Dashboard/Analysis.vue | 34 +++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/views/Dashboard/Analysis.vue b/src/views/Dashboard/Analysis.vue
index 4ce6f27..8e8e634 100644
--- a/src/views/Dashboard/Analysis.vue
+++ b/src/views/Dashboard/Analysis.vue
@@ -3,7 +3,7 @@ import PanelGroup from './components/PanelGroup.vue'
 import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
 import { Echart } from '@/components/Echart'
 import { pieOptions, barOptions, lineOptions } from './echarts-data'
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed, watch, onMounted } from 'vue'
 import {
   getUserAccessSourceApi,
   getWeeklyUserActivityApi,
@@ -12,11 +12,15 @@ import {
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useAppStore } from '@/store/modules/app'
 
 const { t } = useI18n()
 
 const loading = ref(true)
 
+const appStore = useAppStore()
+const isDark = computed(() => appStore.getIsDark)
+
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 
 // 用户来源
@@ -91,12 +95,40 @@ const getMonthlySales = async () => {
   }
 }
 
+/**
+ * 更新 legend.textStyle
+ */
+const updateLegendTextStyle = (options) => {
+  const newTextStyle = {
+    color: isDark.value ? '#ccc' : '#333'
+  }
+  const inactiveColor = isDark.value ? '#abacac' : '#ccc'
+  set(options, 'title.textStyle', newTextStyle)
+  if (options !== barOptionsData) {
+    set(options, 'legend.textStyle', newTextStyle)
+    set(options, 'legend.inactiveColor', inactiveColor)
+  }
+  options === pieOptionsData && set(options, 'series[0].emptyCircleStyle.color', inactiveColor)
+}
+
 const getAllApi = async () => {
   await Promise.all([getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
   loading.value = false
 }
 
 getAllApi()
+
+// 监听暗黑模式变化并重新更新样式
+watch(isDark, () => {
+  updateLegendTextStyle(pieOptionsData)
+  updateLegendTextStyle(barOptionsData)
+  updateLegendTextStyle(lineOptionsData)
+})
+onMounted(() => {
+  updateLegendTextStyle(pieOptionsData)
+  updateLegendTextStyle(barOptionsData)
+  updateLegendTextStyle(lineOptionsData)
+})
 </script>
 
 <template>