@visactor/vchart 1.9.0-alpha.0 → 1.9.0-alpha.2

package/esm/series/bar/animation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/series/bar/animation.ts"],"names":[],"mappings":"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","file":"animation.js","sourcesContent":["import { Factory } from '../../core/factory';\nimport { Direction } from '../../typings/space';\n// eslint-disable-next-line no-duplicate-imports\nimport type { Datum, DirectionType } from '../../typings';\nimport type { IElement, IAnimationTypeConfig } from '@visactor/vgrammar-core';\n\nexport interface IBarAnimationParams {\n  xField: string;\n  yField: string;\n  direction: DirectionType;\n  // growHeightOverall，需要知道一起生长的起始点\n  // 即 x轴 在canvas上的y（ 或 y轴 在canvas上的x ）。\n  growFrom: () => number;\n}\n\nexport type BarAppearPreset = 'grow' | 'fadeIn' | 'scaleIn';\n\n/**\n * grow生长option\n * 在appear时，所有柱子一起从同一个位置生长，需要growXXXOverall效果；\n * 在enter时，柱子应该从自身位置生长；\n * @param params\n * @param isOverall\n * @returns\n */\nfunction barGrowOption(barParams: IBarAnimationParams, isOverall = true) {\n  return (datum: Datum, element: IElement, params: any) => {\n    const field = barParams.direction === 'vertical' ? barParams.yField : barParams.xField;\n    const data = datum?.[field];\n    if (barParams.direction === 'vertical') {\n      return {\n        overall: isOverall ? barParams.growFrom() : isOverall,\n        orient: data > 0 ? 'negative' : 'positive'\n      };\n    }\n    return {\n      overall: isOverall ? barParams.growFrom() : false,\n      orient: data > 0 ? 'positive' : 'negative'\n    };\n  };\n}\nexport const barGrowIn = (params: IBarAnimationParams, isOverall: boolean = true): IAnimationTypeConfig => {\n  return {\n    type: params.direction === Direction.horizontal ? 'growWidthIn' : 'growHeightIn',\n    options: barGrowOption(params, isOverall)\n  };\n};\n\nexport const barGrowOut = (params: IBarAnimationParams, isOverall: boolean = true): IAnimationTypeConfig => {\n  return {\n    type: params.direction === Direction.horizontal ? 'growWidthOut' : 'growHeightOut',\n    options: barGrowOption(params, isOverall)\n  };\n};\n\nconst Appear_FadeIn: IAnimationTypeConfig = {\n  type: 'fadeIn'\n};\n\nconst Appear_ScaleIn: IAnimationTypeConfig = {\n  type: 'growCenterIn'\n};\n\nexport function barPresetAnimation(\n  params: IBarAnimationParams,\n  preset: BarAppearPreset | boolean\n): IAnimationTypeConfig {\n  if (preset === false) {\n    return {};\n  }\n  switch (preset) {\n    case 'fadeIn':\n      return Appear_FadeIn;\n    case 'scaleIn':\n      return Appear_ScaleIn;\n    default:\n      return barGrowIn(params);\n  }\n}\n\nexport const registerBarAnimation = () => {\n  Factory.registerAnimation('bar', (params: IBarAnimationParams, preset: BarAppearPreset) => {\n    return {\n      appear: barPresetAnimation(params, preset),\n      enter: barGrowIn(params, false),\n      exit: barGrowOut(params, false),\n      disappear: barGrowOut(params)\n    };\n  });\n};\n\nexport const registerBar3dAnimation = () => {\n  Factory.registerAnimation('bar3d', (params: IBarAnimationParams, preset: BarAppearPreset) => {\n    return {\n      appear: barPresetAnimation(params, preset),\n      enter: barGrowIn(params, false),\n      exit: barGrowOut(params, false),\n      disappear: barGrowOut(params)\n    };\n  });\n};\n"]}
+{"version":3,"sources":["../src/series/bar/animation.ts"],"names":[],"mappings":"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","file":"animation.js","sourcesContent":["import { Factory } from '../../core/factory';\nimport { Direction } from '../../typings/space';\n// eslint-disable-next-line no-duplicate-imports\nimport type { Datum, DirectionType } from '../../typings';\nimport type { IElement, IAnimationTypeConfig } from '@visactor/vgrammar-core';\n\nexport interface IBarAnimationParams {\n  xField: string;\n  yField: string;\n  direction: DirectionType;\n  // growHeightOverall，需要知道一起生长的起始点\n  // 即 x轴 在canvas上的y（ 或 y轴 在canvas上的x ）。\n  growFrom: () => number;\n}\n\nexport type BarAppearPreset = 'grow' | 'fadeIn' | 'scaleIn';\n\n/**\n * grow生长option\n * 在appear时，所有柱子一起从同一个位置生长，需要growXXXOverall效果；\n * 在enter时，柱子应该从自身位置生长；\n * @param params\n * @param isOverall\n * @returns\n */\nfunction barGrowOption(barParams: IBarAnimationParams, isOverall = true) {\n  return (datum: Datum, element: IElement, params: any) => {\n    const field = barParams.direction === 'vertical' ? barParams.yField : barParams.xField;\n    const data = datum?.[field];\n    if (barParams.direction === 'vertical') {\n      return {\n        overall: isOverall ? barParams.growFrom() : isOverall,\n        orient: data > 0 ? 'negative' : 'positive'\n      };\n    }\n    return {\n      overall: isOverall ? barParams.growFrom() : false,\n      orient: data > 0 ? 'positive' : 'negative'\n    };\n  };\n}\nexport const barGrowIn = (params: IBarAnimationParams, isOverall: boolean = true): IAnimationTypeConfig => {\n  return {\n    type: params.direction === Direction.horizontal ? 'growWidthIn' : 'growHeightIn',\n    options: barGrowOption(params, isOverall)\n  };\n};\n\nexport const barGrowOut = (params: IBarAnimationParams, isOverall: boolean = true): IAnimationTypeConfig => {\n  return {\n    type: params.direction === Direction.horizontal ? 'growWidthOut' : 'growHeightOut',\n    options: barGrowOption(params, isOverall)\n  };\n};\n\nconst Appear_FadeIn: IAnimationTypeConfig = {\n  type: 'fadeIn'\n};\n\nconst Appear_ScaleIn: IAnimationTypeConfig = {\n  type: 'growCenterIn'\n};\n\nexport function barPresetAnimation(\n  params: IBarAnimationParams,\n  preset: BarAppearPreset | boolean\n): IAnimationTypeConfig {\n  if (preset === false) {\n    return {};\n  }\n  switch (preset) {\n    case 'fadeIn':\n      return Appear_FadeIn;\n    case 'scaleIn':\n      return Appear_ScaleIn;\n    default:\n      return barGrowIn(params);\n  }\n}\n\nexport const registerBarAnimation = () => {\n  Factory.registerAnimation('bar', (params: IBarAnimationParams, preset: BarAppearPreset) => {\n    return {\n      appear: barPresetAnimation(params, preset),\n      enter: barGrowIn(params, false),\n      exit: barGrowOut(params, false),\n      disappear: barGrowOut(params)\n    };\n  });\n};\n\nexport const registerBar3dAnimation = () => {\n  Factory.registerAnimation('bar3d', (params: IBarAnimationParams, preset: BarAppearPreset) => {\n    return {\n      appear: barPresetAnimation(params, preset),\n      enter: barGrowIn(params, false),\n      exit: barGrowOut(params, false),\n      disappear: barGrowOut(params)\n    };\n  });\n};\n"]}

package/esm/series/bar/bar-3d.js

@@ -1,6 +1,4 @@
-import { MarkTypeEnum } from "../../mark/interface/type";
-
-import { SeriesTypeEnum, SeriesMarkNameEnum } from "../interface/type";
+import { SeriesTypeEnum } from "../interface/type";
 
 import { BarSeries } from "./bar";
 
@@ -14,8 +12,8 @@ import { registerBar3dAnimation } from "./animation";
 
 export class Bar3dSeries extends BarSeries {
     constructor() {
-        super(...arguments), this.type = SeriesTypeEnum.bar3d, this._barMarkName = SeriesMarkNameEnum.bar3d, 
-        this._barMarkType = MarkTypeEnum.rect3d;
+        super(...arguments), this.type = SeriesTypeEnum.bar3d, this._barMarkName = "bar3d", 
+        this._barMarkType = "rect3d";
     }
 }
 

package/esm/series/bar/bar-3d.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/series/bar/bar-3d.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAc,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGpE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,MAAM,OAAO,WAA2D,SAAQ,SAAkC;IAAlH;;QAEE,SAAI,GAAG,cAAc,CAAC,KAAK,CAAC;QAIlB,iBAAY,GAAuB,kBAAkB,CAAC,KAAK,CAAC;QAC5D,iBAAY,GAAiB,YAAY,CAAC,MAAM,CAAC;IAC7D,CAAC;;AAPiB,gBAAI,GAAW,cAAc,CAAC,KAAK,CAAC;AAGpC,gBAAI,GAAkB,eAAe,CAAC;AAMxD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,sBAAsB,EAAE,CAAC;IACzB,kBAAkB,EAAE,CAAC;IACrB,OAAO,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC,CAAC","file":"bar-3d.js","sourcesContent":["/* eslint-disable no-duplicate-imports */\nimport { MarkTypeEnum } from '../../mark/interface/type';\nimport type { SeriesMarkMap } from '../interface';\nimport { SeriesTypeEnum, SeriesMarkNameEnum } from '../interface/type';\nimport { BarSeries } from './bar';\nimport { Rect3dMark, registerRect3dMark } from '../../mark/rect-3d';\nimport type { IBar3dSeriesSpec } from './interface';\nimport type { AdaptiveSpec } from '../../typings';\nimport { bar3dSeriesMark } from './constant';\nimport { Factory } from '../../core/factory';\nimport { registerBar3dAnimation } from './animation';\n\nexport class Bar3dSeries<T extends IBar3dSeriesSpec = IBar3dSeriesSpec> extends BarSeries<AdaptiveSpec<T, 'type'>> {\n  static readonly type: string = SeriesTypeEnum.bar3d;\n  type = SeriesTypeEnum.bar3d;\n\n  static readonly mark: SeriesMarkMap = bar3dSeriesMark;\n\n  protected _barMarkName: SeriesMarkNameEnum = SeriesMarkNameEnum.bar3d;\n  protected _barMarkType: MarkTypeEnum = MarkTypeEnum.rect3d;\n}\n\nexport const registerBar3dSeries = () => {\n  registerBar3dAnimation();\n  registerRect3dMark();\n  Factory.registerSeries(Bar3dSeries.type, Bar3dSeries);\n};\n"]}
+{"version":3,"sources":["../src/series/bar/bar-3d.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAsB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAc,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGpE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAErD,MAAM,OAAO,WAA2D,SAAQ,SAAkC;IAAlH;;QAEE,SAAI,GAAG,cAAc,CAAC,KAAK,CAAC;QAIlB,iBAAY,WAAgD;QAC5D,iBAAY,YAAqC;IAC7D,CAAC;;AAPiB,gBAAI,GAAW,cAAc,CAAC,KAAK,CAAC;AAGpC,gBAAI,GAAkB,eAAe,CAAC;AAMxD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,sBAAsB,EAAE,CAAC;IACzB,kBAAkB,EAAE,CAAC;IACrB,OAAO,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC,CAAC","file":"bar-3d.js","sourcesContent":["/* eslint-disable no-duplicate-imports */\nimport { MarkTypeEnum } from '../../mark/interface/type';\nimport type { SeriesMarkMap } from '../interface';\nimport { SeriesTypeEnum, SeriesMarkNameEnum } from '../interface/type';\nimport { BarSeries } from './bar';\nimport { Rect3dMark, registerRect3dMark } from '../../mark/rect-3d';\nimport type { IBar3dSeriesSpec } from './interface';\nimport type { AdaptiveSpec } from '../../typings';\nimport { bar3dSeriesMark } from './constant';\nimport { Factory } from '../../core/factory';\nimport { registerBar3dAnimation } from './animation';\n\nexport class Bar3dSeries<T extends IBar3dSeriesSpec = IBar3dSeriesSpec> extends BarSeries<AdaptiveSpec<T, 'type'>> {\n  static readonly type: string = SeriesTypeEnum.bar3d;\n  type = SeriesTypeEnum.bar3d;\n\n  static readonly mark: SeriesMarkMap = bar3dSeriesMark;\n\n  protected _barMarkName: SeriesMarkNameEnum = SeriesMarkNameEnum.bar3d;\n  protected _barMarkType: MarkTypeEnum = MarkTypeEnum.rect3d;\n}\n\nexport const registerBar3dSeries = () => {\n  registerBar3dAnimation();\n  registerRect3dMark();\n  Factory.registerSeries(Bar3dSeries.type, Bar3dSeries);\n};\n"]}

package/esm/series/bar/bar-transformer.js

@@ -1,10 +1,8 @@
 import { BaseSeriesSpecTransformer } from "../base";
 
-import { SeriesMarkNameEnum } from "../interface";
-
 export class BarSeriesSpecTransformer extends BaseSeriesSpecTransformer {
     _transformLabelSpec(spec) {
-        this._addMarkLabelSpec(spec, SeriesMarkNameEnum.bar);
+        this._addMarkLabelSpec(spec, "bar");
     }
 }
 //# sourceMappingURL=bar-transformer.js.map

package/esm/series/bar/bar-transformer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/series/bar/bar-transformer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,MAAM,OAAO,wBAGX,SAAQ,yBAA+B;IAC7B,mBAAmB,CAAC,IAAO;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACvD,CAAC;CACF","file":"bar-transformer.js","sourcesContent":["import { BaseSeriesSpecTransformer } from '../base';\nimport { SeriesMarkNameEnum } from '../interface';\nimport type { IBarSeriesSpec, IBarSeriesTheme } from './interface';\n\nexport class BarSeriesSpecTransformer<\n  T extends IBarSeriesSpec = IBarSeriesSpec,\n  K extends IBarSeriesTheme = IBarSeriesTheme\n> extends BaseSeriesSpecTransformer<T, K> {\n  protected _transformLabelSpec(spec: T): void {\n    this._addMarkLabelSpec(spec, SeriesMarkNameEnum.bar);\n  }\n}\n"]}
+{"version":3,"sources":["../src/series/bar/bar-transformer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAIpD,MAAM,OAAO,wBAGX,SAAQ,yBAA+B;IAC7B,mBAAmB,CAAC,IAAO;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,QAAyB,CAAC;IACvD,CAAC;CACF","file":"bar-transformer.js","sourcesContent":["import { BaseSeriesSpecTransformer } from '../base';\nimport { SeriesMarkNameEnum } from '../interface';\nimport type { IBarSeriesSpec, IBarSeriesTheme } from './interface';\n\nexport class BarSeriesSpecTransformer<\n  T extends IBarSeriesSpec = IBarSeriesSpec,\n  K extends IBarSeriesTheme = IBarSeriesTheme\n> extends BaseSeriesSpecTransformer<T, K> {\n  protected _transformLabelSpec(spec: T): void {\n    this._addMarkLabelSpec(spec, SeriesMarkNameEnum.bar);\n  }\n}\n"]}

package/esm/series/bar/bar.d.ts

@@ -36,12 +36,25 @@ export declare class BarSeries<T extends IBarSeriesSpec = IBarSeriesSpec> extend
     private _shouldDoPreCalculate;
     private _calculateStackRectPosition;
     private _calculateRectPosition;
+    protected _dataToPosX(datum: Datum): number;
+    protected _dataToPosX1(datum: Datum): number;
+    protected _dataToPosY(datum: Datum): number;
+    protected _dataToPosY1(datum: Datum): number;
     initBandRectMarkStyle(): void;
-    protected _initBarBackgroundMarkStyle(): void;
+    protected _initBandBarBackgroundMarkStyle(): void;
     initLinearRectMarkStyle(): void;
+    protected _initLinearBarBackgroundMarkStyle(): void;
     initAnimation(): void;
-    protected _getBarWidth(axisHelper: IAxisHelper): number;
-    protected _getPosition(direction: DirectionType, datum: Datum): number;
+    protected _getBarWidth(axisHelper: IAxisHelper, scaleDepth?: number): number;
+    protected _getPosition(direction: DirectionType, datum: Datum, scaleDepth?: number, mark?: SeriesMarkNameEnum): number;
+    protected _barBackgroundPositionXEncoder?: (datum: Datum) => number;
+    protected _getBarBackgroundPositionXEncoder: () => (datum: Datum) => number;
+    protected _setBarBackgroundPositionXEncoder: (encoder: (datum: Datum) => number) => void;
+    dataToBarBackgroundPositionX(datum: Datum, scaleDepth?: number): number;
+    protected _barBackgroundPositionYEncoder?: (datum: Datum) => number;
+    protected _getBarBackgroundPositionYEncoder: () => (datum: Datum) => number;
+    protected _setBarBackgroundPositionYEncoder: (encoder: (datum: Datum) => number) => void;
+    dataToBarBackgroundPositionY(datum: Datum, scaleDepth?: number): number;
     onLayoutEnd(ctx: any): void;
     compile(): void;
     getDefaultShapeType(): string;

package/esm/series/bar/bar.js

@@ -1,13 +1,7 @@
-import { PREFIX } from "./../../constant/index";
-
 import { isContinuous } from "@visactor/vscale";
 
-import { Direction } from "../../typings/space";
-
 import { CartesianSeries } from "../cartesian/cartesian";
 
-import { MarkTypeEnum } from "../../mark/interface/type";
-
 import { AttributeLevel } from "../../constant";
 
 import { valueInScaleRange } from "../../util/scale";
@@ -20,11 +14,11 @@ import { registerBarAnimation } from "./animation";
 
 import { animationConfig, shouldMarkDoMorph, userAnimationConfig } from "../../animation/utils";
 
-import { SeriesMarkNameEnum, SeriesTypeEnum } from "../interface/type";
+import { SeriesTypeEnum } from "../interface/type";
 
 import { registerRectMark } from "../../mark/rect";
 
-import { array, isValid, last } from "@visactor/vutils";
+import { array, isNil, isValid, last } from "@visactor/vutils";
 
 import { barSeriesMark } from "./constant";
 
@@ -48,18 +42,30 @@ import { getGroupAnimationParams } from "../util/utils";
 
 import { BarSeriesSpecTransformer } from "./bar-transformer";
 
-export const DefaultBandWidth = 6;
+import { ComponentTypeEnum } from "../../component/interface";
 
-const RECT_X = `${PREFIX}_rect_x`, RECT_X1 = `${PREFIX}_rect_x1`, RECT_Y = `${PREFIX}_rect_y`, RECT_Y1 = `${PREFIX}_rect_y1`;
+import { RECT_X, RECT_X1, RECT_Y, RECT_Y1 } from "../base/constant";
+
+export const DefaultBandWidth = 6;
 
 export class BarSeries extends CartesianSeries {
     constructor() {
-        super(...arguments), this.type = SeriesTypeEnum.bar, this._barMarkName = SeriesMarkNameEnum.bar, 
-        this._barMarkType = MarkTypeEnum.rect, this.transformerConstructor = BarSeriesSpecTransformer, 
-        this._supportStack = !0, this._bandPosition = 0;
+        super(...arguments), this.type = SeriesTypeEnum.bar, this._barMarkName = "bar", 
+        this._barMarkType = "rect", this.transformerConstructor = BarSeriesSpecTransformer, 
+        this._supportStack = !0, this._bandPosition = 0, this._getBarBackgroundPositionXEncoder = () => {
+            var _a;
+            return null === (_a = this._barBackgroundPositionXEncoder) || void 0 === _a ? void 0 : _a.bind(this);
+        }, this._setBarBackgroundPositionXEncoder = encoder => {
+            this._barBackgroundPositionXEncoder = encoder.bind(this);
+        }, this._getBarBackgroundPositionYEncoder = () => {
+            var _a;
+            return null === (_a = this._barBackgroundPositionYEncoder) || void 0 === _a ? void 0 : _a.bind(this);
+        }, this._setBarBackgroundPositionYEncoder = encoder => {
+            this._barBackgroundPositionYEncoder = encoder.bind(this);
+        };
     }
     initMark() {
-        var _a;
+        var _a, _b;
         const progressive = {
             progressiveStep: this._spec.progressiveStep,
             progressiveThreshold: this._spec.progressiveThreshold,
@@ -75,22 +81,23 @@ export class BarSeries extends CartesianSeries {
             groupKey: this._seriesField,
             isSeriesMark: !0,
             progressive: progressive,
-            customShape: null === (_a = this._spec.bar) || void 0 === _a ? void 0 : _a.customShape
+            customShape: null === (_a = this._spec.bar) || void 0 === _a ? void 0 : _a.customShape,
+            stateSort: null === (_b = this._spec.bar) || void 0 === _b ? void 0 : _b.stateSort
         });
     }
     _initBarBackgroundMark(progressive) {
-        var _a, _b;
-        (null === (_a = this._spec.barBackground) || void 0 === _a ? void 0 : _a.visible) && (this._barBackgroundMark = this._createMark(BarSeries.mark.barBackground, {
+        this._spec.barBackground && this._spec.barBackground.visible && (this._barBackgroundMark = this._createMark(BarSeries.mark.barBackground, {
             dataView: this._barBackgroundViewData.getDataView(),
             dataProductId: this._barBackgroundViewData.getProductId(),
             progressive: progressive,
-            customShape: null === (_b = this._spec.barBackground) || void 0 === _b ? void 0 : _b.customShape
+            customShape: this._spec.barBackground.customShape,
+            stateSort: this._spec.barBackground.stateSort
         }));
     }
     initMarkStyle() {
-        this._barMark && (this.setMarkStyle(this._barMark, {
+        this._barMark && this.setMarkStyle(this._barMark, {
             fill: this.getColorAttribute()
-        }, "normal", AttributeLevel.Series), this._trigger.registerMark(this._barMark));
+        }, "normal", AttributeLevel.Series);
     }
     initLabelMarkStyle(textMark) {
         textMark && this.setMarkStyle(textMark, {
@@ -104,35 +111,68 @@ export class BarSeries extends CartesianSeries {
     }
     _statisticViewData() {
         var _a, _b;
-        if (super._statisticViewData(), !(null === (_a = this._spec.barBackground) || void 0 === _a ? void 0 : _a.visible)) return;
-        registerDataSetInstanceTransform(this._option.dataSet, "addVChartProperty", addVChartProperty), 
-        registerDataSetInstanceTransform(this._option.dataSet, "dimensionItems", (([data], op) => {
-            var _a;
-            let dataCollect = [ {} ];
-            const fields = this.getDimensionField();
-            for (let i = 0; i < fields.length; i++) {
-                const field = fields[i], values = null === (_a = data.latestData[field]) || void 0 === _a ? void 0 : _a.values;
-                if (!(null == values ? void 0 : values.length)) continue;
-                const newDataCollect = [];
-                for (let j = 0; j < values.length; j++) for (let k = 0; k < dataCollect.length; k++) newDataCollect.push(Object.assign(Object.assign({}, dataCollect[k]), {
-                    [field]: values[j]
-                }));
-                dataCollect = newDataCollect;
-            }
-            return dataCollect;
-        }));
-        const barBackgroundData = new DataView(this._option.dataSet).parse([ this._viewDataStatistics ], {
-            type: "dataview"
-        }).transform({
-            type: "dimensionItems"
-        }, !1).transform({
-            type: "addVChartProperty",
-            options: {
-                beforeCall: initKeyMap.bind(this),
-                call: addDataKey
-            }
-        }, !1);
-        null === (_b = this._viewDataStatistics) || void 0 === _b || _b.target.addListener("change", barBackgroundData.reRunAllTransform), 
+        super._statisticViewData();
+        const spec = null !== (_a = this._spec.barBackground) && void 0 !== _a ? _a : {};
+        if (!spec.visible) return;
+        const hasBandAxis = this._getRelatedComponentSpecInfo("axes").some((axisInfo => axisInfo.type === ComponentTypeEnum.cartesianBandAxis));
+        let barBackgroundData;
+        if (registerDataSetInstanceTransform(this._option.dataSet, "addVChartProperty", addVChartProperty), 
+        hasBandAxis) {
+            const dimensionItems = ([data], {scaleDepth: scaleDepth}) => {
+                var _a;
+                let dataCollect = [ {} ];
+                const fields = this.getDimensionField(), depth = isNil(scaleDepth) ? fields.length : Math.min(fields.length, scaleDepth);
+                for (let i = 0; i < depth; i++) {
+                    const field = fields[i], values = null === (_a = data.latestData[field]) || void 0 === _a ? void 0 : _a.values;
+                    if (!(null == values ? void 0 : values.length)) continue;
+                    const newDataCollect = [];
+                    for (let j = 0; j < values.length; j++) for (let k = 0; k < dataCollect.length; k++) newDataCollect.push(Object.assign(Object.assign({}, dataCollect[k]), {
+                        [field]: values[j]
+                    }));
+                    dataCollect = newDataCollect;
+                }
+                return dataCollect;
+            };
+            registerDataSetInstanceTransform(this._option.dataSet, "dimensionItems", dimensionItems), 
+            barBackgroundData = new DataView(this._option.dataSet).parse([ this._viewDataStatistics ], {
+                type: "dataview"
+            }).transform({
+                type: "dimensionItems",
+                options: {
+                    scaleDepth: isNil(spec.fieldLevel) ? void 0 : spec.fieldLevel + 1
+                }
+            }, !1).transform({
+                type: "addVChartProperty",
+                options: {
+                    beforeCall: initKeyMap.bind(this),
+                    call: addDataKey
+                }
+            }, !1), null === (_b = this._viewDataStatistics) || void 0 === _b || _b.target.addListener("change", barBackgroundData.reRunAllTransform);
+        } else {
+            const dimensionItems = ([data]) => {
+                const dataCollect = [], [field0, field1] = this.getDimensionContinuousField(), map = {};
+                return viewData.latestData.forEach((datum => {
+                    const key = `${datum[field0]}-${datum[field1]}`;
+                    map[key] || (map[key] = {
+                        [field0]: datum[field0],
+                        [field1]: datum[field1]
+                    }, dataCollect.push(map[key]));
+                })), dataCollect;
+            };
+            registerDataSetInstanceTransform(this._option.dataSet, "dimensionItems", dimensionItems);
+            const viewData = this.getViewData();
+            barBackgroundData = new DataView(this._option.dataSet).parse([ viewData ], {
+                type: "dataview"
+            }).transform({
+                type: "dimensionItems"
+            }, !1).transform({
+                type: "addVChartProperty",
+                options: {
+                    beforeCall: initKeyMap.bind(this),
+                    call: addDataKey
+                }
+            }, !1), null == viewData || viewData.target.addListener("change", barBackgroundData.reRunAllTransform);
+        }
         this._barBackgroundViewData = new SeriesData(this._option, barBackgroundData);
     }
     init(option) {
@@ -141,16 +181,16 @@ export class BarSeries extends CartesianSeries {
     }
     _shouldDoPreCalculate() {
         const region = this.getRegion();
-        return this._stack && region.getSeries().filter((s => s.type === SeriesTypeEnum.bar && s.getSpec().barMinHeight)).length;
+        return this._stack && region.getSeries().filter((s => s.type === this.type && s.getSpec().barMinHeight)).length;
     }
     _calculateStackRectPosition(isVertical) {
         const region = this.getRegion();
         if (region._bar_series_position_calculated) return;
         let start, end, startMethod, endMethod, axisHelper;
         region._bar_series_position_calculated = !0, isVertical ? (start = RECT_Y1, end = RECT_Y, 
-        startMethod = "dataToPositionY1", endMethod = "dataToPositionY", axisHelper = "_yAxisHelper") : (start = RECT_X1, 
-        end = RECT_X, startMethod = "dataToPositionX1", endMethod = "dataToPositionX", axisHelper = "_xAxisHelper");
-        const stackValueGroup = getRegionStackGroup(region, !1, (s => s.type === SeriesTypeEnum.bar));
+        startMethod = "_dataToPosY1", endMethod = "_dataToPosY", axisHelper = "_yAxisHelper") : (start = RECT_X1, 
+        end = RECT_X, startMethod = "_dataToPosX1", endMethod = "_dataToPosX", axisHelper = "_xAxisHelper");
+        const stackValueGroup = getRegionStackGroup(region, !1, (s => s.type === this.type));
         for (const stackValue in stackValueGroup) for (const key in stackValueGroup[stackValue].nodes) stackWithMinHeight(stackValueGroup[stackValue].nodes[key], region.getStackInverse(), {
             isVertical: isVertical,
             start: start,
@@ -163,8 +203,8 @@ export class BarSeries extends CartesianSeries {
     _calculateRectPosition(datum, isVertical) {
         var _a, _b;
         let startMethod, endMethod, axisHelper;
-        isVertical ? (startMethod = "dataToPositionY1", endMethod = "dataToPositionY", axisHelper = "_yAxisHelper") : (startMethod = "dataToPositionX1", 
-        endMethod = "dataToPositionX", axisHelper = "_xAxisHelper");
+        isVertical ? (startMethod = "_dataToPosY1", endMethod = "_dataToPosY", axisHelper = "_yAxisHelper") : (startMethod = "_dataToPosX1", 
+        endMethod = "_dataToPosX", axisHelper = "_xAxisHelper");
         const seriesScale = null === (_b = (_a = this[axisHelper]).getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), inverse = this[axisHelper].isInverse(), barMinHeight = this._spec.barMinHeight, y1 = valueInScaleRange(this[startMethod](datum), seriesScale), y = valueInScaleRange(this[endMethod](datum), seriesScale);
         let height = Math.abs(y1 - y);
         height < barMinHeight && (height = barMinHeight);
@@ -172,30 +212,42 @@ export class BarSeries extends CartesianSeries {
         return y < y1 ? flag = -1 : y === y1 && (flag = isVertical ? inverse ? 1 : -1 : inverse ? -1 : 1), 
         y1 + flag * height;
     }
+    _dataToPosX(datum) {
+        return this.dataToPositionX(datum);
+    }
+    _dataToPosX1(datum) {
+        return this.dataToPositionX1(datum);
+    }
+    _dataToPosY(datum) {
+        return this.dataToPositionY(datum);
+    }
+    _dataToPosY1(datum) {
+        return this.dataToPositionY1(datum);
+    }
     initBandRectMarkStyle() {
         var _a, _b, _c, _d;
         const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0);
-        this.direction === Direction.horizontal ? this.setMarkStyle(this._barMark, {
+        "horizontal" === this.direction ? this.setMarkStyle(this._barMark, {
             x: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!1), 
-            datum[RECT_X]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !1) : valueInScaleRange(this.dataToPositionX(datum), xScale),
+            datum[RECT_X]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !1) : valueInScaleRange(this._dataToPosX(datum), xScale),
             x1: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!1), 
-            datum[RECT_X1]) : valueInScaleRange(this.dataToPositionX1(datum), xScale),
+            datum[RECT_X1]) : valueInScaleRange(this._dataToPosX1(datum), xScale),
             y: datum => this._getPosition(this.direction, datum),
             height: () => this._getBarWidth(this._yAxisHelper)
         }, "normal", AttributeLevel.Series) : this.setMarkStyle(this._barMark, {
             x: datum => this._getPosition(this.direction, datum),
             y: (datum, ctx, opt, dataView) => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!0), 
-            datum[RECT_Y]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !0) : valueInScaleRange(this.dataToPositionY(datum), yScale),
+            datum[RECT_Y]) : this._spec.barMinHeight ? this._calculateRectPosition(datum, !0) : valueInScaleRange(this._dataToPosY(datum), yScale),
             y1: datum => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!0), 
-            datum[RECT_Y1]) : valueInScaleRange(this.dataToPositionY1(datum), yScale),
+            datum[RECT_Y1]) : valueInScaleRange(this._dataToPosY1(datum), yScale),
             width: () => this._getBarWidth(this._xAxisHelper)
-        }, "normal", AttributeLevel.Series), this._initBarBackgroundMarkStyle();
+        }, "normal", AttributeLevel.Series), this._initBandBarBackgroundMarkStyle();
     }
-    _initBarBackgroundMarkStyle() {
-        var _a, _b, _c, _d;
+    _initBandBarBackgroundMarkStyle() {
+        var _a, _b, _c, _d, _e;
         if (!this._barBackgroundMark) return;
-        const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0);
-        this.direction === Direction.horizontal ? this.setMarkStyle(this._barBackgroundMark, {
+        const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0), spec = null !== (_e = this._spec.barBackground) && void 0 !== _e ? _e : {}, scaleDepth = isNil(spec.fieldLevel) ? void 0 : spec.fieldLevel + 1;
+        "horizontal" === this.direction ? this.setMarkStyle(this._barBackgroundMark, {
             x: () => {
                 const range = xScale.range();
                 return Math.min(range[0], range[range.length - 1]);
@@ -204,10 +256,10 @@ export class BarSeries extends CartesianSeries {
                 const range = xScale.range();
                 return Math.max(range[0], range[range.length - 1]);
             },
-            y: datum => this._getPosition(this.direction, datum),
-            height: () => this._getBarWidth(this._yAxisHelper)
+            y: datum => this._getPosition(this.direction, datum, scaleDepth, "barBackground"),
+            height: () => this._getBarWidth(this._yAxisHelper, scaleDepth)
         }, "normal", AttributeLevel.Series) : this.setMarkStyle(this._barBackgroundMark, {
-            x: datum => this._getPosition(this.direction, datum),
+            x: datum => this._getPosition(this.direction, datum, scaleDepth, "barBackground"),
             y: () => {
                 const range = yScale.range();
                 return Math.min(range[0], range[range.length - 1]);
@@ -216,13 +268,13 @@ export class BarSeries extends CartesianSeries {
                 const range = yScale.range();
                 return Math.max(range[0], range[range.length - 1]);
             },
-            width: () => this._getBarWidth(this._xAxisHelper)
+            width: () => this._getBarWidth(this._xAxisHelper, scaleDepth)
         }, "normal", AttributeLevel.Series);
     }
     initLinearRectMarkStyle() {
         var _a, _b, _c, _d;
         const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0);
-        this.direction === Direction.vertical ? this.setMarkStyle(this._barMark, {
+        "vertical" === this.direction ? this.setMarkStyle(this._barMark, {
             x: datum => valueInScaleRange(this.dataToPositionX(datum), xScale),
             x1: datum => valueInScaleRange(this.dataToPositionX1(datum), xScale),
             y: (datum, ctx, opt, dataView) => this._shouldDoPreCalculate() ? (this._calculateStackRectPosition(!0), 
@@ -236,6 +288,33 @@ export class BarSeries extends CartesianSeries {
             datum[RECT_X1]) : valueInScaleRange(this.dataToPositionX1(datum), xScale),
             y: datum => valueInScaleRange(this.dataToPositionY(datum), yScale),
             y1: datum => valueInScaleRange(this.dataToPositionY1(datum), yScale)
+        }, "normal", AttributeLevel.Series), this._initLinearBarBackgroundMarkStyle();
+    }
+    _initLinearBarBackgroundMarkStyle() {
+        var _a, _b, _c, _d;
+        const xScale = null === (_b = null === (_a = this._xAxisHelper) || void 0 === _a ? void 0 : _a.getScale) || void 0 === _b ? void 0 : _b.call(_a, 0), yScale = null === (_d = null === (_c = this._yAxisHelper) || void 0 === _c ? void 0 : _c.getScale) || void 0 === _d ? void 0 : _d.call(_c, 0);
+        "vertical" === this.direction ? this.setMarkStyle(this._barBackgroundMark, {
+            x: datum => valueInScaleRange(this.dataToPositionX(datum), xScale),
+            x1: datum => valueInScaleRange(this.dataToPositionX1(datum), xScale),
+            y: () => {
+                const range = yScale.range();
+                return Math.min(range[0], range[range.length - 1]);
+            },
+            y1: () => {
+                const range = yScale.range();
+                return Math.max(range[0], range[range.length - 1]);
+            }
+        }, "normal", AttributeLevel.Series) : this.setMarkStyle(this._barBackgroundMark, {
+            x: () => {
+                const range = xScale.range();
+                return Math.min(range[0], range[range.length - 1]);
+            },
+            x1: () => {
+                const range = xScale.range();
+                return Math.max(range[0], range[range.length - 1]);
+            },
+            y: datum => valueInScaleRange(this.dataToPositionY(datum), yScale),
+            y1: datum => valueInScaleRange(this.dataToPositionY1(datum), yScale)
         }, "normal", AttributeLevel.Series);
     }
     initAnimation() {
@@ -251,35 +330,41 @@ export class BarSeries extends CartesianSeries {
         }, appearPreset = null === (_a = this._spec.animationAppear) || void 0 === _a ? void 0 : _a.preset, animationParams = getGroupAnimationParams(this);
         this._barMark.setAnimationConfig(animationConfig(null === (_b = Factory.getAnimationInKey("bar")) || void 0 === _b ? void 0 : _b(barAnimationParams, appearPreset), userAnimationConfig(this._barMarkName, this._spec, this._markAttributeContext), animationParams));
     }
-    _getBarWidth(axisHelper) {
+    _getBarWidth(axisHelper, scaleDepth) {
         var _a, _b;
-        const hasBarWidth = void 0 !== this._spec.barWidth, bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, this._groups ? this._groups.fields.length - 1 : 0)) && void 0 !== _b ? _b : 6;
-        if (hasBarWidth) return getActualNumValue(this._spec.barWidth, bandWidth);
+        const depthFromSpec = this._groups ? this._groups.fields.length : 1, depth = isNil(scaleDepth) ? depthFromSpec : Math.min(depthFromSpec, scaleDepth), bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, depth - 1)) && void 0 !== _b ? _b : 6;
+        if (void 0 !== this._spec.barWidth && depth === depthFromSpec) return getActualNumValue(this._spec.barWidth, bandWidth);
         const hasBarMinWidth = void 0 !== this._spec.barMinWidth, hasBarMaxWidth = void 0 !== this._spec.barMaxWidth;
         let width = bandWidth;
         return hasBarMinWidth && (width = Math.max(width, getActualNumValue(this._spec.barMinWidth, bandWidth))), 
         hasBarMaxWidth && (width = Math.min(width, getActualNumValue(this._spec.barMaxWidth, bandWidth))), 
         width;
     }
-    _getPosition(direction, datum) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    _getPosition(direction, datum, scaleDepth, mark) {
+        var _a, _b, _c, _d, _e, _f, _g;
         let axisHelper, sizeAttribute, dataToPosition;
-        direction === Direction.horizontal ? (axisHelper = this.getYAxisHelper(), sizeAttribute = "height", 
-        dataToPosition = this.dataToPositionY.bind(this)) : (axisHelper = this.getXAxisHelper(), 
-        sizeAttribute = "width", dataToPosition = this.dataToPositionX.bind(this));
-        const scale = axisHelper.getScale(0), size = this._barMark.getAttribute(sizeAttribute, datum), bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, this._groups ? this._groups.fields.length - 1 : 0)) && void 0 !== _b ? _b : 6;
-        if ((null === (_d = null === (_c = this._groups) || void 0 === _c ? void 0 : _c.fields) || void 0 === _d ? void 0 : _d.length) > 1 && isValid(this._spec.barGapInGroup)) {
+        "horizontal" === direction ? (axisHelper = this.getYAxisHelper(), sizeAttribute = "height", 
+        dataToPosition = "barBackground" === mark ? this.dataToBarBackgroundPositionY.bind(this) : this.dataToPositionY.bind(this)) : (axisHelper = this.getXAxisHelper(), 
+        sizeAttribute = "width", dataToPosition = "barBackground" === mark ? this.dataToBarBackgroundPositionX.bind(this) : this.dataToPositionX.bind(this));
+        const scale = axisHelper.getScale(0), depthFromSpec = this._groups ? this._groups.fields.length : 1, depth = isNil(scaleDepth) ? depthFromSpec : Math.min(depthFromSpec, scaleDepth), bandWidth = null !== (_b = null === (_a = axisHelper.getBandwidth) || void 0 === _a ? void 0 : _a.call(axisHelper, depth - 1)) && void 0 !== _b ? _b : 6, size = depth === depthFromSpec ? this._barMark.getAttribute(sizeAttribute, datum) : bandWidth;
+        if (depth > 1 && isValid(this._spec.barGapInGroup)) {
             const groupFields = this._groups.fields, barInGroup = array(this._spec.barGapInGroup);
             let totalWidth = 0, offSet = 0;
             for (let index = groupFields.length - 1; index >= 1; index--) {
-                const groupField = groupFields[index], groupValues = null !== (_h = null === (_g = null === (_f = null === (_e = this.getViewDataStatistics()) || void 0 === _e ? void 0 : _e.latestData) || void 0 === _f ? void 0 : _f[groupField]) || void 0 === _g ? void 0 : _g.values) && void 0 !== _h ? _h : [], groupCount = groupValues.length, gap = getActualNumValue(null !== (_j = barInGroup[index - 1]) && void 0 !== _j ? _j : last(barInGroup), bandWidth), i = groupValues.indexOf(datum[groupField]);
+                const groupField = groupFields[index], groupValues = null !== (_f = null === (_e = null === (_d = null === (_c = this.getViewDataStatistics()) || void 0 === _c ? void 0 : _c.latestData) || void 0 === _d ? void 0 : _d[groupField]) || void 0 === _e ? void 0 : _e.values) && void 0 !== _f ? _f : [], groupCount = groupValues.length, gap = getActualNumValue(null !== (_g = barInGroup[index - 1]) && void 0 !== _g ? _g : last(barInGroup), bandWidth), i = groupValues.indexOf(datum[groupField]);
                 index === groupFields.length - 1 ? (totalWidth += groupCount * size + (groupCount - 1) * gap, 
                 offSet += i * (size + gap)) : (offSet += i * (totalWidth + gap), totalWidth += totalWidth + (groupCount - 1) * gap);
             }
             return scale.scale(datum[groupFields[0]]) + axisHelper.getBandwidth(0) / 2 - totalWidth / 2 + offSet;
         }
         const continuous = isContinuous(scale.type || "band");
-        return dataToPosition(datum) + .5 * (bandWidth - size) + (continuous ? -bandWidth / 2 : 0);
+        return dataToPosition(datum, depth) + .5 * (bandWidth - size) + (continuous ? -bandWidth / 2 : 0);
+    }
+    dataToBarBackgroundPositionX(datum, scaleDepth) {
+        return this._dataToPosition(datum, this._xAxisHelper, this.fieldX, scaleDepth, this._getBarBackgroundPositionXEncoder, this._setBarBackgroundPositionXEncoder);
+    }
+    dataToBarBackgroundPositionY(datum, scaleDepth) {
+        return this._dataToPosition(datum, this._yAxisHelper, this.fieldY, scaleDepth, this._getBarBackgroundPositionYEncoder, this._setBarBackgroundPositionYEncoder);
     }
     onLayoutEnd(ctx) {
         super.onLayoutEnd(ctx);
@@ -290,9 +375,9 @@ export class BarSeries extends CartesianSeries {
             const {width: width, height: height} = this._region.getLayoutRect(), samplingTrans = [], fieldsY = this._fieldY, fieldsX = this._fieldX;
             samplingTrans.push({
                 type: "sampling",
-                size: this._direction === Direction.vertical ? width : height,
+                size: "vertical" === this._direction ? width : height,
                 factor: this._spec.samplingFactor,
-                yfield: this._direction === Direction.vertical ? fieldsY[0] : fieldsX[0],
+                yfield: "vertical" === this._direction ? fieldsY[0] : fieldsX[0],
                 groupBy: this._seriesField,
                 mode: this._spec.sampling
             }), this._data.getProduct().transform(samplingTrans);