[WIP]Feat(bar chart) make bar gap in group percentage based on actual bar width #3950

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)
 

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)
 

packages/vchart/src/series/bar/bar.ts

@@ -753,6 +753,7 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> 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<T extends IBarSeriesSpec = IBarSeriesSpec> 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;

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)[];