@visactor/vchart 2.0.8-alpha.5 → 2.0.9

package/build/index.es.js

@@ -43196,7 +43196,16 @@ class LabelBase extends AnimateComponent {
       data = data.filter(d => !seenIds.has(d.id) && seenIds.add(d.id));
     }
     let labels = this._initText(data);
-    labels = isFunction$1(customLayoutFunc) ? customLayoutFunc(data, labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null, this) : this._layout(labels), isFunction$1(customOverlapFunc) ? labels = customOverlapFunc(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null, this) : !1 !== overlap && (labels = this._overlapping(labels)), isFunction$1(this.attribute.onAfterOverlapping) && this.attribute.onAfterOverlapping(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null, this), labels && labels.length && labels.forEach(label => {
+    labels = isFunction$1(customLayoutFunc) ? customLayoutFunc(data, labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null, this) : this._layout(labels);
+    const filteredLabels = [],
+      overlapLabels = labels;
+    if (!isBoolean$1(overlap) && isFunction$1(overlap.filterBeforeOverlap)) {
+      const getRelatedGraphic = this.getRelatedGraphic.bind(this);
+      labels.forEach(label => {
+        overlap.filterBeforeOverlap(label, getRelatedGraphic, this) ? overlapLabels.push(label) : filteredLabels.push(label);
+      });
+    }
+    isFunction$1(customOverlapFunc) ? labels = customOverlapFunc(overlapLabels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null, this).concat(filteredLabels) : !1 !== overlap && (labels = this._overlapping(overlapLabels).concat(filteredLabels)), isFunction$1(this.attribute.onAfterOverlapping) && this.attribute.onAfterOverlapping(labels, this.getRelatedGraphic.bind(this), this._isCollectionBase ? d => this._idToPoint.get(d.id) : null, this), labels && labels.length && labels.forEach(label => {
       this._bindEvent(label), this._setStatesOfText(label);
     }), !1 !== smartInvert && this._smartInvert(labels), this._renderLabels(labels), !1 !== this._enableAnimation && this._baseMarks.forEach((mark, index) => {
       mark.initAttributes(markAttributeList[index]);
@@ -45465,15 +45474,18 @@ class DataZoomRenderer {
       pickable: !1
     }, selectedBackgroundChartStyle.area));
   }
-  _computeBasePoints() {
+  _computeBasePoints(points) {
     const {
         orient: orient
       } = this.attribute,
-      {
-        position: position,
-        width: width,
-        height: height
-      } = this._getLayoutAttrFromConfig();
+      key = "bottom" === orient || "top" === orient ? "x" : "y";
+    let lastPointSide = Math.sign(points[points.length - 1][key] - points[0][key]);
+    0 === lastPointSide && (lastPointSide = 1);
+    const {
+      position: position,
+      width: width,
+      height: height
+    } = this._getLayoutAttrFromConfig();
     let basePointStart, basePointEnd;
     return this._isHorizontal ? (basePointStart = [{
       x: position.x,
@@ -45493,7 +45505,10 @@ class DataZoomRenderer {
     }], basePointEnd = [{
       x: position.x,
       y: position.y
-    }]), {
+    }]), Math.sign(basePointEnd[0][key] - basePointStart[0][key]) !== lastPointSide ? {
+      basePointStart: basePointEnd,
+      basePointEnd: basePointStart
+    } : {
       basePointStart: basePointStart,
       basePointEnd: basePointEnd
     };
@@ -45516,7 +45531,7 @@ class DataZoomRenderer {
     const {
       basePointStart: basePointStart,
       basePointEnd: basePointEnd
-    } = this._computeBasePoints();
+    } = this._computeBasePoints(previewPoints);
     return basePointStart.concat(previewPoints).concat(basePointEnd);
   }
   _getPreviewAreaPoints() {
@@ -45531,7 +45546,7 @@ class DataZoomRenderer {
     const {
       basePointStart: basePointStart,
       basePointEnd: basePointEnd
-    } = this._computeBasePoints();
+    } = this._computeBasePoints(previewPoints);
     return basePointStart.concat(previewPoints).concat(basePointEnd);
   }
   renderText() {
@@ -45944,11 +45959,12 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
     })));
   }
   setAttributes(params, forceUpdateTag) {
+    var _a, _b;
     const {
       start: start,
       end: end
     } = this.attribute;
-    start && (this._state.start = start), end && (this._state.end = end), this._renderer.setAttributes(this._getRendererAttrs()), this._interaction.setAttributes(this._getInteractionAttrs()), super.setAttributes(params, forceUpdateTag);
+    start && (this._state.start = null !== (_a = params.start) && void 0 !== _a ? _a : start), end && (this._state.end = null !== (_b = params.end) && void 0 !== _b ? _b : end), this._renderer.setAttributes(this._getRendererAttrs()), this._interaction.setAttributes(this._getInteractionAttrs()), super.setAttributes(params, forceUpdateTag);
   }
   render() {
     this._layoutCacheFromConfig = null, this._container = this.createOrUpdateChild("datazoom-container", {}, "group"), this._renderer.renderDataZoom(), this._interaction.setAttributes(this._getInteractionAttrs());
@@ -53702,6 +53718,7 @@ var ChartEvent;
     ChartEvent["markDeltaYUpdate"] = "markDeltaYUpdate";
     ChartEvent["viewDataLabelUpdate"] = "viewDataLabelUpdate";
     ChartEvent["scaleDomainUpdate"] = "scaleDomainUpdate";
+    ChartEvent["scaleRawDomainUpdate"] = "scaleRawDomainUpdate";
     ChartEvent["scaleUpdate"] = "scaleUpdate";
     ChartEvent["dataZoomChange"] = "dataZoomChange";
     ChartEvent["drill"] = "drill";
@@ -54723,6 +54740,7 @@ class Compiler {
         var _a, _b, _c, _d, _e, _f;
         (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeDoRender) === null || _b === void 0 ? void 0 : _b.call(_a, this._compileChart.getOption().globalInstance);
         if (this._stage) {
+            this.runStageAnimation();
             this._rootMarks.forEach(g => {
                 traverseGroupMark(g, m => {
                     if (m.needClear) {
@@ -54765,6 +54783,7 @@ class Compiler {
             this.handleLayoutEnd();
         }
         this.findProgressiveMarks();
+        this.updateStateAnimation();
         this._doRender(true);
         this.doPreProgressive();
         log(`--- start of renderMarks(${this._count}) ---`);
@@ -54810,6 +54829,67 @@ class Compiler {
             this.renderMarks();
         }
     }
+    setStageAnimationConfig(config) {
+        const animationConfig = {};
+        Object.keys(config).forEach(key => {
+            const value = config[key];
+            if (isArray$1(value)) {
+                animationConfig[key] = value.map(item => {
+                    var _a;
+                    const options = (_a = item.options) !== null && _a !== void 0 ? _a : {};
+                    return Object.assign(Object.assign({}, item), { options: (...args) => {
+                            const _options = typeof options === 'function' ? options(...args) : options;
+                            return Object.assign({}, _options);
+                        } });
+                });
+            }
+            else {
+                animationConfig[key] = Object.assign({}, config[key]);
+            }
+        });
+        this._stateAnimationConfig = animationConfig;
+    }
+    updateStateAnimation() {
+        const allMarks = [];
+        this._rootMarks.forEach(mark => {
+            traverseGroupMark(mark, m => {
+                allMarks.push(m);
+            });
+        });
+        const markAnimationStates = allMarks.map(mark => mark.getAnimationState());
+        const animationState = markAnimationStates.every(state => state === AnimationStateEnum.appear)
+            ? AnimationStateEnum.appear
+            : markAnimationStates.every(state => state === AnimationStateEnum.disappear)
+                ? AnimationStateEnum.disappear
+                : AnimationStateEnum.none;
+        if (!this._stage.context) {
+            this._stage.context = {};
+        }
+        this._stage.context.animationState = animationState;
+    }
+    runStageAnimation() {
+        var _a;
+        const animationState = (_a = this._stage.context) === null || _a === void 0 ? void 0 : _a.animationState;
+        if (!this._stateAnimationConfig || animationState === AnimationStateEnum.none) {
+            return;
+        }
+        const animationConfigs = array(this._stateAnimationConfig[animationState]).filter(config => config.type);
+        if (!animationConfigs.length) {
+            return;
+        }
+        if (animationState === AnimationStateEnum.appear) {
+            this._stage.stopAnimationState(AnimationStateEnum.disappear);
+        }
+        else if (animationState === AnimationStateEnum.disappear) {
+            this._stage.stopAnimationState(AnimationStateEnum.appear);
+        }
+        this._stage.applyAnimationState([animationState], [
+            {
+                name: animationState,
+                animation: animationConfigs
+            }
+        ]);
+    }
     updateViewBox(viewBox, reRender = true) {
         if (!this._stage) {
             return;
@@ -58279,6 +58359,15 @@ class BaseMark extends GrammarItem {
             : () => 'key';
         this._dataByGroup = groupData(data, this._groupKeyGetter);
     }
+    getAnimationState() {
+        const graphicsAnimationStates = this._graphics.map(g => g.context.animationState);
+        const animationState = graphicsAnimationStates.every(state => state === AnimationStateEnum.appear)
+            ? AnimationStateEnum.appear
+            : graphicsAnimationStates.every(state => state === AnimationStateEnum.disappear)
+                ? AnimationStateEnum.disappear
+                : graphicsAnimationStates[0];
+        return animationState !== null && animationState !== void 0 ? animationState : AnimationStateEnum.none;
+    }
     createAnimationStateList(type, animationConfig) {
         var _a;
         let config = animationConfig[type];
@@ -58533,14 +58622,14 @@ class BaseMark extends GrammarItem {
     _runApplyGraphic(graphics) {
         const hasAnimation = this.hasAnimation();
         graphics.forEach((g, index) => {
-            var _a;
+            var _a, _b;
             const finalAttrs = g.context.finalAttrs;
             const hasStateAnimation = this.hasAnimationByState(g.context.animationState);
             if (!g.setAttributes) {
                 const mockGraphic = g;
                 g = this._createGraphic(finalAttrs);
                 if (hasAnimation) {
-                    g.setFinalAttributes(finalAttrs);
+                    (_a = g.setFinalAttributes) === null || _a === void 0 ? void 0 : _a.call(g, finalAttrs);
                 }
                 g.context = mockGraphic.context;
                 g.context.diffAttrs = finalAttrs;
@@ -58548,7 +58637,7 @@ class BaseMark extends GrammarItem {
                 if (gIndex >= 0) {
                     this._graphics[gIndex] = g;
                 }
-                if ((_a = this.renderContext) === null || _a === void 0 ? void 0 : _a.progressive) {
+                if ((_b = this.renderContext) === null || _b === void 0 ? void 0 : _b.progressive) {
                     const groupIndex = this._dataByGroup ? this._dataByGroup.keys.indexOf(g.context.groupKey) : 0;
                     const group = groupIndex >= 0 ? this._product.getChildAt(groupIndex) : null;
                     if (group) {
@@ -59402,10 +59491,20 @@ const registerLineOrAreaAnimation = () => {
 const registerPolygonAnimation = () => {
     AnimateExecutor.registerBuiltInAnimate('growPointsOut', GrowPointsOut);
 };
+const registerStageAnimation = () => {
+    AnimateExecutor.registerBuiltInAnimate('distortion', Distortion);
+    AnimateExecutor.registerBuiltInAnimate('particle', Particle);
+    AnimateExecutor.registerBuiltInAnimate('pixelation', Pixelation);
+    AnimateExecutor.registerBuiltInAnimate('gaussianBlur', GaussianBlur);
+    AnimateExecutor.registerBuiltInAnimate('glitch', Glitch);
+    AnimateExecutor.registerBuiltInAnimate('grayscale', Grayscale);
+    AnimateExecutor.registerBuiltInAnimate('dissolve', Dissolve);
+};
 
 const registerAnimate = () => {
     registerAnimate$1();
     registerBuiltInAnimation();
+    registerStageAnimation();
 };
 const registerDragPlugin = () => {
     Factory.registerStageEventPlugin('drag', DragNDrop);
@@ -60981,10 +61080,6 @@ class VChart {
         var _a;
         return (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setDimensionIndex(value, opt);
     }
-    showCrosshair(cb) {
-        var _a;
-        (_a = this._chart) === null || _a === void 0 ? void 0 : _a.showCrosshair(cb);
-    }
     stopAnimation() {
         var _a;
         (_a = this.getStage()) === null || _a === void 0 ? void 0 : _a.stopAnimation(true);
@@ -61294,7 +61389,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.8-alpha.5";
+const version = "2.0.9";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -62344,6 +62439,7 @@ class BaseSeries extends BaseModel {
         this.initMarkState();
         if (hasAnimation) {
             this.initAnimation();
+            this.initStageAnimation();
         }
         this.afterInitMark();
         this.initEvent();
@@ -62800,6 +62896,13 @@ class BaseSeries extends BaseModel {
     }
     initAnimation() {
     }
+    initStageAnimation() {
+        const compiler = this._option.getCompiler();
+        if (!(compiler === null || compiler === void 0 ? void 0 : compiler.setStageAnimationConfig)) {
+            return;
+        }
+        compiler.setStageAnimationConfig(animationConfig({}, userAnimationConfig('stage', this._spec, this._markAttributeContext), null));
+    }
     initMarkState() {
         this.initSeriesStyleState();
     }
@@ -65670,7 +65773,7 @@ class AxisComponent extends BaseComponent {
                 const viewData = s.getViewData();
                 if (rawData) {
                     field.forEach(f => {
-                        data.push(s.getRawDataStatisticsByField(f, false));
+                        data.push(s.getRawDataStatisticsByField(f, !!isContinuous(this._scale.type)));
                     });
                 }
                 else if (viewData && viewData.latestData && viewData.latestData.length) {
@@ -66933,8 +67036,12 @@ const DEFAULT_TICK_COUNT = 5;
 class LinearAxisMixin {
     constructor() {
         this._extend = {};
+        this._rawDomain = [];
         this.niceLabelFormatter = null;
     }
+    getRawDomain() {
+        return this._rawDomain;
+    }
     setExtraAttrFromSpec() {
         isValid$1(this._spec.nice) && (this._nice = this._spec.nice);
         isValid$1(this._spec.zero) && (this._zero = this._spec.zero);
@@ -67201,9 +67308,13 @@ class LinearAxisMixin {
         }
     }
     updateScaleDomain() {
+        var _a;
         if (!this.isSeriesDataEnable()) {
             return;
         }
+        if (!((_a = this._rawDomain) === null || _a === void 0 ? void 0 : _a.length) && this._scale) {
+            this._updateRawDomain();
+        }
         const data = this.collectData();
         const domain = this.computeLinearDomain(data);
         this.updateScaleDomainByModel(domain);
@@ -67238,6 +67349,15 @@ class LinearAxisMixin {
             return value;
         };
     }
+    _updateRawDomain() {
+        const data = this.collectData(0, true);
+        const domain = this.computeLinearDomain(data);
+        this._rawDomain = domain;
+        this.event.emit(ChartEvent.scaleRawDomainUpdate, { model: this });
+    }
+    _clearRawDomain() {
+        this._rawDomain = [];
+    }
 }
 
 const axisLinear = {
@@ -67469,6 +67589,7 @@ const registerCartesianLinearAxis = () => {
 class BandAxisMixin {
     constructor() {
         this._rawDomainIndex = [];
+        this._rawDomain = [];
     }
     _initData() {
         var _a;
@@ -67520,6 +67641,9 @@ class BandAxisMixin {
             tickTransform && (tickTransform.options = this._tickTransformOption());
         }
     }
+    getRawDomain() {
+        return this._rawDomain;
+    }
     dataToPosition(values, cfg = {}) {
         var _a, _b;
         if (values.length === 0 || this._scales.length === 0) {
@@ -67657,6 +67781,7 @@ class BandAxisMixin {
     }
     _updateRawDomain() {
         this._rawDomainIndex = [];
+        this._rawDomain = [];
         const userDomain = this._spec.domain;
         for (let i = 0; i < this._scales.length; i++) {
             if (userDomain && userDomain.length && i === 0) {
@@ -67666,12 +67791,15 @@ class BandAxisMixin {
                 const data = this.collectData(i, true);
                 const domain = this.computeBandDomain(data);
                 this._rawDomainIndex[i] = {};
+                this._rawDomain[i] = domain;
                 domain.forEach((d, _i) => (this._rawDomainIndex[i][d] = _i));
             }
         }
+        this.event.emit(ChartEvent.scaleRawDomainUpdate, { model: this });
     }
     _clearRawDomain() {
         this._rawDomainIndex = [];
+        this._rawDomain = [];
     }
 }
 
@@ -70010,12 +70138,10 @@ class BaseChart extends CompilableBase {
             }
         });
         const isUnableValue = isNil$1(value) || !dimensionInfo || dimensionInfo.every(d => isDiscrete(d.axis.getScale().type) && isNil$1(d.index));
-        const isUnableTooltip = isUnableValue ||
-            dimensionInfo.every(d => isDiscrete(d.axis.getScale().type) && d.data.every(_data => _data.datum.length === 0));
         if (opt.tooltip !== false) {
             const tooltip = this.getComponentsByType(ComponentTypeEnum.tooltip)[0];
             if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.getVisible()) {
-                if (isUnableValue || isUnableTooltip) {
+                if (isUnableValue) {
                     (_b = (_a = tooltip).hideTooltip) === null || _b === void 0 ? void 0 : _b.call(_a);
                 }
                 else {
@@ -70045,25 +70171,6 @@ class BaseChart extends CompilableBase {
             }
         }
     }
-    showCrosshair(cb) {
-        var _a;
-        const crosshair = (_a = this.getComponentsByType(ComponentTypeEnum.cartesianCrosshair)[0]) !== null && _a !== void 0 ? _a : this.getComponentsByType(ComponentTypeEnum.polarCrosshair)[0];
-        if (!crosshair) {
-            return;
-        }
-        const axes = this.getComponentsByKey('axes');
-        const dimInfo = [];
-        axes.forEach(axis => {
-            const value = cb(axis);
-            if (value !== false) {
-                dimInfo.push({
-                    axis,
-                    value
-                });
-            }
-        });
-        crosshair.showCrosshair(dimInfo);
-    }
     getColorScheme() {
         var _a, _b;
         return (_b = (_a = this._option).getTheme) === null || _b === void 0 ? void 0 : _b.call(_a, 'colorScheme');
@@ -72030,7 +72137,10 @@ function computeOneDatumY(obj, lastY, s, context, seriesScale, isFirst) {
         lastY = y1;
     }
     let height = Math.abs(y1 - y);
-    if (height < barMinHeight) {
+    if (height <= 0 && !isValueInScaleDomain(obj[s.getStackValueField()], seriesScale)) {
+        height = 0;
+    }
+    else if (height < barMinHeight) {
         height = barMinHeight;
     }
     let flag = 1;
@@ -72379,7 +72489,10 @@ class BarSeries extends CartesianSeries {
         const y1 = valueInScaleRange(this[startMethod](datum), seriesScale, useWholeRange);
         const y = valueInScaleRange(this[endMethod](datum), seriesScale, useWholeRange);
         let height = Math.abs(y1 - y);
-        if (height < barMinHeight) {
+        if (height <= 0 && !isValueInScaleDomain(datum[this.getStackValueField()], seriesScale)) {
+            height = 0;
+        }
+        else if (height < barMinHeight) {
             height = barMinHeight;
         }
         let flag = 1;
@@ -79397,13 +79510,14 @@ class DotSeries extends CartesianSeries {
         });
     }
     initMarkStyle() {
+        var _a;
         const clipMark = this._clipMark;
         if (clipMark) {
             this.setMarkStyle(clipMark, {
-                x: -this._spec.leftAppendPadding,
+                x: -((_a = this._spec.leftAppendPadding) !== null && _a !== void 0 ? _a : 0),
                 y: 0,
                 width: 10000,
-                height: this._spec.clipHeight
+                height: () => { var _a; return (_a = this._spec.clipHeight) !== null && _a !== void 0 ? _a : this._region.getLayoutRect().height; }
             }, 'normal', AttributeLevel.Series);
             clipMark.setMarkConfig({ interactive: false, clip: true });
         }
@@ -97068,17 +97182,26 @@ const dataFilterWithNewDomain = (data, op) => {
     return data.filter(filter);
 };
 const dataFilterComputeDomain = (data, op) => {
-    const { stateFields, valueFields, dataCollection, isCategoryState } = op.input;
+    const { stateFields, valueFields, dataCollection, isCategoryState, seriesCollection } = op.input;
     const { stateField, valueField } = op.output;
     const resultObj = {};
+    const resultKeys = [];
     const resultData = [];
     const stateValues = [];
     let hasLockDomain = false;
+    let isAllLinearValue = false;
     dataCollection.forEach((dv, i) => {
         var _a;
         if (isNil$1(stateFields[i])) {
             return;
         }
+        const series = seriesCollection[i];
+        if (series) {
+            const statistics = series.getRawDataStatisticsByField(stateFields[i]);
+            if (isValid$1(statistics === null || statistics === void 0 ? void 0 : statistics.max) && isValid$1(statistics === null || statistics === void 0 ? void 0 : statistics.min)) {
+                isAllLinearValue = true;
+            }
+        }
         const stateFieldInfo = (_a = dv.getFields()) === null || _a === void 0 ? void 0 : _a[stateFields[i]];
         if (stateFieldInfo && stateFieldInfo.lockStatisticsByDomain) {
             hasLockDomain = true;
@@ -97086,6 +97209,7 @@ const dataFilterComputeDomain = (data, op) => {
                 if (isNil$1(resultObj[d])) {
                     stateValues.push(d);
                     resultObj[d] = 0;
+                    resultKeys.push(d);
                 }
             });
         }
@@ -97095,6 +97219,7 @@ const dataFilterComputeDomain = (data, op) => {
                     if (isNil$1(resultObj[d[state]])) {
                         stateValues.push(d[state]);
                         resultObj[d[state]] = 0;
+                        resultKeys.push(d[state]);
                     }
                     if (!isNil$1(valueFields[i])) {
                         resultObj[d[state]] += isNaN(parseFloat(d[valueFields[i]])) ? 1 : parseFloat(d[valueFields[i]]);
@@ -97105,9 +97230,9 @@ const dataFilterComputeDomain = (data, op) => {
     });
     const sortedStateValues = hasLockDomain
         ? stateValues
-        : isCategoryState === false
+        : isCategoryState === false || isAllLinearValue
             ? stateValues.sort((a, b) => a - b)
-            : Object.keys(resultObj);
+            : resultKeys;
     sortedStateValues.forEach(state => {
         const res = { [stateField]: state };
         if (valueField) {
@@ -97117,17 +97242,83 @@ const dataFilterComputeDomain = (data, op) => {
     });
     return resultData;
 };
-
-class DataFilterBaseComponent extends BaseComponent {
-    get relatedAxisComponent() {
-        return this._relatedAxisComponent;
+const statePointToData = (state, scale, reverse) => {
+    const domain = scale.domain();
+    if (isContinuous(scale.type)) {
+        if (reverse) {
+            return domain[0] + (last(domain) - domain[0]) * (1 - state);
+        }
+        return domain[0] + (last(domain) - domain[0]) * state;
     }
-    setStartAndEnd(start, end, rangeMode = ['percent', 'percent']) {
-        const [startMode = 'percent', endMode = 'percent'] = rangeMode;
-        const startPercent = (startMode === 'percent' ? start : this.dataToStatePoint(start));
-        const endPercent = (endMode === 'percent' ? end : this.dataToStatePoint(end));
-        this._handleChange(startPercent, endPercent, true);
+    let range = scale.range();
+    if (reverse) {
+        range = range.slice().reverse();
+    }
+    const posInRange = range[0] + (last(range) - range[0]) * state;
+    return scale.invert(posInRange);
+};
+const dataToStatePoint = (data, scale, isHorizontal) => {
+    const pos = scale.scale(data);
+    let range = scale.range();
+    if (!isHorizontal && isContinuous(scale.type)) {
+        range = range.slice().reverse();
+    }
+    return Math.max(0, Math.min(1, (pos - range[0]) / (last(range) - range[0])));
+};
+const isReverse = (axisComponent, isHorizontal) => {
+    const axis = axisComponent;
+    if (!axis) {
+        return false;
+    }
+    const axisScale = axis.getScale();
+    return axisScale.range()[0] > axisScale.range()[1] && (!axis.getInverse() || isHorizontal);
+};
+const getAxisBandSize = (axisSpec) => {
+    const bandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.bandSize;
+    const maxBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.maxBandSize;
+    const minBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.minBandSize;
+    if (bandSize || minBandSize || maxBandSize) {
+        return { bandSize, maxBandSize, minBandSize };
     }
+    return undefined;
+};
+const modeCheck = (statePoint, mode, spec) => {
+    if (statePoint === 'start') {
+        return (mode === 'percent' && isValid$1(spec.start)) || (mode === 'value' && isValid$1(spec.startValue));
+    }
+    return (mode === 'percent' && isValid$1(spec.end)) || (mode === 'value' && isValid$1(spec.endValue));
+};
+const parseDomainFromState = (startValue, endValue, scale) => {
+    if (isContinuous(scale.type)) {
+        return [Math.min(endValue, startValue), Math.max(endValue, startValue)];
+    }
+    const allDomain = scale.domain();
+    const startIndex = allDomain.indexOf(startValue);
+    const endIndex = allDomain.indexOf(endValue);
+    return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
+};
+const parseDomainFromStateAndValue = (start, startValue, end, endValue, scale) => {
+    if (isContinuous(scale.type)) {
+        const domain = scale.domain();
+        const min = domain[0];
+        const total = last(domain) - min;
+        const resultStart = isValid$1(start) ? min + total * start : +startValue;
+        const resultEnd = isValid$1(end) ? min + total * end : +endValue;
+        return [Math.min(resultEnd, resultStart), Math.max(resultEnd, resultStart)];
+    }
+    const allDomain = scale.domain();
+    const range = scale.range();
+    const rangeSize = range[range.length - 1] - range[0];
+    const startIndex = isValid$1(start)
+        ? allDomain.indexOf(scale.invert(rangeSize * start + range[0]))
+        : allDomain.indexOf(startValue);
+    const endIndex = isValid$1(end)
+        ? allDomain.indexOf(scale.invert(rangeSize * end + range[0]))
+        : allDomain.indexOf(endValue);
+    return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
+};
+
+class DataFilterEvent {
     enableInteraction() {
         this._activeRoam = true;
     }
@@ -97135,19 +97326,203 @@ class DataFilterBaseComponent extends BaseComponent {
         this._activeRoam = false;
     }
     zoomIn(location) {
-        this._handleChartZoom({
+        this.handleChartZoom({
             zoomDelta: 1.2,
             zoomX: location === null || location === void 0 ? void 0 : location.x,
             zoomY: location === null || location === void 0 ? void 0 : location.y
         });
     }
     zoomOut(location) {
-        this._handleChartZoom({
+        this.handleChartZoom({
             zoomDelta: 0.8,
             zoomX: location === null || location === void 0 ? void 0 : location.x,
             zoomY: location === null || location === void 0 ? void 0 : location.y
         });
     }
+    constructor(type, spec, handleChange, getLayoutRect, getState, getRegions, getOption, getEvent) {
+        this._activeRoam = true;
+        this._zoomAttr = {
+            enable: true,
+            rate: 1,
+            focus: true
+        };
+        this._dragAttr = {
+            enable: true,
+            rate: 1,
+            reverse: true
+        };
+        this._scrollAttr = {
+            enable: true,
+            rate: 1,
+            reverse: true
+        };
+        this.initZoomEvent = () => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const delayType = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType) !== null && _b !== void 0 ? _b : 'throttle';
+            const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? ((_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30) : 0;
+            const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : true;
+            const option = { delayType, delayTime, realTime, allowComponentZoom: true };
+            if (this._zoomAttr.enable) {
+                this.initZoomEventOfRegions(this.getRegions(), null, this.handleChartZoom, option);
+            }
+            if (this._scrollAttr.enable) {
+                this.initScrollEventOfRegions(this.getRegions(), null, this.handleChartScroll, option);
+            }
+            if (this._dragAttr.enable) {
+                this.initDragEventOfRegions(this.getRegions(), null, this.handleChartDrag, option);
+            }
+        };
+        this.handleChartZoom = (params, e) => {
+            var _a, _b;
+            if (!this._activeRoam || (this._zoomAttr.filter && !this._zoomAttr.filter(params, e))) {
+                return;
+            }
+            const { zoomDelta, zoomX, zoomY } = params;
+            const { x, y } = this.getRegions()[0].getLayoutStartPoint();
+            const { width, height } = this.getRegions()[0].getLayoutRect();
+            const delta = Math.abs(this.getState().start - this.getState().end);
+            const zoomRate = (_b = (_a = this._spec.roamZoom) === null || _a === void 0 ? void 0 : _a.rate) !== null && _b !== void 0 ? _b : 1;
+            if (delta >= 1 && zoomDelta < 1) {
+                return;
+            }
+            if (delta <= 0.01 && zoomDelta > 1) {
+                return;
+            }
+            const focusLoc = this._isHorizontal ? zoomX : zoomY;
+            const totalValue = delta * (zoomDelta - 1) * zoomRate;
+            let startValue = totalValue / 2;
+            let endValue = totalValue / 2;
+            if (focusLoc) {
+                const startLoc = this._isHorizontal ? x : y;
+                const endLoc = this._isHorizontal ? width : height;
+                startValue = (Math.abs(startLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue;
+                endValue = (Math.abs(endLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue;
+            }
+            const start = clamp$1(this.getState().start + startValue, 0, 1);
+            const end = clamp$1(this.getState().end - endValue, 0, 1);
+            this._handleChange(Math.min(start, end), Math.max(start, end), true);
+        };
+        this.handleChartScroll = (params, e) => {
+            var _a;
+            if (!this._activeRoam || (this._scrollAttr.filter && !this._scrollAttr.filter(params, e))) {
+                return false;
+            }
+            const { scrollX, scrollY } = params;
+            let value = this._isHorizontal ? scrollX : scrollY;
+            const active = this._isHorizontal ? abs$1(scrollX / scrollY) >= 0.5 : abs$1(scrollY / scrollX) >= 0.5;
+            if (!this._scrollAttr.reverse) {
+                value = -value;
+            }
+            if (active) {
+                this.handleChartMove(value, (_a = this._scrollAttr.rate) !== null && _a !== void 0 ? _a : 1);
+            }
+            const hasChange = this.getState().start !== 0 && this.getState().end !== 1;
+            return active && hasChange;
+        };
+        this.handleChartDrag = (delta, e) => {
+            var _a;
+            if (!this._activeRoam || (this._dragAttr.filter && !this._dragAttr.filter(delta, e))) {
+                return;
+            }
+            const [dx, dy] = delta;
+            let value = this._isHorizontal ? dx : dy;
+            if (this._dragAttr.reverse) {
+                value = -value;
+            }
+            this.handleChartMove(value, (_a = this._dragAttr.rate) !== null && _a !== void 0 ? _a : 1);
+        };
+        this.handleChartMove = (value, rate) => {
+            const totalValue = this._isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height;
+            if (Math.abs(value) >= 1e-6) {
+                if (value > 0 && this.getState().end < 1) {
+                    const moveDelta = Math.min(1 - this.getState().end, value / totalValue) * rate;
+                    this._handleChange(this.getState().start + moveDelta, this.getState().end + moveDelta, true);
+                }
+                else if (value < 0 && this.getState().start > 0) {
+                    const moveDelta = Math.max(-this.getState().start, value / totalValue) * rate;
+                    this._handleChange(this.getState().start + moveDelta, this.getState().end + moveDelta, true);
+                }
+            }
+            return false;
+        };
+        this._type = type;
+        this._spec = spec;
+        this._handleChange = handleChange;
+        this.getLayoutRect = getLayoutRect;
+        this.getState = getState;
+        this.getRegions = getRegions;
+        this._regions = getRegions();
+        this.getOption = getOption;
+        this._option = getOption();
+        this.getEvent = getEvent;
+        this._isHorizontal = getDirectionByOrient(getOrient(spec)) === "horizontal";
+    }
+    setEventAttrFromSpec() {
+        if (this._spec.roamZoom === true || this._spec.roamZoom) {
+            this._zoomAttr = merge$1({}, this._zoomAttr, this._spec.roamZoom);
+        }
+        else {
+            this._zoomAttr.enable = false;
+        }
+        if (this._spec.roamDrag === true || this._spec.roamDrag) {
+            this._dragAttr = merge$1({}, this._dragAttr, this._spec.roamDrag);
+        }
+        else {
+            this._dragAttr.enable = false;
+        }
+        if (this._spec.roamScroll === true || this._spec.roamScroll) {
+            this._scrollAttr = merge$1({}, this._scrollAttr, this._spec.roamScroll);
+        }
+        else {
+            this._scrollAttr.enable = false;
+        }
+        if (isBoolean$1(this._spec.roam)) {
+            this._zoomAttr.enable = this._type === 'scrollBar' ? false : this._spec.roam;
+            this._dragAttr.enable = this._spec.roam;
+            this._scrollAttr.enable = this._spec.roam;
+        }
+        if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) {
+            this.initZoomable(this.getEvent(), this._option.mode);
+        }
+    }
+}
+mixin(DataFilterEvent, Zoomable);
+
+class DataFilterBaseComponent extends BaseComponent {
+    get isHorizontal() {
+        return this._isHorizontal;
+    }
+    get stateScale() {
+        return this._stateScale;
+    }
+    get relatedAxisComponent() {
+        return this._relatedAxisComponent;
+    }
+    setStartAndEnd(start, end, rangeMode = ['percent', 'percent']) {
+        const [startMode = 'percent', endMode = 'percent'] = rangeMode;
+        const startPercent = (startMode === 'percent' ? start : dataToStatePoint(start, this._stateScale, this._isHorizontal));
+        const endPercent = (endMode === 'percent' ? end : dataToStatePoint(end, this._stateScale, this._isHorizontal));
+        this._handleChange(startPercent, endPercent, true);
+    }
+    enableInteraction() {
+        this._dataFilterEvent.enableInteraction();
+    }
+    disableInteraction() {
+        this._dataFilterEvent.disableInteraction();
+    }
+    zoomIn(location) {
+        this._dataFilterEvent.zoomIn(location);
+    }
+    zoomOut(location) {
+        this._dataFilterEvent.zoomOut(location);
+    }
+    _initEvent() {
+        var _a;
+        this._dataFilterEvent.initZoomEvent();
+        (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.event.on(ChartEvent.scaleRawDomainUpdate, ({ model }) => {
+            console.log('scaleRawDomainUpdate', model.getRawDomain());
+        });
+    }
     _handleChange(start, end, updateComponent) {
         var _a, _b;
         const zoomLock = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.zoomLock) !== null && _b !== void 0 ? _b : false;
@@ -97161,18 +97536,10 @@ class DataFilterBaseComponent extends BaseComponent {
             this._spanCache = end - start;
         }
     }
-    _isReverse() {
-        const axis = this._relatedAxisComponent;
-        if (!axis) {
-            return false;
-        }
-        const axisScale = axis.getScale();
-        return axisScale.range()[0] > axisScale.range()[1] && (!axis.getInverse() || this._isHorizontal);
-    }
     _updateRangeFactor(tag) {
         const axis = this._relatedAxisComponent;
         const axisScale = axis.getScale();
-        const reverse = this._isReverse();
+        const reverse = isReverse(axis, this._isHorizontal);
         const newRangeFactor = reverse ? [1 - this._end, 1 - this._start] : [this._start, this._end];
         if (reverse) {
             switch (tag) {
@@ -97219,23 +97586,16 @@ class DataFilterBaseComponent extends BaseComponent {
         this._orient = 'left';
         this._cacheVisibility = undefined;
         this._dataUpdating = false;
+        this._hasInitStateScale = false;
         this._shouldChange = true;
         this._stateField = 'x';
-        this._activeRoam = true;
-        this._zoomAttr = {
-            enable: true,
-            rate: 1,
-            focus: true
-        };
-        this._dragAttr = {
-            enable: true,
-            rate: 1,
-            reverse: true
-        };
-        this._scrollAttr = {
-            enable: true,
-            rate: 1,
-            reverse: true
+        this._handleStateChange = (startValue, endValue, tag) => {
+            var _a, _b;
+            this._startValue = startValue;
+            this._endValue = endValue;
+            this._newDomain = parseDomainFromState(this._startValue, this._endValue, this._stateScale);
+            (_b = (_a = this.effect).onZoomChange) === null || _b === void 0 ? void 0 : _b.call(_a, tag);
+            return true;
         };
         this.effect = {
             onZoomChange: (tag) => {
@@ -97244,7 +97604,7 @@ class DataFilterBaseComponent extends BaseComponent {
                 if (axis && this._filterMode === 'axis') {
                     const axisScale = axis.getScale();
                     const axisSpec = axis.getSpec();
-                    if (this._auto && this._getAxisBandSize(axisSpec) && this._spec.ignoreBandSize) {
+                    if (this._auto && getAxisBandSize(axisSpec) && this._spec.ignoreBandSize) {
                         axisScale.bandwidth('auto');
                         axisScale.maxBandwidth('auto');
                         axisScale.minBandwidth('auto');
@@ -97275,92 +97635,14 @@ class DataFilterBaseComponent extends BaseComponent {
             }
         };
         this._visible = true;
-        this._handleStateChange = (startValue, endValue, tag) => {
-            var _a, _b;
-            this._startValue = startValue;
-            this._endValue = endValue;
-            this._newDomain = this._parseDomainFromState(this._startValue, this._endValue);
-            (_b = (_a = this.effect).onZoomChange) === null || _b === void 0 ? void 0 : _b.call(_a, tag);
-            return true;
-        };
-        this._handleChartZoom = (params, e) => {
-            var _a, _b;
-            if (!this._activeRoam || (this._zoomAttr.filter && !this._zoomAttr.filter(params, e))) {
-                return;
-            }
-            const { zoomDelta, zoomX, zoomY } = params;
-            const { x, y } = this._regions[0].getLayoutStartPoint();
-            const { width, height } = this._regions[0].getLayoutRect();
-            const delta = Math.abs(this._start - this._end);
-            const zoomRate = (_b = (_a = this._spec.roamZoom) === null || _a === void 0 ? void 0 : _a.rate) !== null && _b !== void 0 ? _b : 1;
-            if (delta >= 1 && zoomDelta < 1) {
-                return;
-            }
-            if (delta <= 0.01 && zoomDelta > 1) {
-                return;
-            }
-            const focusLoc = this._isHorizontal ? zoomX : zoomY;
-            const totalValue = delta * (zoomDelta - 1) * zoomRate;
-            let startValue = totalValue / 2;
-            let endValue = totalValue / 2;
-            if (focusLoc) {
-                const startLoc = this._isHorizontal ? x : y;
-                const endLoc = this._isHorizontal ? width : height;
-                startValue = (Math.abs(startLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue;
-                endValue = (Math.abs(endLoc - focusLoc) / Math.abs(endLoc - startLoc)) * totalValue;
-            }
-            const start = clamp$1(this._start + startValue, 0, 1);
-            const end = clamp$1(this._end - endValue, 0, 1);
-            this._handleChange(Math.min(start, end), Math.max(start, end), true);
-        };
-        this._handleChartScroll = (params, e) => {
-            var _a;
-            if (!this._activeRoam || (this._scrollAttr.filter && !this._scrollAttr.filter(params, e))) {
-                return false;
-            }
-            const { scrollX, scrollY } = params;
-            let value = this._isHorizontal ? scrollX : scrollY;
-            const active = this._isHorizontal ? abs$1(scrollX / scrollY) >= 0.5 : abs$1(scrollY / scrollX) >= 0.5;
-            if (!this._scrollAttr.reverse) {
-                value = -value;
-            }
-            if (active) {
-                this._handleChartMove(value, (_a = this._scrollAttr.rate) !== null && _a !== void 0 ? _a : 1);
-            }
-            const hasChange = this._start !== 0 && this._end !== 1;
-            return active && hasChange;
-        };
-        this._handleChartDrag = (delta, e) => {
-            var _a, _b;
-            if (!this._activeRoam || (this._dragAttr.filter && !this._dragAttr.filter(delta, e))) {
-                return;
-            }
-            if ((_a = this._spec.roamDrag) === null || _a === void 0 ? void 0 : _a.autoVisible) {
-                this.show();
-            }
-            const [dx, dy] = delta;
-            let value = this._isHorizontal ? dx : dy;
-            if (this._dragAttr.reverse) {
-                value = -value;
-            }
-            this._handleChartMove(value, (_b = this._dragAttr.rate) !== null && _b !== void 0 ? _b : 1);
-        };
-        this._handleChartMove = (value, rate) => {
-            const totalValue = this._isHorizontal ? this.getLayoutRect().width : this.getLayoutRect().height;
-            if (Math.abs(value) >= 1e-6) {
-                if (value > 0 && this._end < 1) {
-                    const moveDelta = Math.min(1 - this._end, value / totalValue) * rate;
-                    this._handleChange(this._start + moveDelta, this._end + moveDelta, true);
-                }
-                else if (value < 0 && this._start > 0) {
-                    const moveDelta = Math.max(-this._start, value / totalValue) * rate;
-                    this._handleChange(this._start + moveDelta, this._end + moveDelta, true);
-                }
-            }
-            return false;
-        };
         this._orient = getOrient(spec);
         this._isHorizontal = getDirectionByOrient(this._orient) === "horizontal";
+        this._dataFilterEvent = new DataFilterEvent(this.type, this._spec, this._handleChange.bind(this), this.getLayoutRect.bind(this), () => {
+            return {
+                start: this._start,
+                end: this._end
+            };
+        }, () => this._regions, (() => this._option).bind(this), () => this.event);
     }
     created() {
         super.created();
@@ -97375,6 +97657,88 @@ class DataFilterBaseComponent extends BaseComponent {
         super.initLayout();
         this._layout && (this._layout.layoutOrient = this._orient);
     }
+    init(option) {
+        super.init(option);
+        this._addTransformToSeries();
+        if (this._start !== 0 || this._end !== 1) {
+            this.effect.onZoomChange();
+        }
+    }
+    _compareSpec(spec, prevSpec) {
+        const result = super._compareSpec(spec, prevSpec);
+        if (!result.reMake && !isEqual(prevSpec, spec)) {
+            result.reRender = true;
+            result.reMake = true;
+        }
+        return result;
+    }
+    reInit(spec) {
+        super.reInit(spec);
+        this._marks.forEach(g => {
+            g.getMarks().forEach(m => {
+                this.initMarkStyleWithSpec(m, this._spec[m.name]);
+            });
+        });
+    }
+    onLayoutStart(layoutRect, viewRect) {
+        super.onLayoutStart(layoutRect, viewRect);
+        const isShown = this._autoUpdate(layoutRect);
+        this._autoVisible(isShown);
+        this._dataUpdating = false;
+    }
+    updateLayoutAttribute() {
+        this._visible && this._createOrUpdateComponent();
+        if (!this._hasInitStateScale) {
+            if (this._start !== 0 || this._end !== 1) {
+                this._newDomain = parseDomainFromStateAndValue(this._spec.start, this._startValue, this._spec.end, this._endValue, this._stateScale);
+                this.effect.onZoomChange();
+            }
+            this._hasInitStateScale = true;
+        }
+    }
+    _initAfterLayout() {
+        this._stateScale = null;
+        this._initStateScale();
+        this._updateScaleRange();
+        this._setStateFromAxis();
+    }
+    _beforeLayoutEnd() {
+        if (!this._hasInitStateScale) {
+            this._initAfterLayout();
+        }
+        else {
+            this._updateScaleRange();
+        }
+    }
+    onLayoutEnd() {
+        var _a;
+        this._beforeLayoutEnd();
+        const isShown = !(this._start === 0 && this._end === 1);
+        this._autoVisible(isShown);
+        super.onLayoutEnd();
+        (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.updateScaleRange();
+    }
+    getBoundsInRect(rect) {
+        const result = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 };
+        if (this._isHorizontal) {
+            result.y2 = result.y1 + this._height;
+            result.x2 = result.x1 + rect.width;
+        }
+        else {
+            result.x2 = result.x1 + this._width;
+            result.y2 = result.y1 + rect.height;
+        }
+        return result;
+    }
+    setAttrFromSpec() {
+        var _a;
+        super.setAttrFromSpec();
+        this._dataFilterEvent.setEventAttrFromSpec();
+        this._field = this._spec.field;
+        this._width = this._computeWidth();
+        this._height = this._computeHeight();
+        this._visible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
+    }
     _setAxisFromSpec() {
         if (isValid$1(this._spec.axisId)) {
             this._relatedAxisComponent = this._option.getComponentByUserId(this._spec.axisId);
@@ -97384,7 +97748,7 @@ class DataFilterBaseComponent extends BaseComponent {
         }
         if (isNil$1(this._spec.field) && !this._relatedAxisComponent) {
             const axes = this._option.getComponentsByKey('axes');
-            const sameOrientAxis = axes.find((cm) => cm._orient === this._orient);
+            const sameOrientAxis = axes.find((cm) => getDirectionByOrient(cm._orient) === getDirectionByOrient(this._orient));
             if (sameOrientAxis) {
                 this._relatedAxisComponent = sameOrientAxis;
             }
@@ -97435,33 +97799,9 @@ class DataFilterBaseComponent extends BaseComponent {
         }
         return;
     }
-    onDataUpdate() {
-        var _a;
-        const domain = this._computeDomainOfStateScale(isContinuous(this._stateScale.type));
-        this._stateScale.domain(domain, false);
-        this._handleChange(this._start, this._end, true);
-        if (this._spec.auto && !isEqual(this._domainCache, domain)) {
-            this._domainCache = domain;
-            this._dataUpdating = true;
-            (_a = this.getChart()) === null || _a === void 0 ? void 0 : _a.setLayoutTag(true, null, false);
-        }
-    }
-    _computeDomainOfStateScale(isContinuous) {
-        if (this._spec.customDomain) {
-            return this._spec.customDomain;
-        }
-        const domain = this._data.getLatestData().map((d) => d[this._stateField]);
-        if (isContinuous) {
-            const domainNum = domain.map((n) => n * 1);
-            return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [-Infinity, Infinity];
-        }
-        return domain;
-    }
-    _initEvent() {
-        this._initCommonEvent();
-    }
     _initData() {
         const dataCollection = [];
+        const seriesCollection = [];
         const stateFields = [];
         const valueFields = [];
         let isCategoryState;
@@ -97490,6 +97830,8 @@ class DataFilterBaseComponent extends BaseComponent {
                             ? xAxisHelper
                             : yAxisHelper;
                 const valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
+                const isValidateValueAxis = isContinuous(valueAxisHelper.getScale(0).type);
+                const isValidateStateAxis = isContinuous(stateAxisHelper.getScale(0).type);
                 dataCollection.push(s.getRawData());
                 const seriesSpec = s.getSpec();
                 const xField = s.coordinate === 'cartesian'
@@ -97500,16 +97842,17 @@ class DataFilterBaseComponent extends BaseComponent {
                     : array((_b = seriesSpec.radiusField) !== null && _b !== void 0 ? _b : seriesSpec.valueField);
                 originalStateFields[s.id] =
                     s.type === 'link' ? ['from_xField'] : stateAxisHelper === xAxisHelper ? xField : yField;
-                if (isContinuous(stateAxisHelper.getScale(0).type)) {
+                if (isValidateStateAxis) {
                     isCategoryState = false;
                     stateFields.push(originalStateFields[s.id]);
                 }
                 else {
+                    isCategoryState = true;
                     stateFields.push(originalStateFields[s.id][0]);
                 }
                 if (this._valueField) {
                     const valueField = s.type === 'link' ? ['from_yField'] : valueAxisHelper === xAxisHelper ? xField : yField;
-                    if (isContinuous(valueAxisHelper.getScale(0).type)) {
+                    if (isValidateValueAxis) {
                         valueFields.push(...valueField);
                     }
                 }
@@ -97522,6 +97865,7 @@ class DataFilterBaseComponent extends BaseComponent {
         else {
             eachSeries(this._regions, s => {
                 dataCollection.push(s.getRawData());
+                seriesCollection.push(s);
                 stateFields.push(this._field);
                 if (this._valueField) {
                     valueFields.push(this._spec.valueField);
@@ -97540,6 +97884,7 @@ class DataFilterBaseComponent extends BaseComponent {
             options: {
                 input: {
                     dataCollection: dataCollection,
+                    seriesCollection,
                     stateFields,
                     valueFields,
                     isCategoryState
@@ -97554,136 +97899,6 @@ class DataFilterBaseComponent extends BaseComponent {
         data.reRunAllTransform();
         dataSet.multipleDataViewAddListener(dataCollection, 'change', this._handleDataCollectionChange.bind(this));
     }
-    setAttrFromSpec() {
-        var _a;
-        super.setAttrFromSpec();
-        if (this._spec.roamZoom === true || this._spec.roamZoom) {
-            this._zoomAttr = merge$1({}, this._zoomAttr, this._spec.roamZoom);
-        }
-        else {
-            this._zoomAttr.enable = false;
-        }
-        if (this._spec.roamDrag === true || this._spec.roamDrag) {
-            this._dragAttr = merge$1({}, this._dragAttr, this._spec.roamDrag);
-        }
-        else {
-            this._dragAttr.enable = false;
-        }
-        if (this._spec.roamScroll === true || this._spec.roamScroll) {
-            this._scrollAttr = merge$1({}, this._scrollAttr, this._spec.roamScroll);
-        }
-        else {
-            this._scrollAttr.enable = false;
-        }
-        this._field = this._spec.field;
-        this._width = this._computeWidth();
-        this._height = this._computeHeight();
-        this._visible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
-    }
-    statePointToData(state) {
-        const scale = this._stateScale;
-        const domain = scale.domain();
-        if (isContinuous(scale.type)) {
-            if (this._isReverse()) {
-                return domain[0] + (last(domain) - domain[0]) * (1 - state);
-            }
-            return domain[0] + (last(domain) - domain[0]) * state;
-        }
-        let range = scale.range();
-        if (this._isReverse()) {
-            range = range.slice().reverse();
-        }
-        const posInRange = range[0] + (last(range) - range[0]) * state;
-        return scale.invert(posInRange);
-    }
-    dataToStatePoint(data) {
-        const scale = this._stateScale;
-        const pos = scale.scale(data);
-        let range = scale.range();
-        if (!this._isHorizontal && isContinuous(scale.type)) {
-            range = range.slice().reverse();
-        }
-        return (pos - range[0]) / (last(range) - range[0]);
-    }
-    _modeCheck(statePoint, mode) {
-        if (statePoint === 'start') {
-            return (mode === 'percent' && isValid$1(this._spec.start)) || (mode === 'value' && isValid$1(this._spec.startValue));
-        }
-        return (mode === 'percent' && isValid$1(this._spec.end)) || (mode === 'value' && isValid$1(this._spec.endValue));
-    }
-    _setStateFromSpec() {
-        var _a, _b;
-        this._auto = !!this._spec.auto;
-        let start;
-        let end;
-        if (this._spec.rangeMode) {
-            const [startMode, endMode] = this._spec.rangeMode;
-            if (this._modeCheck('start', startMode) && this._modeCheck('end', endMode)) {
-                start = startMode === 'percent' ? this._spec.start : this.dataToStatePoint(this._spec.startValue);
-                end = endMode === 'percent' ? this._spec.end : this.dataToStatePoint(this._spec.endValue);
-            }
-        }
-        else {
-            start = this._spec.start
-                ? this._spec.start
-                : this._spec.startValue
-                    ? this.dataToStatePoint(this._spec.startValue)
-                    : 0;
-            end = this._spec.end ? this._spec.end : this._spec.endValue ? this.dataToStatePoint(this._spec.endValue) : 1;
-        }
-        this._startValue = this.statePointToData(start);
-        this._endValue = this.statePointToData(end);
-        this._start = start;
-        this._end = end;
-        this._minSpan = (_a = this._spec.minSpan) !== null && _a !== void 0 ? _a : 0;
-        this._maxSpan = (_b = this._spec.maxSpan) !== null && _b !== void 0 ? _b : 1;
-        if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== last(this._stateScale.domain())) {
-            if (this._spec.minValueSpan) {
-                this._minSpan = this._spec.minValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
-            }
-            if (this._spec.maxValueSpan) {
-                this._maxSpan = this._spec.maxValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
-            }
-        }
-        this._minSpan = Math.max(0, this._minSpan);
-        this._maxSpan = Math.min(this._maxSpan, 1);
-        if ((!this._relatedAxisComponent || this._filterMode !== 'axis') && (this._start !== 0 || this._end !== 1)) {
-            this._newDomain = this._parseDomainFromState(this._startValue, this._endValue);
-        }
-    }
-    _parseFieldOfSeries(s) {
-        var _a;
-        return (_a = this._originalStateFields) === null || _a === void 0 ? void 0 : _a[s.id];
-    }
-    _initStateScale() {
-        const defaultRange = [0, 1];
-        if (this._relatedAxisComponent) {
-            const scale = this._relatedAxisComponent.getScale();
-            const isContinuousScale = isContinuous(scale.type);
-            const domain = this._computeDomainOfStateScale(isContinuousScale);
-            this._stateScale = scale.clone();
-            if (isContinuousScale) {
-                const domainNum = domain.map((n) => n * 1);
-                this._stateScale
-                    .domain(domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [0, 1], true)
-                    .range(defaultRange);
-            }
-            else {
-                this._stateScale.domain(domain, true).range(defaultRange);
-            }
-        }
-        else {
-            this._stateScale = new BandScale();
-            this._stateScale.domain(this._computeDomainOfStateScale(), true).range(defaultRange);
-        }
-    }
-    init(option) {
-        super.init(option);
-        this._addTransformToSeries();
-        if (this._start !== 0 || this._end !== 1) {
-            this.effect.onZoomChange();
-        }
-    }
     _addTransformToSeries() {
         if (!this._relatedAxisComponent || this._filterMode !== 'axis') {
             registerDataSetInstanceTransform(this._option.dataSet, 'dataFilterWithNewDomain', dataFilterWithNewDomain);
@@ -97722,59 +97937,116 @@ class DataFilterBaseComponent extends BaseComponent {
             });
         }
     }
-    _compareSpec(spec, prevSpec) {
-        const result = super._compareSpec(spec, prevSpec);
-        if (!result.reMake && !isEqual(prevSpec, spec)) {
-            result.reRender = true;
-            result.reMake = true;
+    onDataUpdate() {
+        var _a;
+        const domain = this._computeDomainOfStateScale(isContinuous(this._stateScale.type));
+        this._stateScale.domain(domain, false);
+        this._handleChange(this._start, this._end, true);
+        if (this._spec.auto && !isEqual(this._domainCache, domain)) {
+            this._domainCache = domain;
+            this._dataUpdating = true;
+            (_a = this.getChart()) === null || _a === void 0 ? void 0 : _a.setLayoutTag(true, null, false);
         }
-        return result;
     }
-    reInit(spec) {
-        super.reInit(spec);
-        this._marks.forEach(g => {
-            g.getMarks().forEach(m => {
-                this.initMarkStyleWithSpec(m, this._spec[m.name]);
-            });
-        });
+    _parseFieldOfSeries(s) {
+        var _a;
+        return (_a = this._originalStateFields) === null || _a === void 0 ? void 0 : _a[s.id];
     }
-    _parseDomainFromState(startValue, endValue) {
-        if (isContinuous(this._stateScale.type)) {
-            return [Math.min(endValue, startValue), Math.max(endValue, startValue)];
+    _setStateFromSpec() {
+        this._auto = !!this._spec.auto;
+        let start;
+        let end;
+        if (this._spec.rangeMode) {
+            const [startMode, endMode] = this._spec.rangeMode;
+            if (modeCheck('start', startMode, this._spec) && modeCheck('end', endMode, this._spec)) {
+                start =
+                    startMode === 'percent'
+                        ? this._spec.start
+                        : dataToStatePoint(this._spec.startValue, this._stateScale, this._isHorizontal);
+                end =
+                    endMode === 'percent'
+                        ? this._spec.end
+                        : dataToStatePoint(this._spec.endValue, this._stateScale, this._isHorizontal);
+            }
+        }
+        else {
+            start = this._spec.start
+                ? this._spec.start
+                : this._spec.startValue
+                    ? dataToStatePoint(this._spec.startValue, this._stateScale, this._isHorizontal)
+                    : 0;
+            end = this._spec.end
+                ? this._spec.end
+                : this._spec.endValue
+                    ? dataToStatePoint(this._spec.endValue, this._stateScale, this._isHorizontal)
+                    : 1;
         }
-        const allDomain = this._stateScale.domain();
-        const startIndex = allDomain.indexOf(startValue);
-        const endIndex = allDomain.indexOf(endValue);
-        return allDomain.slice(Math.min(startIndex, endIndex), Math.max(startIndex, endIndex) + 1);
+        this._start = Math.max(0, Math.min(1, start));
+        this._end = Math.max(0, Math.min(1, end));
     }
-    _initCommonEvent() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const delayType = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType) !== null && _b !== void 0 ? _b : 'throttle';
-        const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? ((_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30) : 0;
-        const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : true;
-        const option = { delayType, delayTime, realTime, allowComponentZoom: true };
-        if (this._zoomAttr.enable) {
-            this.initZoomEventOfRegions(this._regions, null, this._handleChartZoom, option);
-        }
-        if (this._scrollAttr.enable) {
-            this.initScrollEventOfRegions(this._regions, null, this._handleChartScroll, option);
-        }
-        if (this._dragAttr.enable) {
-            this.initDragEventOfRegions(this._regions, null, this._handleChartDrag, option);
-        }
-        if ((_h = this._spec.roamDrag) === null || _h === void 0 ? void 0 : _h.autoVisible) {
-            const dragEnd = 'panend';
-            this._throttledHide = throttle(() => this.hide(), 300);
-            this.event.on(dragEnd, () => {
-                this._throttledHide();
-            });
+    _setStateFromAxis() {
+        var _a, _b;
+        this._setStateFromSpec();
+        const axis = this._relatedAxisComponent;
+        this._startValue = statePointToData(this._start, this._stateScale, isReverse(axis, this._isHorizontal));
+        this._endValue = statePointToData(this._end, this._stateScale, isReverse(axis, this._isHorizontal));
+        this._minSpan = (_a = this._spec.minSpan) !== null && _a !== void 0 ? _a : 0;
+        this._maxSpan = (_b = this._spec.maxSpan) !== null && _b !== void 0 ? _b : 1;
+        if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== last(this._stateScale.domain())) {
+            if (this._spec.minValueSpan) {
+                this._minSpan = this._spec.minValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
+            }
+            if (this._spec.maxValueSpan) {
+                this._maxSpan = this._spec.maxValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
+            }
+        }
+        this._minSpan = Math.max(0, this._minSpan);
+        this._maxSpan = Math.min(this._maxSpan, 1);
+        if (!axis) {
+            return;
+        }
+        if ((!axis || this._filterMode !== 'axis') && (this._start !== 0 || this._end !== 1)) {
+            this._newDomain = parseDomainFromState(this._startValue, this._endValue, this._stateScale);
         }
     }
-    updateLayoutAttribute() {
-        if (this._visible) {
-            this._createOrUpdateComponent();
+    _initStateScale() {
+        var _a, _b, _c, _d, _e, _f;
+        const defaultRange = [0, 1];
+        if (this._relatedAxisComponent) {
+            const scale = this._relatedAxisComponent.getScale().clone();
+            this._stateScale = scale;
+            (_b = (_a = scale).maxBandwidth) === null || _b === void 0 ? void 0 : _b.call(_a, 'auto', true);
+            (_d = (_c = scale).minBandwidth) === null || _d === void 0 ? void 0 : _d.call(_c, 'auto', true);
+            (_f = (_e = scale).bandwidth) === null || _f === void 0 ? void 0 : _f.call(_e, 'auto', true);
+            scale.rangeFactor(defaultRange, true).range(defaultRange);
         }
-        super.updateLayoutAttribute();
+        else {
+            let fieldLinear = true;
+            if (this._field) {
+                eachSeries(this._regions, s => {
+                    const stats = s.getRawDataStatisticsByField(this._field);
+                    if (!isValidNumber$1(stats === null || stats === void 0 ? void 0 : stats.min) || !isValidNumber$1(stats === null || stats === void 0 ? void 0 : stats.max)) {
+                        fieldLinear = false;
+                    }
+                }, {
+                    userId: this._seriesUserId,
+                    specIndex: this._seriesIndex
+                });
+            }
+            this._stateScale = fieldLinear ? new LinearScale() : new BandScale();
+            this._stateScale.domain(this._computeDomainOfStateScale(fieldLinear), true).range(defaultRange);
+        }
+    }
+    _computeDomainOfStateScale(isContinuous) {
+        if (this._spec.customDomain) {
+            return this._spec.customDomain;
+        }
+        const domain = this._data.getLatestData().map((d) => d[this._stateField]);
+        if (isContinuous) {
+            const domainNum = domain.map((n) => n * 1);
+            return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [-Infinity, Infinity];
+        }
+        return domain;
     }
     _autoVisible(isShown) {
         if (!this._auto) {
@@ -97793,29 +98065,6 @@ class DataFilterBaseComponent extends BaseComponent {
             [sizeKey]: AttributeLevel.Built_In
         });
     }
-    onLayoutStart(layoutRect, viewRect) {
-        super.onLayoutStart(layoutRect, viewRect);
-        const isShown = this._autoUpdate(layoutRect);
-        this._autoVisible(isShown);
-        this._dataUpdating = false;
-    }
-    onLayoutEnd() {
-        const isShown = !(this._start === 0 && this._end === 1);
-        this._autoVisible(isShown);
-        super.onLayoutEnd();
-    }
-    getBoundsInRect(rect) {
-        const result = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 };
-        if (this._isHorizontal) {
-            result.y2 = result.y1 + this._height;
-            result.x2 = result.x1 + rect.width;
-        }
-        else {
-            result.x2 = result.x1 + this._width;
-            result.y2 = result.y1 + rect.height;
-        }
-        return result;
-    }
     hide() {
         var _a;
         (_a = this._component) === null || _a === void 0 ? void 0 : _a.hideAll();
@@ -97824,15 +98073,6 @@ class DataFilterBaseComponent extends BaseComponent {
         var _a;
         (_a = this._component) === null || _a === void 0 ? void 0 : _a.showAll();
     }
-    _getAxisBandSize(axisSpec) {
-        const bandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.bandSize;
-        const maxBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.maxBandSize;
-        const minBandSize = axisSpec === null || axisSpec === void 0 ? void 0 : axisSpec.minBandSize;
-        if (bandSize || minBandSize || maxBandSize) {
-            return { bandSize, maxBandSize, minBandSize };
-        }
-        return undefined;
-    }
     _autoUpdate(rect) {
         var _a, _b, _c, _d, _e, _f;
         if (!this._auto) {
@@ -97842,7 +98082,7 @@ class DataFilterBaseComponent extends BaseComponent {
         const axis = this._relatedAxisComponent;
         const axisSpec = axis === null || axis === void 0 ? void 0 : axis.getSpec();
         const axisScale = axis === null || axis === void 0 ? void 0 : axis.getScale();
-        const bandSizeResult = this._getAxisBandSize(axisSpec);
+        const bandSizeResult = getAxisBandSize(axisSpec);
         if (!this._dataUpdating &&
             isDiscrete(axisScale.type) &&
             (rect === null || rect === void 0 ? void 0 : rect.height) === ((_a = this._cacheRect) === null || _a === void 0 ? void 0 : _a.height) &&
@@ -97889,9 +98129,6 @@ class DataFilterBaseComponent extends BaseComponent {
     _getNeedClearVRenderComponents() {
         return [this._component];
     }
-    clear() {
-        this._throttledHide = null;
-    }
 }
 mixin(DataFilterBaseComponent, Zoomable);
 
@@ -98037,14 +98274,14 @@ class DataZoom extends DataFilterBaseComponent {
         this.layoutType = 'region-relative';
         this._isReverseCache = false;
         this._dataToPositionX = (datum) => {
-            const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0;
+            const offsetLeft = !this._isHorizontal ? this._middleHandlerSize : 0;
             const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0;
             const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
             const xField = this._isHorizontal ? this._stateField : this._valueField;
             return xScale.scale(datum[xField]) + this.getLayoutStartPoint().x + offsetLeft + offsetHandler;
         };
         this._dataToPositionX2 = (datum) => {
-            const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0;
+            const offsetLeft = !this._isHorizontal ? this._middleHandlerSize : 0;
             const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0;
             const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
             const min = xScale.domain()[0];
@@ -98053,63 +98290,146 @@ class DataZoom extends DataFilterBaseComponent {
         this._dataToPositionY = (datum) => {
             const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0;
             const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2;
-            const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
+            const yScale = this._isHorizontal ? this._valueScale : this._getPreviewStateScale();
             const yField = this._isHorizontal ? this._valueField : this._stateField;
             return yScale.scale(datum[yField]) + this.getLayoutStartPoint().y + offsetTop + offsetHandler;
         };
         this._dataToPositionY2 = (datum) => {
             const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0;
             const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2;
-            const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
+            const yScale = this._isHorizontal ? this._valueScale : this._getPreviewStateScale();
             const min = yScale.domain()[0];
             return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop + offsetHandler;
         };
         this._valueField = 'y';
         this._filterMode = (_a = spec.filterMode) !== null && _a !== void 0 ? _a : 'filter';
     }
+    _handleChange(start, end, updateComponent, tag) {
+        super._handleChange(start, end, updateComponent);
+        if (this._shouldChange) {
+            if (updateComponent && this._component) {
+                this._component.setStartAndEnd(start, end);
+            }
+            else {
+                const axis = this._relatedAxisComponent;
+                const startValue = statePointToData(start, this._stateScale, isReverse(axis, this._isHorizontal));
+                const endValue = statePointToData(end, this._stateScale, isReverse(axis, this._isHorizontal));
+                if (!isValid$1(startValue) || !isValid$1(endValue)) {
+                    return;
+                }
+                this._start = start;
+                this._end = end;
+                const hasChange = isFunction$1(this._spec.updateDataAfterChange)
+                    ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
+                    : this._handleStateChange(startValue, endValue, tag);
+                if (hasChange) {
+                    this.event.emit(ChartEvent.dataZoomChange, {
+                        model: this,
+                        value: {
+                            filterData: this._filterMode !== 'axis',
+                            start,
+                            end,
+                            startValue: this._startValue,
+                            endValue: this._endValue,
+                            newDomain: this._newDomain
+                        }
+                    });
+                }
+            }
+        }
+    }
+    _handleDataCollectionChange() {
+        const data = this._data.getDataView();
+        data.reRunAllTransform();
+        const domain = this._computeDomainOfValueScale();
+        if (domain) {
+            if (!this._valueScale) {
+                this._valueScale = new LinearScale();
+            }
+            this._valueScale.domain(domain);
+            this._updateValueScaleRange();
+            if (this._component) {
+                this._createOrUpdateComponent(true);
+            }
+        }
+    }
     created() {
         super.created();
         this._initValueScale();
     }
+    updateLayoutAttribute() {
+        if (this._cacheVisibility !== false) {
+            super.updateLayoutAttribute();
+        }
+    }
+    _beforeLayoutEnd() {
+        super._beforeLayoutEnd();
+        const axis = this._relatedAxisComponent;
+        if ((isReverse(axis, this._isHorizontal) && !this._isReverseCache) || this._auto) {
+            this._isReverseCache = isReverse(axis, this._isHorizontal);
+            this.effect.onZoomChange();
+        }
+    }
+    clear() {
+        if (this._component) {
+            const container = this.getContainer();
+            this._component.removeAllChild();
+            if (container) {
+                container.removeChild(this._component);
+            }
+            this._component = null;
+        }
+        super.clear();
+    }
+    getBoundsInRect(rect) {
+        var _a, _b, _c, _d;
+        const result = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 };
+        const startHandlerScaleXSize = this._startHandlerSize * ((_a = this._spec.startHandler.style.scaleX) !== null && _a !== void 0 ? _a : 1);
+        const startHandlerScaleYSize = this._startHandlerSize * ((_b = this._spec.startHandler.style.scaleY) !== null && _b !== void 0 ? _b : 1);
+        const endHandlerScaleXSize = this._endHandlerSize * ((_c = this._spec.endHandler.style.scaleX) !== null && _c !== void 0 ? _c : 1);
+        const endHandlerScaleYSize = this._endHandlerSize * ((_d = this._spec.endHandler.style.scaleY) !== null && _d !== void 0 ? _d : 1);
+        const extendWidth = !this._visible
+            ? 0
+            : this._isHorizontal
+                ? (startHandlerScaleXSize - this._startHandlerSize) / 2 + (endHandlerScaleXSize - this._endHandlerSize) / 2
+                : (Math.max(startHandlerScaleXSize, endHandlerScaleXSize) - this._width) / 2;
+        const extendHeight = !this._visible
+            ? 0
+            : this._isHorizontal
+                ? (Math.max(startHandlerScaleYSize, endHandlerScaleYSize) - this._height) / 2
+                : (startHandlerScaleYSize - this._startHandlerSize) / 2 + (endHandlerScaleYSize - this._endHandlerSize) / 2;
+        if (this._isHorizontal) {
+            result.y2 = result.y1 + this._height + extendHeight;
+            result.x2 = result.x1 + rect.width + extendWidth;
+        }
+        else {
+            result.x2 = result.x1 + this._width + extendWidth;
+            result.y2 = result.y1 + rect.height + extendHeight;
+        }
+        return result;
+    }
     setAttrFromSpec() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         super.setAttrFromSpec();
-        if (isBoolean$1(this._spec.roam)) {
-            this._zoomAttr.enable = this._spec.roam;
-            this._dragAttr.enable = this._spec.roam;
-            this._scrollAttr.enable = this._spec.roam;
-        }
-        if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) {
-            this.initZoomable(this.event, this._option.mode);
-        }
+        const componentSize = this._isHorizontal ? Number(this._spec.height) : Number(this._spec.width);
         this._backgroundSize = (_b = (_a = this._spec.background) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 30;
         this._middleHandlerSize = this._computeMiddleHandlerSize();
-        this._width = this._computeWidth();
-        this._height = this._computeHeight();
         if (isNil$1((_e = (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.startHandler) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.size)) {
-            this._spec.startHandler.style.size = this._isHorizontal
-                ? this._height - this._middleHandlerSize
-                : this._width - this._middleHandlerSize;
+            this._spec.startHandler.style.size = isNaN(componentSize)
+                ? this._backgroundSize
+                : componentSize - this._middleHandlerSize;
         }
         if (isNil$1((_h = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.endHandler) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.size)) {
-            this._spec.endHandler.style.size = this._isHorizontal
-                ? this._height - this._middleHandlerSize
-                : this._width - this._middleHandlerSize;
-        }
-        const startHandlerVisble = (_j = this._spec.startHandler.style.visible) !== null && _j !== void 0 ? _j : true;
-        const endHandlerVisble = (_k = this._spec.endHandler.style.visible) !== null && _k !== void 0 ? _k : true;
-        this._startHandlerSize = startHandlerVisble ? this._spec.startHandler.style.size : 0;
-        this._endHandlerSize = endHandlerVisble ? this._spec.endHandler.style.size : 0;
-    }
-    onLayoutEnd() {
-        this._updateScaleRange();
-        if (this._isReverse() && !this._isReverseCache) {
-            this._isReverseCache = this._isReverse();
-            this.effect.onZoomChange();
-        }
-        if (this._cacheVisibility !== false) {
-            super.onLayoutEnd();
-        }
+            this._spec.endHandler.style.size = isNaN(componentSize)
+                ? this._backgroundSize
+                : componentSize - this._middleHandlerSize;
+        }
+        const startHandlerVisible = (_j = this._spec.startHandler.style.visible) !== null && _j !== void 0 ? _j : true;
+        const endHandlerVisible = (_k = this._spec.endHandler.style.visible) !== null && _k !== void 0 ? _k : true;
+        this._startHandlerSize = startHandlerVisible ? this._spec.startHandler.style.size : 0;
+        this._endHandlerSize = endHandlerVisible ? this._spec.endHandler.style.size : 0;
+        this._width = this._computeWidth();
+        this._height = this._computeHeight();
     }
     _initValueScale() {
         const domain = this._computeDomainOfValueScale();
@@ -98120,9 +98440,13 @@ class DataZoom extends DataFilterBaseComponent {
         }
     }
     _updateScaleRange() {
-        var _a, _b;
+        this._updateStateScaleRange();
+        this._updateValueScaleRange();
+    }
+    _updateStateScaleRange() {
+        var _a, _b, _c;
         const handlerSize = this._startHandlerSize + this._endHandlerSize;
-        if (!this._stateScale || !this._valueScale) {
+        if (!this._stateScale) {
             return;
         }
         let stateScaleRange;
@@ -98139,14 +98463,27 @@ class DataZoom extends DataFilterBaseComponent {
             stateScaleRange = this._visible
                 ? [this._startHandlerSize / 2, compWidth - handlerSize + this._startHandlerSize / 2]
                 : defaultRange;
-            this._stateScale.range(stateScaleRange);
-            this._valueScale.range([compHeight - this._middleHandlerSize, 0]);
         }
         else {
             stateScaleRange = this._visible
                 ? [this._startHandlerSize / 2, compHeight - handlerSize + this._startHandlerSize / 2]
                 : defaultRange;
-            this._stateScale.range(stateScaleRange);
+        }
+        this._stateScale.range(stateScaleRange);
+        (_c = this._previewStateScale) === null || _c === void 0 ? void 0 : _c.range(isReverse(this._relatedAxisComponent, this._isHorizontal)
+            ? stateScaleRange.reverse()
+            : stateScaleRange);
+    }
+    _updateValueScaleRange() {
+        if (!this._valueScale) {
+            return;
+        }
+        const compWidth = this._computeWidth();
+        const compHeight = this._computeHeight();
+        if (this._isHorizontal) {
+            this._valueScale.range([compHeight - this._middleHandlerSize, 0]);
+        }
+        else {
             if (this.layoutOrient === 'left') {
                 this._valueScale.range([compWidth - this._middleHandlerSize, 0]);
             }
@@ -98154,24 +98491,35 @@ class DataZoom extends DataFilterBaseComponent {
                 this._valueScale.range([0, compWidth - this._middleHandlerSize]);
             }
         }
-        if (this._component && this._cacheVisibility !== false) {
-            this._component.setAttributes({
-                size: {
-                    width: compWidth,
-                    height: compHeight
-                },
-                position: {
-                    x: this.getLayoutStartPoint().x,
-                    y: this.getLayoutStartPoint().y
-                }
-            });
-        }
     }
     _computeDomainOfValueScale() {
         const domain = this._data.getLatestData().map((d) => d[this._valueField]);
         const domainNum = domain.map((n) => n * 1);
         return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : null;
     }
+    _isScaleValid(scale) {
+        if (!scale || !scale.domain()) {
+            return false;
+        }
+        const domain = scale.domain();
+        if (isContinuous(scale.type) && domain[0] === last(domain)) {
+            return false;
+        }
+        if (isDiscrete(scale.type) && uniqArray(domain).length === 1) {
+            return false;
+        }
+        return true;
+    }
+    _getXScale() {
+        const bindScale = this._relatedAxisComponent.getScale();
+        if (bindScale.type === this.stateScale.type && this._isHorizontal) {
+            return this.stateScale;
+        }
+        return this._isHorizontal ? this._stateScale : this._valueScale;
+    }
+    _getYScale() {
+        return this._isHorizontal ? this._valueScale : this._stateScale;
+    }
     _computeMiddleHandlerSize() {
         var _a, _b, _c, _d;
         let size = 0;
@@ -98192,7 +98540,8 @@ class DataZoom extends DataFilterBaseComponent {
         if (this._isHorizontal) {
             return this.getLayoutRect().width;
         }
-        return this._backgroundSize + this._middleHandlerSize;
+        return (Math.max(this._startHandlerSize || 0, this._endHandlerSize || 0, this._backgroundSize || 0) +
+            this._middleHandlerSize);
     }
     _computeHeight() {
         if (this._visible === false) {
@@ -98202,23 +98551,11 @@ class DataZoom extends DataFilterBaseComponent {
             return this._spec.height;
         }
         if (this._isHorizontal) {
-            return this._backgroundSize + this._middleHandlerSize;
+            return (Math.max(this._startHandlerSize || 0, this._endHandlerSize || 0, this._backgroundSize || 0) +
+                this._middleHandlerSize);
         }
         return this.getLayoutRect().height;
     }
-    _isScaleValid(scale) {
-        if (!scale || !scale.domain()) {
-            return false;
-        }
-        const domain = scale.domain();
-        if (isContinuous(scale.type) && domain[0] === last(domain)) {
-            return false;
-        }
-        if (isDiscrete(scale.type) && uniqArray(domain).length === 1) {
-            return false;
-        }
-        return true;
-    }
     _getAttrs(isNeedPreview) {
         var _a, _b, _c, _d, _e;
         const spec = (_a = this._spec) !== null && _a !== void 0 ? _a : {};
@@ -98228,73 +98565,58 @@ class DataZoom extends DataFilterBaseComponent {
             }, orient: this._orient, size: {
                 width: this._computeWidth(),
                 height: this._computeHeight()
-            }, showDetail: spec.showDetail, brushSelect: (_b = spec.brushSelect) !== null && _b !== void 0 ? _b : false, zoomLock: (_c = spec.zoomLock) !== null && _c !== void 0 ? _c : false, minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, delayTime: isValid$1(spec.delayType) ? (_d = spec.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_e = spec.realTime) !== null && _e !== void 0 ? _e : true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY, tolerance: this._spec.tolerance }, this._getComponentAttrs(isNeedPreview));
+            }, showDetail: spec.showDetail, brushSelect: (_b = spec.brushSelect) !== null && _b !== void 0 ? _b : false, zoomLock: (_c = spec.zoomLock) !== null && _c !== void 0 ? _c : false, minSpan: this._minSpan, maxSpan: this._maxSpan, delayType: spec.delayType, delayTime: isValid$1(spec.delayType) ? ((_d = spec.delayTime) !== null && _d !== void 0 ? _d : 30) : 0, realTime: (_e = spec.realTime) !== null && _e !== void 0 ? _e : true, previewData: isNeedPreview && this._data.getLatestData(), previewPointsX: isNeedPreview && this._dataToPositionX, previewPointsY: isNeedPreview && this._dataToPositionY, tolerance: this._spec.tolerance, isReverse: isReverse(this._relatedAxisComponent, this._isHorizontal) }, this._getComponentAttrs(isNeedPreview));
     }
-    _createOrUpdateComponent() {
+    _getLayoutAttrs() {
+        return {
+            position: {
+                x: this.getLayoutStartPoint().x,
+                y: this.getLayoutStartPoint().y
+            },
+            size: {
+                width: this._computeWidth(),
+                height: this._computeHeight()
+            }
+        };
+    }
+    _createOrUpdateComponent(changeData) {
         if (this._visible) {
             const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
             const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
             const isNeedPreview = this._isScaleValid(xScale) && this._isScaleValid(yScale) && this._spec.showBackgroundChart !== false;
             const attrs = this._getAttrs(isNeedPreview);
+            const axis = this._relatedAxisComponent;
             if (this._component) {
                 this._component.setAttributes(attrs);
+                if (changeData) {
+                    this._component.setPreviewData(this._data.getDataView().latestData);
+                    if (isNeedPreview) {
+                        if (this._isHorizontal) {
+                            this._component.setPreviewPointsY1(this._dataToPositionY2);
+                        }
+                        else {
+                            this._component.setPreviewPointsX1(this._dataToPositionX2);
+                        }
+                        this._component.setStatePointToData((state) => statePointToData(state, this._stateScale, isReverse(axis, this._isHorizontal)));
+                    }
+                }
             }
             else {
                 const container = this.getContainer();
                 this._component = new DataZoom$1(attrs);
+                this._component.setPreviewData(this._data.getDataView().latestData);
                 if (this._isHorizontal) {
                     isNeedPreview && this._component.setPreviewPointsY1(this._dataToPositionY2);
                 }
                 else {
                     isNeedPreview && this._component.setPreviewPointsX1(this._dataToPositionX2);
                 }
-                this._component.setStatePointToData((state) => this.statePointToData(state));
-                this._component.addEventListener('change', (e) => {
+                this._component.setStatePointToData((state) => statePointToData(state, this._stateScale, isReverse(axis, this._isHorizontal)));
+                this._component.addEventListener('dataZoomChange', (e) => {
                     const { start, end, tag } = e.detail;
                     this._handleChange(start, end, undefined, tag);
                 });
                 container.add(this._component);
-                this._updateScaleRange();
-            }
-        }
-    }
-    _handleChange(start, end, updateComponent, tag) {
-        super._handleChange(start, end, updateComponent);
-        if (this._shouldChange) {
-            if (updateComponent && this._component) {
-                this._component.setStartAndEnd(start, end);
-            }
-            this._start = start;
-            this._end = end;
-            const startValue = this.statePointToData(start);
-            const endValue = this.statePointToData(end);
-            const hasChange = isFunction$1(this._spec.updateDataAfterChange)
-                ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
-                : this._handleStateChange(startValue, endValue, tag);
-            if (hasChange) {
-                this.event.emit(ChartEvent.dataZoomChange, {
-                    model: this,
-                    value: {
-                        filterData: this._filterMode !== 'axis',
-                        start,
-                        end,
-                        startValue: this._startValue,
-                        endValue: this._endValue,
-                        newDomain: this._newDomain
-                    }
-                });
-            }
-        }
-    }
-    _handleDataCollectionChange() {
-        var _a;
-        const data = this._data.getDataView();
-        data.reRunAllTransform();
-        (_a = this._component) === null || _a === void 0 ? void 0 : _a.setPreviewData(data.latestData);
-        if (this._valueScale) {
-            const domain = this._computeDomainOfValueScale();
-            if (domain) {
-                this._valueScale.domain(domain);
             }
         }
     }
@@ -98356,16 +98678,23 @@ class DataZoom extends DataFilterBaseComponent {
     _getNeedClearVRenderComponents() {
         return [this._component];
     }
-    clear() {
-        if (this._component) {
-            const container = this.getContainer();
-            this._component.removeAllChild();
-            if (container) {
-                container.removeChild(this._component);
+    onDataUpdate() {
+        super.onDataUpdate();
+        if (this._previewStateScale !== this._stateScale) {
+            this._previewStateScale = null;
+        }
+    }
+    _getPreviewStateScale() {
+        if (!this._previewStateScale) {
+            if (isReverse(this._relatedAxisComponent, this._isHorizontal)) {
+                this._previewStateScale = this._stateScale.clone();
+                this._previewStateScale.range(this._stateScale.range().reverse());
+            }
+            else {
+                this._previewStateScale = this._stateScale;
             }
-            this._component = null;
         }
-        super.clear();
+        return this._previewStateScale;
     }
 }
 DataZoom.type = ComponentTypeEnum.dataZoom;
@@ -98410,24 +98739,53 @@ class ScrollBar extends DataFilterBaseComponent {
         this.layoutType = 'region-relative';
         this._filterMode = (_a = spec.filterMode) !== null && _a !== void 0 ? _a : 'axis';
     }
-    setAttrFromSpec() {
-        super.setAttrFromSpec();
-        if (isBoolean$1(this._spec.roam)) {
-            this._zoomAttr.enable = false;
-            this._dragAttr.enable = this._spec.roam;
-            this._scrollAttr.enable = this._spec.roam;
+    _handleChange(start, end, updateComponent) {
+        super._handleChange(start, end, updateComponent);
+        const isSameScrollValue = isClose(this._start, start) && isClose(this._end, end);
+        if (this._shouldChange && (!isSameScrollValue || this._spec.realTime === false)) {
+            if (updateComponent && this._component) {
+                this._component.setAttribute('range', [start, end]);
+            }
+            this._start = start;
+            this._end = end;
+            const startValue = statePointToData(start, this._stateScale, false);
+            const endValue = statePointToData(end, this._stateScale, false);
+            const hasChange = isFunction$1(this._spec.updateDataAfterChange)
+                ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
+                : this._handleStateChange(startValue, endValue);
+            if (hasChange) {
+                this.event.emit(ChartEvent.scrollBarChange, {
+                    model: this,
+                    value: {
+                        filterData: this._filterMode !== 'axis',
+                        start: this._start,
+                        end: this._end,
+                        startValue: this._startValue,
+                        endValue: this._endValue,
+                        newDomain: this._newDomain
+                    }
+                });
+            }
         }
-        if (this._zoomAttr.enable || this._dragAttr.enable || this._scrollAttr.enable) {
-            this.initZoomable(this.event, this._option.mode);
+    }
+    _handleDataCollectionChange() {
+        if (this._spec.auto) {
+            const data = this._data.getDataView();
+            data.reRunAllTransform();
         }
     }
-    onLayoutEnd() {
+    _beforeLayoutEnd() {
         var _a, _b;
-        this._updateScaleRange();
+        super._beforeLayoutEnd();
         (_b = (_a = this.effect).onZoomChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    onLayoutEnd() {
+        this._updateComponentBounds();
         super.onLayoutEnd();
     }
     _updateScaleRange() {
+    }
+    _updateComponentBounds() {
         if (this._component) {
             this._component.setAttributes({
                 x: this.getLayoutStartPoint().x,
@@ -98438,6 +98796,9 @@ class ScrollBar extends DataFilterBaseComponent {
         }
     }
     _computeWidth() {
+        if (this._visible === false) {
+            return 0;
+        }
         if (isNumber$1(this._spec.width)) {
             return this._spec.width;
         }
@@ -98447,6 +98808,9 @@ class ScrollBar extends DataFilterBaseComponent {
         return SCROLL_BAR_DEFAULT_SIZE;
     }
     _computeHeight() {
+        if (this._visible === false) {
+            return 0;
+        }
         if (isNumber$1(this._spec.height)) {
             return this._spec.height;
         }
@@ -98457,7 +98821,7 @@ class ScrollBar extends DataFilterBaseComponent {
     }
     _getAttrs() {
         var _a, _b, _c, _d, _e, _f;
-        return Object.assign({ zIndex: this.layoutZIndex, x: this.getLayoutStartPoint().x, y: this.getLayoutStartPoint().y, width: this.getLayoutRect().width, height: this.getLayoutRect().height, range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType, delayTime: isValid$1((_b = this._spec) === null || _b === void 0 ? void 0 : _b.delayType) ? (_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayTime) !== null && _d !== void 0 ? _d : 30 : 0, realTime: (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.realTime) !== null && _f !== void 0 ? _f : true }, this._getComponentAttrs());
+        return Object.assign({ zIndex: this.layoutZIndex, x: this.getLayoutStartPoint().x, y: this.getLayoutStartPoint().y, width: this.getLayoutRect().width, height: this.getLayoutRect().height, range: [this._start, this._end], direction: this._isHorizontal ? 'horizontal' : 'vertical', delayType: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType, delayTime: isValid$1((_b = this._spec) === null || _b === void 0 ? void 0 : _b.delayType) ? ((_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayTime) !== null && _d !== void 0 ? _d : 30) : 0, realTime: (_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.realTime) !== null && _f !== void 0 ? _f : true }, this._getComponentAttrs());
     }
     _createOrUpdateComponent() {
         const attrs = this._getAttrs();
@@ -98478,41 +98842,6 @@ class ScrollBar extends DataFilterBaseComponent {
             container.add(this._component);
         }
     }
-    _handleChange(start, end, updateComponent) {
-        super._handleChange(start, end, updateComponent);
-        const isSameScrollValue = isClose(this._start, start) && isClose(this._end, end);
-        if (this._shouldChange && (!isSameScrollValue || this._spec.realTime === false)) {
-            if (updateComponent && this._component) {
-                this._component.setAttribute('range', [start, end]);
-            }
-            this._start = start;
-            this._end = end;
-            const startValue = this.statePointToData(start);
-            const endValue = this.statePointToData(end);
-            const hasChange = isFunction$1(this._spec.updateDataAfterChange)
-                ? this._spec.updateDataAfterChange(start, end, startValue, endValue)
-                : this._handleStateChange(this.statePointToData(start), this.statePointToData(end));
-            if (hasChange) {
-                this.event.emit(ChartEvent.scrollBarChange, {
-                    model: this,
-                    value: {
-                        filterData: this._filterMode !== 'axis',
-                        start: this._start,
-                        end: this._end,
-                        startValue: this._startValue,
-                        endValue: this._endValue,
-                        newDomain: this._newDomain
-                    }
-                });
-            }
-        }
-    }
-    _handleDataCollectionChange() {
-        if (this._spec.auto) {
-            const data = this._data.getDataView();
-            data.reRunAllTransform();
-        }
-    }
     _getComponentAttrs() {
         const { rail, slider, innerPadding } = this._spec;
         const attrs = {};
@@ -102648,17 +102977,13 @@ class Brush extends BaseComponent {
                 const axisRangeExpand = (_a = this._spec.axisRangeExpand) !== null && _a !== void 0 ? _a : 0;
                 const { x1, x2, y1, y2 } = operateMaskBounds;
                 const regionStartAttr = isHorizontal ? 'x' : 'y';
+                const regionSizeAttr = isHorizontal ? 'width' : 'height';
                 const boundsStart = isHorizontal ? x1 : y1;
                 const boundsEnd = isHorizontal ? x2 : y2;
                 if (this._axisDataZoomMap[axis.id]) {
                     const dataZoom = this._axisDataZoomMap[axis.id];
-                    const releatedAxis = dataZoom.relatedAxisComponent;
-                    const startValue = releatedAxis
-                        .getScale()
-                        .invert(boundsStart - region.getLayoutStartPoint()[regionStartAttr]);
-                    const endValue = releatedAxis.getScale().invert(boundsEnd - region.getLayoutStartPoint()[regionStartAttr]);
-                    const startPercent = dataZoom.dataToStatePoint(startValue);
-                    const endPercent = dataZoom.dataToStatePoint(endValue);
+                    const startPercent = (boundsStart - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr];
+                    const endPercent = (boundsEnd - region.getLayoutStartPoint()[regionStartAttr]) / region.getLayoutRect()[regionSizeAttr];
                     const newStartPercent = this._stateClamp(startPercent - axisRangeExpand);
                     const newEndPercent = this._stateClamp(endPercent + axisRangeExpand);
                     dataZoom.setStartAndEnd(Math.min(newStartPercent, newEndPercent), Math.max(newStartPercent, newEndPercent), [
@@ -102669,8 +102994,8 @@ class Brush extends BaseComponent {
                         operateComponent: dataZoom,
                         start: newStartPercent,
                         end: newEndPercent,
-                        startValue: dataZoom.statePointToData(newStartPercent),
-                        endValue: dataZoom.statePointToData(newEndPercent)
+                        startValue: statePointToData(newStartPercent, dataZoom.stateScale, isReverse(dataZoom.relatedAxisComponent, dataZoom.isHorizontal)),
+                        endValue: statePointToData(newEndPercent, dataZoom.stateScale, isReverse(dataZoom.relatedAxisComponent, dataZoom.isHorizontal))
                     });
                 }
                 else {