fix: 处理渐变图表的配置和水球背景的全局主题跟随

src/packages/components/Charts/Mores/WaterPolo/config.vue

@@ -1,22 +1,41 @@
 <template>
-  <CollapseItem name="水球" :expanded="true">
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="水球"
+    :expanded="true"
+  >
     <SettingItemBox name="内容">
       <SettingItem name="数值">
         <n-input-number
-          v-model:value="optionData.series[0].data[0]"
+          v-model:value="item.data[0]"
           :min="0"
           :step="0.01"
           size="small"
           placeholder="水球数值"
         ></n-input-number>
       </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.color[0].colorStops[0].color"
+       ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.color[0].colorStops[1].color"
+       ></n-color-picker>
+      </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="背景" :alone="true">
       <SettingItem>
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.series[0].backgroundStyle.color"
+          v-model:value="item.backgroundStyle.color"
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
@@ -24,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, computed } from 'vue'
 import { option } from './config'
 import {
   CollapseItem,
@@ -38,4 +57,8 @@ const props = defineProps({
     required: true,
   },
 })
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
 </script>

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -2,7 +2,7 @@
   <v-chart
     ref="vChartRef"
     :theme="themeColor"
-    :option="option.options"
+    :option="option.value"
     :manual-update="isPreview()"
     autoresize
   ></v-chart>
@@ -41,7 +41,7 @@ use([CanvasRenderer, GridComponent])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
-  options: {},
+  value: {},
 })
 
 // 渐变色处理
@@ -50,6 +50,9 @@ watch(
   (newColor: keyof typeof chartColorsSearch) => {
     if (!isPreview()) {
       const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      // 背景颜色
+      props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
+      // 水球颜色
       props.chartConfig.option.series[0].color[0].colorStops = [  
         {
           offset: 0,
@@ -61,7 +64,7 @@ watch(
         },
       ]
     }
-    option.options = props.chartConfig.option
+    option.value = props.chartConfig.option
   },
   {
     immediate: true,
@@ -70,7 +73,7 @@ watch(
 
 const updateDataset = (newData: string | number) => {
   props.chartConfig.option.series[0].data = [parseFloat(`${newData}`).toFixed(2)]
-  option.options = props.chartConfig.option
+  option.value = props.chartConfig.option
 }
 
 watch(