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

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

@@ -36,13 +36,6 @@
           :options="lineConf.lineStyle.type"
        ></n-select>
       </SettingItem>
-      <SettingItem name="类型">
-        <n-select
-          v-model:value="item.lineStyle.type"
-          size="small"
-          :options="lineConf.lineStyle.type"
-       ></n-select>
-      </SettingItem>
     </SettingItemBox>
     <SettingItemBox name="阴影" :alone="true">
       <SettingItem name="颜色">
@@ -72,13 +65,13 @@
 <script setup lang="ts">
 import { PropType, computed } from 'vue'
 import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import {
   GlobalSetting,
   CollapseItem,
   SettingItemBox,
   SettingItem
 } from '@/components/Pages/ChartItemSetting'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 
 const props = defineProps({
   optionData: {

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

@@ -1,5 +1,11 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart 
+    ref="vChartRef" 
+    :theme="themeColor" 
+    :option="option.value" 
+    :manual-update="isPreview()" 
+    autoresize>
+  </v-chart>
 </template>
 
 <script setup lang="ts">
@@ -42,7 +48,7 @@ use([
 
 const chartEditStore = useChartEditStore()
 const option = reactive({
-  options: {}
+  value: {}
 })
 
 // 初始化与渐变色处理
@@ -55,18 +61,16 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
         v.color = themeColor[i]
       })
     })
-    option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-    option.options = props.chartConfig.option
+    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+    props.chartConfig.option = option.value
   }
 }, {
   immediate: true,
 })
 
+
 watch(() => props.chartConfig.option.dataset, () => {
-  option.options = props.chartConfig.option
-}, {
-  immediate: true,
-  deep: true
+  option.value = props.chartConfig.option
 })
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)

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

@@ -8,9 +8,6 @@ import dataJson from './data.json'
 export const includes = ['legend', 'xAxis', 'yAxis']
 
 const options = {
-  legend: {
-    show: true
-  },
   tooltip: {
     show: true,
     trigger: 'axis',
@@ -18,6 +15,9 @@ const options = {
       type: 'line'
     }
   },
+  legend: {
+    show: true
+  },
   xAxis: {
     show: true,
     type: 'category',
@@ -32,9 +32,8 @@ const options = {
       type: 'line',
       smooth: false,
       lineStyle: {
-        normal: {
-          width: 3
-        }
+        type: 'solid',
+        width: 3
       },
       areaStyle: {
         opacity: 0.8,
@@ -48,7 +47,7 @@ const options = {
             color: 'rgba(0,0,0,0)'
           }
         ])
-      },
+      }
     }
   ]
 }

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

@@ -1,6 +1,52 @@
 <template>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="单折线面积图"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
 </script>

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

@@ -6,7 +6,7 @@ export const LineGradientSingleConfig: ConfigType = {
   key: 'LineGradientSingle',
   chartKey: 'VLineGradientSingle',
   conKey: 'VCLineGradientSingle',
-  title: '多折线面积图',
+  title: '单折线面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,

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

@@ -2,7 +2,7 @@
   <v-chart 
     ref="vChartRef" 
     :theme="themeColor" 
-    :option="option.options" 
+    :option="option.value" 
     :manual-update="isPreview()" 
     autoresize>
   </v-chart>
@@ -48,7 +48,7 @@ use([
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
-  options: {}
+  value: {}
 })
 
 // 渐变色处理
@@ -66,18 +66,17 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
           color: 'rgba(0,0,0, 0)'
         }
       ])
-      themeColor[index]
     })
   }
-  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  props.chartConfig.option = option.value
 }, {
   immediate: true
 })
 
+
 watch(() => props.chartConfig.option.dataset, () => {
-  option.options = props.chartConfig.option
-}, {
-  deep: true
+  option.value = props.chartConfig.option
 })
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)

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

@@ -33,9 +33,8 @@ const option = {
       type: 'line',
       smooth: false,
       lineStyle: {
-        normal: {
-          width: 3
-        }
+        width: 3,
+        type: 'solid',
       },
       areaStyle: {
         opacity: 0.8,

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

@@ -1,6 +1,52 @@
 <template>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    name="单折线面积图"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="宽度">
+        <n-input-number
+          v-model:value="item.lineStyle.width"
+          :min="1"
+          :max="100"
+          size="small"
+          placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select
+          v-model:value="item.lineStyle.type"
+          size="small"
+          :options="lineConf.lineStyle.type"
+        ></n-select>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData" :in-chart="true"></global-setting>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import {
+  GlobalSetting,
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  },
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
 </script>

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

@@ -6,7 +6,7 @@ export const LineGradientsConfig: ConfigType = {
   key: 'LineGradients',
   chartKey: 'VLineGradients',
   conKey: 'VCLineGradients',
-  title: '单折线面积图',
+  title: '双折线面积图',
   category: ChatCategoryEnum.LINE,
   categoryName: ChatCategoryEnumName.LINE,
   package: PackagesCategoryEnum.CHARTS,

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

@@ -1,5 +1,5 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option.options" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -42,7 +42,7 @@ use([
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
-  options: {}
+  value: {}
 })
 
 // 渐变色处理
@@ -62,15 +62,14 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
       ])
     })
   }
-  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  props.chartConfig.option = option.value
 }, {
   immediate: true
 })
 
 watch(() => props.chartConfig.option.dataset, () => {
-  option.options = props.chartConfig.option
-}, {
-  deep: true
+  option.value = props.chartConfig.option
 })
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)

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(

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -12,7 +12,7 @@
         :fallback-src="requireErrorImg()"
      ></n-image>
       <n-ellipsis>
-        <n-text class="list-text">
+        <n-text class="list-text" :depth="2">
           {{ props.componentData.chartConfig.title }}
         </n-text>
       </n-ellipsis>
@@ -107,7 +107,7 @@ $textSize: 10px;
     @include hover-border-color('hover-border-color');
   }
   .list-text {
-    padding-left: 10px;
+    padding-left: 6px;
     font-size: $textSize;
   }
 }