diff --git a/docs/assets/option/en/series/bar-style.md b/docs/assets/option/en/series/bar-style.md index 951c860d5e..286f75c892 100644 --- a/docs/assets/option/en/series/bar-style.md +++ b/docs/assets/option/en/series/bar-style.md @@ -28,7 +28,7 @@ Supported since `1.2.0` version, it is used to adjust the column spacing within If the number of arrays in `barGapInGroup` is less than the number of grouping levels, the last value will be used for subsequent grouping spacing. - `number` type, representing pixel value -- `string` type, percentage usage, such as '10%', this value is the bandWidth proportion of the scale corresponding to the last grouping field (because the columns are of equal width, the scale of the last layer of grouping is used) +- `string` type, percentage usage, such as '10%', the value is the proportion of the actual column width (barWidth) #${prefix} barMinHeight(number) diff --git a/docs/assets/option/zh/series/bar-style.md b/docs/assets/option/zh/series/bar-style.md index 9bb0d69814..0cf502fb0d 100644 --- a/docs/assets/option/zh/series/bar-style.md +++ b/docs/assets/option/zh/series/bar-style.md @@ -28,7 +28,7 @@ 如果 `barGapInGroup` 的数组个数小于分组层数,则后面的分组间距使用最后一个值。 - `number` 类型,表示像素值 -- `string` 类型,百分比用法,如 '10%',该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的,所以采用最后一层分组的 scale) +- `string` 类型,百分比用法,如 '10%',该值为对应实际柱子宽度(barWidth)的占比 #${prefix} barMinHeight(number) diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 4ae9516bf0..820bc8b096 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -753,6 +753,7 @@ export class BarSeries extends Cartes const depth = isNil(scaleDepth) ? depthFromSpec : Math.min(depthFromSpec, scaleDepth); const bandWidth = axisHelper.getBandwidth?.(depth - 1) ?? DefaultBandWidth; + const barWidth = this._getBarWidth(axisHelper, depth); const size = depth === depthFromSpec ? (this._barMark.getAttribute(sizeAttribute, datum) as number) : bandWidth; if (depth > 1 && isValid(this._spec.barGapInGroup)) { @@ -767,7 +768,7 @@ export class BarSeries extends Cartes // const groupValues = this.getViewDataStatistics()?.latestData?.[groupField]?.values ?? []; const groupValues = axisHelper.getScale(index)?.domain() ?? []; const groupCount = groupValues.length; - const gap = getActualNumValue(barInGroup[index - 1] ?? last(barInGroup), bandWidth); + const gap = getActualNumValue(barInGroup[index - 1] ?? last(barInGroup), barWidth); const i = groupValues.indexOf(datum[groupField]); if (index === groupFields.length - 1) { totalWidth += groupCount * size + (groupCount - 1) * gap; diff --git a/packages/vchart/src/series/bar/interface.ts b/packages/vchart/src/series/bar/interface.ts index dc81714184..e81387b15d 100644 --- a/packages/vchart/src/series/bar/interface.ts +++ b/packages/vchart/src/series/bar/interface.ts @@ -103,7 +103,7 @@ export interface IBarSeriesSpec * 当存在多层分组时,可以使用数组来设置不同层级的间距,如 [10, '20%'],表示第一层分组的间距为 10px,第二层分组的间距为 '20%'。 * 如果 barGapInGroup 的数组个数小于分组层数,则后面的分组间距使用最后一个值。 * 1. number 类型,表示像素值 - * 2. string 类型,百分比用法,如 '10%',该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的,所以采用最后一层分组的 scale) + * 2. string 类型,百分比用法,如 '10%',该值为对应实际柱子宽度(barWidth)的占比 * @since 1.2.0 */ barGapInGroup?: number | string | (number | string)[];