feat: 升级vchart版本，新增横向柱状图，新增配置项，修复配制不生效bug

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

@@ -3,9 +3,9 @@ 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 axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
-import { IBarOption } from '../../index.d'
+import { ChatCategoryEnum, IBarOption } from '../../index.d'
+import { merge, cloneDeep } from 'lodash'
 
 export const includes = ['legends', 'tooltip']
 export const option: IBarOption & { dataset?: any } = {
@@ -17,10 +17,17 @@ export const option: IBarOption & { dataset?: any } = {
   yField: ['value'],
   seriesField: 'type',
   // 业务配置（后续会被转换为图表spec)
-  category: VChartBarCommonConfig.category,
+  category: VChartBarCommonConfig.category as ChatCategoryEnum.BAR,
   xAxis: {
     name: 'x轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 10,
+          dy: 0
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       visible: false
@@ -28,12 +35,18 @@ export const option: IBarOption & { dataset?: any } = {
   },
   yAxis: {
     name: 'y轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 0,
+          dy: -10
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       style: {
-        ...axisThemeJson.grid.style,
-        lineDash: [3, 3]
+        ...axisThemeJson.grid.style
       }
     }
   }

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

@@ -0,0 +1,61 @@
+import { PublicConfigClass } from '@/packages/public'
+import { VChartBarCrossrangeConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import { vChartOptionPrefixHandle } from '@/packages/public/vChart'
+import data from './data.json'
+import axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
+import { ChatCategoryEnum, IBarOption } from '../../index.d'
+import { merge, cloneDeep } from 'lodash'
+
+export const includes = ['legends', 'tooltip']
+export const option: IBarOption & { dataset?: any } = {
+  // 图表配置
+  type: 'bar',
+  dataset: data,
+  stack: true,
+  xField: ['value'],
+  yField: ['year', 'type'],
+  seriesField: 'type',
+  // 业务配置（后续会被转换为图表spec)
+  category: VChartBarCrossrangeConfig.category as ChatCategoryEnum.BAR,
+  direction: 'horizontal',
+  xAxis: {
+    name: 'x轴',
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 10,
+          dy: 0
+        }
+      }
+    }) as any),
+    grid: {
+      ...axisThemeJson.grid,
+      visible: false
+    }
+  },
+  yAxis: {
+    name: 'y轴',
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 0,
+          dy: -10
+        }
+      }
+    }) as any),
+    grid: {
+      ...axisThemeJson.grid,
+      style: {
+        ...axisThemeJson.grid.style
+      }
+    }
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartBarCrossrangeConfig.key
+  public chartConfig = cloneDeep(VChartBarCrossrangeConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

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

@@ -0,0 +1,19 @@
+<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, Axis } 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/VChartBarCrossrange/data.json

@@ -0,0 +1,25 @@
+{
+  "values": [
+    { "type": "Autocracies", "year": "1930", "value": 129 },
+    { "type": "Autocracies", "year": "1940", "value": 133 },
+    { "type": "Autocracies", "year": "1950", "value": 130 },
+    { "type": "Autocracies", "year": "1960", "value": 126 },
+    { "type": "Autocracies", "year": "1970", "value": 117 },
+    { "type": "Autocracies", "year": "1980", "value": 114 },
+    { "type": "Autocracies", "year": "1990", "value": 111 },
+    { "type": "Autocracies", "year": "2000", "value": 89 },
+    { "type": "Autocracies", "year": "2010", "value": 80 },
+    { "type": "Autocracies", "year": "2018", "value": 80 },
+
+    { "type": "Democracies", "year": "1930", "value": 22 },
+    { "type": "Democracies", "year": "1940", "value": 13 },
+    { "type": "Democracies", "year": "1950", "value": 25 },
+    { "type": "Democracies", "year": "1960", "value": 29 },
+    { "type": "Democracies", "year": "1970", "value": 38 },
+    { "type": "Democracies", "year": "1980", "value": 41 },
+    { "type": "Democracies", "year": "1990", "value": 57 },
+    { "type": "Democracies", "year": "2000", "value": 87 },
+    { "type": "Democracies", "year": "2010", "value": 98 },
+    { "type": "Democracies", "year": "2018", "value": 99 }
+  ]
+}

src/packages/components/VChart/Bars/VChartBarCrossrange/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartBarCrossrangeConfig: ConfigType = {
+  key: 'VChartBarCrossrange',
+  chartKey: 'VVChartBarCrossrange',
+  conKey: 'VCVChartBarCrossrange',
+  title: 'VChart并列柱状图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_bar_y.png'
+}

src/packages/components/VChart/Bars/VChartBarCrossrange/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/components/VChart/Bars/VChartBarStack/config.ts

@@ -3,9 +3,9 @@ import { VChartBarStackConfig } 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 axisThemeJson from '@/settings/vchartThemes/axis.theme.json'
-import { IBarOption } from '../../index.d'
+import { ChatCategoryEnum, IBarOption } from '../../index.d'
+import { merge, cloneDeep } from 'lodash'
 
 export const includes = ['legends', 'tooltip']
 export const option: IBarOption & { dataset?: any } = {
@@ -17,10 +17,17 @@ export const option: IBarOption & { dataset?: any } = {
   seriesField: 'year',
   stack: true,
   // 业务配置（后续会被转换为图表spec)
-  category: VChartBarStackConfig.category,
+  category: VChartBarStackConfig.category as ChatCategoryEnum.BAR,
   xAxis: {
     name: 'x轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 10,
+          dy: 0
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       visible: false
@@ -28,12 +35,18 @@ export const option: IBarOption & { dataset?: any } = {
   },
   yAxis: {
     name: 'y轴',
-    ...axisThemeJson,
+    ...(merge(cloneDeep(axisThemeJson), {
+      unit: {
+        style: {
+          dx: 0,
+          dy: -10
+        }
+      }
+    }) as any),
     grid: {
       ...axisThemeJson.grid,
       style: {
-        ...axisThemeJson.grid.style,
-        lineDash: [3, 3]
+        ...axisThemeJson.grid.style
       }
     }
   }

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

@@ -1,4 +1,5 @@
 import { VChartBarCommonConfig } from './VChartBarCommon/index'
+import { VChartBarCrossrangeConfig } from './VChartBarCrossrange/index'
 import { VChartBarStackConfig } from './VChartBarStack/index'
 
-export default [VChartBarCommonConfig, VChartBarStackConfig]
+export default [VChartBarCommonConfig, VChartBarCrossrangeConfig, VChartBarStackConfig]