@visactor/vchart 2.0.7-alpha.1 → 2.0.7-alpha.4

package/build/index.js

@@ -1042,43 +1042,187 @@
       return [min, max];
     };
 
+    function invNorm(p) {
+      if (p <= 0 || p >= 1) return 0;
+      const c1 = -.00778489400243029,
+        c2 = -.322396458041136,
+        c3 = -2.40075827716184,
+        c4 = -2.54973253934373,
+        c5 = 4.37466414146497,
+        c6 = 2.93816398269878,
+        d1 = .00778469570904146,
+        d2 = .32246712907004,
+        d3 = 2.445134137143,
+        d4 = 3.75440866190742;
+      let q, r;
+      return p < .02425 ? (q = Math.sqrt(-2 * Math.log(p)), (((((c1 * q + c2) * q + c3) * q + c4) * q + c5) * q + c6) / ((((d1 * q + d2) * q + d3) * q + d4) * q + 1)) : p <= .97575 ? (q = p - .5, r = q * q, (((((-39.6968302866538 * r + 220.946098424521) * r - 275.928510446969) * r + 138.357751867269) * r - 30.6647980661472) * r + 2.50662827745924) * q / (((((-54.4760987982241 * r + 161.585836858041) * r - 155.698979859887) * r + 66.8013118877197) * r - 13.2806815528857) * r + 1)) : (q = Math.sqrt(-2 * Math.log(1 - p)), -(((((c1 * q + c2) * q + c3) * q + c4) * q + c5) * q + c6) / ((((d1 * q + d2) * q + d3) * q + d4) * q + 1));
+    }
+    function computeLinearCIComponents(data, x, y, predict) {
+      let min = 1 / 0,
+        max = -1 / 0,
+        n = 0,
+        sumX = 0;
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let dx = x(d),
+          dy = y(d);
+        !isNil$1(dx) && (dx = +dx) >= dx && !isNil$1(dy) && (dy = +dy) >= dy && (dx < min && (min = dx), dx > max && (max = dx), n++, sumX += dx);
+      }
+      if (0 === n) return {
+        min: min,
+        max: max,
+        n: n,
+        X: 0,
+        SSE: 0,
+        Sxx: 0
+      };
+      const X = sumX / n;
+      let SSE = 0,
+        Sxx = 0;
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let dx = x(d),
+          dy = y(d);
+        if (!isNil$1(dx) && (dx = +dx) >= dx && !isNil$1(dy) && (dy = +dy) >= dy) {
+          const r = dy - predict(dx);
+          SSE += r * r;
+          const dxc = dx - X;
+          Sxx += dxc * dxc;
+        }
+      }
+      return {
+        min: min,
+        max: max,
+        n: n,
+        X: X,
+        SSE: SSE,
+        Sxx: Sxx
+      };
+    }
+    function stdErrorsAt(px, comps) {
+      const {
+          n: n,
+          X: X,
+          Sxx: Sxx,
+          SSE: SSE
+        } = comps,
+        s2 = n > 2 ? SSE / (n - 2) : 0;
+      return {
+        seMean: Sxx > 0 ? Math.sqrt(s2 * (1 / n + (px - X) * (px - X) / Sxx)) : Math.sqrt(s2 / n),
+        sePred: Math.sqrt(s2 * (1 + 1 / n + (Sxx > 0 ? (px - X) * (px - X) / Sxx : 0)))
+      };
+    }
+
     function ordinaryLeastSquares(uX, uY, uXY, uX2) {
-      const delta = uX2 - uX * uX,
-        slope = Math.abs(delta) < 1e-24 ? 0 : (uXY - uX * uY) / delta;
-      return [uY - slope * uX, slope];
+      const denom = uX2 - uX * uX;
+      if (Math.abs(denom) < Number.EPSILON) return {
+        a: uY,
+        b: 0
+      };
+      const b = (uXY - uX * uY) / denom;
+      return {
+        a: uY - b * uX,
+        b: b
+      };
     }
     function visitPoints(data, x, y, callback) {
-      let u,
-        v,
-        i = -1;
-      data.forEach(d => {
-        u = x(d), v = y(d), !isNil$1(u) && (u = +u) >= u && !isNil$1(v) && (v = +v) >= v && callback(u, v, ++i);
-      });
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let xi = x(d),
+          yi = y(d);
+        !isNil$1(xi) && (xi = +xi) >= xi && !isNil$1(yi) && (yi = +yi) >= yi && callback(xi, yi, i);
+      }
     }
     function rSquared(data, x, y, uY, predict) {
-      let SSE = 0,
-        SST = 0;
-      return visitPoints(data, x, y, (dx, dy) => {
-        const sse = dy - predict(dx),
-          sst = dy - uY;
-        SSE += sse * sse, SST += sst * sst;
-      }), 1 - SSE / SST;
-    }
-    function regressionLinear(data, x = datum => datum.x, y = datum => datum.y) {
-      let X = 0,
-        Y = 0,
-        XY = 0,
-        X2 = 0,
-        n = 0;
-      visitPoints(data, x, y, (dx, dy) => {
-        ++n, X += (dx - X) / n, Y += (dy - Y) / n, XY += (dx * dy - XY) / n, X2 += (dx * dx - X2) / n;
+      let ssr = 0,
+        sst = 0;
+      for (let i = 0; i < data.length; i++) {
+        const d = data[i];
+        let yi = y(d);
+        if (!isNil$1(yi) && (yi = +yi) >= yi) {
+          const r = yi - predict(x(d));
+          ssr += r * r;
+          const t = yi - uY;
+          sst += t * t;
+        }
+      }
+      return 0 === sst ? 0 : 1 - ssr / sst;
+    }
+    function regressionLinear(data, x = d => d.x, y = d => d.y) {
+      let n = 0,
+        meanX = 0,
+        meanY = 0,
+        meanXY = 0,
+        meanX2 = 0;
+      visitPoints(data, x, y, (xi, yi) => {
+        n++, meanX += (xi - meanX) / n, meanY += (yi - meanY) / n, meanXY += (xi * yi - meanXY) / n, meanX2 += (xi * xi - meanX2) / n;
       });
-      const coef = ordinaryLeastSquares(X, Y, XY, X2),
-        predict = x => coef[0] + coef[1] * x;
+      const {
+          a: a,
+          b: b
+        } = ordinaryLeastSquares(meanX, meanY, meanXY, meanX2),
+        predict = xx => a + b * xx,
+        comps = computeLinearCIComponents(data, x, y, predict);
       return {
-        coef: coef,
+        coef: {
+          a: a,
+          b: b
+        },
         predict: predict,
-        rSquared: rSquared(data, x, y, Y, predict)
+        rSquared: rSquared(data, x, y, meanY, predict),
+        evaluateGrid: function (N) {
+          const out = [];
+          if (0 === comps.n || N <= 0) return out;
+          if (comps.min === comps.max) {
+            for (let i = 0; i < N; i++) out.push({
+              x: comps.min,
+              y: predict(comps.min)
+            });
+            return out;
+          }
+          const step = (comps.max - comps.min) / (N - 1);
+          for (let i = 0; i < N; i++) {
+            const px = i === N - 1 ? comps.max : comps.min + step * i;
+            out.push({
+              x: px,
+              y: predict(px)
+            });
+          }
+          return out;
+        },
+        confidenceInterval: function (N = 50, alpha = .05) {
+          const out = [];
+          if (0 === comps.n || N <= 0) return out;
+          const z = invNorm(1 - alpha / 2);
+          if (comps.min === comps.max) {
+            const m = predict(comps.min),
+              errs = stdErrorsAt(comps.min, comps);
+            for (let i = 0; i < N; i++) out.push({
+              x: comps.min,
+              mean: m,
+              lower: m - z * errs.seMean,
+              upper: m + z * errs.seMean,
+              predLower: m - z * errs.sePred,
+              predUpper: m + z * errs.sePred
+            });
+            return out;
+          }
+          const step = (comps.max - comps.min) / (N - 1);
+          for (let i = 0; i < N; i++) {
+            const px = i === N - 1 ? comps.max : comps.min + step * i,
+              m = predict(px),
+              errs = stdErrorsAt(px, comps);
+            out.push({
+              x: px,
+              mean: m,
+              lower: m - z * errs.seMean,
+              upper: m + z * errs.seMean,
+              predLower: m - z * errs.sePred,
+              predUpper: m + z * errs.sePred
+            });
+          }
+          return out;
+        }
       };
     }
 
@@ -5974,6 +6118,59 @@
       return 0;
     }
 
+    const bin = (data, options) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      const field = null == options ? void 0 : options.field;
+      if (!field) return [];
+      const n = data.length;
+      let thresholds,
+        min = 1 / 0,
+        max = -1 / 0;
+      if (null == options ? void 0 : options.extent) min = options.extent[0], max = options.extent[1];else for (let i = 0; i < n; i++) {
+        const v = data[i][field];
+        if (isNil$1(v)) continue;
+        const num = +v;
+        Number.isFinite(num) && (num < min && (min = num), num > max && (max = num));
+      }
+      if (!Number.isFinite(min) || !Number.isFinite(max) || 0 === n) return [];
+      if (options && options.thresholds && options.thresholds.length) thresholds = options.thresholds.slice(), thresholds.sort((a, b) => a - b);else if (options && "number" == typeof options.step && options.step > 0) {
+        const stepSize = options.step;
+        let startMin = min;
+        for (options.extent || (startMin = Math.floor(min / stepSize) * stepSize), thresholds = [startMin]; startMin < max;) startMin += stepSize, thresholds.push(startMin);
+      } else {
+        const bins = (null == options ? void 0 : options.bins) && options.bins > 0 ? Math.floor(options.bins) : 10,
+          stepSize = (max - min) / bins;
+        thresholds = new Array(bins + 1);
+        for (let i = 0; i <= bins; i++) thresholds[i] = i === bins ? max : min + stepSize * i;
+      }
+      const numBins = Math.max(0, thresholds.length - 1);
+      if (0 === numBins) return [];
+      const x0Name = null !== (_b = null === (_a = options.outputNames) || void 0 === _a ? void 0 : _a.x0) && void 0 !== _b ? _b : "x0",
+        x1Name = null !== (_d = null === (_c = options.outputNames) || void 0 === _c ? void 0 : _c.x1) && void 0 !== _d ? _d : "x1",
+        countName = null !== (_f = null === (_e = options.outputNames) || void 0 === _e ? void 0 : _e.count) && void 0 !== _f ? _f : "count",
+        valuesName = null !== (_h = null === (_g = options.outputNames) || void 0 === _g ? void 0 : _g.values) && void 0 !== _h ? _h : "values",
+        out = new Array(numBins);
+      for (let i = 0; i < numBins; i++) out[i] = {
+        [x0Name]: thresholds[i],
+        [x1Name]: thresholds[i + 1],
+        [countName]: 0
+      }, (null == options ? void 0 : options.includeValues) && (out[i][valuesName] = []);
+      for (let i = 0; i < n; i++) {
+        const v = data[i][field];
+        if (null == v) continue;
+        const num = +v;
+        if (Number.isFinite(num)) for (let j = 0; j < numBins; j++) {
+          const left = out[j][x0Name],
+            right = out[j][x1Name];
+          if (num >= left && num < right || j === numBins - 1 && num <= right) {
+            out[j][countName]++, options && options.includeValues && out[j][valuesName].push(data[i]);
+            break;
+          }
+        }
+      }
+      return out;
+    };
+
     var EOL = {},
       EOF = {},
       QUOTE = 34,
@@ -38702,7 +38899,9 @@
           space = bandSpace(n, this._paddingInner, this._paddingOuter);
         return this._step = (stop - start) / Math.max(1, space || 1), this._round && (this._step = Math.floor(this._step)), start += (stop - start - this._step * (n - this._paddingInner)) * this._align, this.isBandwidthFixed() || (this._bandwidth = this._step * (1 - this._paddingInner)), this._round && (start = Math.round(start), this.isBandwidthFixed() || (this._bandwidth = Math.round(this._bandwidth))), this._bandRangeState = {
           reverse: reverse,
-          start: reverse ? start + this._step * (n - 1) : start,
+          start: reverse ? clamp$1(start + this._step * (n - 1), wholeRange[1], wholeRange[0]) : clamp$1(start, wholeRange[0], wholeRange[1]),
+          min: reverse ? wholeRange[1] : wholeRange[0],
+          max: stop,
           count: n
         }, this.generateFishEyeTransform(), this;
       }
@@ -38719,10 +38918,12 @@
         const {
             count: count,
             start: start,
-            reverse: reverse
+            reverse: reverse,
+            min: min,
+            max: max
           } = this._bandRangeState,
           output = start + (reverse ? -1 : 1) * ((i - 1) % count) * this._step;
-        return this._fishEyeTransform ? this._fishEyeTransform(output) : output;
+        return clamp$1(this._fishEyeTransform ? this._fishEyeTransform(output) : output, min, max);
       }
       _calculateWholeRange(range, changeProperty) {
         if (this._wholeRange) return this._wholeRange;
@@ -42230,6 +42431,19 @@
     }
     mixin(CircleAxisGrid, CircleAxisMixin);
 
+    var DataZoomActiveTag;
+    !function (DataZoomActiveTag) {
+      DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
+    }(DataZoomActiveTag || (DataZoomActiveTag = {}));
+    var IDataZoomInteractiveEvent;
+    !function (IDataZoomInteractiveEvent) {
+      IDataZoomInteractiveEvent.stateUpdate = "stateUpdate", IDataZoomInteractiveEvent.maskUpdate = "maskUpdate", IDataZoomInteractiveEvent.dataZoomUpdate = "dataZoomUpdate";
+    }(IDataZoomInteractiveEvent || (IDataZoomInteractiveEvent = {}));
+    var IDataZoomEvent;
+    !function (IDataZoomEvent) {
+      IDataZoomEvent.dataZoomChange = "dataZoomChange";
+    }(IDataZoomEvent || (IDataZoomEvent = {}));
+
     const DEFAULT_HANDLER_PATH = "M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z";
     const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
       orient: "bottom",
@@ -42347,14 +42561,17 @@
       }
     };
 
-    var DataZoomActiveTag;
-    !function (DataZoomActiveTag) {
-      DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
-    }(DataZoomActiveTag || (DataZoomActiveTag = {}));
-
-    function loadDataZoomComponent() {
-      loadTagComponent(), registerRect(), registerSymbol(), registerArea(), registerLine();
-    }
+    const isTextOverflow = (componentBoundsLike, textBounds, layout, isHorizontal) => {
+      if (!textBounds) return !1;
+      if (isHorizontal) {
+        if ("start" === layout) {
+          if (textBounds.x1 < componentBoundsLike.x1) return !0;
+        } else if (textBounds.x2 > componentBoundsLike.x2) return !0;
+      } else if ("start" === layout) {
+        if (textBounds.y1 < componentBoundsLike.y1) return !0;
+      } else if (textBounds.y2 > componentBoundsLike.y2) return !0;
+      return !1;
+    };
 
     var __rest$1 = undefined && undefined.__rest || function (s, e) {
       var t = {};
@@ -42365,176 +42582,96 @@
       }
       return t;
     };
-    const delayMap$2 = {
-      debounce: debounce,
-      throttle: throttle
-    };
-    loadDataZoomComponent();
-    let DataZoom$1 = class DataZoom extends AbstractComponent {
-      setPropsFromAttrs() {
+    class DataZoomRenderer {
+      get startHandlerMask() {
+        return this._startHandlerMask;
+      }
+      get middleHandlerSymbol() {
+        return this._middleHandlerSymbol;
+      }
+      get middleHandlerRect() {
+        return this._middleHandlerRect;
+      }
+      get endHandlerMask() {
+        return this._endHandlerMask;
+      }
+      get selectedBackground() {
+        return this._selectedBackground;
+      }
+      get dragMask() {
+        return this._dragMask;
+      }
+      get startText() {
+        return this._startText;
+      }
+      get endText() {
+        return this._endText;
+      }
+      get startValue() {
+        return this._startValue;
+      }
+      get endValue() {
+        return this._endValue;
+      }
+      set showText(showText) {
+        this._showText = showText;
+      }
+      get background() {
+        return this._background;
+      }
+      set previewData(previewData) {
+        this._previewData = previewData;
+      }
+      get previewGroup() {
+        return this._previewGroup;
+      }
+      get selectedPreviewGroup() {
+        return this._selectedPreviewGroup;
+      }
+      set previewPointsX(previewPointsX) {
+        this._previewPointsX = previewPointsX;
+      }
+      set previewPointsY(previewPointsY) {
+        this._previewPointsY = previewPointsY;
+      }
+      set previewPointsX1(previewPointsX1) {
+        this._previewPointsX1 = previewPointsX1;
+      }
+      set previewPointsY1(previewPointsY1) {
+        this._previewPointsY1 = previewPointsY1;
+      }
+      set statePointToData(statePointToData) {
+        this._statePointToData = statePointToData;
+      }
+      _initAttrs(props) {
+        this.attribute = props.attribute, this._isHorizontal = "top" === this.attribute.orient || "bottom" === this.attribute.orient;
         const {
-          start: start,
-          end: end,
-          orient: orient,
           previewData: previewData,
           previewPointsX: previewPointsX,
           previewPointsY: previewPointsY,
           previewPointsX1: previewPointsX1,
           previewPointsY1: previewPointsY1
         } = this.attribute;
-        start && (this.state.start = start), end && (this.state.end = end);
-        const {
-          width: width,
-          height: height
-        } = this.getLayoutAttrFromConfig();
-        this._spanCache = this.state.end - this.state.start, this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", previewData && (this._previewData = previewData), isFunction$1(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction$1(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction$1(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction$1(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
+        previewData && (this._previewData = previewData), isFunction$1(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction$1(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction$1(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction$1(previewPointsY1) && (this._previewPointsY1 = previewPointsY1), this._getState = props.getState, this._getLayoutAttrFromConfig = props.getLayoutAttrFromConfig, this._getContainer = props.getContainer;
       }
-      constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
-          startPos: {
-            x: 0,
-            y: 0
-          },
-          lastPos: {
-            x: 0,
-            y: 0
-          }
-        }, this._layoutCache = {
-          attPos: "x",
-          attSize: "width",
-          max: 0
-        }, this.state = {
-          start: 0,
-          end: 1
-        }, this._statePointToData = state => state, this._handleTouchMove = e => {
-          this._activeState && e.preventDefault();
-        }, this._onHandlerPointerDown = (e, tag) => {
-          this._clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e);
-          const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
-            triggers = getEndTriggersOfDrag();
-          evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), this.addEventListener("pointermove", this._onHandlerPointerMove, {
-            capture: !0
-          }), triggers.forEach(trigger => {
-            evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
-          });
-        }, this._pointerMove = e => {
-          const {
-              start: startAttr,
-              end: endAttr,
-              brushSelect: brushSelect,
-              realTime = !0
-            } = this.attribute,
-            pos = this.eventPosToStagePos(e),
-            {
-              attPos: attPos,
-              max: max
-            } = this._layoutCache,
-            dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / max;
-          let {
-            start: start,
-            end: end
-          } = this.state;
-          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
-            start: start,
-            end: end,
-            tag: this._activeTag
-          }));
-        }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap$2[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), this._onHandlerPointerUp = e => {
-          const {
-            start: start,
-            end: end,
-            brushSelect: brushSelect,
-            realTime = !0
-          } = this.attribute;
-          if (this._activeState && this._activeTag === DataZoomActiveTag.background) {
-            const pos = this.eventPosToStagePos(e);
-            this.backgroundDragZoom(this._activeCache.startPos, pos);
-          }
-          this._activeState = !1, brushSelect && this.renderDragMask(), this._dispatchEvent("change", {
-            start: this.state.start,
-            end: this.state.end,
-            tag: this._activeTag
-          }), this._clearDragEvents();
-        };
+      constructor(props) {
+        this._previewData = [], this._statePointToData = state => state;
         const {
-          position: position,
           showDetail: showDetail
-        } = attributes;
-        this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, this.setPropsFromAttrs();
+        } = props.attribute;
+        this._showText = "auto" !== showDetail && showDetail, this._initAttrs(props);
       }
-      setAttributes(params, forceUpdateTag) {
-        super.setAttributes(params, forceUpdateTag), this.setPropsFromAttrs();
+      setAttributes(props) {
+        this._initAttrs(props);
       }
-      bindEvents() {
-        if (this.attribute.disableTriggerEvent) return void this.setAttribute("childrenPickable", !1);
+      renderDataZoom(onlyStateChange = !1) {
+        var _a, _b, _c, _d, _e, _f;
         const {
-          showDetail: showDetail,
+          backgroundChartStyle = {},
+          selectedBackgroundChartStyle = {},
           brushSelect: brushSelect
         } = this.attribute;
-        this._startHandlerMask && this._startHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), this._endHandlerMask && this._endHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
-        const selectedTag = brushSelect ? "background" : "middleRect";
-        this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-          passive: !1
-        });
-      }
-      dragMaskSize() {
-        const {
-            position: position
-          } = this.attribute,
-          {
-            attPos: attPos,
-            max: max
-          } = this._layoutCache;
-        return this._activeCache.lastPos[attPos] - position[attPos] > max ? max + position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - position[attPos] < 0 ? position[attPos] - this._activeCache.startPos[attPos] : this._activeCache.lastPos[attPos] - this._activeCache.startPos[attPos];
-      }
-      setStateAttr(start, end, shouldRender) {
-        const {
-            zoomLock = !1,
-            minSpan = 0,
-            maxSpan = 1
-          } = this.attribute,
-          span = end - start;
-        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, this.state.start = start, this.state.end = end, shouldRender && this.setAttributes({
-          start: start,
-          end: end
-        }));
-      }
-      _clearDragEvents() {
-        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
-          triggers = getEndTriggersOfDrag();
-        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
-          capture: !0
-        }), triggers.forEach(trigger => {
-          evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
-        }), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-          capture: !0
-        });
-      }
-      _onHandlerPointerEnter(e) {
-        this._showText = !0, this.renderText();
-      }
-      _onHandlerPointerLeave(e) {
-        this._showText = !1, this.renderText();
-      }
-      backgroundDragZoom(startPos, endPos) {
-        const {
-            attPos: attPos,
-            max: max
-          } = this._layoutCache,
-          {
-            position: position
-          } = this.attribute,
-          startPosInComponent = startPos[attPos] - position[attPos],
-          endPosInComponent = endPos[attPos] - position[attPos],
-          start = Math.min(Math.max(Math.min(startPosInComponent, endPosInComponent) / max, 0), 1),
-          end = Math.min(Math.max(Math.max(startPosInComponent, endPosInComponent) / max, 0), 1);
-        Math.abs(start - end) < .01 ? this.moveZoomWithMiddle(start) : this.setStateAttr(start, end, !1);
-      }
-      moveZoomWithMiddle(middle) {
-        let offset = middle - (this.state.start + this.state.end) / 2;
-        0 !== offset && (offset > 0 ? this.state.end + offset > 1 && (offset = 1 - this.state.end) : offset < 0 && this.state.start + offset < 0 && (offset = -this.state.start), this.setStateAttr(this.state.start + offset, this.state.end + offset, !1));
+        this._renderBackground(), (null === (_a = backgroundChartStyle.line) || void 0 === _a ? void 0 : _a.visible) && !onlyStateChange && this._setPreviewAttributes("line", this._getContainer()), (null === (_b = backgroundChartStyle.area) || void 0 === _b ? void 0 : _b.visible) && !onlyStateChange && this._setPreviewAttributes("area", this._getContainer()), brushSelect && this.renderDragMask(), this._renderSelectedBackground(), (null === (_c = selectedBackgroundChartStyle.line) || void 0 === _c ? void 0 : _c.visible) && this._setSelectedPreviewClipAttributes("line", this._getContainer()), (null === (_d = selectedBackgroundChartStyle.line) || void 0 === _d ? void 0 : _d.visible) && !onlyStateChange && this._setSelectedPreviewAttributes("line"), (null === (_e = selectedBackgroundChartStyle.line) || void 0 === _e ? void 0 : _e.visible) && this._setSelectedPreviewClipAttributes("area", this._getContainer()), (null === (_f = selectedBackgroundChartStyle.area) || void 0 === _f ? void 0 : _f.visible) && !onlyStateChange && this._setSelectedPreviewAttributes("area"), this._renderHandler(), this._showText && this.renderText();
       }
       renderDragMask() {
         const {
@@ -42544,254 +42681,104 @@
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig();
-        this._isHorizontal ? this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
-          x: clamp$1(this.dragMaskSize() < 0 ? this._activeCache.lastPos.x : this._activeCache.startPos.x, position.x, position.x + width),
+          } = this._getLayoutAttrFromConfig(),
+          {
+            start: start,
+            end: end
+          } = this._getState();
+        return this._isHorizontal ? this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
+          x: position.x + start * width,
           y: position.y,
-          width: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0,
+          width: (end - start) * width,
           height: height
-        }, dragMaskStyle), "rect") : this._dragMask = this._container.createOrUpdateChild("dragMask", Object.assign({
+        }, dragMaskStyle), "rect") : this._dragMask = this._getContainer().createOrUpdateChild("dragMask", Object.assign({
           x: position.x,
-          y: clamp$1(this.dragMaskSize() < 0 ? this._activeCache.lastPos.y : this._activeCache.startPos.y, position.y, position.y + height),
+          y: position.y + start * height,
           width: width,
-          height: this._activeState && this._activeTag === DataZoomActiveTag.background && Math.abs(this.dragMaskSize()) || 0
-        }, dragMaskStyle), "rect");
-      }
-      isTextOverflow(componentBoundsLike, textBounds, layout) {
-        if (!textBounds) return !1;
-        if (this._isHorizontal) {
-          if ("start" === layout) {
-            if (textBounds.x1 < componentBoundsLike.x1) return !0;
-          } else if (textBounds.x2 > componentBoundsLike.x2) return !0;
-        } else if ("start" === layout) {
-          if (textBounds.y1 < componentBoundsLike.y1) return !0;
-        } else if (textBounds.y2 > componentBoundsLike.y2) return !0;
-        return !1;
+          height: (end - start) * height
+        }, dragMaskStyle), "rect"), {
+          start: start,
+          end: end
+        };
       }
-      setTextAttr(startTextBounds, endTextBounds) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+      _renderBackground() {
+        var _a;
         const {
-            startTextStyle: startTextStyle,
-            endTextStyle: endTextStyle
+            backgroundStyle: backgroundStyle,
+            brushSelect: brushSelect,
+            zoomLock: zoomLock
           } = this.attribute,
           {
-            formatMethod: startTextFormat
-          } = startTextStyle,
-          restStartTextStyle = __rest$1(startTextStyle, ["formatMethod"]),
-          {
-            formatMethod: endTextFormat
-          } = endTextStyle,
-          restEndTextStyle = __rest$1(endTextStyle, ["formatMethod"]),
-          {
-            start: start,
-            end: end
-          } = this.state;
-        this._startValue = this._statePointToData(start), this._endValue = this._statePointToData(end);
-        const {
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig(),
-          startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue,
-          endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue,
-          componentBoundsLike = {
-            x1: position.x,
-            y1: position.y,
-            x2: position.x + width,
-            y2: position.y + height
-          };
-        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
-        this._isHorizontal ? (startTextPosition = {
-          x: position.x + start * width,
-          y: position.y + height / 2
-        }, endTextPosition = {
-          x: position.x + end * width,
-          y: position.y + height / 2
-        }, startTextAlignStyle = {
-          textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
-          textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
-        }, endTextAlignStyle = {
-          textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
-          textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
-        }) : (startTextPosition = {
-          x: position.x + width / 2,
-          y: position.y + start * height
-        }, endTextPosition = {
-          x: position.x + width / 2,
-          y: position.y + end * height
-        }, startTextAlignStyle = {
-          textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
-          textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
-        }, endTextAlignStyle = {
-          textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
-          textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
-        }), this._startText = this.maybeAddLabel(this._container, merge$1({}, restStartTextStyle, {
-          text: startTextValue,
-          x: startTextPosition.x,
-          y: startTextPosition.y,
-          visible: this._showText,
-          pickable: !1,
-          childrenPickable: !1,
-          textStyle: startTextAlignStyle
-        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge$1({}, restEndTextStyle, {
-          text: endTextValue,
-          x: endTextPosition.x,
-          y: endTextPosition.y,
-          visible: this._showText,
-          pickable: !1,
-          childrenPickable: !1,
-          textStyle: endTextAlignStyle
-        }), `data-zoom-end-text-${position}`);
-      }
-      renderText() {
-        let startTextBounds = null,
-          endTextBounds = null;
-        this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds, this.setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds;
-        const {
-            x1: x1,
-            x2: x2,
-            y1: y1,
-            y2: y2
-          } = startTextBounds,
-          {
-            dx: startTextDx = 0,
-            dy: startTextDy = 0
-          } = this.attribute.startTextStyle;
-        if (new Bounds().set(x1, y1, x2, y2).intersects(endTextBounds)) {
-          const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
-          if (this._isHorizontal) {
-            const boundsYDiff = Math.abs(endTextBounds.y1 - endTextBounds.y2);
-            this._startText.setAttribute("dy", startTextDy + direction * (Number.isFinite(boundsYDiff) ? boundsYDiff : 0));
-          } else {
-            const boundsXDiff = Math.abs(endTextBounds.x1 - endTextBounds.x2);
-            this._startText.setAttribute("dx", startTextDx + direction * (Number.isFinite(boundsXDiff) ? boundsXDiff : 0));
-          }
-        } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
-      }
-      getLayoutAttrFromConfig() {
-        var _a, _b, _c, _d, _e, _f;
-        if (this._layoutAttrFromConfig) return this._layoutAttrFromConfig;
-        const {
-            position: positionConfig,
-            size: size,
-            orient: orient,
-            middleHandlerStyle = {},
-            startHandlerStyle = {},
-            endHandlerStyle = {},
-            backgroundStyle = {}
-          } = this.attribute,
-          {
-            width: widthConfig,
-            height: heightConfig
-          } = size,
-          middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
-        let width, height, position;
-        middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
-          x: positionConfig.x,
-          y: positionConfig.y + middleHandlerSize
-        }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
-          x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
-          y: positionConfig.y
-        }) : (width = widthConfig, height = heightConfig, position = positionConfig);
-        const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width,
-          endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
-        return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, position = {
-          x: position.x + startHandlerSize / 2,
-          y: position.y
-        }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
+          } = this._getLayoutAttrFromConfig(),
+          group = this._getContainer();
+        this._background = group.createOrUpdateChild("background", Object.assign(Object.assign({
           x: position.x,
-          y: position.y + startHandlerSize / 2
-        })), height += null !== (_e = backgroundStyle.lineWidth / 2) && void 0 !== _e ? _e : 1, width += null !== (_f = backgroundStyle.lineWidth / 2) && void 0 !== _f ? _f : 1, this._layoutAttrFromConfig = {
-          position: position,
+          y: position.y,
           width: width,
-          height: height
-        }, this._layoutAttrFromConfig;
+          height: height,
+          cursor: brushSelect ? "crosshair" : "auto"
+        }, backgroundStyle), {
+          pickable: !zoomLock && (null === (_a = backgroundStyle.pickable) || void 0 === _a || _a)
+        }), "rect");
       }
-      render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
-        this._layoutAttrFromConfig = null;
+      _renderHandler() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const {
             orient: orient,
-            backgroundStyle: backgroundStyle,
-            backgroundChartStyle = {},
-            selectedBackgroundStyle = {},
-            selectedBackgroundChartStyle = {},
             middleHandlerStyle = {},
             startHandlerStyle = {},
             endHandlerStyle = {},
-            brushSelect: brushSelect,
             zoomLock: zoomLock
           } = this.attribute,
           {
             start: start,
             end: end
-          } = this.state,
+          } = this._getState(),
           {
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig(),
+          } = this._getLayoutAttrFromConfig(),
           startHandlerMinSize = null !== (_a = startHandlerStyle.triggerMinSize) && void 0 !== _a ? _a : 40,
           endHandlerMinSize = null !== (_b = endHandlerStyle.triggerMinSize) && void 0 !== _b ? _b : 40,
-          group = this.createOrUpdateChild("dataZoom-container", {}, "group");
-        if (this._container = group, this._background = group.createOrUpdateChild("background", Object.assign(Object.assign({
-          x: position.x,
-          y: position.y,
-          width: width,
-          height: height,
-          cursor: brushSelect ? "crosshair" : "auto"
-        }, backgroundStyle), {
-          pickable: !zoomLock && (null === (_c = backgroundStyle.pickable) || void 0 === _c || _c)
-        }), "rect"), (null === (_d = backgroundChartStyle.line) || void 0 === _d ? void 0 : _d.visible) && this.setPreviewAttributes("line", group), (null === (_e = backgroundChartStyle.area) || void 0 === _e ? void 0 : _e.visible) && this.setPreviewAttributes("area", group), brushSelect && this.renderDragMask(), this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
-          x: position.x + start * width,
-          y: position.y,
-          width: (end - start) * width,
-          height: height,
-          cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), {
-          pickable: !zoomLock && (null === (_f = selectedBackgroundChartStyle.pickable) || void 0 === _f || _f)
-        }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
-          x: position.x,
-          y: position.y + start * height,
-          width: width,
-          height: (end - start) * height,
-          cursor: brushSelect ? "crosshair" : "move"
-        }, selectedBackgroundStyle), {
-          pickable: !zoomLock && (null === (_g = selectedBackgroundStyle.pickable) || void 0 === _g || _g)
-        }), "rect"), (null === (_h = selectedBackgroundChartStyle.line) || void 0 === _h ? void 0 : _h.visible) && this.setSelectedPreviewAttributes("line", group), (null === (_j = selectedBackgroundChartStyle.area) || void 0 === _j ? void 0 : _j.visible) && this.setSelectedPreviewAttributes("area", group), this._isHorizontal) {
+          group = this._getContainer();
+        if (this._isHorizontal) {
           if (middleHandlerStyle.visible) {
-            const middleHandlerBackgroundSize = (null === (_k = middleHandlerStyle.background) || void 0 === _k ? void 0 : _k.size) || 10;
+            const middleHandlerBackgroundSize = (null === (_c = middleHandlerStyle.background) || void 0 === _c ? void 0 : _c.size) || 10;
             this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
               x: position.x + start * width,
               y: position.y - middleHandlerBackgroundSize,
               width: (end - start) * width,
               height: middleHandlerBackgroundSize
-            }, null === (_l = middleHandlerStyle.background) || void 0 === _l ? void 0 : _l.style), {
-              pickable: !zoomLock && (null === (_p = null === (_o = null === (_m = middleHandlerStyle.background) || void 0 === _m ? void 0 : _m.style) || void 0 === _o ? void 0 : _o.pickable) || void 0 === _p || _p)
+            }, null === (_d = middleHandlerStyle.background) || void 0 === _d ? void 0 : _d.style), {
+              pickable: !zoomLock && (null === (_g = null === (_f = null === (_e = middleHandlerStyle.background) || void 0 === _e ? void 0 : _e.style) || void 0 === _f ? void 0 : _f.pickable) || void 0 === _g || _g)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
               x: position.x + (start + end) / 2 * width,
               y: position.y - middleHandlerBackgroundSize / 2,
               strokeBoundsBuffer: 0,
               angle: 0,
-              symbolType: null !== (_r = null === (_q = middleHandlerStyle.icon) || void 0 === _q ? void 0 : _q.symbolType) && void 0 !== _r ? _r : "square"
+              symbolType: null !== (_j = null === (_h = middleHandlerStyle.icon) || void 0 === _h ? void 0 : _h.symbolType) && void 0 !== _j ? _j : "square"
             }, middleHandlerStyle.icon), {
-              pickable: !zoomLock && (null === (_s = middleHandlerStyle.icon.pickable) || void 0 === _s || _s)
+              pickable: !zoomLock && (null === (_k = middleHandlerStyle.icon.pickable) || void 0 === _k || _k)
             }), "symbol");
           }
           this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + start * width,
             y: position.y + height / 2,
             size: height,
-            symbolType: null !== (_t = startHandlerStyle.symbolType) && void 0 !== _t ? _t : "square"
+            symbolType: null !== (_l = startHandlerStyle.symbolType) && void 0 !== _l ? _l : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), startHandlerStyle), {
-            pickable: !zoomLock && (null === (_u = startHandlerStyle.pickable) || void 0 === _u || _u)
+            pickable: !zoomLock && (null === (_m = startHandlerStyle.pickable) || void 0 === _m || _m)
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + end * width,
             y: position.y + height / 2,
             size: height,
-            symbolType: null !== (_v = endHandlerStyle.symbolType) && void 0 !== _v ? _v : "square"
+            symbolType: null !== (_o = endHandlerStyle.symbolType) && void 0 !== _o ? _o : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.horizontal), endHandlerStyle), {
-            pickable: !zoomLock && (null === (_w = endHandlerStyle.pickable) || void 0 === _w || _w)
+            pickable: !zoomLock && (null === (_p = endHandlerStyle.pickable) || void 0 === _p || _p)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
             startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
@@ -42820,38 +42807,38 @@
           }), "rect");
         } else {
           if (middleHandlerStyle.visible) {
-            const middleHandlerBackgroundSize = (null === (_x = middleHandlerStyle.background) || void 0 === _x ? void 0 : _x.size) || 10;
+            const middleHandlerBackgroundSize = (null === (_q = middleHandlerStyle.background) || void 0 === _q ? void 0 : _q.size) || 10;
             this._middleHandlerRect = group.createOrUpdateChild("middleHandlerRect", Object.assign(Object.assign({
               x: "left" === orient ? position.x - middleHandlerBackgroundSize : position.x + width,
               y: position.y + start * height,
               width: middleHandlerBackgroundSize,
               height: (end - start) * height
-            }, null === (_y = middleHandlerStyle.background) || void 0 === _y ? void 0 : _y.style), {
-              pickable: !zoomLock && (null === (_1 = null === (_0 = null === (_z = middleHandlerStyle.background) || void 0 === _z ? void 0 : _z.style) || void 0 === _0 ? void 0 : _0.pickable) || void 0 === _1 || _1)
+            }, null === (_r = middleHandlerStyle.background) || void 0 === _r ? void 0 : _r.style), {
+              pickable: !zoomLock && (null === (_u = null === (_t = null === (_s = middleHandlerStyle.background) || void 0 === _s ? void 0 : _s.style) || void 0 === _t ? void 0 : _t.pickable) || void 0 === _u || _u)
             }), "rect"), this._middleHandlerSymbol = group.createOrUpdateChild("middleHandlerSymbol", Object.assign(Object.assign({
               x: "left" === orient ? position.x - middleHandlerBackgroundSize / 2 : position.x + width + middleHandlerBackgroundSize / 2,
               y: position.y + (start + end) / 2 * height,
               angle: Math.PI / 180 * 90,
-              symbolType: null !== (_3 = null === (_2 = middleHandlerStyle.icon) || void 0 === _2 ? void 0 : _2.symbolType) && void 0 !== _3 ? _3 : "square",
+              symbolType: null !== (_w = null === (_v = middleHandlerStyle.icon) || void 0 === _v ? void 0 : _v.symbolType) && void 0 !== _w ? _w : "square",
               strokeBoundsBuffer: 0
             }, middleHandlerStyle.icon), {
-              pickable: !zoomLock && (null === (_5 = null === (_4 = middleHandlerStyle.icon) || void 0 === _4 ? void 0 : _4.pickable) || void 0 === _5 || _5)
+              pickable: !zoomLock && (null === (_y = null === (_x = middleHandlerStyle.icon) || void 0 === _x ? void 0 : _x.pickable) || void 0 === _y || _y)
             }), "symbol");
           }
           this._startHandler = group.createOrUpdateChild("startHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + start * height,
             size: width,
-            symbolType: null !== (_6 = startHandlerStyle.symbolType) && void 0 !== _6 ? _6 : "square"
+            symbolType: null !== (_z = startHandlerStyle.symbolType) && void 0 !== _z ? _z : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), startHandlerStyle), {
-            pickable: !zoomLock && (null === (_7 = startHandlerStyle.pickable) || void 0 === _7 || _7)
+            pickable: !zoomLock && (null === (_0 = startHandlerStyle.pickable) || void 0 === _0 || _0)
           }), "symbol"), this._endHandler = group.createOrUpdateChild("endHandler", Object.assign(Object.assign(Object.assign({
             x: position.x + width / 2,
             y: position.y + end * height,
             size: width,
-            symbolType: null !== (_8 = endHandlerStyle.symbolType) && void 0 !== _8 ? _8 : "square"
+            symbolType: null !== (_1 = endHandlerStyle.symbolType) && void 0 !== _1 ? _1 : "square"
           }, DEFAULT_HANDLER_ATTR_MAP.vertical), endHandlerStyle), {
-            pickable: !zoomLock && (null === (_9 = endHandlerStyle.pickable) || void 0 === _9 || _9)
+            pickable: !zoomLock && (null === (_2 = endHandlerStyle.pickable) || void 0 === _2 || _2)
           }), "symbol");
           const startHandlerWidth = Math.max(this._startHandler.AABBBounds.width(), startHandlerMinSize),
             startHandlerHeight = Math.max(this._startHandler.AABBBounds.height(), startHandlerMinSize),
@@ -42879,9 +42866,107 @@
             pickable: !zoomLock
           }), "rect");
         }
-        this._showText && this.renderText();
       }
-      computeBasePoints() {
+      _renderSelectedBackground() {
+        var _a, _b;
+        const {
+            selectedBackgroundStyle = {},
+            selectedBackgroundChartStyle = {},
+            brushSelect: brushSelect,
+            zoomLock: zoomLock
+          } = this.attribute,
+          {
+            start: start,
+            end: end
+          } = this._getState(),
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this._getLayoutAttrFromConfig(),
+          group = this._getContainer();
+        this._isHorizontal ? this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
+          x: position.x + start * width,
+          y: position.y,
+          width: (end - start) * width,
+          height: height,
+          cursor: brushSelect ? "crosshair" : "move"
+        }, selectedBackgroundStyle), {
+          pickable: !zoomLock && (null === (_a = selectedBackgroundChartStyle.pickable) || void 0 === _a || _a)
+        }), "rect") : this._selectedBackground = group.createOrUpdateChild("selectedBackground", Object.assign(Object.assign({
+          x: position.x,
+          y: position.y + start * height,
+          width: width,
+          height: (end - start) * height,
+          cursor: brushSelect ? "crosshair" : "move"
+        }, selectedBackgroundStyle), {
+          pickable: !zoomLock && (null === (_b = selectedBackgroundStyle.pickable) || void 0 === _b || _b)
+        }), "rect");
+      }
+      _setPreviewAttributes(type, group) {
+        this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
+          pickable: !1
+        }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
+          curveType: "basis"
+        }, "area");
+        const {
+          backgroundChartStyle = {}
+        } = this.attribute;
+        "line" === type && this._previewLine.setAttributes(Object.assign({
+          points: this._getPreviewLinePoints(),
+          curveType: "basis",
+          pickable: !1
+        }, backgroundChartStyle.line)), "area" === type && this._previewArea.setAttributes(Object.assign({
+          points: this._getPreviewAreaPoints(),
+          curveType: "basis",
+          pickable: !1
+        }, backgroundChartStyle.area));
+      }
+      _setSelectedPreviewClipAttributes(type, group) {
+        this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
+          pickable: !1
+        }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group"));
+        const {
+            start: start,
+            end: end
+          } = this._getState(),
+          {
+            position: position,
+            width: width,
+            height: height
+          } = this._getLayoutAttrFromConfig();
+        this._selectedPreviewGroupClip.setAttributes({
+          x: this._isHorizontal ? position.x + start * width : position.x,
+          y: this._isHorizontal ? position.y : position.y + start * height,
+          width: this._isHorizontal ? (end - start) * width : width,
+          height: this._isHorizontal ? height : (end - start) * height,
+          clip: !0,
+          pickable: !1
+        }), this._selectedPreviewGroup.setAttributes({
+          x: -(this._isHorizontal ? position.x + start * width : position.x),
+          y: -(this._isHorizontal ? position.y : position.y + start * height),
+          width: this._isHorizontal ? (end - start) * width : width,
+          height: this._isHorizontal ? height : (end - start) * height,
+          pickable: !1
+        });
+      }
+      _setSelectedPreviewAttributes(type) {
+        const {
+          selectedBackgroundChartStyle = {}
+        } = this.attribute;
+        "line" === type ? this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewLine", {}, "line") : this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewArea", {
+          curveType: "basis"
+        }, "area"), "line" === type && this._selectedPreviewLine.setAttributes(Object.assign({
+          points: this._getPreviewLinePoints(),
+          curveType: "basis",
+          pickable: !1
+        }, selectedBackgroundChartStyle.line)), "area" === type && this._selectedPreviewArea.setAttributes(Object.assign({
+          points: this._getPreviewAreaPoints(),
+          curveType: "basis",
+          pickable: !1
+        }, selectedBackgroundChartStyle.area));
+      }
+      _computeBasePoints() {
         const {
             orient: orient
           } = this.attribute,
@@ -42889,7 +42974,7 @@
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig();
+          } = this._getLayoutAttrFromConfig();
         let basePointStart, basePointEnd;
         return this._isHorizontal ? (basePointStart = [{
           x: position.x,
@@ -42914,7 +42999,7 @@
           basePointEnd: basePointEnd
         };
       }
-      simplifyPoints(points) {
+      _simplifyPoints(points) {
         var _a;
         if (points.length > 1e4) {
           const tolerance = null !== (_a = this.attribute.tolerance) && void 0 !== _a ? _a : this._previewData.length / 1e4;
@@ -42922,20 +43007,20 @@
         }
         return points;
       }
-      getPreviewLinePoints() {
+      _getPreviewLinePoints() {
         let previewPoints = this._previewData.map(d => ({
           x: this._previewPointsX && this._previewPointsX(d),
           y: this._previewPointsY && this._previewPointsY(d)
         }));
         if (0 === previewPoints.length) return previewPoints;
-        previewPoints = this.simplifyPoints(previewPoints);
+        previewPoints = this._simplifyPoints(previewPoints);
         const {
           basePointStart: basePointStart,
           basePointEnd: basePointEnd
-        } = this.computeBasePoints();
+        } = this._computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
       }
-      getPreviewAreaPoints() {
+      _getPreviewAreaPoints() {
         let previewPoints = this._previewData.map(d => ({
           x: this._previewPointsX && this._previewPointsX(d),
           y: this._previewPointsY && this._previewPointsY(d),
@@ -42943,99 +43028,459 @@
           y1: this._previewPointsY1 && this._previewPointsY1(d)
         }));
         if (0 === previewPoints.length) return previewPoints;
-        previewPoints = this.simplifyPoints(previewPoints);
+        previewPoints = this._simplifyPoints(previewPoints);
         const {
           basePointStart: basePointStart,
           basePointEnd: basePointEnd
-        } = this.computeBasePoints();
+        } = this._computeBasePoints();
         return basePointStart.concat(previewPoints).concat(basePointEnd);
       }
-      setPreviewAttributes(type, group) {
-        this._previewGroup || (this._previewGroup = group.createOrUpdateChild("previewGroup", {
-          pickable: !1
-        }, "group")), "line" === type ? this._previewLine = this._previewGroup.createOrUpdateChild("previewLine", {}, "line") : this._previewArea = this._previewGroup.createOrUpdateChild("previewArea", {
-          curveType: "basis"
-        }, "area");
-        const {
-          backgroundChartStyle = {}
-        } = this.attribute;
-        "line" === type && this._previewLine.setAttributes(Object.assign({
-          points: this.getPreviewLinePoints(),
-          curveType: "basis",
-          pickable: !1
-        }, backgroundChartStyle.line)), "area" === type && this._previewArea.setAttributes(Object.assign({
-          points: this.getPreviewAreaPoints(),
-          curveType: "basis",
-          pickable: !1
-        }, backgroundChartStyle.area));
+      renderText() {
+        let startTextBounds = null,
+          endTextBounds = null;
+        if (this._setTextAttr(startTextBounds, endTextBounds), this._showText) {
+          startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds, this._setTextAttr(startTextBounds, endTextBounds), startTextBounds = this._startText.AABBBounds, endTextBounds = this._endText.AABBBounds;
+          const {
+              x1: x1,
+              x2: x2,
+              y1: y1,
+              y2: y2
+            } = startTextBounds,
+            {
+              dx: startTextDx = 0,
+              dy: startTextDy = 0
+            } = this.attribute.startTextStyle;
+          if (new Bounds().set(x1, y1, x2, y2).intersects(endTextBounds)) {
+            const direction = "bottom" === this.attribute.orient || "right" === this.attribute.orient ? -1 : 1;
+            this._isHorizontal ? this._startText.setAttribute("dy", startTextDy + direction * Math.abs(endTextBounds.y1 - endTextBounds.y2)) : this._startText.setAttribute("dx", startTextDx + direction * Math.abs(endTextBounds.x1 - endTextBounds.x2));
+          } else this._isHorizontal ? this._startText.setAttribute("dy", startTextDy) : this._startText.setAttribute("dx", startTextDx);
+        }
       }
-      setSelectedPreviewAttributes(type, group) {
-        this._selectedPreviewGroupClip || (this._selectedPreviewGroupClip = group.createOrUpdateChild("selectedPreviewGroupClip", {
-          pickable: !1
-        }, "group"), this._selectedPreviewGroup = this._selectedPreviewGroupClip.createOrUpdateChild("selectedPreviewGroup", {}, "group")), "line" === type ? this._selectedPreviewLine = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewLine", {}, "line") : this._selectedPreviewArea = this._selectedPreviewGroup.createOrUpdateChild("selectedPreviewArea", {
-          curveType: "basis"
-        }, "area");
+      _setTextAttr(startTextBounds, endTextBounds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const {
-            selectedBackgroundChartStyle = {}
+            startTextStyle: startTextStyle,
+            endTextStyle: endTextStyle
           } = this.attribute,
+          {
+            formatMethod: startTextFormat
+          } = startTextStyle,
+          restStartTextStyle = __rest$1(startTextStyle, ["formatMethod"]),
+          {
+            formatMethod: endTextFormat
+          } = endTextStyle,
+          restEndTextStyle = __rest$1(endTextStyle, ["formatMethod"]),
           {
             start: start,
             end: end
-          } = this.state,
-          {
+          } = this._getState();
+        this._startValue = this._statePointToData(start), this._endValue = this._statePointToData(end);
+        const {
             position: position,
             width: width,
             height: height
-          } = this.getLayoutAttrFromConfig();
-        this._selectedPreviewGroupClip.setAttributes({
-          x: this._isHorizontal ? position.x + start * width : position.x,
-          y: this._isHorizontal ? position.y : position.y + start * height,
-          width: this._isHorizontal ? (end - start) * width : width,
-          height: this._isHorizontal ? height : (end - start) * height,
-          clip: !0,
-          pickable: !1
-        }), this._selectedPreviewGroup.setAttributes({
-          x: -(this._isHorizontal ? position.x + start * width : position.x),
-          y: -(this._isHorizontal ? position.y : position.y + start * height),
-          width: this._isHorizontal ? (end - start) * width : width,
-          height: this._isHorizontal ? height : (end - start) * height,
-          pickable: !1
-        }), "line" === type && this._selectedPreviewLine.setAttributes(Object.assign({
-          points: this.getPreviewLinePoints(),
-          curveType: "basis",
-          pickable: !1
-        }, selectedBackgroundChartStyle.line)), "area" === type && this._selectedPreviewArea.setAttributes(Object.assign({
-          points: this.getPreviewAreaPoints(),
-          curveType: "basis",
-          pickable: !1
-        }, selectedBackgroundChartStyle.area));
+          } = this._getLayoutAttrFromConfig(),
+          startTextValue = startTextFormat ? startTextFormat(this._startValue) : this._startValue,
+          endTextValue = endTextFormat ? endTextFormat(this._endValue) : this._endValue,
+          componentBoundsLike = {
+            x1: position.x,
+            y1: position.y,
+            x2: position.x + width,
+            y2: position.y + height
+          };
+        let startTextPosition, endTextPosition, startTextAlignStyle, endTextAlignStyle;
+        this._isHorizontal ? (startTextPosition = {
+          x: position.x + start * width,
+          y: position.y + height / 2
+        }, endTextPosition = {
+          x: position.x + end * width,
+          y: position.y + height / 2
+        }, startTextAlignStyle = {
+          textAlign: isTextOverflow(componentBoundsLike, startTextBounds, "start", this._isHorizontal) ? "left" : "right",
+          textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
+        }, endTextAlignStyle = {
+          textAlign: isTextOverflow(componentBoundsLike, endTextBounds, "end", this._isHorizontal) ? "right" : "left",
+          textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
+        }) : (startTextPosition = {
+          x: position.x + width / 2,
+          y: position.y + start * height
+        }, endTextPosition = {
+          x: position.x + width / 2,
+          y: position.y + end * height
+        }, startTextAlignStyle = {
+          textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
+          textBaseline: isTextOverflow(componentBoundsLike, startTextBounds, "start", this._isHorizontal) ? "top" : "bottom"
+        }, endTextAlignStyle = {
+          textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
+          textBaseline: isTextOverflow(componentBoundsLike, endTextBounds, "end", this._isHorizontal) ? "bottom" : "top"
+        }), this._startText = this._maybeAddLabel(this._getContainer(), merge$1({}, restStartTextStyle, {
+          text: startTextValue,
+          x: startTextPosition.x,
+          y: startTextPosition.y,
+          visible: this._showText,
+          pickable: !1,
+          childrenPickable: !1,
+          textStyle: startTextAlignStyle
+        }), "data-zoom-start-text"), this._endText = this._maybeAddLabel(this._getContainer(), merge$1({}, restEndTextStyle, {
+          text: endTextValue,
+          x: endTextPosition.x,
+          y: endTextPosition.y,
+          visible: this._showText,
+          pickable: !1,
+          childrenPickable: !1,
+          textStyle: endTextAlignStyle
+        }), "data-zoom-end-text");
       }
-      maybeAddLabel(container, attributes, name) {
-        let labelShape = this.find(node => node.name === name, !0);
-        return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new Tag(attributes), labelShape.name = name), container.add(labelShape), labelShape;
+      _maybeAddLabel(container, attributes, name) {
+        let labelShape = container.find(node => node.name === name, !0);
+        return labelShape ? labelShape.setAttributes(attributes) : (labelShape = new Tag(attributes), labelShape.name = name, container.add(labelShape)), labelShape;
       }
-      setStartAndEnd(start, end) {
+    }
+
+    const delayMap$2 = {
+      debounce: debounce,
+      throttle: throttle
+    };
+    class DataZoomInteraction extends EventEmitter {
+      constructor(props) {
+        super(), this._activeState = !1, this._activeCache = {
+          startPos: {
+            x: 0,
+            y: 0
+          },
+          lastPos: {
+            x: 0,
+            y: 0
+          }
+        }, this._layoutCache = {
+          attPos: "x",
+          attSize: "width",
+          size: 0
+        }, this._handleTouchMove = e => {
+          this._activeState && e.preventDefault();
+        }, this._onHandlerPointerDown = (e, tag) => {
+          this.clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this._eventPosToStagePos(e), this._activeCache.lastPos = this._eventPosToStagePos(e);
+          const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+            triggers = getEndTriggersOfDrag();
+          evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), this.on("pointermove", this._onHandlerPointerMove, {
+            capture: !0
+          }), triggers.forEach(trigger => {
+            evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
+          });
+        }, this._pointerMove = e => {
+          const {
+              brushSelect: brushSelect
+            } = this.attribute,
+            {
+              position: position
+            } = this._getLayoutAttrFromConfig(),
+            pos = this._eventPosToStagePos(e),
+            {
+              attPos: attPos,
+              size: size,
+              attSize: attSize
+            } = this._layoutCache,
+            dis = (pos[attPos] - this._activeCache.lastPos[attPos]) / size,
+            statePos = (pos[attPos] - position[attPos]) / this._getLayoutAttrFromConfig()[attSize];
+          let {
+              start: start,
+              end: end
+            } = this._getState(),
+            shouldRender = !0;
+          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? ({
+            start: start,
+            end: end
+          } = this._moveZoomWithMiddle(dis)) : this._activeTag === DataZoomActiveTag.startHandler ? ({
+            start: start,
+            end: end
+          } = this._moveZoomWithHandler(statePos, "start")) : this._activeTag === DataZoomActiveTag.endHandler ? ({
+            start: start,
+            end: end
+          } = this._moveZoomWithHandler(statePos, "end")) : this._activeTag === DataZoomActiveTag.background && brushSelect && (({
+            start: start,
+            end: end
+          } = this._moveZoomWithBackground(statePos)), shouldRender = !1, this._dispatchEvent(IDataZoomInteractiveEvent.maskUpdate)), this._activeCache.lastPos = pos), this._getState().start === start && this._getState().end === end || (this._setStateAttr(start, end), this._dispatchEvent(IDataZoomInteractiveEvent.stateUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: shouldRender,
+            tag: this._activeTag
+          }), this.attribute.realTime && this._dispatchEvent(IDataZoomInteractiveEvent.dataZoomUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: !0,
+            tag: this._activeTag
+          }));
+        }, this._onHandlerPointerUp = e => {
+          this._activeState && this._activeTag === DataZoomActiveTag.background && (this._setStateAttr(this._getState().start, this._getState().end), this._dispatchEvent(IDataZoomInteractiveEvent.stateUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: !0,
+            tag: this._activeTag
+          })), this._activeState = !1, this._dispatchEvent(IDataZoomInteractiveEvent.dataZoomUpdate, {
+            start: this._getState().start,
+            end: this._getState().end,
+            shouldRender: !0,
+            tag: this._activeTag
+          }), this.clearDragEvents();
+        }, this._initAttrs(props);
+      }
+      setAttributes(props) {
+        var _a, _b, _c, _d, _e, _f;
+        this._initAttrs(props), this._onHandlerPointerMove = 0 === (null !== (_b = null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.delayTime) && void 0 !== _b ? _b : 0) ? this._pointerMove : delayMap$2[null !== (_d = null === (_c = this.attribute) || void 0 === _c ? void 0 : _c.delayType) && void 0 !== _d ? _d : "debounce"](this._pointerMove, null !== (_f = null === (_e = this.attribute) || void 0 === _e ? void 0 : _e.delayTime) && void 0 !== _f ? _f : 0);
+      }
+      _initAttrs(props) {
+        this.stage = props.stage, this.attribute = props.attribute, this._startHandlerMask = props.startHandlerMask, this._endHandlerMask = props.endHandlerMask, this._middleHandlerSymbol = props.middleHandlerSymbol, this._middleHandlerRect = props.middleHandlerRect, this._selectedBackground = props.selectedBackground, this._background = props.background, this._previewGroup = props.previewGroup, this._selectedPreviewGroup = props.selectedPreviewGroup, this._getLayoutAttrFromConfig = props.getLayoutAttrFromConfig, this._getState = props.getState, this._setState = props.setState;
         const {
-          start: startAttr,
-          end: endAttr
+          width: width,
+          height: height
+        } = this._getLayoutAttrFromConfig();
+        this._spanCache = this._getState().end - this._getState().start;
+        const isHorizontal = "top" === this.attribute.orient || "bottom" === this.attribute.orient;
+        this._layoutCache.size = isHorizontal ? width : height, this._layoutCache.attPos = isHorizontal ? "x" : "y", this._layoutCache.attSize = isHorizontal ? "width" : "height", this._getGlobalTransMatrix = props.getGlobalTransMatrix;
+      }
+      clearDragEvents() {
+        const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+          triggers = getEndTriggersOfDrag();
+        evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        }), triggers.forEach(trigger => {
+          evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+        }), this.off("pointermove", this._onHandlerPointerMove, {
+          capture: !0
+        });
+      }
+      clearVGlobalEvents() {
+        ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        });
+      }
+      bindEvents() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const {
+          brushSelect: brushSelect
         } = this.attribute;
-        isValid$1(start) && isValid$1(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), this._dispatchEvent("change", {
+        null === (_a = this._startHandlerMask) || void 0 === _a || _a.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), null === (_b = this._endHandlerMask) || void 0 === _b || _b.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), null === (_c = this._middleHandlerSymbol) || void 0 === _c || _c.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), null === (_d = this._middleHandlerRect) || void 0 === _d || _d.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
+        const selectedTag = brushSelect ? "background" : "middleRect";
+        null === (_e = this._selectedBackground) || void 0 === _e || _e.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && (null === (_f = this._background) || void 0 === _f || _f.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background"))), brushSelect && (null === (_g = this._previewGroup) || void 0 === _g || _g.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background"))), null === (_h = this._selectedPreviewGroup) || void 0 === _h || _h.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+          passive: !1
+        });
+      }
+      _setStateAttr(start, end) {
+        const {
+            zoomLock = !1,
+            minSpan = 0,
+            maxSpan = 1
+          } = this.attribute,
+          span = end - start;
+        span !== this._spanCache && (zoomLock || span < minSpan || span > maxSpan) || (this._spanCache = span, this._setState({
+          start: start,
+          end: end
+        }));
+      }
+      _moveZoomWithMiddle(dis) {
+        const {
+          start: staetState,
+          end: endState
+        } = this._getState();
+        return dis > 0 && endState + dis > 1 ? dis = 1 - endState : dis < 0 && staetState + dis < 0 && (dis = -staetState), {
+          start: clamp$1(staetState + dis, 0, 1),
+          end: clamp$1(endState + dis, 0, 1)
+        };
+      }
+      _moveZoomWithHandler(statePos, handler) {
+        const {
+          start: start,
+          end: end
+        } = this._getState();
+        let newStart = start,
+          newEnd = end;
+        return "start" === handler ? statePos > end ? (newStart = end, newEnd = statePos, this._activeTag = DataZoomActiveTag.endHandler) : newStart = statePos : "end" === handler && (statePos < start ? (newEnd = start, newStart = statePos, this._activeTag = DataZoomActiveTag.startHandler) : newEnd = statePos), {
+          start: clamp$1(newStart, 0, 1),
+          end: clamp$1(newEnd, 0, 1)
+        };
+      }
+      _moveZoomWithBackground(statePos) {
+        const {
+            position: position
+          } = this._getLayoutAttrFromConfig(),
+          {
+            attSize: attSize
+          } = this._layoutCache,
+          startPos = (this._activeCache.startPos[this._layoutCache.attPos] - position[this._layoutCache.attPos]) / this._getLayoutAttrFromConfig()[attSize],
+          endPos = statePos;
+        let start = clamp$1(startPos, 0, 1),
+          end = clamp$1(endPos, 0, 1);
+        return start > end && ([start, end] = [end, start]), {
+          start: start,
+          end: end
+        };
+      }
+      _eventPosToStagePos(e) {
+        var _a, _b;
+        const result = {
+            x: 0,
+            y: 0
+          },
+          stagePoints = null !== (_b = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventPointTransform(e)) && void 0 !== _b ? _b : {
+            x: 0,
+            y: 0
+          };
+        return this._getGlobalTransMatrix().transformPoint(stagePoints, result), result;
+      }
+      _dispatchEvent(eventName, details) {
+        this.emit(eventName, details);
+      }
+    }
+
+    function loadDataZoomComponent() {
+      loadTagComponent(), registerRect(), registerSymbol(), registerArea(), registerLine();
+    }
+
+    loadDataZoomComponent();
+    let DataZoom$1 = class DataZoom extends AbstractComponent {
+      constructor(attributes, options) {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._state = {
+          start: 0,
+          end: 1
+        }, this.getLayoutAttrFromConfig = () => {
+          var _a, _b, _c, _d, _e, _f;
+          if (this._layoutCacheFromConfig) return this._layoutCacheFromConfig;
+          const {
+              position: positionConfig,
+              size: size,
+              orient: orient,
+              middleHandlerStyle = {},
+              startHandlerStyle = {},
+              endHandlerStyle = {},
+              backgroundStyle = {}
+            } = this.attribute,
+            {
+              width: widthConfig,
+              height: heightConfig
+            } = size,
+            middleHandlerSize = null !== (_b = null === (_a = middleHandlerStyle.background) || void 0 === _a ? void 0 : _a.size) && void 0 !== _b ? _b : 10;
+          let width, height, position;
+          middleHandlerStyle.visible ? this._isHorizontal ? (width = widthConfig, height = heightConfig - middleHandlerSize, position = {
+            x: positionConfig.x,
+            y: positionConfig.y + middleHandlerSize
+          }) : (width = widthConfig - middleHandlerSize, height = heightConfig, position = {
+            x: positionConfig.x + ("left" === orient ? middleHandlerSize : 0),
+            y: positionConfig.y
+          }) : (width = widthConfig, height = heightConfig, position = positionConfig);
+          const startHandlerSize = null !== (_c = startHandlerStyle.size) && void 0 !== _c ? _c : this._isHorizontal ? height : width,
+            endHandlerSize = null !== (_d = endHandlerStyle.size) && void 0 !== _d ? _d : this._isHorizontal ? height : width;
+          return startHandlerStyle.visible && (this._isHorizontal ? (width -= (startHandlerSize + endHandlerSize) / 2, position = {
+            x: position.x + startHandlerSize / 2,
+            y: position.y
+          }) : (height -= (startHandlerSize + endHandlerSize) / 2, position = {
+            x: position.x,
+            y: position.y + startHandlerSize / 2
+          })), height += (null !== (_e = backgroundStyle.lineWidth) && void 0 !== _e ? _e : 2) / 2, width += (null !== (_f = backgroundStyle.lineWidth) && void 0 !== _f ? _f : 2) / 2, this._layoutCacheFromConfig = {
+            position: position,
+            width: width,
+            height: height
+          }, this._layoutCacheFromConfig;
+        };
+        const {
+          start: start,
+          end: end,
+          orient: orient
+        } = this.attribute;
+        this._isHorizontal = "top" === orient || "bottom" === orient, start && (this._state.start = start), end && (this._state.end = end), this._renderer = new DataZoomRenderer(this._getRendererAttrs()), this._interaction = new DataZoomInteraction(this._getInteractionAttrs());
+      }
+      _getRendererAttrs() {
+        return {
+          attribute: this.attribute,
+          getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+          setState: state => {
+            this._state = state;
+          },
+          getState: () => this._state,
+          getContainer: () => this._container
+        };
+      }
+      _getInteractionAttrs() {
+        return {
+          stage: this.stage,
+          attribute: this.attribute,
+          startHandlerMask: this._renderer.startHandlerMask,
+          endHandlerMask: this._renderer.endHandlerMask,
+          middleHandlerSymbol: this._renderer.middleHandlerSymbol,
+          middleHandlerRect: this._renderer.middleHandlerRect,
+          selectedBackground: this._renderer.selectedBackground,
+          background: this._renderer.background,
+          previewGroup: this._renderer.previewGroup,
+          selectedPreviewGroup: this._renderer.selectedPreviewGroup,
+          getLayoutAttrFromConfig: this.getLayoutAttrFromConfig,
+          setState: state => {
+            this._state = state;
+          },
+          getState: () => this._state,
+          getGlobalTransMatrix: () => this.globalTransMatrix
+        };
+      }
+      bindEvents() {
+        this.attribute.disableTriggerEvent ? this.setAttribute("childrenPickable", !1) : (this._interaction.bindEvents(), this._interaction.on(IDataZoomInteractiveEvent.stateUpdate, ({
+          shouldRender: shouldRender
+        }) => {
+          shouldRender && this._renderer.renderDataZoom(!0);
+        }), this._interaction.on(IDataZoomInteractiveEvent.dataZoomUpdate, ({
           start: start,
           end: end,
-          tag: this._activeTag
+          tag: tag
+        }) => {
+          this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
+            start: start,
+            end: end,
+            tag: tag
+          });
+        }), this._interaction.on(IDataZoomInteractiveEvent.maskUpdate, () => {
+          this._renderer.renderDragMask();
+        }), "auto" === this.attribute.showDetail && (this._container.addEventListener("pointerenter", () => {
+          this._renderer.showText = !0, this._renderer.renderText();
+        }), this._container.addEventListener("pointerleave", () => {
+          this._renderer.showText = !1, this._renderer.renderText();
         })));
       }
+      setAttributes(params, forceUpdateTag) {
+        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);
+      }
+      render() {
+        this._layoutCacheFromConfig = null, this._container = this.createOrUpdateChild("datazoom-container", {}, "group"), this._renderer.renderDataZoom(), this._interaction.setAttributes(this._getInteractionAttrs());
+      }
+      release(all) {
+        super.release(all), this._interaction.clearDragEvents();
+      }
+      setStartAndEnd(start, end) {
+        const {
+          start: startState,
+          end: endState
+        } = this._state;
+        isValid$1(start) && isValid$1(end) && (start !== startState || end !== endState) && (this._state = {
+          start: start,
+          end: end
+        }, this._renderer.renderDataZoom(!0), this._dispatchEvent(IDataZoomEvent.dataZoomChange, {
+          start: start,
+          end: end
+        }));
+      }
       setPreviewData(data) {
-        this._previewData = data;
+        this._renderer.previewData = data;
       }
       setText(text, tag) {
-        "start" === tag ? this._startText.setAttribute("text", text) : this._endText.setAttribute("text", text);
+        "start" === tag ? this._renderer.startText.setAttribute("text", text) : this._renderer.endText.setAttribute("text", text);
       }
       getStartValue() {
-        return this._startValue;
+        return this._renderer.startValue;
       }
       getEndTextValue() {
-        return this._endValue;
+        return this._renderer.endValue;
       }
       getMiddleHandlerSize() {
         var _a, _b, _c, _d;
@@ -43047,24 +43492,19 @@
         return Math.max(middleHandlerRectSize, ...array(middleHandlerSymbolSize));
       }
       setPreviewPointsX(callback) {
-        isFunction$1(callback) && (this._previewPointsX = callback);
+        isFunction$1(callback) && (this._renderer.previewPointsX = callback);
       }
       setPreviewPointsY(callback) {
-        isFunction$1(callback) && (this._previewPointsY = callback);
+        isFunction$1(callback) && (this._renderer.previewPointsY = callback);
       }
       setPreviewPointsX1(callback) {
-        isFunction$1(callback) && (this._previewPointsX1 = callback);
+        isFunction$1(callback) && (this._renderer.previewPointsX1 = callback);
       }
       setPreviewPointsY1(callback) {
-        isFunction$1(callback) && (this._previewPointsY1 = callback);
+        isFunction$1(callback) && (this._renderer.previewPointsY1 = callback);
       }
       setStatePointToData(callback) {
-        isFunction$1(callback) && (this._statePointToData = callback);
-      }
-      release(all) {
-        super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
-          passive: !1
-        }), this._clearDragEvents();
+        isFunction$1(callback) && (this._renderer.statePointToData = callback);
       }
     };
     DataZoom$1.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
@@ -58331,7 +58771,7 @@
         });
     };
 
-    const version = "2.0.7-alpha.1";
+    const version = "2.0.7-alpha.4";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -72259,7 +72699,9 @@
             this._reStackTotal = () => {
                 const stackData = this.getStackData();
                 const stackValueField = this.getStackValueField();
-                stackTotal(stackData, stackValueField);
+                if (stackData) {
+                    stackTotal(stackData, stackValueField);
+                }
             };
         }
         getTotalData() {
@@ -78405,6 +78847,72 @@
         isNil$1(node.value) && ((null === (_a = node.children) || void 0 === _a ? void 0 : _a.length) ? node.value = calculateNodeValue(node.children) : node.value = 0), sum += Math.abs(node.value);
       }), sum;
     };
+    function makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes = [], nodeMap = {}, originalLinks) {
+      calculateNodeValue(originalNodes);
+      const doSubTree = (subTree, depth, parents) => {
+        subTree.forEach((node, index) => {
+          const nodeKey = nodeKeyFunc ? nodeKeyFunc(node) : parents ? `${parents[parents.length - 1].key}-${index}` : `${depth}-${index}`,
+            nodeValue = isNil$1(node.value) ? 0 : toValidNumber$1(node.value);
+          if (nodeMap[nodeKey]) nodeMap[nodeKey].value = void 0;else {
+            const nodeElement = {
+              depth: depth,
+              datum: node,
+              index: index,
+              key: nodeKey,
+              value: nodeValue,
+              sourceLinks: [],
+              targetLinks: []
+            };
+            nodeMap[nodeKey] = nodeElement, nodes.push(nodeElement);
+          }
+          parents && originalLinks && originalLinks.push({
+            source: parents[parents.length - 1].key,
+            target: nodeKey,
+            value: nodeValue,
+            parents: parents
+          }), node.children && node.children.length && doSubTree(node.children, depth + 1, parents ? parents.concat([nodeMap[nodeKey]]) : [nodeMap[nodeKey]]);
+        });
+      };
+      return doSubTree(originalNodes, 0, null), nodes;
+    }
+    function computeHierarchicNodeLinks(originalNodes, nodeKeyFunc) {
+      const nodes = [],
+        links = [],
+        nodeMap = {},
+        linkMap = {},
+        originalLinks = [];
+      return makeHierarchicNodes(originalNodes, nodeKeyFunc, nodes, nodeMap, originalLinks), originalLinks.forEach((link, index) => {
+        const key = `${link.source}-${link.target}`,
+          linkDatum = pickWithout(link, ["parents"]);
+        if (linkDatum.parents = link.parents.map(node => pickWithout(node, ["sourceLinks", "targetLinks"])), linkMap[key]) return linkMap[key].value += toValidNumber$1(link.value), void linkMap[key].datum.push(linkDatum);
+        const linkElement = {
+          index: index,
+          key: `${link.source}-${link.target}`,
+          source: link.source,
+          target: link.target,
+          datum: [linkDatum],
+          value: link.value,
+          parents: link.parents.map(parent => parent.key)
+        };
+        links.push(linkElement), nodeMap[link.source].sourceLinks.push(linkElement), nodeMap[link.target].targetLinks.push(linkElement), linkMap[key] = linkElement;
+      }), {
+        nodes: nodes,
+        links: links,
+        nodeMap: nodeMap
+      };
+    }
+    function computeNodeValues(nodes) {
+      for (let i = 0, len = nodes.length; i < len; i++) {
+        const node = nodes[i];
+        node.value = Math.max(isNil$1(node.value) ? 0 : toValidNumber$1(node.value), node.sourceLinks.reduce((sum, link) => {
+          var _a;
+          return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
+        }, 0), node.targetLinks.reduce((sum, link) => {
+          var _a;
+          return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
+        }, 0));
+      }
+    }
 
     function left(node) {
       return node.depth;
@@ -78538,55 +79046,7 @@
         };
       }
       computeHierarchicNodeLinks(originalNodes) {
-        const nodes = [],
-          links = [],
-          nodeMap = {},
-          linkMap = {},
-          originalLinks = [];
-        calculateNodeValue(originalNodes);
-        const doSubTree = (subTree, depth, parents) => {
-          subTree.forEach((node, index) => {
-            const nodeKey = this._getNodeKey ? this._getNodeKey(node) : parents ? `${parents[parents.length - 1].key}-${index}` : `${depth}-${index}`,
-              nodeValue = isNil$1(node.value) ? 0 : toValidNumber$1(node.value);
-            if (nodeMap[nodeKey]) nodeMap[nodeKey].value = void 0;else {
-              const nodeElement = {
-                depth: depth,
-                datum: node,
-                index: index,
-                key: nodeKey,
-                value: nodeValue,
-                sourceLinks: [],
-                targetLinks: []
-              };
-              nodeMap[nodeKey] = nodeElement, nodes.push(nodeElement);
-            }
-            parents && originalLinks.push({
-              source: parents[parents.length - 1].key,
-              target: nodeKey,
-              value: nodeValue,
-              parents: parents
-            }), node.children && node.children.length && doSubTree(node.children, depth + 1, parents ? parents.concat([nodeMap[nodeKey]]) : [nodeMap[nodeKey]]);
-          });
-        };
-        return doSubTree(originalNodes, 0, null), originalLinks.forEach((link, index) => {
-          const key = `${link.source}-${link.target}`,
-            linkDatum = pickWithout(link, ["parents"]);
-          if (linkDatum.parents = link.parents.map(node => pickWithout(node, ["sourceLinks", "targetLinks"])), linkMap[key]) return linkMap[key].value += toValidNumber$1(link.value), void linkMap[key].datum.push(linkDatum);
-          const linkElement = {
-            index: index,
-            key: `${link.source}-${link.target}`,
-            source: link.source,
-            target: link.target,
-            datum: [linkDatum],
-            value: link.value,
-            parents: link.parents.map(parent => parent.key)
-          };
-          links.push(linkElement), nodeMap[link.source].sourceLinks.push(linkElement), nodeMap[link.target].targetLinks.push(linkElement), linkMap[key] = linkElement;
-        }), {
-          nodes: nodes,
-          links: links,
-          nodeMap: nodeMap
-        };
+        return computeHierarchicNodeLinks(originalNodes, this._getNodeKey);
       }
       computeSourceTargetNodeLinks(data) {
         const nodes = [],
@@ -78656,16 +79116,7 @@
         };
       }
       computeNodeValues(nodes) {
-        for (let i = 0, len = nodes.length; i < len; i++) {
-          const node = nodes[i];
-          node.value = Math.max(isNil$1(node.value) ? 0 : toValidNumber$1(node.value), node.sourceLinks.reduce((sum, link) => {
-            var _a;
-            return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
-          }, 0), node.targetLinks.reduce((sum, link) => {
-            var _a;
-            return sum + (null !== (_a = toValidNumber$1(link.value)) && void 0 !== _a ? _a : 0);
-          }, 0));
-        }
+        return computeNodeValues(nodes);
       }
       computeNodeDepths(nodes) {
         var _a;
@@ -79730,7 +80181,7 @@
       return ret;
     }
 
-    function scaleSolution(solution, width, height, x0, y0) {
+    function scaleSolution(solution, width, height, x0, y0, hasEmptySet = !1) {
       width = Math.max(width, 1), height = Math.max(height, 1);
       const circles = [],
         setIds = [];
@@ -79740,9 +80191,20 @@
         yRange = bounds.yRange;
       if (xRange.max === xRange.min || yRange.max === yRange.min) return console.log("not scaling solution: zero size detected"), solution;
       const xScaling = width / (xRange.max - xRange.min),
-        yScaling = height / (yRange.max - yRange.min),
-        scaling = Math.min(yScaling, xScaling),
-        xOffset = (width - (xRange.max - xRange.min) * scaling) / 2,
+        yScaling = height / (yRange.max - yRange.min);
+      let scaling;
+      if (hasEmptySet) {
+        const containerRadius = Math.min(width, height) / 2,
+          centerX = (xRange.min + xRange.max) / 2,
+          centerY = (yRange.min + yRange.max) / 2;
+        let diagramRadius = 0;
+        for (const circle of circles) {
+          const maxDistanceForThisCircle = Math.sqrt(Math.pow(circle.x - centerX, 2) + Math.pow(circle.y - centerY, 2)) + circle.radius;
+          diagramRadius = Math.max(diagramRadius, maxDistanceForThisCircle);
+        }
+        scaling = containerRadius / diagramRadius;
+      } else scaling = Math.min(yScaling, xScaling);
+      const xOffset = (width - (xRange.max - xRange.min) * scaling) / 2,
         yOffset = (height - (yRange.max - yRange.min) * scaling) / 2,
         scaled = {};
       for (let i = 0; i < circles.length; ++i) {
@@ -79957,21 +80419,39 @@
         setField = "sets",
         valueField = "size",
         orientation = Math.PI / 2,
-        orientationOrder = null
+        orientationOrder = null,
+        emptySetKey: emptySetKey
       } = options;
       let circles = {},
         textCenters = {};
-      if (upstreamData.length > 0) {
-        const vennData = upstreamData.map(area => ({
+      const hasEmptySet = upstreamData.some(area => {
+          const sets = array(area[setField]);
+          return !sets || 0 === sets.length;
+        }),
+        nonEmptyData = hasEmptySet ? upstreamData.filter(area => !isEmpty(array(area[setField]))) : upstreamData;
+      if (nonEmptyData.length > 0) {
+        const vennData = nonEmptyData.map(area => ({
           sets: array(area[setField]),
           size: area[valueField]
         }));
         let solution = venn$1(vennData, options);
-        solution = normalizeSolution(solution, orientation, orientationOrder), circles = scaleSolution(solution, x1 - x0, y1 - y0, x0, y0), textCenters = computeTextCenters(circles, vennData);
+        solution = normalizeSolution(solution, orientation, orientationOrder), circles = scaleSolution(solution, x1 - x0, y1 - y0, x0, y0, hasEmptySet), textCenters = computeTextCenters(circles, vennData);
       }
       return upstreamData.map(area => {
-        const sets = array(area[setField]),
-          key = sets.toString(),
+        const sets = array(area[setField]);
+        if (!sets || 0 === sets.length) return Object.assign(Object.assign({}, area), {
+          datum: area,
+          sets: sets,
+          key: emptySetKey || "others",
+          size: area[valueField],
+          labelX: void 0,
+          labelY: void 0,
+          type: "circle",
+          x: x0 + (x1 - x0) / 2,
+          y: y0 + (y1 - y0) / 2,
+          radius: Math.min(x1 - x0, y1 - y0) / 2
+        });
+        const key = sets.toString(),
           textCenter = textCenters[key],
           basicDatum = Object.assign(Object.assign({}, area), {
             datum: area,
@@ -80251,11 +80731,11 @@
           if (1 === this._placeStatus) {
             const maxSize0 = d.fontSize * this._originSize[0] / this.options.minFontSize,
               distSize0 = Math.max(d.width, d.height);
-            if (distSize0 <= maxSize0) this.expandBoard(this._board, this._bounds, distSize0 / this._size[0]);else {
+            if (distSize0 <= maxSize0) this._board = this.expandBoard(this._board, this._bounds, distSize0 / this._size[0]);else {
               if (!this.options.clip) return !0;
-              this.expandBoard(this._board, this._bounds, maxSize0 / this._size[0]);
+              this._board = this.expandBoard(this._board, this._bounds, maxSize0 / this._size[0]);
             }
-          } else this._placeStatus, this.expandBoard(this._board, this._bounds);
+          } else this._placeStatus, this._board = this.expandBoard(this._board, this._bounds);
           return this.updateBoardExpandStatus(d.fontSize), !1;
         }
         return this._tTemp = null, this._dtTemp = null, !0;
@@ -80266,7 +80746,7 @@
           width: 1,
           height: 1
         }));
-        this.contextAndRatio = contextAndRatio, this._board = new Array((this._size[0] >> 5) * this._size[1]).fill(0), this._bounds = null;
+        this.contextAndRatio = contextAndRatio, this._board = new Uint32Array((this._size[0] >> 5) * this._size[1]).fill(0), this._bounds = null;
         words.length;
         this.result = [];
         const data = words.map((d, i) => ({
@@ -80333,18 +80813,33 @@
         this._size = this._size.map(v => v * (1 - minRatio));
       }
       expandBoard(board, bounds, factor) {
-        const expandedLeftWidth = this._size[0] * (factor || 1.1) - this._size[0] >> 5;
+        const oldW = this._size[0],
+          oldH = this._size[1],
+          oldRowStride = oldW >> 5,
+          expandedLeftWidth = oldW * (factor || 1.1) - oldW >> 5;
         let diffWidth = 2 * expandedLeftWidth > 2 ? expandedLeftWidth : 2;
         diffWidth % 2 != 0 && diffWidth++;
-        let diffHeight = Math.ceil(this._size[1] * (diffWidth << 5) / this._size[0]);
+        let diffHeight = Math.ceil(oldH * (diffWidth << 5) / oldW);
         diffHeight % 2 != 0 && diffHeight++;
-        const w = this._size[0],
-          h = this._size[1],
-          widthArr = new Array(diffWidth).fill(0),
-          heightArr = new Array(diffHeight / 2 * (diffWidth + (w >> 5))).fill(0);
-        this.insertZerosToArray(board, h * (w >> 5), heightArr.length + diffWidth / 2);
-        for (let i = h - 1; i > 0; i--) this.insertZerosToArray(board, i * (w >> 5), widthArr.length);
-        this.insertZerosToArray(board, 0, heightArr.length + diffWidth / 2), this._size = [w + (diffWidth << 5), h + diffHeight], bounds && (bounds[0].x += (diffWidth << 5) / 2, bounds[0].y += diffHeight / 2, bounds[1].x += (diffWidth << 5) / 2, bounds[1].y += diffHeight / 2);
+        const newW = oldW + (diffWidth << 5),
+          newH = oldH + diffHeight,
+          newRowStride = newW >> 5,
+          paddingLeft = diffWidth / 2,
+          paddingTop = diffHeight / 2,
+          newBoard = new Uint32Array(newH * newRowStride).fill(0);
+        for (let y = 0; y < oldH; y++) {
+          const sourceStartIndex = y * oldRowStride,
+            sourceEndIndex = sourceStartIndex + oldRowStride,
+            destStartIndex = (y + paddingTop) * newRowStride + paddingLeft,
+            rowData = board.slice(sourceStartIndex, sourceEndIndex);
+          newBoard.set(rowData, destStartIndex);
+        }
+        if (this._size = [newW, newH], bounds) {
+          const offsetX = (diffWidth << 5) / 2,
+            offsetY = diffHeight / 2;
+          bounds[0].x += offsetX, bounds[0].y += offsetY, bounds[1].x += offsetX, bounds[1].y += offsetY;
+        }
+        return newBoard;
       }
       insertZerosToArray(array, index, length) {
         if (this.options.customInsertZerosToArray) return this.options.customInsertZerosToArray(array, index, length);
@@ -88833,6 +89328,7 @@
         registerDimensionEvents();
         registerDimensionHover();
         registerBarSeries();
+        Factory.registerTransform('bin', bin);
         Factory.registerChart(HistogramChart.type, HistogramChart);
     };
 
@@ -102085,6 +102581,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.registerAreaChart = registerAreaChart;
     exports.registerAreaMark = registerAreaMark;
     exports.registerAreaSeries = registerAreaSeries;
+    exports.registerBarAnimation = registerBarAnimation;
     exports.registerBarChart = registerBarChart;
     exports.registerBarSeries = registerBarSeries;
     exports.registerBoxplotChart = registerBoxplotChart;