feat: supply option panel of gloabl and bar chart setting

src/packages/chartConfiguration/vcharts/legends.ts

@@ -45,3 +45,55 @@ export const legendsConfig = {
     }
   ]
 }
+
+export const fontStyleConfig = {
+  // 字重
+  fontWeight: [
+    {
+      label: '100',
+      value: 100
+    },
+    {
+      label: '200',
+      value: 200
+    },
+    {
+      label: '300',
+      value: 300
+    },
+    {
+      label: '400',
+      value: 400
+    },
+    {
+      label: '500',
+      value: 500
+    },
+    {
+      label: '600',
+      value: 600
+    },
+    {
+      label: '正常',
+      value: "normal"
+    },
+    {
+      label: '加粗',
+      value: "bold"
+    }
+  ],
+  fontFamily: [
+    {
+      label: '宋体',
+      value: 'SimSun'
+    },
+    {
+      label: '黑体',
+      value: 'SimHei'
+    },
+    {
+      label: '楷体',
+      value: '楷体'
+    }
+  ]
+}

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

@@ -4,16 +4,39 @@ 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'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IBarOption } from '../../index.d'
 
-export const includes = ['legends']
-export const option: ISpec & { dataset?: any } = {
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
   type: 'bar',
   dataset: data,
   stack: true,
   xField: ['year', 'type'],
   yField: 'value',
-  seriesField: 'type'
+  seriesField: 'type',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarCommonConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -1,11 +1,13 @@
 <template>
   <!-- vCharts 全局设置 -->
   <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 
 defineProps({

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

@@ -4,16 +4,39 @@ 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'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { IBarOption } from '../../index.d'
 
-export const includes = ['legends']
-export const option: ISpec & { dataset?: any } = {
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
   type: 'bar',
   dataset: data,
   xField: 'State',
   yField: 'Population',
   seriesField: 'Age',
-  stack: true
+  stack: true,
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarStackConfig.category,
+  xAxis: {
+    name: 'x轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...axisThemeJson,
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style,
+        lineDash: [3, 3]
+      }
+    }
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -1,11 +1,13 @@
 <template>
   <!-- vCharts 全局设置 -->
   <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+  <Axis :axis="optionData.xAxis"></Axis>
+  <Axis :axis="optionData.yAxis"></Axis>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import { VChartGlobalSetting } from '@/components/Pages/VChartItemSetting'
+import { VChartGlobalSetting, Axis } from '@/components/Pages/VChartItemSetting'
 import { vChartGlobalThemeJsonType } from '@/settings/vchartThemes/index'
 
 defineProps({

src/packages/components/VChart/index.d.ts

@@ -1,3 +1,7 @@
+import { IBarChartSpec } from '@visactor/vchart'
+import { ICartesianAxisCommonSpec } from '@visactor/vchart/esm/component/axis'
+
+
 export enum ChatCategoryEnum {
   BAR = 'Bars',
 }
@@ -5,3 +9,18 @@ export enum ChatCategoryEnum {
 export enum ChatCategoryEnumName {
   BAR = '柱状图',
 }
+
+export interface IBarOption extends Omit<IBarChartSpec, 'axes'> {
+  category: ChatCategoryEnum.BAR
+  type: 'bar'
+  xAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+  yAxis?: {
+    name: string
+  } & ICartesianAxisCommonSpec
+}
+
+// todo
+// export type IOption = IBarOption | ILineOption ....
+export type IOption = IBarOption 

src/packages/index.d.ts

@@ -1,6 +1,7 @@
 import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import type { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/VChart/index.d'
 
 export enum ChartFrameEnum {
   // 支持 dataset 的 echarts 框架
@@ -26,11 +27,11 @@ export type ConfigType = {
   // 标题
   title: string
   // 分类
-  category: string
+  category: ChatCategoryEnum
   // 分类名称
-  categoryName: string
+  categoryName: ChatCategoryEnumName
   // 所属包
-  package: string
+  package: PackagesCategoryEnum
   // 归类
   chartFrame?: ChartFrameEnum
   // 预览图