@visactor/vchart 2.0.8-alpha.5 → 2.0.9

package/build/index.js

@@ -43202,7 +43202,16 @@
           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]);
@@ -45471,15 +45480,18 @@
           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,
@@ -45499,7 +45511,10 @@
         }], basePointEnd = [{
           x: position.x,
           y: position.y
-        }]), {
+        }]), Math.sign(basePointEnd[0][key] - basePointStart[0][key]) !== lastPointSide ? {
+          basePointStart: basePointEnd,
+          basePointEnd: basePointStart
+        } : {
           basePointStart: basePointStart,
           basePointEnd: basePointEnd
         };
@@ -45522,7 +45537,7 @@
         const {
           basePointStart: basePointStart,
           basePointEnd: basePointEnd
-        } = this._computeBasePoints();
+        } = this._computeBasePoints(previewPoints);
         return basePointStart.concat(previewPoints).concat(basePointEnd);
       }
       _getPreviewAreaPoints() {
@@ -45537,7 +45552,7 @@
         const {
           basePointStart: basePointStart,
           basePointEnd: basePointEnd
-        } = this._computeBasePoints();
+        } = this._computeBasePoints(previewPoints);
         return basePointStart.concat(previewPoints).concat(basePointEnd);
       }
       renderText() {
@@ -45950,11 +45965,12 @@
         })));
       }
       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());
@@ -53708,6 +53724,7 @@
         ChartEvent["markDeltaYUpdate"] = "markDeltaYUpdate";
         ChartEvent["viewDataLabelUpdate"] = "viewDataLabelUpdate";
         ChartEvent["scaleDomainUpdate"] = "scaleDomainUpdate";
+        ChartEvent["scaleRawDomainUpdate"] = "scaleRawDomainUpdate";
         ChartEvent["scaleUpdate"] = "scaleUpdate";
         ChartEvent["dataZoomChange"] = "dataZoomChange";
         ChartEvent["drill"] = "drill";
@@ -54729,6 +54746,7 @@
             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) {
@@ -54771,6 +54789,7 @@
                 this.handleLayoutEnd();
             }
             this.findProgressiveMarks();
+            this.updateStateAnimation();
             this._doRender(true);
             this.doPreProgressive();
             log(`--- start of renderMarks(${this._count}) ---`);
@@ -54816,6 +54835,67 @@
                 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;
@@ -58285,6 +58365,15 @@
                 : () => '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];
@@ -58539,14 +58628,14 @@
         _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;
@@ -58554,7 +58643,7 @@
                     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) {
@@ -59408,10 +59497,20 @@
     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);
@@ -60987,10 +61086,6 @@
             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);
@@ -61300,7 +61395,7 @@
         });
     };
 
-    const version = "2.0.8-alpha.5";
+    const version = "2.0.9";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -62350,6 +62445,7 @@
             this.initMarkState();
             if (hasAnimation) {
                 this.initAnimation();
+                this.initStageAnimation();
             }
             this.afterInitMark();
             this.initEvent();
@@ -62806,6 +62902,13 @@
         }
         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();
         }
@@ -65676,7 +65779,7 @@
                     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) {
@@ -66939,8 +67042,12 @@
     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);
@@ -67207,9 +67314,13 @@
             }
         }
         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);
@@ -67244,6 +67355,15 @@
                 return value;
             };
         }
+        _updateRawDomain() {
+            const data = this.collectData(0, true);
+            const domain = this.computeLinearDomain(data);
+            this._rawDomain = domain;
+            this.event.emit(exports.ChartEvent.scaleRawDomainUpdate, { model: this });
+        }
+        _clearRawDomain() {
+            this._rawDomain = [];
+        }
     }
 
     const axisLinear = {
@@ -67475,6 +67595,7 @@
     class BandAxisMixin {
         constructor() {
             this._rawDomainIndex = [];
+            this._rawDomain = [];
         }
         _initData() {
             var _a;
@@ -67526,6 +67647,9 @@
                 tickTransform && (tickTransform.options = this._tickTransformOption());
             }
         }
+        getRawDomain() {
+            return this._rawDomain;
+        }
         dataToPosition(values, cfg = {}) {
             var _a, _b;
             if (values.length === 0 || this._scales.length === 0) {
@@ -67663,6 +67787,7 @@
         }
         _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) {
@@ -67672,12 +67797,15 @@
                     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(exports.ChartEvent.scaleRawDomainUpdate, { model: this });
         }
         _clearRawDomain() {
             this._rawDomainIndex = [];
+            this._rawDomain = [];
         }
     }
 
@@ -70016,12 +70144,10 @@
                 }
             });
             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 {
@@ -70051,25 +70177,6 @@
                 }
             }
         }
-        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');
@@ -72036,7 +72143,10 @@
             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;
@@ -72385,7 +72495,10 @@
             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;
@@ -79403,13 +79516,14 @@
             });
         }
         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', exports.AttributeLevel.Series);
                 clipMark.setMarkConfig({ interactive: false, clip: true });
             }
@@ -97074,17 +97188,26 @@
         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;
@@ -97092,6 +97215,7 @@
                     if (isNil$1(resultObj[d])) {
                         stateValues.push(d);
                         resultObj[d] = 0;
+                        resultKeys.push(d);
                     }
                 });
             }
@@ -97101,6 +97225,7 @@
                         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]]);
@@ -97111,9 +97236,9 @@
         });
         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) {
@@ -97123,17 +97248,83 @@
         });
         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;
         }
@@ -97141,19 +97332,203 @@
             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(exports.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;
@@ -97167,18 +97542,10 @@
                 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) {
@@ -97225,23 +97592,16 @@
             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) => {
@@ -97250,7 +97610,7 @@
                     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');
@@ -97281,92 +97641,14 @@
                 }
             };
             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();
@@ -97381,6 +97663,88 @@
             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);
@@ -97390,7 +97754,7 @@
             }
             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;
                 }
@@ -97441,33 +97805,9 @@
             }
             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;
@@ -97496,6 +97836,8 @@
                                 ? 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'
@@ -97506,16 +97848,17 @@
                         : 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);
                         }
                     }
@@ -97528,6 +97871,7 @@
             else {
                 eachSeries(this._regions, s => {
                     dataCollection.push(s.getRawData());
+                    seriesCollection.push(s);
                     stateFields.push(this._field);
                     if (this._valueField) {
                         valueFields.push(this._spec.valueField);
@@ -97546,6 +97890,7 @@
                 options: {
                     input: {
                         dataCollection: dataCollection,
+                        seriesCollection,
                         stateFields,
                         valueFields,
                         isCategoryState
@@ -97560,136 +97905,6 @@
             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);
@@ -97728,59 +97943,116 @@
                 });
             }
         }
-        _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) {
@@ -97799,29 +98071,6 @@
                 [sizeKey]: exports.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();
@@ -97830,15 +98079,6 @@
             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) {
@@ -97848,7 +98088,7 @@
             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) &&
@@ -97895,9 +98135,6 @@
         _getNeedClearVRenderComponents() {
             return [this._component];
         }
-        clear() {
-            this._throttledHide = null;
-        }
     }
     mixin(DataFilterBaseComponent, Zoomable);
 
@@ -98043,14 +98280,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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];
@@ -98059,63 +98296,146 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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(exports.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();
@@ -98126,9 +98446,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _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;
@@ -98145,14 +98469,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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]);
                 }
@@ -98160,24 +98497,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     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;
@@ -98198,7 +98546,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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) {
@@ -98208,23 +98557,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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 : {};
@@ -98234,73 +98571,58 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 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(exports.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);
                 }
             }
         }
@@ -98362,16 +98684,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _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;
@@ -98416,24 +98745,53 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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(exports.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,
@@ -98444,6 +98802,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _computeWidth() {
+            if (this._visible === false) {
+                return 0;
+            }
             if (isNumber$1(this._spec.width)) {
                 return this._spec.width;
             }
@@ -98453,6 +98814,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return SCROLL_BAR_DEFAULT_SIZE;
         }
         _computeHeight() {
+            if (this._visible === false) {
+                return 0;
+            }
             if (isNumber$1(this._spec.height)) {
                 return this._spec.height;
             }
@@ -98463,7 +98827,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _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();
@@ -98484,41 +98848,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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(exports.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 = {};
@@ -102654,17 +102983,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     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), [
@@ -102675,8 +103000,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             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 {