@visactor/vchart 2.0.7-alpha.2 → 2.0.7-alpha.5

package/build/index.es.js

@@ -1036,43 +1036,187 @@ const extent$2 = (array, func) => {
   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;
+    }
   };
 }
 
@@ -5968,6 +6112,140 @@ function sortData(a, b, sortFields) {
   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;
+};
+
+const boxplot = (data, options) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+  const field = null == options ? void 0 : options.field;
+  if (!field) return [];
+  const groupField = null == options ? void 0 : options.groupField;
+  let whiskers = null !== (_a = null == options ? void 0 : options.whiskers) && void 0 !== _a ? _a : 1.5;
+  const includeValues = !!(null == options ? void 0 : options.includeValues),
+    names = null !== (_b = null == options ? void 0 : options.outputNames) && void 0 !== _b ? _b : {},
+    keyName = null !== (_c = names.key) && void 0 !== _c ? _c : isArray$1(groupField) ? null : null !== (_d = groupField) && void 0 !== _d ? _d : "key",
+    countName = null !== (_e = names.count) && void 0 !== _e ? _e : "count",
+    meanName = null !== (_f = names.mean) && void 0 !== _f ? _f : "mean",
+    q1Name = null !== (_g = names.q1) && void 0 !== _g ? _g : "q1",
+    medianName = null !== (_h = names.median) && void 0 !== _h ? _h : "median",
+    q3Name = null !== (_j = names.q3) && void 0 !== _j ? _j : "q3",
+    iqrName = null !== (_k = names.iqr) && void 0 !== _k ? _k : "iqr",
+    minName = null !== (_l = names.min) && void 0 !== _l ? _l : "min",
+    maxName = null !== (_m = names.max) && void 0 !== _m ? _m : "max",
+    lowerWhiskerName = null !== (_o = names.lowerWhisker) && void 0 !== _o ? _o : "lowerWhisker",
+    upperWhiskerName = null !== (_p = names.upperWhisker) && void 0 !== _p ? _p : "upperWhisker",
+    outliersName = null !== (_q = names.outliers) && void 0 !== _q ? _q : "outliers",
+    valuesName = null !== (_r = names.values) && void 0 !== _r ? _r : "values",
+    groups = new Map(),
+    rawValues = new Map(),
+    keyToGroup = new Map(),
+    n = data.length;
+  for (let i = 0; i < n; i++) {
+    const d = data[i],
+      v = d[field];
+    if (isNil$1(v)) continue;
+    const num = +v;
+    if (!Number.isFinite(num)) continue;
+    let key;
+    key = isArray$1(groupField) ? groupField.map(f => String(d[f])).join("||") : groupField ? String(d[groupField]) : "___all", groups.has(key) || (groups.set(key, []), includeValues && rawValues.set(key, []), isArray$1(groupField) ? keyToGroup.set(key, Object.fromEntries(groupField.map(f => [f, d[f]]))) : keyToGroup.set(key, groupField ? d[groupField] : null));
+    const arr = groups.get(key);
+    if (arr && arr.push(num), includeValues) {
+      const rv = rawValues.get(key);
+      rv && rv.push(d);
+    }
+  }
+  if (isArray$1(whiskers)) {
+    whiskers = [clamp$1(Math.min.apply(null, whiskers), 0, 1), clamp$1(Math.max.apply(null, whiskers), 0, 1)];
+  }
+  const out = [];
+  for (const [key, vals] of groups) {
+    if (!vals || 0 === vals.length) continue;
+    const sorted = vals.slice().sort((a, b) => a - b),
+      count = sorted.length,
+      dataMin = sorted[0],
+      dataMax = sorted[sorted.length - 1];
+    let sum = 0;
+    for (let i = 0; i < sorted.length; i++) sum += sorted[i];
+    const mean = sum / count,
+      q1 = quantileSorted(sorted, .25),
+      median = quantileSorted(sorted, .5),
+      q3 = quantileSorted(sorted, .75),
+      iqr = q3 - q1,
+      lowerBound = isArray$1(whiskers) ? quantileSorted(sorted, whiskers[0]) : q1 - whiskers * iqr,
+      upperBound = isArray$1(whiskers) ? quantileSorted(sorted, whiskers[1]) : q3 + whiskers * iqr;
+    let lowerWhisker = dataMin;
+    for (let i = 0; i < sorted.length; i++) if (sorted[i] >= lowerBound) {
+      lowerWhisker = sorted[i];
+      break;
+    }
+    let upperWhisker = dataMax;
+    for (let i = sorted.length - 1; i >= 0; i--) if (sorted[i] <= upperBound) {
+      upperWhisker = sorted[i];
+      break;
+    }
+    const outliers = [];
+    for (let i = 0; i < sorted.length; i++) (sorted[i] < lowerWhisker || sorted[i] > upperWhisker) && outliers.push(sorted[i]);
+    const obj = {},
+      representative = keyToGroup.get(key);
+    if (null !== keyName) obj[keyName] = representative;else if (isArray$1(groupField)) {
+      const groupObj = representative || {};
+      for (const f of groupField) obj[f] = groupObj[f];
+    }
+    obj[countName] = count, obj[meanName] = mean, obj[q1Name] = q1, obj[medianName] = median, obj[q3Name] = q3, obj[iqrName] = iqr, obj[minName] = dataMin, obj[maxName] = dataMax, obj[lowerWhiskerName] = lowerWhisker, obj[upperWhiskerName] = upperWhisker, obj[outliersName] = outliers, includeValues && (obj[valuesName] = rawValues.get(key) || []), out.push(obj);
+  }
+  return out;
+};
+
 var EOL = {},
   EOF = {},
   QUOTE = 34,
@@ -38696,7 +38974,9 @@ class BandScale extends OrdinalScale {
       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;
   }
@@ -38713,10 +38993,12 @@ class BandScale extends OrdinalScale {
     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;
@@ -42224,6 +42506,19 @@ class CircleAxisGrid extends BaseGrid {
 }
 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",
@@ -42341,14 +42636,17 @@ const DEFAULT_HANDLER_ATTR_MAP = {
   }
 };
 
-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 = {};
@@ -42359,176 +42657,96 @@ var __rest$1 = undefined && undefined.__rest || function (s, e) {
   }
   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 {
@@ -42538,254 +42756,104 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         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),
@@ -42814,38 +42882,38 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
       }), "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),
@@ -42873,9 +42941,107 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         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,
@@ -42883,7 +43049,7 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         position: position,
         width: width,
         height: height
-      } = this.getLayoutAttrFromConfig();
+      } = this._getLayoutAttrFromConfig();
     let basePointStart, basePointEnd;
     return this._isHorizontal ? (basePointStart = [{
       x: position.x,
@@ -42908,7 +43074,7 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
       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;
@@ -42916,20 +43082,20 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
     }
     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),
@@ -42937,99 +43103,459 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
       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,
-      tag: this._activeTag
+      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: 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;
@@ -43041,24 +43567,19 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
     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;
@@ -58325,7 +58846,7 @@ const lookup = (data, opt) => {
     });
 };
 
-const version = "2.0.7-alpha.2";
+const version = "2.0.7-alpha.5";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -78401,6 +78922,72 @@ const calculateNodeValue = subTree => {
     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;
@@ -78534,55 +79121,7 @@ class SankeyLayout {
     };
   }
   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 = [],
@@ -78652,16 +79191,7 @@ class SankeyLayout {
     };
   }
   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;
@@ -79726,7 +80256,7 @@ function normalizeSolution(solution, orientation, orientationOrder) {
   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 = [];
@@ -79736,9 +80266,20 @@ function scaleSolution(solution, width, height, x0, y0) {
     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) {
@@ -79953,21 +80494,39 @@ const transform$2 = (options, upstreamData) => {
     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,
@@ -80247,11 +80806,11 @@ class CloudLayout extends BaseLayout {
       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;
@@ -80262,7 +80821,7 @@ class CloudLayout extends BaseLayout {
       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) => ({
@@ -80329,18 +80888,33 @@ class CloudLayout extends BaseLayout {
     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);
@@ -88829,6 +89403,7 @@ const registerHistogramChart = () => {
     registerDimensionEvents();
     registerDimensionHover();
     registerBarSeries();
+    Factory.registerTransform('bin', bin);
     Factory.registerChart(HistogramChart.type, HistogramChart);
 };
 
@@ -89528,6 +90103,7 @@ const registerBoxplotChart = () => {
     registerDimensionEvents();
     registerDimensionHover();
     registerBoxplotSeries();
+    Factory.registerTransform('boxplot', boxplot);
     Factory.registerChart(BoxPlotChart.type, BoxPlotChart);
 };
 
@@ -101801,4 +102377,4 @@ function registerSequentialAnimate() {
     mixin(BaseMark, SequentialAnimate);
 }
 
-export { ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, BandAxisMixin, BarChart, BarChartSpecTransformer, BarSeries, BarSeriesSpecTransformer, BaseArcMark, BaseChart, BaseChartSpecTransformer, BaseComponent, BaseComponentSpecTransformer, BaseHistogramChart, BaseMark, BasePieChart, BasePieChartSpecTransformer, BasePieSeries, BasePlugin, BasePolygonMark, BaseSeries, BaseSeriesSpecTransformer, BaseSeriesTooltipHelper, BaseWordCloudChart, BaseWordCloudChartSpecTransformer, BaseWordCloudSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, ChartEvent, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, CompilableData, ComponentMark, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_ANIMATION_CONFIG, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CLOSE_STROKE_JOIN, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_KEY, DEFAULT_LAYOUT_RECT_LEVEL, DEFAULT_LAYOUT_RECT_LEVEL_MIN, DEFAULT_LINEAR_INTERPOLATE, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DEFAULT_SMOOTH_INTERPOLATE, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, Direction, DiscreteLegend, DomTooltipHandler, DotSeries, ElementHighlight, ElementSelect, Event$1 as Event, Factory, FormatterPlugin, FunnelChart, FunnelChartSpecTransformer, FunnelSeries, FunnelSeriesSpecTransformer, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GeoSeries, GlyphMark, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, HistogramChart, HistogramChartSpecTransformer, ImageMark, Indicator, Label, Layout$1 as Layout, LayoutLevel, LayoutZIndex, LineChart, LineMark, LineSeries, LinearAxisMixin, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapSeries, MarkTypeEnum, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PieChart, PieSeries, PieSeriesSpecTransformer, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, PositionEnum, ProgressLikeSeries, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumnChart, RangeColumnSeries, RangeColumnSeriesSpecTransformer, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, Stack, StackChartMixin, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TransformLevel, TreemapChart, TreemapSeries, USER_LAYOUT_RECT_LEVEL, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloudChart, WordCloudSeries, alternatingWave, animationConfig, barGrowIn, barGrowOut, barPresetAnimation, baseSeriesMark, boundsInRect, builtinThemes, calcLayoutNumber, calcPadding, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, convertPoint, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createScale, createScaleWithSpec, createSymbol, createText, darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, findMarkGraphic, functionTransform, getActualColor, getActualNumValue, getCartesianCrosshairRect, getCartesianDimensionInfo, getColorSchemeBySeries, getCombinedSizeOfRegions, getDataScheme, getDatumOfGraphic, getDiffAttributesOfGraphic, getDimensionInfoByValue, getFieldAlias, getFunnelTheme, getGroupAnimationParams, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getSpecInfo, getTheme, hasThemeMerged, isCollectionMark, isColorKey, isPercent, isPercentOffset, isPolarAxisSeries, isProgressiveDataColorScheme, isSpecValueWithScale, isTokenKey, isValidOrient, isValueInScaleDomain, isXAxis, isYAxis, isZAxis, lightTheme, lookup, measureText, mergeFields, normalizeLayoutPaddingSpec, particleEffect, pieDisappear, pieEnter, pieExit, piePresetAnimation, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, registerAllEnv, registerAllMarks, registerAnimate, registerArcAnimation, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomAnimate, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDimensionEvents, registerDimensionHover, registerDimensionTooltipProcessor, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerElementActive, registerElementActiveByLegend, registerElementHighlight, registerElementHighlightByGroup, registerElementHighlightByKey, registerElementHighlightByLegend, registerElementHighlightByName, registerElementSelect, registerFormatPlugin, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGlyphMark, registerGridLayout, registerGroupMark, registerGroupTooltipProcessor, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapSeries, registerMarkArea, registerMarkFilterTransform, registerMarkLine, registerMarkMapTransform, registerMarkPoint, registerMarkTooltipProcessor, registerMediaQuery, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonAnimation, registerPolygonMark, registerPoptip, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRectAnimation, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScaleInOutAnimation, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSequentialAnimate, registerStateTransition, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerAnimate$1 as registerVRenderAnimate, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, setDefaultCrosshairForCartesianChart, shouldMarkDoMorph, snakeWave, sortDataInAxisHelper, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, transformToGraphic, userAnimationConfig, valueInScaleRange, version, vglobal, warn };
+export { ArcMark, AreaChart, AreaMark, AreaSeries, AttributeLevel, AxisSyncPlugin, BandAxisMixin, BarChart, BarChartSpecTransformer, BarSeries, BarSeriesSpecTransformer, BaseArcMark, BaseChart, BaseChartSpecTransformer, BaseComponent, BaseComponentSpecTransformer, BaseHistogramChart, BaseMark, BasePieChart, BasePieChartSpecTransformer, BasePieSeries, BasePlugin, BasePolygonMark, BaseSeries, BaseSeriesSpecTransformer, BaseSeriesTooltipHelper, BaseWordCloudChart, BaseWordCloudChartSpecTransformer, BaseWordCloudSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, ChartEvent, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, CompilableData, ComponentMark, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_ANIMATION_CONFIG, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_CLOSE_STROKE_JOIN, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_KEY, DEFAULT_LAYOUT_RECT_LEVEL, DEFAULT_LAYOUT_RECT_LEVEL_MIN, DEFAULT_LINEAR_INTERPOLATE, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DEFAULT_SMOOTH_INTERPOLATE, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, Direction, DiscreteLegend, DomTooltipHandler, DotSeries, ElementHighlight, ElementSelect, Event$1 as Event, Factory, FormatterPlugin, FunnelChart, FunnelChartSpecTransformer, FunnelSeries, FunnelSeriesSpecTransformer, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GeoSeries, GlyphMark, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, HistogramChart, HistogramChartSpecTransformer, ImageMark, Indicator, Label, Layout$1 as Layout, LayoutLevel, LayoutZIndex, LineChart, LineMark, LineSeries, LinearAxisMixin, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, ManualTicker, MapChart, MapSeries, MarkTypeEnum, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PieChart, PieSeries, PieSeriesSpecTransformer, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, PositionEnum, ProgressLikeSeries, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumnChart, RangeColumnSeries, RangeColumnSeriesSpecTransformer, RectMark, RenderModeEnum, RippleMark, RoseChart, RoseLikeSeries, RoseSeries, RuleMark, SEGMENT_FIELD_END, SEGMENT_FIELD_START, STACK_FIELD_END, STACK_FIELD_END_OffsetSilhouette, STACK_FIELD_END_PERCENT, STACK_FIELD_KEY, STACK_FIELD_START, STACK_FIELD_START_OffsetSilhouette, STACK_FIELD_START_PERCENT, STACK_FIELD_TOTAL, STACK_FIELD_TOTAL_BOTTOM, STACK_FIELD_TOTAL_PERCENT, STACK_FIELD_TOTAL_TOP, STATE_VALUE_ENUM, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, Stack, StackChartMixin, StreamLight, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TransformLevel, TreemapChart, TreemapSeries, USER_LAYOUT_RECT_LEVEL, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloudChart, WordCloudSeries, alternatingWave, animationConfig, barGrowIn, barGrowOut, barPresetAnimation, baseSeriesMark, boundsInRect, builtinThemes, calcLayoutNumber, calcPadding, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, convertPoint, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createScale, createScaleWithSpec, createSymbol, createText, darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, findMarkGraphic, functionTransform, getActualColor, getActualNumValue, getCartesianCrosshairRect, getCartesianDimensionInfo, getColorSchemeBySeries, getCombinedSizeOfRegions, getDataScheme, getDatumOfGraphic, getDiffAttributesOfGraphic, getDimensionInfoByValue, getFieldAlias, getFunnelTheme, getGroupAnimationParams, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getSpecInfo, getTheme, hasThemeMerged, isCollectionMark, isColorKey, isPercent, isPercentOffset, isPolarAxisSeries, isProgressiveDataColorScheme, isSpecValueWithScale, isTokenKey, isValidOrient, isValueInScaleDomain, isXAxis, isYAxis, isZAxis, lightTheme, lookup, measureText, mergeFields, normalizeLayoutPaddingSpec, particleEffect, pieDisappear, pieEnter, pieExit, piePresetAnimation, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, registerAllEnv, registerAllMarks, registerAnimate, registerArcAnimation, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBarAnimation, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomAnimate, registerCustomMark, registerDataSetInstanceParser, registerDataSetInstanceTransform, registerDataZoom, registerDimensionEvents, registerDimensionHover, registerDimensionTooltipProcessor, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerElementActive, registerElementActiveByLegend, registerElementHighlight, registerElementHighlightByGroup, registerElementHighlightByKey, registerElementHighlightByLegend, registerElementHighlightByName, registerElementSelect, registerFormatPlugin, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGlyphMark, registerGridLayout, registerGroupMark, registerGroupTooltipProcessor, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapSeries, registerMarkArea, registerMarkFilterTransform, registerMarkLine, registerMarkMapTransform, registerMarkPoint, registerMarkTooltipProcessor, registerMediaQuery, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonAnimation, registerPolygonMark, registerPoptip, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRectAnimation, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScaleInOutAnimation, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSequentialAnimate, registerStateTransition, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerAnimate$1 as registerVRenderAnimate, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, setDefaultCrosshairForCartesianChart, shouldMarkDoMorph, snakeWave, sortDataInAxisHelper, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, transformToGraphic, userAnimationConfig, valueInScaleRange, version, vglobal, warn };