feat: support barpadding for histogram

common/changes/@visactor/vchart/feat-barpadding_2024-08-06-07-34.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: support barpadding for histogram for #2629",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

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

@@ -28,4 +28,8 @@ y2 field. (y field is the left interval field of frequency statistics, y2 field
 {{ use: chart-component(
   axisType = 'cartesian',
   noBandAxis = true
-) }}
+) }}
+
+## barPadding(number)
+
+The barPadding use to adjust the distance between each bar in the histogram.

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 字段为频率统计右区间字段）
 
 {{ use: chart-component(
   axisType = 'cartesian',
   noBandAxis = true
 ) }}
 
+## barPadding(number)
+
+barPadding 字段用于调整直方图中每个柱子之间的距离。

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

@@ -14,7 +14,8 @@ export class BaseHistogramChartSpecTransformer<T extends IHistogramChartSpec> ex
       x2Field: spec?.x2Field,
       y2Field: spec?.y2Field,
       barMinHeight: spec?.barMinHeight,
-      barBackground: spec?.barBackground
+      barBackground: spec?.barBackground,
+      barPadding: spec?.barPadding
     };
   }
 }

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

@@ -457,7 +457,6 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
     }
 
     this._initStackBarMarkStyle();
-
     this._initBandBarBackgroundMarkStyle();
   }
 
@@ -528,12 +527,36 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
   initLinearRectMarkStyle() {
     const xScale = this._xAxisHelper?.getScale?.(0);
     const yScale = this._yAxisHelper?.getScale?.(0);
+    const barPadding = this._spec.barPadding || 0;
+
+    /**
+     *
+     * @description 用于计算不同场景下barPadding对应的柱坐标位移值
+     */
+    const barPaddingCompute = (field: 'x' | 'x1' | 'y' | 'y1', inverse: boolean) => {
+      let acturlPadding = 0;
+      if (inverse) {
+        if (field === 'x1' || field === 'y1') {
+          acturlPadding = barPadding / 2;
+        } else {
+          acturlPadding = -barPadding / 2;
+        }
+      } else {
+        if (field === 'x' || field === 'y') {
+          acturlPadding = barPadding / 2;
+        } else {
+          acturlPadding = -barPadding / 2;
+        }
+      }
+      return acturlPadding;
+    };
 
     if (this.direction === Direction.horizontal) {
+      const inverse = this._yAxisHelper?.isInverse();
       const yChannels = isValid(this._fieldY2)
         ? {
-            y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum), yScale),
-            y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum), yScale)
+            y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum) + barPaddingCompute('y', inverse), yScale),
+            y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum) + barPaddingCompute('y1', inverse), yScale)
           }
         : {
             y: (datum: Datum) =>
@@ -562,10 +585,12 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
         AttributeLevel.Series
       );
     } else {
+      const inverse = this._xAxisHelper?.isInverse();
+
       const xChannels = isValid(this._fieldX2)
         ? {
-            x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum), xScale),
-            x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum), xScale)
+            x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum) + barPaddingCompute('x', inverse), xScale),
+            x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum) + barPaddingCompute('x1', inverse), xScale)
           }
         : {
             x: (datum: Datum) =>
@@ -740,7 +765,6 @@ export class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extends Cartes
       const barInGroup = array(this._spec.barGapInGroup);
       let totalWidth: number = 0;
       let offSet: number = 0;
-
       for (let index = groupFields.length - 1; index >= 1; index--) {
         const groupField = groupFields[index];
         // const groupValues = this.getViewDataStatistics()?.latestData?.[groupField]?.values ?? [];

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

@@ -101,6 +101,11 @@ export interface IBarSeriesSpec
    * @since 1.10.0
    */
   stackCornerRadius?: number | number[];
+
+  /**
+   * 柱条之间的距离
+   */
+  barPadding?: number;
 }
 
 export interface IBarBackgroundSpec {