feat: 修改组件展示，支持单个组件数据编辑

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

@@ -2,38 +2,51 @@ import { echartOptionProfixHandle, publicConfig } from '@/packages/public'
 import { BarCrossrangefig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
+import cloneDeep from 'lodash/cloneDeep'
 
-export default class Config extends publicConfig implements CreateComponentType {
-  public key: string = BarCrossrangefig.key
+export const includes = ['legend', 'xAxis', 'yAxis']
 
-  public chartData = omit(BarCrossrangefig, ['node'])
-
-  // 图表配置项
-  public option = echartOptionProfixHandle({
+const option = echartOptionProfixHandle(
+  {
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow'
       }
     },
+    legend: {
+      show: true,
+    },
     xAxis: {
+      show: true,
       type: 'value',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
     },
     yAxis: {
+      show: true,
       type: 'category'
     },
     series: [
       {
-        data: [120, 200, 150, 80, 70, 110, 130],
-        type: 'bar'
+        name: 'data1',
+        type: 'bar',
+        data: [120, 200, 150, 80, 70, 110, 130]
+      },
+      {
+        name: 'data2',
+        type: 'bar',
+        data: [130, 130, 312, 268, 155, 117, 160]
       }
     ]
-  })
+  },
+  includes
+)
 
-  // 设置坐标
-  public setPosition(x: number, y: number): void {
-    this.attr.x = x
-    this.attr.y = y
-  }
+export default class Config extends publicConfig
+  implements CreateComponentType {
+  public key: string = BarCrossrangefig.key
+  public chartConfig = omit(cloneDeep(BarCrossrangefig), ['node'])
+  // 图表配置项
+  public option = option
 }

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

@@ -8,13 +8,12 @@ import VChart from 'vue-echarts'
 import { use, graphic } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { BarChart } from 'echarts/charts'
-import merge from 'lodash/merge'
-import config from './config'
+import { mergeTheme } from '@/packages/public/chart'
+import config, { includes } from './config'
 import {
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 } from 'echarts/components'
 
 const props = defineProps({
@@ -26,7 +25,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  chartData: {
+  chartConfig: {
     type: Object as PropType<config>,
     required: true
   }
@@ -38,11 +37,10 @@ use([
   GridComponent,
   TooltipComponent,
   LegendComponent,
-  TitleComponent
 ])
 
 const option = computed(() => {
-  return merge(props.themeSetting, props.chartData.option)
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 </script>