[TEST] Feat: histogram bar padding

docs/assets/option/en/chart/histogram.md

@@ -25,7 +25,11 @@ x2 field. (x field is the left interval field of frequency statistics, x2 field
 
 y2 field. (y field is the left interval field of frequency statistics, y2 field is the right interval field of frequency statistics)
 
+## barGap(number)
+
+Used to adjust the distance between each column in the histogram and support passing in pixel values.
+
 {{ use: chart-component(
   axisType = 'cartesian',
   noBandAxis = true
-) }}
+) }}

docs/assets/option/zh/chart/histogram.md

@@ -19,14 +19,17 @@
 
 ## x2Field(string|string[])
 
-x2 字段。（x字段为频率统计左区间字段，x2字段为频率统计右区间字段）
+x2 字段。（x 字段为频率统计左区间字段，x2 字段为频率统计右区间字段）
 
 ## y2Field(string|string[])
 
-y2 字段。（y字段为频率统计左区间字段，y2字段为频率统计右区间字段）
+y2 字段。（y 字段为频率统计左区间字段，y2 字段为频率统计右区间字段）
+
+## barGap(number)
+
+用于调整直方图中每个柱子之间的距离，支持传入像素值。
 
 {{ use: chart-component(
   axisType = 'cartesian',
   noBandAxis = true
 ) }}
-

packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts

@@ -9,6 +9,6 @@ export class BaseHistogramChartSpecTransformer<T extends IHistogramChartSpec> ex
   }
 
   protected _getDefaultSeriesSpec(spec: T): any {
-    return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground']);
+    return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground', 'barGap']);
   }
 }

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

@@ -381,6 +381,28 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
     return this.dataToPositionY1(datum);
   }
 
+  protected _getLinearBarRange = (start: number, end: number) => {
+    let [x, x1] = [start, end].sort((a, b) => a - b);
+    const realBarWidth = x1 - x;
+    if (this._spec.barGap) {
+      const tempX = x + this._spec.barGap;
+      const tempX1 = x1 - this._spec.barGap;
+      x = tempX;
+      x1 = tempX1;
+    }
+
+    const curBarWidth = x1 - x;
+    const barMinWidth = getActualNumValue(this._spec.barMinWidth || 2, realBarWidth);
+    if (curBarWidth < barMinWidth) {
+      const widthDiff = barMinWidth - curBarWidth;
+      const halfWidthDiff = widthDiff / 2;
+      x -= halfWidthDiff;
+      x1 += halfWidthDiff;
+    }
+
+    return [x, x1];
+  };
+
   protected _getBarXStart = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => {
     if (this._shouldDoPreCalculate()) {
       this._calculateStackRectPosition(false);
@@ -403,6 +425,12 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
     return valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange);
   };
 
+  protected _getLinearBarXRange = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => {
+    const x = valueInScaleRange(this._dataToPosX(datum), scale, useWholeRange);
+    const x1 = valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange);
+    return this._getLinearBarRange(x, x1);
+  };
+
   protected _getBarYStart = (datum: Datum, scale: IBaseScale) => {
     if (this._shouldDoPreCalculate()) {
       this._calculateStackRectPosition(true);
@@ -425,6 +453,12 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
     return valueInScaleRange(this._dataToPosY1(datum), scale);
   };
 
+  protected _getLinearBarYRange = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => {
+    const y = valueInScaleRange(this._dataToPosY(datum), scale, useWholeRange);
+    const y1 = valueInScaleRange(this._dataToPosY1(datum), scale, useWholeRange);
+    return this._getLinearBarRange(y, y1);
+  };
+
   initBandRectMarkStyle() {
     const xScale = this._xAxisHelper?.getScale?.(0);
     const yScale = this._yAxisHelper?.getScale?.(0);
@@ -543,8 +577,8 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
     if (this.direction === Direction.horizontal) {
       const yChannels = isValid(this._fieldY2)
         ? {
-            y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum), yScale, true),
-            y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum), yScale, true)
+            y: (datum: Datum) => this._getLinearBarYRange(datum, yScale, true)[0],
+            y1: (datum: Datum) => this._getLinearBarYRange(datum, yScale, true)[1]
           }
         : {
             y: (datum: Datum) =>
@@ -575,8 +609,8 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
     } else {
       const xChannels = isValid(this._fieldX2)
         ? {
-            x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum), xScale, true),
-            x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum), xScale, true)
+            x: (datum: Datum) => this._getLinearBarXRange(datum, xScale, true)[0],
+            x1: (datum: Datum) => this._getLinearBarXRange(datum, xScale, true)[1]
           }
         : {
             x: (datum: Datum) =>

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

@@ -119,6 +119,11 @@ export interface IBarSeriesSpec
    * 圆角支持回调配置 @since 1.12.4
    */
   stackCornerRadius?: number | number[] | IStackCornerRadiusCallback;
+
+  /**
+   * 柱条间 padding 值
+   */
+  barGap?: number;
 }
 
 export interface IBarBackgroundSpec {