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

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)