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

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>