Browse Source

style: 调整首页图表暗黑模式样式

Jack Zhou 4 days ago
parent
commit
ac968a0b3a

+ 6 - 6
src/views/Dashboard/src/components/BarChart.vue

@@ -45,7 +45,7 @@ const getOption = () => {
       left: 19,
       top: 9.5,
       textStyle: {
-        color: '#2B2F36',
+        color: themeStore.theme === 'dark' ? '#f0f1f3' : '#2B2F36',
         fontWeight: '700',
         fontFamily: 'Lato-Light',
         fontSize: '14px'
@@ -95,7 +95,7 @@ const getOption = () => {
       axisTick: { show: false },
       axisLine: {
         lineStyle: {
-          color: '#eaebed'
+          color: themeStore.theme === 'dark' ? '#8d9095' : '#eaebed'
         }
       },
       axisLabel: {
@@ -111,13 +111,13 @@ const getOption = () => {
         show: true,
         lineStyle: {
           type: 'dashed',
-          color: '#3F434A'
+          color: themeStore.theme === 'dark' ? '#8d9095' : '#eaebed'
         }
       },
       axisLine: {
         show: true,
         lineStyle: {
-          color: '#3F434A'
+          color: themeStore.theme === 'dark' ? '#8d9095' : '#eaebed'
         }
       },
       axisLabel: {
@@ -146,7 +146,7 @@ const getOption = () => {
       top: 6,
       right: 8,
       iconStyle: {
-        borderColor: '#2B2F36'
+        borderColor: themeStore.theme === 'dark' ? '#f0f1f3' : '#2B2F36'
       },
       emphasis: {
         iconStyle: {
@@ -235,7 +235,7 @@ watch(
       }
     })
   },
-  { immediate: true }
+  { immediate: true, deep: true }
 )
 
 // 监听窗口大小变化

+ 2 - 1
src/views/Dashboard/src/components/SellerChart.vue

@@ -75,7 +75,7 @@ const updateOption = () => {
   const isDark = themeStore.theme === 'dark'
   const gridColor = isDark ? '#3F434A' : '#eaebed'
   const textColor = '#B5B9BF'
-  const toolboxBorderColor = isDark ? '#f0f1f3' : '#ed6d00'
+  const toolboxBorderColor = isDark ? '#f0f1f3' : '#2B2F36'
   const toolboxBgColor = isDark ? '#2B2F36' : '#fff'
 
   const option = {
@@ -169,6 +169,7 @@ const updateOption = () => {
           show: true,
           name: props.saveImageName,
           type: 'png',
+          color: themeStore.theme === 'dark' ? '#3F434A' : '#fff',
           backgroundColor: toolboxBgColor
         }
       }