diff --git a/common/changes/@visactor/vchart/enhance-mosaic_2025-05-08-01-58.json b/common/changes/@visactor/vchart/enhance-mosaic_2025-05-08-01-58.json new file mode 100644 index 0000000000..b73c6d6cc9 --- /dev/null +++ b/common/changes/@visactor/vchart/enhance-mosaic_2025-05-08-01-58.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "feat: mosaic chart supports bandWidthField and percent config, closed #3945", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file diff --git a/docs/assets/option/en/common/cartesian-series.md b/docs/assets/option/en/common/cartesian-series.md index 7904773e1d..6866814714 100644 --- a/docs/assets/option/en/common/cartesian-series.md +++ b/docs/assets/option/en/common/cartesian-series.md @@ -13,6 +13,7 @@ noPreset = ${noPreset}, preset = ${preset}, noStack = ${noStack}, + percent = ${percent}, defaultPreset = ${defaultPreset} ) }} diff --git a/docs/assets/option/en/common/series.md b/docs/assets/option/en/common/series.md index 4c7d215820..222a55bd95 100644 --- a/docs/assets/option/en/common/series.md +++ b/docs/assets/option/en/common/series.md @@ -90,6 +90,14 @@ Whether to offset the silhouette around the central axis. Useful for drawing som {{ /if }} +{{ if: !${percent} }} + +#${prefix} percent(boolean) + +Whether to display the data as a percentage. + +{{ /if }} + {{ if: !${noInvalidType} }} #${prefix} invalidType(string) diff --git a/docs/assets/option/en/series/mosaic.md b/docs/assets/option/en/series/mosaic.md index f6172640ab..86654acdc3 100644 --- a/docs/assets/option/en/series/mosaic.md +++ b/docs/assets/option/en/series/mosaic.md @@ -9,14 +9,24 @@ noType = ${noType}, noData = ${noData}, noMorph = ${noMorph}, - useInChart = ${useInChart}, noStack = ${noStack}, + percent = ${percent}, + useInChart = ${useInChart}, seriesType = 'mosaic', seriesMarks = ['bar'], preset = 'grow' + '|' + 'fadeIn' + '|' + 'scaleIn', defaultPreset = 'grow' ) }} +#${prefix} bandWidthField(string) + +Supported since version 1.13.10. + +Column size mapping field, if not declared, will be mapped according to the proportion of total value under the same dimension by default + +1. Automatic mapping height when bar chart direction +2. Automatic mapping width when vertical diagram direction + #${prefix} bar(Object) Bar element style configuration. diff --git a/docs/assets/option/zh/common/cartesian-series.md b/docs/assets/option/zh/common/cartesian-series.md index 241535a031..7c0fdd430f 100644 --- a/docs/assets/option/zh/common/cartesian-series.md +++ b/docs/assets/option/zh/common/cartesian-series.md @@ -13,6 +13,7 @@ noPreset = ${noPreset}, preset = ${preset}, noStack = ${noStack}, + percent = ${percent}, defaultPreset = ${defaultPreset} ) }} diff --git a/docs/assets/option/zh/common/series.md b/docs/assets/option/zh/common/series.md index c85d99dc47..c467d02ce6 100644 --- a/docs/assets/option/zh/common/series.md +++ b/docs/assets/option/zh/common/series.md @@ -90,6 +90,14 @@ {{ /if }} +{{ if: !${percent} }} + +#${prefix} percent(boolean) + +否对数据进行百分比处理。 + +{{ /if }} + {{ if: !${noInvalidType} }} #${prefix} invalidType(string) diff --git a/docs/assets/option/zh/series/mosaic.md b/docs/assets/option/zh/series/mosaic.md index 91326acfa5..44c7f05711 100644 --- a/docs/assets/option/zh/series/mosaic.md +++ b/docs/assets/option/zh/series/mosaic.md @@ -9,14 +9,23 @@ noType = ${noType}, noData = ${noData}, noMorph = ${noMorph}, + noStack = ${noStack}, + percent = ${percent}, useInChart = ${useInChart}, - noStack = ${noStack}, seriesType = 'mosaic', seriesMarks = ['bar'], preset = 'grow' + '|' + 'fadeIn' + '|' + 'scaleIn', defaultPreset = 'grow' ) }} +#${prefix} bandWidthField(string) + +自 `1.13.10` 版本开始支持。 + +- 柱子尺寸映射字段，如果不声明默认会根据相同维度下的总值占比进行映射 + - 条形图方向时自动映射高度 + - 竖形图方向时自动映射宽度 + #${prefix} bar(Object) bar 图元样式配置。 diff --git a/packages/vchart/src/chart/mosaic/mosaic-transformer.ts b/packages/vchart/src/chart/mosaic/mosaic-transformer.ts index 649f17dcff..2004b8d7e8 100644 --- a/packages/vchart/src/chart/mosaic/mosaic-transformer.ts +++ b/packages/vchart/src/chart/mosaic/mosaic-transformer.ts @@ -15,7 +15,8 @@ export class MosaicChartSpecTransformer< 'barBackground', 'barMinHeight', 'stackCornerRadius', - 'bar' + 'bar', + 'bandWidthField' ]); } diff --git a/packages/vchart/src/chart/mosaic/mosaic.ts b/packages/vchart/src/chart/mosaic/mosaic.ts index 49417741f3..0182c3fb36 100644 --- a/packages/vchart/src/chart/mosaic/mosaic.ts +++ b/packages/vchart/src/chart/mosaic/mosaic.ts @@ -39,7 +39,6 @@ export class MosaicChart extends const stackData = s.getStackData(); const stackValue = s.getStackValue(); const stackValueField = s.getStackValueField(); // yField - if (stackData && stackValueField) { stackMosaicTotal(stackValueGroup[stackValue] as IStackCacheNode, stackValueField); stackMosaic(s, stackValueGroup[stackValue] as IStackCacheNode); diff --git a/packages/vchart/src/series/mosaic/interface.ts b/packages/vchart/src/series/mosaic/interface.ts index 9c5cdb005d..5f7c84e249 100644 --- a/packages/vchart/src/series/mosaic/interface.ts +++ b/packages/vchart/src/series/mosaic/interface.ts @@ -40,6 +40,13 @@ export interface IMosaicSeriesSpec extends Omit; } >; + /** + * 柱子尺寸映射字段，如果不声明默认会根据相同维度下的总值占比进行映射 + * - 条形图方向时自动映射高度 + * - 竖形图方向时自动映射宽度 + * @since 1.13.10 + */ + bandWidthField?: string; } export type IMosaicSeriesTheme = IBarSeriesTheme; diff --git a/packages/vchart/src/series/mosaic/mosaic.ts b/packages/vchart/src/series/mosaic/mosaic.ts index 9c2e4da5ab..bb8b31d7e8 100644 --- a/packages/vchart/src/series/mosaic/mosaic.ts +++ b/packages/vchart/src/series/mosaic/mosaic.ts @@ -28,13 +28,18 @@ export class MosaicSeries exten static readonly transformerConstructor = BarSeriesSpecTransformer as any; readonly transformerConstructor = BarSeriesSpecTransformer as any; + private _bandWidthField?: string; + get bandWidthField() { + return this._bandWidthField; + } getStack() { return true; } getPercent() { - return !!this.getSeriesField(); + return this._spec.percent; } + getGroupFields() { return this.direction === 'vertical' ? this._specXField : this._specYField; } @@ -60,6 +65,10 @@ export class MosaicSeries exten this.setFieldX(MOSAIC_CAT_END_PERCENT); this.setFieldX2(MOSAIC_CAT_START_PERCENT); } + + if (this._spec.bandWidthField) { + this._bandWidthField = this._spec.bandWidthField; + } } parseLabelStyle(labelStyle: any, labelSpec: any) { @@ -98,7 +107,7 @@ export class MosaicSeries exten }; labelStyle.dataFilter = (data: any) => { - const filteredData = {}; + const filteredData: any = {}; data.forEach((d: any) => { const datum = d.data; diff --git a/packages/vchart/src/util/data.ts b/packages/vchart/src/util/data.ts index 0c79e155fa..4e09ebffb6 100644 --- a/packages/vchart/src/util/data.ts +++ b/packages/vchart/src/util/data.ts @@ -21,6 +21,7 @@ import { isValid, toValidNumber } from './type'; import { max, sum } from './math'; import type { ISeries, ISeriesStackDataMeta } from '../series/interface'; import type { IRegion } from '../region/interface'; +import { MosaicSeries } from '../series'; export function mergeFields( targetFields: { @@ -236,11 +237,20 @@ export function stackMosaic(s: ISeries, stackCache: IStackCacheNode, mosaicData? key: `${stackCache.groupField}`, values: groupValues.map(group => { const groupValues = stackCache.nodes[group]; + let value; + if ((s as MosaicSeries).bandWidthField) { + value = + groupValues.values.find(v => isValid(v[(s as MosaicSeries).bandWidthField]))?.[ + (s as MosaicSeries).bandWidthField + ] ?? groupValues.total; + } else { + value = groupValues.total; + } return { groupValue: group, - value: groupValues.total, - end: groupValues.total + value, + end: value }; }) };