feat: 新增渐变色根据全局变换

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

@@ -44,7 +44,7 @@
         />
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="阴影">
+    <SettingItemBox name="阴影" :alone="true">
       <SettingItem name="颜色">
         <n-color-picker
           size="small"
@@ -52,7 +52,10 @@
           v-model:value="item.lineStyle.shadowColor"
         />
       </SettingItem>
-      <SettingItem name="控制">
+      
+    </SettingItemBox>
+    <SettingItemBox name="设置">
+     <SettingItem name="阴影">
         <n-button
           size="small"
           @click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"

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

@@ -1,9 +1,9 @@
 <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 { computed, PropType, watch, reactive, watchEffect } from 'vue';
 import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -12,6 +12,7 @@ import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from  '@/settings/chartThemes/index'
 
 const props = defineProps({
   themeSetting: {
@@ -37,9 +38,19 @@ use([
 ])
 
 const chartEditStore = useChartEditStore()
+const option = reactive({
+  options: {}
+})
 
-const option = computed(() => {
-  console.log(chartEditStore.getEditCanvasConfig.chartThemeColor)
-  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+watchEffect(()=> {
+  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+// 渐变色处理
+watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: string) => {
+  const themeColor = (chartColorsSearch as any)[newColor] || chartColorsSearch[defaultTheme]
+  props.chartConfig.option.series[0].lineStyle.color.colorStops[0].color = themeColor[0]
+  props.chartConfig.option.series[0].lineStyle.color.colorStops[1].color = themeColor[1]
+  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>

src/settings/chartThemes/index.ts

@@ -25,7 +25,7 @@ export const chartColors = {
   wonderland,
   essos,
   shine,
-  roma,
+  roma
 }
 
 // 默认主题
@@ -45,7 +45,7 @@ export const chartColorsName = {
   westeros: '灰粉',
   essos: '橘红',
   shine: '深色',
-  roma: '罗马红',
+  roma: '罗马红'
 }
 
 // 主题色列表
@@ -61,7 +61,22 @@ export const chartColorsshow = {
   westeros: 'linear-gradient(to right, #516b91 0%, #edafda 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%)',
+  roma: 'linear-gradient(to right, #e01f54 0%, #5e4ea5 100%)'
+}
+// 主题色列表
+export const chartColorsSearch = {
+  dark: ['#4992ff', '#7cffb2'],
+  customed: ['#5470c6', '#91cc75'],
+  macarons: ['#2ec7c9', '#b6a2de'],
+  walden: ['#3fb1e3', '#6be6c1'],
+  wonderland: ['#4ea397', '#22c3aa'],
+  purplePassion: ['#9b8bba', '#e098c7'],
+  vintage: ['#d87c7c', '#919e8b'],
+  chalk: ['#fc97af', '#d4a4eb'],
+  westeros: ['#516b91', '#edafda'],
+  essos: ['#893448', '#d95850'],
+  shine: ['#c12e34', '#0098d9'],
+  roma: ['#e01f54', '#5e4ea5'],
 }
 
 // 默认主题详细配置

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -35,7 +35,6 @@ const rangeStyle = computed(() => {
   const scale = {
     transform: `scale(${getEditCanvas.value.scale})`
   }
-  console.log(scale)
   // 设置背景色和图片背景
   const background = getEditCanvasConfig.value.background
   const backgroundImage = getEditCanvasConfig.value.backgroundImage
@@ -77,5 +76,7 @@ const rangeModelStyle = computed(() => {
   top: 0;
   border-radius: 15px;
   border: 1px solid rgba(0, 0, 0, 0);
+  background-color: greenyellow;
+  opacity: .2;
 }
 </style>