fix: 修改线条的 dataset 问题

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

@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { BarCrossrangeConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -26,33 +27,30 @@ export const option = {
     show: true,
     type: 'category',
   },
+  dataset: { ...dataJson },
   series: [
     {
-      name: 'data1',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0,
       },
-      data: [120, 200, 150, 80, 70, 110, 130],
     },
     {
-      name: 'data2',
       type: 'bar',
       barWidth: null,
       itemStyle: {
         color: null,
         borderRadius: 0,
       },
-      data: [130, 130, 312, 268, 155, 117, 160],
     },
   ],
 }
 
 export default class Config extends publicConfig
   implements CreateComponentType {
-  public key: string = BarCrossrangeConfig.key
+  public key = BarCrossrangeConfig.key
   public chartConfig = cloneDeep(BarCrossrangeConfig)
   // 图表配置项
   public option = echartOptionProfixHandle(option, includes)

src/packages/components/Charts/Bars/BarCrossrange/data.json

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

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

@@ -5,12 +5,13 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
+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 {
+  DatasetComponent,
   GridComponent,
   TooltipComponent,
   LegendComponent,
@@ -32,6 +33,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   BarChart,
   GridComponent,
@@ -43,5 +45,3 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>
-
-<style lang="scss" scoped></style>

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

@@ -2,6 +2,7 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { LineCommonConfig } 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']
 
@@ -19,15 +20,14 @@ export const option = {
   xAxis: {
     show: true,
     type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   yAxis: {
     show: true,
     type: 'value'
   },
+  dataset: { ...dataJson },
   series: [
     {
-      name: 'data1',
       type: 'line',
       lineStyle: {
         type: 'solid',
@@ -50,7 +50,6 @@ export const option = {
         shadowBlur: 10,
         shadowOffsetY: 20
       },
-      data: [120, 200, 150, 80, 70, 110, 130]
     }
   ]
 }

src/packages/components/Charts/Lines/LineCommon/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/LineCommon/index.vue

@@ -10,9 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from  '@/settings/chartThemes/index'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -30,6 +30,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   LineChart,
   GridComponent,
@@ -44,18 +45,23 @@ const option = reactive({
 
 // 初始化与渐变色处理
 watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-    if (!document.location.hash.includes('preview')) {
-      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]
-        })
+  if (!document.location.hash.includes('preview')) {
+    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.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  }, 
-  {
-    immediate: true
-  })
+  }
+}, {
+  immediate: true,
+})
+
+watch(() => props.chartConfig.option.dataset, () => {
+  option.options = props.chartConfig.option
+}, {
+  deep: true
+})
 </script>

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

@@ -3,6 +3,7 @@ import { LineGradientSingleConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -20,15 +21,14 @@ const options = {
   xAxis: {
     show: true,
     type: 'category',
-    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
   },
   yAxis: {
     show: true,
     type: 'value'
   },
+  dataset: { ...dataJson },
   series: [
     {
-      name: 'data1',
       type: 'line',
       smooth: false,
       lineStyle: {
@@ -49,7 +49,6 @@ const options = {
           }
         ])
       },
-      data: [120, 200, 150, 80, 70, 110, 130]
     }
   ]
 }

src/packages/components/Charts/Lines/LineGradientSingle/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/LineGradientSingle/index.vue

@@ -10,9 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from  '@/settings/chartThemes/index'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -30,6 +30,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   LineChart,
   GridComponent,
@@ -43,26 +44,31 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-    if (!document.location.hash.includes('preview')) {
-      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)'
-          }
-        ])
-        themeColor[index]
-      })
-    }
-    option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  }, 
-  {
-    immediate: true
-  })
+watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+  if (!document.location.hash.includes('preview')) {
+    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)'
+        }
+      ])
+      themeColor[index]
+    })
+  }
+  option.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+}, {
+  immediate: true
+})
+
+watch(() => props.chartConfig.option.dataset, () => {
+  option.options = props.chartConfig.option
+}, {
+  deep: true
+})
 </script>

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

@@ -3,6 +3,7 @@ import { LineGradientsConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import { graphic } from 'echarts/core'
 import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
+import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis']
 
@@ -26,9 +27,9 @@ const option = {
     show: true,
     type: 'value'
   },
+  dataset: { ...dataJson },
   series: [
     {
-      name: 'data1',
       type: 'line',
       smooth: false,
       lineStyle: {
@@ -49,10 +50,8 @@ const option = {
           }
         ])
       },
-      data: [120, 200, 150, 80, 70, 110, 130]
     },
     {
-      name: 'data2',
       type: 'line',
       smooth: false,
       lineStyle: {
@@ -73,7 +72,6 @@ const option = {
           }
         ])
       },
-      data: [130, 130, 312, 268, 155, 117, 160]
     }
   ]
 }

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

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

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

@@ -10,9 +10,9 @@ import { CanvasRenderer } from 'echarts/renderers'
 import { LineChart } from 'echarts/charts'
 import config, { includes } from './config'
 import { mergeTheme } from '@/packages/public/chart'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from  '@/settings/chartThemes/index'
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -30,6 +30,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   LineChart,
   GridComponent,
@@ -43,25 +44,30 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(()=>chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
-    if (!document.location.hash.includes('preview')) {
-      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.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
-  }, 
-  {
-    immediate: true
-  })
+watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+  if (!document.location.hash.includes('preview')) {
+    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.options = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+}, {
+  immediate: true
+})
+
+watch(() => props.chartConfig.option.dataset, () => {
+  option.options = props.chartConfig.option
+}, {
+  deep: true
+})
 </script>

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -1,6 +1,7 @@
 import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { PieCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
+import dataJson from './data.json'
 
 export const includes = ['legend']
 
@@ -12,9 +13,9 @@ const option = {
   legend: {
     show: true,
   },
+  dataset: { ...dataJson },
   series: [
     {
-      name: 'Access From',
       type: 'pie',
       radius: ['40%', '65%'],
       center: ['50%', '60%'],
@@ -38,14 +39,7 @@ const option = {
       },
       labelLine: {
         show: false
-      },
-      data: [
-        { value: 1048, name: 'Search Engine' },
-        { value: 735, name: 'Direct' },
-        { value: 580, name: 'Email' },
-        { value: 484, name: 'Union Ads' },
-        { value: 300, name: 'Video Ads' }
-      ]
+      }
     }
   ]
 }

src/packages/components/Charts/Pies/PieCommon/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/Pies/PieCommon/index.vue

@@ -5,12 +5,13 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue'
 import VChart from 'vue-echarts'
-import { use, graphic } from 'echarts/core'
+import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { PieChart } from 'echarts/charts'
 import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import {
+  DatasetComponent,
   GridComponent,
   TooltipComponent,
   LegendComponent,
@@ -32,6 +33,7 @@ const props = defineProps({
 })
 
 use([
+  DatasetComponent,
   CanvasRenderer,
   PieChart,
   GridComponent,

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

@@ -36,7 +36,7 @@
       </n-timeline-item>
       <n-timeline-item type="success" :title="TimelineTitleEnum.CONTENT">
         <n-space vertical>
-          <n-text prefix="bar" depth="3">数据格式需要符合 ECharts-setdata 规范</n-text>
+          <n-text depth="3">数据需要符合 ECharts-setdata 规范</n-text>
           <n-space class="source-btn-box">
             <n-upload
               v-model:file-list="uploadFileListRef"