perf: 优化图标展示，修复 dataset 的问题（我TM就不该相信这个半成品），优化性能监听

src/hooks/useChartDataFetch.hook.ts

@@ -62,16 +62,15 @@ export const useChartDataFetch = (
           if (res && res.data) {
             try {
               const filter = targetComponent.filter
+              // eCharts 组件配合 vChart 库更新方式
+              if (chartFrame === ChartFrameEnum.ECHARTS) {
+                if (vChartRef.value) {
+                  vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
+                }
+              }
               // 更新回调函数
               if (updateCallback) {
                 updateCallback(newFunctionHandle(res.data, filter))
-              } else {
-                // eCharts 组件配合 vChart 库更新方式
-                if (chartFrame === ChartFrameEnum.ECHARTS) {
-                  if (vChartRef.value) {
-                    vChartRef.value.setOption({ dataset: newFunctionHandle(res.data, filter) })
-                  }
-                }
               }
             } catch (error) {
               console.error(error)

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -6,6 +6,15 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
+export const seriesItem = {
+  type: 'bar',
+  barWidth: null,
+  itemStyle: {
+    color: null,
+    borderRadius: 0
+  }
+}
+
 export const option = {
   tooltip: {
     show: true,
@@ -27,24 +36,7 @@ export const option = {
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0
-      }
-    },
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0
-      }
-    }
-  ]
+  series: [seriesItem, seriesItem]
 }
 
 export default class Config extends publicConfig implements CreateComponentType {

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,25 +1,29 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
-import { includes } from './config'
+import config, { includes, seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartDataFetch } from '@/hooks'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-} from 'echarts/components'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -31,23 +35,39 @@ const props = defineProps({
     required: true
   },
   chartConfig: {
-    type: Object as PropType<CreateComponentType>,
+    type: Object as PropType<config>,
     required: true
   }
 })
 
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-])
+use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
 
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData.dimensions.length !== oldData.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(seriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Bars/BarCrossrange/config.ts

@@ -6,50 +6,40 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
+export const seriesItem = {
+  type: 'bar',
+  barWidth: null,
+  itemStyle: {
+    color: null,
+    borderRadius: 0
+  }
+}
+
 export const option = {
   tooltip: {
     show: true,
     trigger: 'axis',
     axisPointer: {
       show: true,
-      type: 'shadow',
-    },
+      type: 'shadow'
+    }
   },
   legend: {
-    show: true,
+    show: true
   },
   xAxis: {
     show: true,
     type: 'value',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   },
   yAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   dataset: { ...dataJson },
-  series: [
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0,
-      },
-    },
-    {
-      type: 'bar',
-      barWidth: null,
-      itemStyle: {
-        color: null,
-        borderRadius: 0,
-      },
-    },
-  ],
+  series: [seriesItem, seriesItem]
 }
 
-export default class Config extends publicConfig
-  implements CreateComponentType {
+export default class Config extends publicConfig implements CreateComponentType {
   public key = BarCrossrangeConfig.key
   public chartConfig = cloneDeep(BarCrossrangeConfig)
   // 图表配置项

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -1,24 +1,28 @@
 <template>
-  <v-chart ref="vChartRef" :theme="themeColor" :option="option" :manual-update="isPreview()" autoresize></v-chart>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { ref, nextTick, computed, watch, PropType } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
-import config, { includes } from './config'
+import config, { includes, seriesItem } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { isPreview } from '@/utils'
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-} from 'echarts/components'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -35,18 +39,34 @@ const props = defineProps({
   }
 })
 
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  BarChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
+use([DatasetComponent, CanvasRenderer, BarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
 
 const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData?.dimensions.length !== oldData?.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(seriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
+      })
+    }
+  },
+  {
+    deep: false
+  }
+)
+
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -6,6 +6,18 @@ import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
+export const seriesItem = {
+  type: 'line',
+  lineStyle: {
+    type: 'solid',
+    width: 3,
+    itemStyle: {
+      color: null,
+      borderRadius: 0
+    }
+  }
+}
+
 export const option = {
   tooltip: {
     show: true,
@@ -19,43 +31,17 @@ export const option = {
   },
   xAxis: {
     show: true,
-    type: 'category',
+    type: 'category'
   },
   yAxis: {
     show: true,
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
-    {
-      type: 'line',
-      lineStyle: {
-        type: 'solid',
-        width: 3,
-        color: {
-          type: 'linear',
-          colorStops: [
-            {
-              offset: 0,
-              color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
-            }
-          ],
-          globalCoord: false // 缺省为 false
-        },
-        shadowColor: chartColorsSearch[defaultTheme][2],
-        shadowBlur: 10,
-        shadowOffsetY: 20
-      },
-    }
-  ]
+  series: [seriesItem, seriesItem]
 }
 
-export default class Config extends publicConfig
-  implements CreateComponentType {
+export default class Config extends publicConfig implements CreateComponentType {
   public key: string = LineCommonConfig.key
   public chartConfig = LineCommonConfig
   // 图表配置项

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

@@ -6,20 +6,6 @@
     :expanded="true"
   >
     <SettingItemBox name="线条">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.lineStyle.color.colorStops[0].color"
-       ></n-color-picker>
-      </SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.lineStyle.color.colorStops[1].color"
-       ></n-color-picker>
-      </SettingItem>
       <SettingItem name="宽度">
         <n-input-number
           v-model:value="item.lineStyle.width"
@@ -37,26 +23,6 @@
        ></n-select>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="阴影" :alone="true">
-      <SettingItem name="颜色">
-        <n-color-picker
-          size="small"
-          :modes="['hex']"
-          v-model:value="item.lineStyle.shadowColor"
-      ></n-color-picker>
-      </SettingItem>
-      
-    </SettingItemBox>
-    <SettingItemBox name="设置">
-     <SettingItem name="阴影">
-        <n-button
-          size="small"
-          @click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
-        >
-          去除阴影
-        </n-button>
-      </SettingItem>
-    </SettingItemBox>
   </CollapseItem>
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData" :in-chart="true"></global-setting>

src/packages/components/Charts/Lines/LineCommon/data.json

@@ -1,33 +1,40 @@
 {
-  "dimensions": ["product", "data1"],
+  "dimensions": ["product", "data1", "data2"],
   "source": [
     {
       "product": "Mon",
-      "data1": 120
+      "data1": 120,
+      "data2": 130
     },
     {
       "product": "Tue",
-      "data1": 200
+      "data1": 200,
+      "data2": 130
     },
     {
       "product": "Wed",
-      "data1": 150
+      "data1": 150,
+      "data2": 312
     },
     {
       "product": "Thu",
-      "data1": 80
+      "data1": 80,
+      "data2": 268
     },
     {
       "product": "Fri",
-      "data1": 70
+      "data1": 70,
+      "data2": 155
     },
     {
       "product": "Sat",
-      "data1": 110
+      "data1": 110,
+      "data2": 117
     },
     {
       "product": "Sun",
-      "data1": 130
+      "data1": 130,
+      "data2": 160
     }
   ]
 }

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

@@ -1,26 +1,29 @@
 <template>
-  <v-chart 
-    ref="vChartRef" 
-    :theme="themeColor" 
-    :option="option.value" 
-    :manual-update="isPreview()" 
-    autoresize>
+  <v-chart
+    ref="vChartRef"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+  >
   </v-chart>
 </template>
 
 <script setup lang="ts">
-import { PropType, watch, reactive } from 'vue';
+import { PropType, computed, watch, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
-import config, { includes } from './config'
+import config, { includes, seriesItem } from './config'
 import { mergeTheme } from '@/packages/public/chart'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
 import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -37,41 +40,34 @@ const props = defineProps({
   }
 })
 
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-])
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 
-const chartEditStore = useChartEditStore()
-const option = reactive({
-  value: {}
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
-// 初始化与渐变色处理
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!isPreview()) {
-    const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
-    props.chartConfig.option.series.forEach((value: any) => {
-      value.lineStyle.shadowColor = themeColor[2]
-      value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
-        v.color = themeColor[i]
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData, oldData) => {
+    if (newData?.dimensions.length !== oldData?.dimensions.length) {
+      const seriesArr = []
+      for (let i = 0; i < newData.dimensions.length - 1; i++) {
+        seriesArr.push(seriesItem)
+      }
+      replaceMergeArr.value = ['series']
+      props.chartConfig.option.series = seriesArr
+      nextTick(() => {
+        replaceMergeArr.value = []
       })
-    })
+    }
+  },
+  {
+    deep: false
   }
-  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  props.chartConfig.option = option.value
-}, {
-  immediate: true,
-})
-
-
-watch(() => props.chartConfig.option.dataset, () => {
-  option.value = props.chartConfig.option
-})
+)
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
-</script>
+</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

@@ -1,10 +1,5 @@
 <template>
-  <v-chart 
-    ref="vChartRef" 
-    :theme="themeColor" 
-    :option="option.value" 
-    :manual-update="isPreview()" 
-    autoresize>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
   </v-chart>
 </template>
 
@@ -37,14 +32,7 @@ const props = defineProps({
   }
 })
 
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
@@ -52,32 +40,41 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!isPreview()) {
-    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)'
-        }
-      ])
-    })
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    if (!isPreview()) {
+      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)'
+          }
+        ])
+      })
+    }
+    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+    props.chartConfig.option = option.value
+  },
+  {
+    immediate: true
   }
-  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  props.chartConfig.option = option.value
-}, {
-  immediate: true
-})
+)
 
-
-watch(() => props.chartConfig.option.dataset, () => {
-  option.value = props.chartConfig.option
-})
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  },
+  {
+    deep: false
+  }
+)
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </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

@@ -31,14 +31,7 @@ const props = defineProps({
   }
 })
 
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
@@ -46,31 +39,38 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-  if (!isPreview()) {
-    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)'
-        }
-      ])
-    })
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    if (!isPreview()) {
+      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.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+    props.chartConfig.option = option.value
+  },
+  {
+    immediate: true
   }
-  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  props.chartConfig.option = option.value
-}, {
-  immediate: true
-})
+)
 
-watch(() => props.chartConfig.option.dataset, () => {
-  option.value = props.chartConfig.option
-})
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  }
+)
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

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

@@ -0,0 +1,63 @@
+import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
+import { LineLinearSingleConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './data.json'
+
+export const includes = ['legend', 'xAxis', 'yAxis']
+
+export const option = {
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line'
+    }
+  },
+  legend: {
+    show: true
+  },
+  xAxis: {
+    show: true,
+    type: 'category',
+  },
+  yAxis: {
+    show: true,
+    type: 'value'
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'line',
+      lineStyle: {
+        type: 'solid',
+        width: 3,
+        color: {
+          type: 'linear',
+          colorStops: [
+            {
+              offset: 0,
+              color: chartColorsSearch[defaultTheme][0] // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: chartColorsSearch[defaultTheme][1] // 100% 处的颜色
+            }
+          ],
+          globalCoord: false // 缺省为 false
+        },
+        shadowColor: chartColorsSearch[defaultTheme][2],
+        shadowBlur: 10,
+        shadowOffsetY: 20
+      },
+    }
+  ]
+}
+
+export default class Config extends publicConfig
+  implements CreateComponentType {
+  public key: string = LineLinearSingleConfig.key
+  public chartConfig = LineLinearSingleConfig
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

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

@@ -0,0 +1,86 @@
+<template>
+  <CollapseItem
+    v-for="(item, index) in seriesList"
+    :key="index"
+    :name="`样式`"
+    :expanded="true"
+  >
+    <SettingItemBox name="线条">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.color.colorStops[0].color"
+       ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.color.colorStops[1].color"
+       ></n-color-picker>
+      </SettingItem>
+      <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>
+    <SettingItemBox name="阴影" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="item.lineStyle.shadowColor"
+      ></n-color-picker>
+      </SettingItem>
+      
+    </SettingItemBox>
+    <SettingItemBox name="设置">
+     <SettingItem name="阴影">
+        <n-button
+          size="small"
+          @click="item.lineStyle.shadowColor = 'rgba(0, 0, 0, 0)'"
+        >
+          去除阴影
+        </n-button>
+      </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/LineLinearSingle/data.json

@@ -0,0 +1,33 @@
+{
+  "dimensions": ["product", "data1"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120
+    },
+    {
+      "product": "Tue",
+      "data1": 200
+    },
+    {
+      "product": "Wed",
+      "data1": 150
+    },
+    {
+      "product": "Thu",
+      "data1": 80
+    },
+    {
+      "product": "Fri",
+      "data1": 70
+    },
+    {
+      "product": "Sat",
+      "data1": 110
+    },
+    {
+      "product": "Sun",
+      "data1": 130
+    }
+  ]
+}

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

@@ -0,0 +1,15 @@
+import image from '@/assets/images/chart/charts/line_linear_single.png'
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const LineLinearSingleConfig: ConfigType = {
+  key: 'LineLinearSingle',
+  chartKey: 'VLineLinearSingle',
+  conKey: 'VCLineLinearSingle',
+  title: '单折线渐变图',
+  category: ChatCategoryEnum.LINE,
+  categoryName: ChatCategoryEnumName.LINE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image
+}

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

@@ -0,0 +1,74 @@
+<template>
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { PropType, watch, reactive } from 'vue'
+import VChart from 'vue-echarts'
+import { use } 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 { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { useChartDataFetch } from '@/hooks'
+import { isPreview } from '@/utils'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const chartEditStore = useChartEditStore()
+const option = reactive({
+  value: {}
+})
+
+// 初始化与渐变色处理
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    if (!isPreview()) {
+      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
+      props.chartConfig.option.series.forEach((value: any) => {
+        value.lineStyle.shadowColor = themeColor[2]
+        value.lineStyle.color.colorStops.forEach((v: { color: string }, i: number) => {
+          v.color = themeColor[i]
+        })
+      })
+    }
+    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+    props.chartConfig.option = option.value
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.value = props.chartConfig.option
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

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

@@ -1,5 +1,6 @@
 import { LineCommonConfig } from './LineCommon/index'
+import { LineLinearSingleConfig } from './LineLinearSingle/index'
 import { LineGradientSingleConfig } from './LineGradientSingle/index'
 import { LineGradientsConfig } from './LineGradients/index'
 
-export default [LineCommonConfig, LineGradientSingleConfig, LineGradientsConfig]
+export default [LineCommonConfig, LineLinearSingleConfig, LineGradientSingleConfig, LineGradientsConfig]

src/packages/components/Charts/Maps/MapChina/index.vue

@@ -82,7 +82,8 @@ watch(
     dataSetHandle(newData)
   },
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

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

@@ -58,6 +58,9 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
     option.dataset = toNumber(newData, 2)
+  },
+  {
+    deep: false
   }
 )
 // 预览更新

src/packages/components/Charts/Mores/Radar/data.json

@@ -9,12 +9,12 @@
   ],
   "seriesData": [
     {
-      "value": [4200, 3000, 20000, 35000, 50000, 18000],
-      "name": "data1"
+      "name": "data1",
+      "value": [4200, 3000, 20000, 35000, 50000, 18000]
     },
     {
-      "value": [5000, 14000, 28000, 26000, 42000, 21000],
-      "name": "data2"
+      "name": "data2",
+      "value": [5000, 14000, 28000, 26000, 42000, 21000]
     }
   ]
 }

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

@@ -59,7 +59,7 @@ watch(
     dataSetHandle(newData)
   },
   {
-    immediate: true
+    deep: false
   }
 )
 

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

@@ -79,7 +79,8 @@ watch(
     option.value = props.chartConfig.option
   },
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -50,7 +50,8 @@ watch(
   () => props.chartConfig.option.dataset,
   newData => dataHandle(newData),
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

src/packages/components/Decorates/Mores/Number/index.vue

@@ -6,8 +6,13 @@
       </span>
     </template>
     <span :style="`color:${numberColor};font-size:${numberSize}px`">
-      <n-number-animation :from="option.from" :to="option.dataset" :duration="dur * 1000" :show-separator="showSeparator"
-        :precision="precision"></n-number-animation>
+      <n-number-animation
+        :from="option.from"
+        :to="option.dataset"
+        :duration="dur * 1000"
+        :show-separator="showSeparator"
+        :precision="precision"
+      ></n-number-animation>
     </span>
     <template #suffix>
       <span :style="`color:${suffixColor};font-size:${numberSize}px`">
@@ -26,25 +31,16 @@ import { useChartDataFetch } from '@/hooks'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
+    required: true
+  }
 })
 const option = reactive({
   from: 0,
-  dataset: 0,
+  dataset: 0
 })
 const { w, h } = toRefs(props.chartConfig.attr)
-let {
-  dur,
-  showSeparator,
-  prefixText,
-  prefixColor,
-  suffixText,
-  suffixColor,
-  precision,
-  numberSize,
-  numberColor,
-} = toRefs(props.chartConfig.option)
+let { dur, showSeparator, prefixText, prefixColor, suffixText, suffixColor, precision, numberSize, numberColor } =
+  toRefs(props.chartConfig.option)
 
 const updateNumber = (newData: number) => {
   // 原来的目标值作为新的数字动画的起始值
@@ -56,14 +52,19 @@ watch(
   () => props.chartConfig.option.from,
   () => {
     option.from = props.chartConfig.option.from
-  }, { immediate: true }
+  },
+  { immediate: true }
 )
 
 watch(
   () => props.chartConfig.option.dataset,
   () => {
     option.dataset = props.chartConfig.option.dataset
-  }, { immediate: true }
+  },
+  {
+    immediate: true,
+    deep: false
+  }
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)

src/packages/components/Informations/Mores/Image/index.vue

@@ -46,7 +46,8 @@ watch(
     option.dataset = newData
   },
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -24,7 +24,7 @@ import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption  } from './config'
+import { option as configOption } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -57,8 +57,10 @@ watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
     option.dataset = newData
-  }, {
-    immediate: true
+  },
+  {
+    immediate: true,
+    deep: false
   }
 )
 

src/packages/components/Informations/Texts/TextGradient/index.vue

@@ -32,7 +32,8 @@ watch(
     option.dataset = newData
   },
   {
-    immediate: true
+    immediate: true,
+    deep: false
   }
 )
 

src/packages/components/Tables/Tables/TableList/index.vue

@@ -169,6 +169,9 @@ watch(
   () => props.chartConfig.option.dataset,
   () => {
     onRestart()
+  },
+  {
+    deep: false
   }
 )
 

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -79,7 +79,7 @@
     <!-- 骨架图 -->
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
     <!-- 请求配置model -->
-    <chart-data-request v-model:modelShow="requestShow"></chart-data-request>
+    <chart-data-request v-model:modelShow="requestShow" @sendHandle="sendHandle"></chart-data-request>
   </div>
 </template>
 

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -33,7 +33,7 @@ import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
 import { RequestTargetConfig } from './components/RequestTargetConfig'
 
-const emit = defineEmits(['update:modelShow'])
+const emit = defineEmits(['update:modelShow', 'sendHandle'])
 
 const { targetData } = useTargetData()
 // 解构基础配置
@@ -50,6 +50,7 @@ defineProps({
 
 const closeHandle = () => {
   emit('update:modelShow', false)
+  emit('sendHandle')
 }
 </script>