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]