feat: 新增堆叠图

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

@@ -11,9 +11,9 @@ export const option: ISpec & { dataset?: any } = {
   type: 'bar',
   dataset: data,
   stack: true,
-  xField: 'type',
+  xField: ['year', 'type'],
   yField: 'value',
-  seriesField: 'country'
+  seriesField: 'type'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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

@@ -1,22 +1,24 @@
 {
   "values": [
-    { "type": "Nail polish", "country": "Africa", "value": 4229 },
+    { "type": "Autocracies", "year": "1930", "value": 129 },
-    { "type": "Nail polish", "country": "EU", "value": 4376 },
+    { "type": "Autocracies", "year": "1940", "value": 133 },
-    { "type": "Eyebrow pencil", "country": "Africa", "value": 3932 },
+    { "type": "Autocracies", "year": "1950", "value": 130 },
-    { "type": "Eyebrow pencil", "country": "EU", "value": 3987 },
+    { "type": "Autocracies", "year": "1960", "value": 126 },
-    { "type": "Rouge", "country": "Africa", "value": 5221 },
+    { "type": "Autocracies", "year": "1970", "value": 117 },
-    { "type": "Rouge", "country": "EU", "value": 3574 },
+    { "type": "Autocracies", "year": "1980", "value": 114 },
-    { "type": "Lipstick", "country": "Africa", "value": 9256 },
+    { "type": "Autocracies", "year": "1990", "value": 111 },
-    { "type": "Lipstick", "country": "EU", "value": 4376 },
+    { "type": "Autocracies", "year": "2000", "value": 89 },
-    { "type": "Eyeshadows", "country": "Africa", "value": 3308 },
+    { "type": "Autocracies", "year": "2010", "value": 80 },
-    { "type": "Eyeshadows", "country": "EU", "value": 4572 },
+    { "type": "Autocracies", "year": "2018", "value": 80 },
-    { "type": "Eyeliner", "country": "Africa", "value": 5432 },
+    { "type": "Democracies", "year": "1930", "value": 22 },
-    { "type": "Eyeliner", "country": "EU", "value": 3417 },
+    { "type": "Democracies", "year": "1940", "value": 13 },
-    { "type": "Foundation", "country": "Africa", "value": 13701 },
+    { "type": "Democracies", "year": "1950", "value": 25 },
-    { "type": "Foundation", "country": "EU", "value": 5231 },
+    { "type": "Democracies", "year": "1960", "value": 29 },
-    { "type": "Lip gloss", "country": "Africa", "value": 4008 },
+    { "type": "Democracies", "year": "1970", "value": 38 },
-    { "type": "Lip gloss", "country": "EU", "value": 4572 },
+    { "type": "Democracies", "year": "1980", "value": 41 },
-    { "type": "Mascara", "country": "Africa", "value": 18712 },
+    { "type": "Democracies", "year": "1990", "value": 57 },
-    { "type": "Mascara", "country": "EU", "value": 6134 }
+    { "type": "Democracies", "year": "2000", "value": 87 },
+    { "type": "Democracies", "year": "2010", "value": 98 },
+    { "type": "Democracies", "year": "2018", "value": 99 }
   ]
 }

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

@@ -0,0 +1,24 @@
+import { PublicConfigClass } from '@/packages/public'
+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 { type ISpec } from '@visactor/vchart'
+
+export const includes = ['legends']
+export const option: ISpec & { dataset?: any } = {
+  type: 'bar',
+  dataset: data,
+  xField: 'State',
+  yField: 'Population',
+  seriesField: 'Age',
+  stack: true
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = VChartBarStackConfig.key
+  public chartConfig = cloneDeep(VChartBarStackConfig)
+  // 图表配置项
+  public option = vChartOptionPrefixHandle(option, includes)
+}

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

@@ -0,0 +1,17 @@
+<template>
+  <!-- vCharts 全局设置 -->
+  <VChartGlobalSetting :optionData="optionData"></VChartGlobalSetting>
+</template>
+
+<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/VChartBarStack/data.json

@@ -0,0 +1,79 @@
+{
+  "values": [
+    {
+      "State": "WY",
+      "Age": "Under 5 Years",
+      "Population": 25635
+    },
+    {
+      "State": "WY",
+      "Age": "5 to 13 Years",
+      "Population": 1890
+    },
+    {
+      "State": "WY",
+      "Age": "14 to 17 Years",
+      "Population": 9314
+    },
+    {
+      "State": "DC",
+      "Age": "Under 5 Years",
+      "Population": 30352
+    },
+    {
+      "State": "DC",
+      "Age": "5 to 13 Years",
+      "Population": 20439
+    },
+    {
+      "State": "DC",
+      "Age": "14 to 17 Years",
+      "Population": 10225
+    },
+    {
+      "State": "VT",
+      "Age": "Under 5 Years",
+      "Population": 38253
+    },
+    {
+      "State": "VT",
+      "Age": "5 to 13 Years",
+      "Population": 42538
+    },
+    {
+      "State": "VT",
+      "Age": "14 to 17 Years",
+      "Population": 15757
+    },
+    {
+      "State": "ND",
+      "Age": "Under 5 Years",
+      "Population": 51896
+    },
+    {
+      "State": "ND",
+      "Age": "5 to 13 Years",
+      "Population": 67358
+    },
+    {
+      "State": "ND",
+      "Age": "14 to 17 Years",
+      "Population": 18794
+    },
+    {
+      "State": "AK",
+      "Age": "Under 5 Years",
+      "Population": 72083
+    },
+    {
+      "State": "AK",
+      "Age": "5 to 13 Years",
+      "Population": 85640
+    },
+    {
+      "State": "AK",
+      "Age": "14 to 17 Years",
+      "Population": 22153
+    }
+  ]
+}

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VChartBarStackConfig: ConfigType = {
+  key: 'VChartBarStack',
+  chartKey: 'VVChartBarStack',
+  conKey: 'VCVChartBarStack',
+  title: 'VChart柱状图',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.VCHART,
+  chartFrame: ChartFrameEnum.VCHART,
+  image: 'vchart_bar_x_stack.png'
+}

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

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