Merge branch 'feat_theme_g' of United_Software/k_online_ui into feat_theme

src/views/Dashboard/src/components/BarChart.vue

@@ -1,9 +1,11 @@
 <!-- 竖形柱状图 -->
 <script lang="ts" setup>
 import * as echarts from 'echarts'
+import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
 import updateIcon from '../image/xiazai.png'
 import * as XLSX from 'xlsx'
+const themeStore = useThemeStore()
 const props = defineProps({
   BarData: Object,
   barHeight: Object,
@@ -224,7 +226,8 @@ const initOption = reactive({
     splitLine: {
       show: true,
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
+        color: '#eaebed'
       }
     },
     axisLine: {
@@ -284,6 +287,26 @@ const initOption = reactive({
 onMounted(() => {
   initChart()
   clickParams()
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        initOption.xAxis.axisLine.lineStyle.color = '#3F434A'
+        initOption.yAxis.axisLine.lineStyle.color = '#3F434A'
+        initOption.yAxis.splitLine.lineStyle.color = '#3F434A'
+        initChart()
+      } else {
+        initOption.xAxis.axisLine.lineStyle.color = '#eaebed'
+        initOption.yAxis.axisLine.lineStyle.color = '#eaebed'
+        initOption.yAxis.splitLine.lineStyle.color = '#eaebed'
+        initChart()
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 })
 
 const emits = defineEmits(['ClickParams'])

src/views/Dashboard/src/components/SellerChart.vue

@@ -1,7 +1,9 @@
 <!-- 横形柱状图 -->
 <script lang="ts" setup>
 import * as echarts from 'echarts'
+import { useThemeStore } from '@/stores/modules/theme'
 import { onMounted, ref, reactive, watch, computed } from 'vue'
+const themeStore = useThemeStore()
 const props = defineProps({
   SellerData: Array,
   Interval: Object
@@ -87,7 +89,8 @@ const initOption = reactive({
   xAxis: {
     splitLine: {
       lineStyle: {
-        type: 'dashed'
+        type: 'dashed',
+        color: '#eaebed'
       }
     },
     type: 'value',
@@ -159,6 +162,22 @@ const initOption = reactive({
 onMounted(() => {
   initChart()
   clickParams()
+  watch(
+    () => themeStore.theme,
+    (newVal) => {
+      if (newVal === 'dark') {
+        initOption.xAxis.splitLine.lineStyle.color = '#3F434A'
+        initChart()
+      } else {
+        initOption.xAxis.splitLine.lineStyle.color = '#eaebed'
+        initChart()
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
 })
 const emits = defineEmits(['ClickParams'])
 const paramsdata = ref()