feat(src/packages): 图表双折线支持导入多个数据源

@@ -7,11 +7,38 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
-
+export const seriesItem = {
+  type: 'line',
+  smooth: false,
+  symbolSize: 5, //设定实心点的大小
+  label: {
+    show: true,
+    position: 'top',
+    color: '#fff',
+    fontSize: 12
+  },
+  lineStyle: {
+    width: 3,
+    type: 'solid'
+  },
+  areaStyle: {
+    opacity: 0.8,
+    color: new graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: chartColorsSearch[defaultTheme][3]
+      },
+      {
+        offset: 1,
+        color: 'rgba(0,0,0,0)'
+      }
+    ])
+  }
+}
 // 其它配置项比如新增（动画）
 const otherConfig = {
   // 轮播动画
-  isCarousel: false,
+  isCarousel: false
 }
 const option = {
   ...otherConfig,
@@ -31,63 +58,7 @@ const option = {
     type: 'value'
   },
   dataset: { ...dataJson },
-  series: [
-    {
-      type: 'line',
-      smooth: false,
-      symbolSize: 5, //设定实心点的大小
-      label: {
-        show: true,
-        position: 'top',
-        color: '#fff',
-        fontSize: 12
-      },
-      lineStyle: {
-        width: 3,
-        type: 'solid'
-      },
-      areaStyle: {
-        opacity: 0.8,
-        color: new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColorsSearch[defaultTheme][3]
-          },
-          {
-            offset: 1,
-            color: 'rgba(0,0,0,0)'
-          }
-        ])
-      }
-    },
-    {
-      type: 'line',
-      smooth: false,
-      label: {
-        show: true,
-        position: 'top',
-        color: '#fff',
-        fontSize: 12
-      },
-      lineStyle: {
-        width: 3,
-        type: 'solid'
-      },
-      areaStyle: {
-        opacity: 0.8,
-        color: new graphic.LinearGradient(0, 0, 0, 1, [
-          {
-            offset: 0,
-            color: chartColorsSearch[defaultTheme][4]
-          },
-          {
-            offset: 1,
-            color: 'rgba(0,0,0,0)'
-          }
-        ])
-      }
-    }
-  ]
+  series: [seriesItem, seriesItem]
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -12,13 +12,13 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, PropType, onMounted } from 'vue'
+import { reactive, watch, PropType, onMounted, ref, nextTick } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } 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'
@@ -27,6 +27,7 @@ import { useChartDataFetch } from '@/hooks'
 import { isPreview, colorGradientCustomMerge } from '@/utils'
 import dataJson from './data.json'
 import { useFullScreen } from '../../utls/fullScreen'
+import isObject from 'lodash/isObject'
 
 const props = defineProps({
   themeSetting: {
@@ -106,12 +107,12 @@ watch(
   }
 )
 
-watch(
-  () => props.chartConfig.option.dataset,
-  () => {
-    option.value = props.chartConfig.option
-  }
-)
+// watch(
+//   () => props.chartConfig.option.dataset,
+//   () => {
+//     option.value = props.chartConfig.option
+//   }
+// )
 let seriesDataNum = -1
 let seriesDataMaxLength = 0
 let intervalInstance: any = null
@@ -194,7 +195,36 @@ const updateVChart = (newData: any) => {
   })
 }
 
-const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
+const replaceMergeArr = ref<string[]>()
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        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 = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
   // addPieInterval(newData)
   updateVChart(newData)
 })

@@ -11,7 +11,7 @@ export const hideAsideComponentsObj = {
   Lines: [
     'VLineCommon', //折线图
     'VLineGradients', //双折线渐变面积图
-    'ExternalVCOverrideLineGradients' //重写双折线渐变面积图
+    // 'ExternalVCOverrideLineGradients' //重写双折线渐变面积图
   ],
   Pies: [
     'VPieCircle' //饼图-环形
@@ -22,7 +22,10 @@ export const hideAsideComponentsObj = {
   Mores: [
     'VProcess', //NaiveUI-进度
     'VImage', //图片
-    'VImageCarousel' //轮播图
+    'VImageCarousel', //轮播图
+    'VVideo', //视频
+    'VIframe', //远程网页
+    'VWaterPolo' //水球图
   ],
   Texts: [
     'VTextGradient', //渐变文字
@@ -35,7 +38,7 @@ export const hideAsideComponentsObj = {
     'VLineLinearSingle', //单折线渐变图
     'VLineGradientSingle', //单折线渐变面积图
     'VLineGradients', //双折线渐变面积图
-    'ExternalVCOverrideLineGradients', //重写双折线渐变面积图
+    // 'ExternalVCOverrideLineGradients', //重写双折线渐变面积图
     'VPieCircle', //饼图-环形
     'VMapBase', //地图(可选省份)
     'VProcess', //NaiveUI-进度
@@ -45,6 +48,7 @@ export const hideAsideComponentsObj = {
     'VVideo', //视频
     'VIframe', //远程网页
     'VImage', //图片
-    'VImageCarousel' //轮播图
+    'VImageCarousel', //轮播图
+    'VWaterPolo' //水球图
   ]
 }