feat: 初始化图表整体流程

src/packages/chartConfiguration/vcharts/index.ts

@@ -0,0 +1 @@
+export * from './legends'

src/packages/chartConfiguration/vcharts/legends.ts

@@ -0,0 +1,47 @@
+export const legendsConfig = {
+  // 位置
+  orient: [
+    {
+      label: '顶部',
+      value: 'top'
+    },
+    {
+      label: '底部',
+      value: 'bottom'
+    },
+    {
+      label: '左侧',
+      value: 'left'
+    },
+    {
+      label: '右侧',
+      value: 'right'
+    }
+  ],
+  // 对齐方式
+  position: [
+    {
+      label: '起始',
+      value: 'start'
+    },
+    {
+      label: '居中',
+      value: 'middle'
+    },
+    {
+      label: '末尾',
+      value: 'end'
+    }
+  ],
+  // 每一项的图例位置
+  align: [
+    {
+      label: '居左',
+      value: 'left'
+    },
+    {
+      label: '居右',
+      value: 'right'
+    }
+  ]
+}

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

@@ -28,7 +28,7 @@ export const option = {
       type: 'shadow'
     }
   },
-xAxis: {
+  xAxis: {
     show: true,
     type: 'category'
   },

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>

src/packages/public/chart.ts

@@ -20,7 +20,7 @@ export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[])
  * @param option
  * @return option
  */
-export const echartOptionProfixHandle = (option: any, includes: string[]) => {
+export const echartOptionProfixHandle = (option: any, includes: string[] = []) => {
   option['backgroundColor'] = 'rgba(0,0,0,0)'
   return mergeTheme(option, globalThemeJson, includes)
 }

src/packages/public/vChart.ts

@@ -0,0 +1,24 @@
+import merge from 'lodash/merge'
+import pick from 'lodash/pick'
+import { vChartGlobalThemeJson } from '@/settings/vchartThemes/index'
+
+/**
+ * * 合并 color 和全局配置项
+ * @param option 配置
+ * @param themeSetting 设置
+ * @param excludes 排除元素
+ * @returns object
+ */
+export const mergeTheme = <T, U>(option: T, themeSetting: U, includes: string[]) => {
+  return (option = merge({}, pick(themeSetting, includes), option))
+}
+
+/**
+ * * vCharts option 统一前置处理
+ * @param option
+ * @return option
+ */
+export const vChartOptionPrefixHandle = (option: any, includes: string[] = []) => {
+  option['background'] = 'rgba(0,0,0,0)'
+  return mergeTheme(option, vChartGlobalThemeJson, includes)
+}