diff --git a/src/assets/images/chart/vchart/vchart_bar_x.png b/src/assets/images/chart/vchart/vchart_bar_x.png
index 7a0b111a..6f41e3f5 100644
Binary files a/src/assets/images/chart/vchart/vchart_bar_x.png and b/src/assets/images/chart/vchart/vchart_bar_x.png differ
diff --git a/src/assets/images/chart/vchart/vchart_bar_x_stack.png b/src/assets/images/chart/vchart/vchart_bar_x_stack.png
new file mode 100644
index 00000000..7a0b111a
Binary files /dev/null and b/src/assets/images/chart/vchart/vchart_bar_x_stack.png differ
diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/config.ts b/src/packages/components/VChart/Bars/VChartBarCommon/config.ts
index 8e0c0ede..44301bb7 100644
--- a/src/packages/components/VChart/Bars/VChartBarCommon/config.ts
+++ b/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 {
diff --git a/src/packages/components/VChart/Bars/VChartBarCommon/data.json b/src/packages/components/VChart/Bars/VChartBarCommon/data.json
index 04c70222..13a2a3b0 100644
--- a/src/packages/components/VChart/Bars/VChartBarCommon/data.json
+++ b/src/packages/components/VChart/Bars/VChartBarCommon/data.json
@@ -1,22 +1,24 @@
{
"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 }
+ { "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 }
]
}
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/config.ts b/src/packages/components/VChart/Bars/VChartBarStack/config.ts
new file mode 100644
index 00000000..a23328ab
--- /dev/null
+++ b/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)
+}
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/config.vue b/src/packages/components/VChart/Bars/VChartBarStack/config.vue
new file mode 100644
index 00000000..b111a08d
--- /dev/null
+++ b/src/packages/components/VChart/Bars/VChartBarStack/config.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/data.json b/src/packages/components/VChart/Bars/VChartBarStack/data.json
new file mode 100644
index 00000000..0b93253c
--- /dev/null
+++ b/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
+ }
+ ]
+}
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/index.ts b/src/packages/components/VChart/Bars/VChartBarStack/index.ts
new file mode 100644
index 00000000..860c0d02
--- /dev/null
+++ b/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'
+}
diff --git a/src/packages/components/VChart/Bars/VChartBarStack/index.vue b/src/packages/components/VChart/Bars/VChartBarStack/index.vue
new file mode 100644
index 00000000..c70c6676
--- /dev/null
+++ b/src/packages/components/VChart/Bars/VChartBarStack/index.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/src/packages/components/VChart/Bars/index.ts b/src/packages/components/VChart/Bars/index.ts
index 77fb04fd..06e9a0e0 100644
--- a/src/packages/components/VChart/Bars/index.ts
+++ b/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]