feat: 支持渐变色全局变换

src/packages/components/Charts/Lines/LineCommon/config.ts

@@ -46,7 +46,7 @@ export const option = {
           globalCoord: false // 缺省为 false
         },
         shadowColor: 'rgba(68, 181, 226, 0.3)',
-        shadowBlur: 5,
+        shadowBlur: 10,
         shadowOffsetY: 20
       },
       data: [120, 200, 150, 80, 70, 110, 130]

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -47,10 +47,17 @@ watchEffect(()=> {
 })
 
 // 渐变色处理
-watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: string) => {
+watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  const themeColor = (chartColorsSearch as any)[newColor] || chartColorsSearch[defaultTheme]
+    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-  props.chartConfig.option.series[0].lineStyle.color.colorStops[0].color = themeColor[0]
+    props.chartConfig.option.series.forEach((value: any) => {
-  props.chartConfig.option.series[0].lineStyle.color.colorStops[1].color = themeColor[1]
+      value.lineStyle.shadowColor = themeColor[2]
-  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      value.lineStyle.color.colorStops.forEach((v: {color: string}, i:number) => {
-})
+        v.color = themeColor[i]
+      })
+    })
+    option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  }, 
+  {
+    immediate: true
+  })
 </script>

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,20 +1,18 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option.options" autoresize />
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { reactive, watchEffect, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
-import {
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-  GridComponent,
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-  TooltipComponent,
+import { chartColorsSearch, defaultTheme } from  '@/settings/chartThemes/index'
-  LegendComponent,
-} from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -38,8 +36,35 @@ use([
   TooltipComponent,
   LegendComponent,
 ])
+const chartEditStore = useChartEditStore()
 
-const option = computed(() => {
+const option = reactive({
-  return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
+  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]
+    })
+    option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  }, 
+  {
+    immediate: true
+  })
 </script>

src/packages/components/Charts/Lines/LineGradients/config.ts

@@ -48,7 +48,7 @@ const option = {
           }
         ])
       },
-      data: [120, 200, 150, 80, 70, 110, 130],
+      data: [120, 200, 150, 80, 70, 110, 130]
     },
     {
       name: 'data2',
@@ -60,21 +60,17 @@ const option = {
         }
       },
       areaStyle: {
-        normal: {
+        opacity: 0.8,
-          opacity: 0.8,
+        color: new graphic.LinearGradient(0, 0, 0, 1, [
-          color: new graphic.LinearGradient(0, 0, 0, 1, [
+          {
-            {
+            offset: 0,
-              offset: 0,
+            color: 'rgba(0,202,149,0.3)'
-              color: 'rgba(0,202,149,0.3)'
+          },
-            },
+          {
-            {
+            offset: 1,
-              offset: 1,
+            color: 'rgba(0,202,149,0)'
-              color: 'rgba(0,202,149,0)'
+          }
-            }
+        ])
-          ]),
-          shadowColor: 'rgba(0,202,149, 0.9)',
-          shadowBlur: 20
-        }
       },
       data: [130, 130, 312, 268, 155, 117, 160]
     }

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,20 +1,18 @@
 <template>
-  <VChart :theme="themeColor" :option="option" autoresize />
+  <VChart :theme="themeColor" :option="option.options" autoresize />
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { reactive, watchEffect, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
-import {
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-  GridComponent,
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-  TooltipComponent,
+import { chartColorsSearch, defaultTheme } from  '@/settings/chartThemes/index'
-  LegendComponent,
-} from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -38,8 +36,33 @@ use([
   TooltipComponent,
   LegendComponent,
 ])
+const chartEditStore = useChartEditStore()
 
-const option = computed(() => {
+const option = reactive({
-  return mergeTheme( props.chartConfig.option, props.themeSetting, includes)
+  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)'
+        }
+      ])
+    })
+    option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  }, 
+  {
+    immediate: true
+  })
 </script>

src/settings/chartThemes/index.ts

@@ -38,11 +38,11 @@ export const chartColorsName = {
   customed: '暗淡',
   macarons: '马卡龙',
   walden: '蓝绿',
-  wonderland: '青草',
   purplePassion: '深紫',
   vintage: '复古',
-  chalk: '粉红',
+  chalk: '粉青',
   westeros: '灰粉',
+  wonderland: '青草',
   essos: '橘红',
   shine: '深色',
   roma: '罗马红'
@@ -54,29 +54,32 @@ export const chartColorsshow = {
   customed: 'linear-gradient(to right, #5470c6 0%, #91cc75 100%)',
   macarons: 'linear-gradient(to right, #2ec7c9 0%, #b6a2de 100%)',
   walden: 'linear-gradient(to right, #3fb1e3 0%, #6be6c1 100%)',
-  wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)',
   purplePassion: 'linear-gradient(to right, #9b8bba 0%, #e098c7 100%)',
   vintage: 'linear-gradient(to right, #d87c7c 0%, #919e8b 100%)',
-  chalk: 'linear-gradient(to right, #fc97af 0%, #d4a4eb 100%)',
+  chalk: 'linear-gradient(to right, #fc97af 0%, #87f7cf 100%)',
   westeros: 'linear-gradient(to right, #516b91 0%, #edafda 100%)',
+  wonderland: 'linear-gradient(to right, #4ea397 0%, #22c3aa 100%)',
   essos: 'linear-gradient(to right, #893448 0%, #d95850 100%)',
   shine: 'linear-gradient(to right, #c12e34 0%, #0098d9 100%)',
   roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)'
 }
-// 主题色列表
+// 渐变主题色列表（阴影，渐变1，渐变2）
 export const chartColorsSearch = {
-  dark: ['#4992ff', '#7cffb2'],
+  dark: ['#4992ff', '#7cffb2', 'rgba(68, 181, 226, 0.3)', 'rgba(73, 146, 255, 0.5)', 'rgba(124, 255, 178, 0.5)'],
-  customed: ['#5470c6', '#91cc75'],
+  customed: ['#5470c6', '#91cc75', 'rgba(84, 112, 198, 0.5)', 'rgba(84, 112, 198, 0.5)', 'rgba(145, 204, 117, 0.5)'],
-  macarons: ['#2ec7c9', '#b6a2de'],
+  macarons: ['#2ec7c9', '#b6a2de', 'rgba(182, 162, 222, 0.3)', 'rgba(46, 199, 201, 0.5)', 'rgba(182, 162, 222, 0.5)'],
-  walden: ['#3fb1e3', '#6be6c1'],
+
-  wonderland: ['#4ea397', '#22c3aa'],
+  walden: ['#3fb1e3', '#6be6c1', 'rgba(68, 181, 226, 0.3)', 'rgba(63, 177, 227, 0.5)', 'rgba(107, 230, 193, 0.5)'],
-  purplePassion: ['#9b8bba', '#e098c7'],
+  purplePassion: ['#9b8bba', '#e098c7', 'rgba(182, 162, 222, 0.3)', 'rgba(155, 139, 186, 0.5)', 'rgba(237, 175, 218, 0.5)'],
-  vintage: ['#d87c7c', '#919e8b'],
+  vintage: ['#d87c7c', '#919e8b', 'rgba(182, 162, 222, 0.3)', 'rgba(216, 124, 124, 0.5)', 'rgba(145, 158, 139, 0.5)'],
-  chalk: ['#fc97af', '#d4a4eb'],
+
-  westeros: ['#516b91', '#edafda'],
+  chalk: ['#fc97af', '#87f7cf', 'rgba(135, 247, 207, 0.3)', 'rgba(252, 151, 175, 0.5)', 'rgba(135, 247, 207, 0.5)'],
-  essos: ['#893448', '#d95850'],
+  westeros: ['#516b91', '#edafda', 'rgba(81, 107, 145, 0.3)', 'rgba(81, 107, 145, 0.5)', 'rgba(89, 196, 230, 0.5)'],
-  shine: ['#c12e34', '#0098d9'],
+  wonderland: ['#4ea397', '#22c3aa', 'rgba(68, 181, 226, 0.3)', 'rgba(78, 163, 151, 0.5)', 'rgba(34, 195, 170, 0.5)'],
-  roma: ['#e01f54', '#5e4ea5'],
+  
+  essos: ['#893448', '#d95850', 'rgba(137, 52, 72, 0.3)', 'rgba(137, 52, 72, 0.5)', 'rgba(217, 88, 80, 0.5)'],
+  shine: ['#c12e34', '#0098d9', 'rgba(137, 52, 72, 0.3)', 'rgba(193, 46, 52, 0.5)', 'rgba(230, 182, 0, 0.5)'],
+  roma: ['#e01f54', '#5e4ea5', 'rgba(137, 52, 72, 0.3)', 'rgba(224, 31, 84, 0.5)', 'rgba(94, 78, 165, 0.5)'],
 }
 
 // 默认主题详细配置

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -188,7 +188,6 @@ export const useMousePointHandle = (
   }, 50)
 
   const mouseup = () => {
-    // 设置拖拽状态
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false)
     chartEditStore.setMousePosition(0, 0)
     document.removeEventListener('mousemove', mousemove)