feat: 初始化图表整体流程

src/packages/components/VChart/Bars/VChartBarCommon/config.ts

@@ -1,15 +1,24 @@
 import { PublicConfigClass } from '@/packages/public'
 import { VChartBarCommonConfig } from './index'
 import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
 import cloneDeep from 'lodash/cloneDeep'
+import { type ISpec } from '@visactor/vchart'
 
-export const option = {
-  
+export const includes = ['legends']
+export const option: ISpec & { dataset?: any } = {
+  type: 'bar',
+  dataset: data,
+  stack: true,
+  xField: 'type',
+  yField: 'value',
+  seriesField: 'country'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = VChartBarCommonConfig.key
   public chartConfig = cloneDeep(VChartBarCommonConfig)
   // 图表配置项
-  public option = cloneDeep(option)
+  public option = vChartOptionPrefixHandle(option, includes)
 }

src/packages/components/VChart/Bars/VChartBarCommon/config.vue

@@ -1,3 +1,17 @@
-<template></template>
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+</template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
+import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<vChartGlobalThemeJsonType>,
+    required: true
+  }
+})
+</script>

src/packages/components/VChart/Bars/VChartBarCommon/data.json

@@ -0,0 +1,22 @@
+{
+  "values": [
+    { "type": "Nail polish", "country": "Africa", "value": 4229 },
+    { "type": "Nail polish", "country": "EU", "value": 4376 },
+    { "type": "Eyebrow pencil", "country": "Africa", "value": 3932 },
+    { "type": "Eyebrow pencil", "country": "EU", "value": 3987 },
+    { "type": "Rouge", "country": "Africa", "value": 5221 },
+    { "type": "Rouge", "country": "EU", "value": 3574 },
+    { "type": "Lipstick", "country": "Africa", "value": 9256 },
+    { "type": "Lipstick", "country": "EU", "value": 4376 },
+    { "type": "Eyeshadows", "country": "Africa", "value": 3308 },
+    { "type": "Eyeshadows", "country": "EU", "value": 4572 },
+    { "type": "Eyeliner", "country": "Africa", "value": 5432 },
+    { "type": "Eyeliner", "country": "EU", "value": 3417 },
+    { "type": "Foundation", "country": "Africa", "value": 13701 },
+    { "type": "Foundation", "country": "EU", "value": 5231 },
+    { "type": "Lip gloss", "country": "Africa", "value": 4008 },
+    { "type": "Lip gloss", "country": "EU", "value": 4572 },
+    { "type": "Mascara", "country": "Africa", "value": 18712 },
+    { "type": "Mascara", "country": "EU", "value": 6134 }
+  ]
+}

src/packages/components/VChart/Bars/VChartBarCommon/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <GoVChart ref="vChartRef" :option="chartConfig.option"> </GoVChart>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { GoVChart } from '@/components/GoVChart'
+import { useChartDataFetch } from '@/hooks'
+import config from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  props.chartConfig.option.dataset = newData
+})
+</script>