Merge pull request #615 from zhangqin2-yewu/feat_echarts

fix: 修改暗黑模式下echarts图例和标题的颜色等样式

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>