From 0ee76c15799736cba3e85f19bfd2902b154cb670 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 12 Mar 2022 11:29:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=B8=90=E5=8F=98=E8=89=B2=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Lines/LineCommon/config.ts         |  7 ++--
 .../Charts/Lines/LineCommon/index.vue         | 26 +++++++-------
 .../Charts/Lines/LineGradientSingle/config.ts |  5 +--
 .../Charts/Lines/LineGradientSingle/index.vue | 36 +++++++++----------
 .../Charts/Lines/LineGradients/config.ts      |  9 ++---
 .../Charts/Lines/LineGradients/index.vue      | 33 +++++++++--------
 6 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/src/packages/components/Charts/Lines/LineCommon/config.ts b/src/packages/components/Charts/Lines/LineCommon/config.ts
index e5ce5744..45886c90 100644
--- a/src/packages/components/Charts/Lines/LineCommon/config.ts
+++ b/src/packages/components/Charts/Lines/LineCommon/config.ts
@@ -1,6 +1,7 @@
 import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -36,16 +37,16 @@ export const option = {
           colorStops: [
             {
               offset: 0,
-              color: '#42a5f5' // 0% 处的颜色
+              color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
             },
             {
               offset: 1,
-              color: '#48D8BF' // 100% 处的颜色
+              color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
             }
           ],
           globalCoord: false // 缺省为 false
         },
-        shadowColor: 'rgba(68, 181, 226, 0.3)',
+        shadowColor: chartColorsSearch[defaultTheme][2],
         shadowBlur: 10,
         shadowOffsetY: 20
       },
diff --git a/src/packages/components/Charts/Lines/LineCommon/index.vue b/src/packages/components/Charts/Lines/LineCommon/index.vue
index ad656c2f..e12516e8 100644
--- a/src/packages/components/Charts/Lines/LineCommon/index.vue
+++ b/src/packages/components/Charts/Lines/LineCommon/index.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, watch, reactive, watchEffect } from 'vue';
+import { PropType, watch, reactive } from 'vue';
 import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
+import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
@@ -42,19 +42,17 @@ const option = reactive({
   options: {}
 })
 
-watchEffect(()=> {
-  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-
-// 渐变色处理
-watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-    props.chartConfig.option.series.forEach((value: any) => {
-      value.lineStyle.shadowColor = themeColor[2]
-      value.lineStyle.color.colorStops.forEach((v: {color: string}, i:number) => {
-        v.color = themeColor[i]
+// 初始化与渐变色处理
+watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+    if (!document.location.hash.includes('preview')) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series.forEach((value: any) => {
+        value.lineStyle.shadowColor = themeColor[2]
+        value.lineStyle.color.colorStops.forEach((v: {color: string}, i:number) => {
+          v.color = themeColor[i]
+        })
       })
-    })
+    }
     option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
   }, 
   {
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
index 559ab6c2..511e8254 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/config.ts
@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineGradientSingleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -40,11 +41,11 @@ const options = {
         color: new graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: 'rgba(25,163,223,.5)'
+            color: chartColorsSearch[defaultTheme][3]
           },
           {
             offset: 1,
-            color: 'rgba(25,163,223, 0)'
+            color: 'rgba(0,0,0,0)'
           }
         ])
       },
diff --git a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
index 4cfc3876..e40e63b1 100644
--- a/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradientSingle/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watchEffect, watch, PropType } from 'vue'
+import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -42,26 +42,24 @@ const option = reactive({
   options: {}
 })
 
-watchEffect(()=> {
-  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
-
 // 渐变色处理
 watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-    props.chartConfig.option.series.forEach((value: any, index: number) => {
-      value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
-        {
-          offset: 0,
-          color: themeColor[3]
-        },
-        {
-          offset: 1,
-          color: 'rgba(0,0,0, 0)'
-        }
-      ])
-      themeColor[index]
-    })
+    if (!document.location.hash.includes('preview')) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series.forEach((value: any, index: number) => {
+        value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: themeColor[3]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0, 0)'
+          }
+        ])
+        themeColor[index]
+      })
+    }
     option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
   }, 
   {
diff --git a/src/packages/components/Charts/Lines/LineGradients/config.ts b/src/packages/components/Charts/Lines/LineGradients/config.ts
index a8b18542..5d0da506 100644
--- a/src/packages/components/Charts/Lines/LineGradients/config.ts
+++ b/src/packages/components/Charts/Lines/LineGradients/config.ts
@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineGradientsConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -40,11 +41,11 @@ const option = {
         color: new graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: 'rgba(25,163,223,.3)'
+            color: chartColorsSearch[defaultTheme][3]
           },
           {
             offset: 1,
-            color: 'rgba(25,163,223, 0)'
+            color: 'rgba(0,0,0,0)'
           }
         ])
       },
@@ -64,11 +65,11 @@ const option = {
         color: new graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: 'rgba(0,202,149,0.3)'
+            color: chartColorsSearch[defaultTheme][4]
           },
           {
             offset: 1,
-            color: 'rgba(0,202,149,0)'
+            color: 'rgba(0,0,0,0)'
           }
         ])
       },
diff --git a/src/packages/components/Charts/Lines/LineGradients/index.vue b/src/packages/components/Charts/Lines/LineGradients/index.vue
index bbe83261..b3a9dce8 100644
--- a/src/packages/components/Charts/Lines/LineGradients/index.vue
+++ b/src/packages/components/Charts/Lines/LineGradients/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watchEffect, watch, PropType } from 'vue'
+import { reactive, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -41,25 +41,24 @@ const chartEditStore = useChartEditStore()
 const option = reactive({
   options: {}
 })
-watchEffect(()=> {
-  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-})
 
 // 渐变色处理
 watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-    props.chartConfig.option.series.forEach((value: any, index: number) => {
-      value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
-        {
-          offset: 0,
-          color: themeColor[3 + index]
-        },
-        {
-          offset: 1,
-          color: 'rgba(0,0,0, 0)'
-        }
-      ])
-    })
+    if (!document.location.hash.includes('preview')) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series.forEach((value: any, index: number) => {
+        value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: themeColor[3 + index]
+          },
+          {
+            offset: 1,
+            color: 'rgba(0,0,0, 0)'
+          }
+        ])
+      })
+    }
     option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
   }, 
   {