@visactor/vchart 1.13.9-alpha.5 → 1.13.9

package/build/index.es.js

@@ -1753,6 +1753,37 @@ const calculateAnchorOfBounds = (bounds, anchorType) => {
     y: anchorY
   };
 };
+const aabbSeparation = (a, b) => Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
+const obbSeparation = (a, b) => {
+  const axes = [{
+    x: Math.cos(a.angle),
+    y: Math.sin(a.angle)
+  }, {
+    x: -Math.sin(a.angle),
+    y: Math.cos(a.angle)
+  }, {
+    x: Math.cos(b.angle),
+    y: Math.sin(a.angle)
+  }, {
+    x: -Math.sin(b.angle),
+    y: Math.cos(a.angle)
+  }];
+  function getProjectionRange(obb, axisX, axisY) {
+    const projections = obb.getRotatedCorners().map(p => p.x * axisX + p.y * axisY);
+    return {
+      min: Math.min(...projections),
+      max: Math.max(...projections)
+    };
+  }
+  let maxDistance = 0;
+  for (const axis of axes) {
+    const rangeA = getProjectionRange(a, axis.x, axis.y),
+      rangeB = getProjectionRange(b, axis.x, axis.y);
+    let distance;
+    distance = rangeA.max < rangeB.min ? rangeB.min - rangeA.max : rangeB.max < rangeA.min ? rangeA.min - rangeB.max : 0, maxDistance = Math.max(maxDistance, distance);
+  }
+  return maxDistance;
+};
 
 function transformBoundsWithMatrix(out, bounds, matrix) {
   const {
@@ -1912,6 +1943,25 @@ class OBBBounds extends Bounds {
   clone() {
     return new OBBBounds(this);
   }
+  getRotatedCorners() {
+    const originPoint = {
+      x: (this.x1 + this.x2) / 2,
+      y: (this.y1 + this.y2) / 2
+    };
+    return [rotatePoint({
+      x: this.x1,
+      y: this.y1
+    }, this.angle, originPoint), rotatePoint({
+      x: this.x2,
+      y: this.y1
+    }, this.angle, originPoint), rotatePoint({
+      x: this.x1,
+      y: this.y2
+    }, this.angle, originPoint), rotatePoint({
+      x: this.x2,
+      y: this.y2
+    }, this.angle, originPoint)];
+  }
 }
 
 class Matrix {
@@ -8912,6 +8962,11 @@ let Step$1 = class Step {
     return this.context.tryUpdateLength();
   }
 };
+class StepClosed extends Step$1 {
+  lineEnd() {
+    this.context.closePath();
+  }
+}
 function genStepSegments(points, t) {
   let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
@@ -8925,6 +8980,16 @@ function genStepSegments(points, t) {
 function genStepTypeSegments(path, points) {
   return genCurveSegments(path, points);
 }
+function genStepClosedSegments(points, t) {
+  let params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    direction: direction,
+    startPoint: startPoint
+  } = params;
+  if (points.length < 2 - Number(!!startPoint)) return null;
+  const segContext = new SegContext("step", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$1.ROW : Direction$1.COLUMN);
+  return genStepTypeSegments(new StepClosed(segContext, t, startPoint), points), segContext;
+}
 
 class LinearClosed extends Linear {
   lineEnd() {
@@ -9154,6 +9219,8 @@ function calcLineCache(points, curveType, params) {
       return genMonotoneYSegments(points, params);
     case "step":
       return genStepSegments(points, .5, params);
+    case "stepClosed":
+      return genStepClosedSegments(points, .5, params);
     case "stepBefore":
       return genStepSegments(points, 0, params);
     case "stepAfter":
@@ -9588,7 +9655,8 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   filter: "",
   cursor: null,
   html: null,
-  react: null
+  react: null,
+  vue: null
 }, DefaultFillStyle), DefaultStrokeStyle), DefaultLayout), DefaultPickStyle);
 const DefaultConnectAttribute = {
   connectedType: "none",
@@ -9696,6 +9764,12 @@ const DefaultPolygonAttribute = Object.assign(Object.assign({}, DefaultAttribute
   cornerRadius: 0,
   closePath: !0
 });
+const DefaultStarAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
+  width: 100,
+  height: 100,
+  spikes: 5,
+  thickness: .5
+});
 const DefaultRectAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
   width: 0,
   height: 0,
@@ -10021,6 +10095,7 @@ function getScaledStroke(context, width, dpr) {
 function createColor(context, c, params) {
   let offsetX = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   let offsetY = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  var _a, _b, _c, _d;
   if (!c || !0 === c) return "black";
   let result, color;
   if (isArray$1(c)) for (let i = 0; i < c.length && (color = c[i], !color); i++);else color = c;
@@ -10034,9 +10109,10 @@ function createColor(context, c, params) {
     if (params.attribute) {
       const {
         scaleX = 1,
-        scaleY = 1
+        scaleY = 1,
+        angle = 0
       } = params.attribute;
-      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY;
+      w /= scaleX, h /= scaleY, x /= scaleX, y /= scaleY, (angle || 1 !== scaleX || 1 !== scaleY) && (x = null !== (_a = params.x1WithoutTransform) && void 0 !== _a ? _a : 0, y = null !== (_b = params.y1WithoutTransform) && void 0 !== _b ? _b : 0, w = null !== (_c = params.widthWithoutTransform) && void 0 !== _c ? _c : w, h = null !== (_d = params.heightWithoutTransform) && void 0 !== _d ? _d : h);
     }
     "linear" === color.gradient ? result = createLinearGradient(context, color, x, y, w, h) : "conical" === color.gradient ? result = createConicGradient(context, color, x, y, w, h) : "radial" === color.gradient && (result = createRadialGradient(context, color, x, y, w, h));
   }
@@ -10061,7 +10137,7 @@ function createConicGradient(context, color, x, y, w, h) {
   const canvasGradient = context.createConicGradient(x + (null !== (_a = color.x) && void 0 !== _a ? _a : 0) * w, y + (null !== (_b = color.y) && void 0 !== _b ? _b : 0) * h, color.startAngle, color.endAngle);
   return color.stops.forEach(stop => {
     canvasGradient.addColorStop(stop.offset, stop.color);
-  }), canvasGradient.GetPattern(w + x, h + y, undefined);
+  }), canvasGradient.GetPattern ? canvasGradient.GetPattern(w + x, h + y, undefined) : canvasGradient;
 }
 
 const DIRECTION_KEY = {
@@ -10136,6 +10212,7 @@ function applyStrokeStyle(ctx, character) {
   ctx.globalAlpha = strokeOpacity * opacity, ctx.lineWidth = character && "number" == typeof character.lineWidth ? character.lineWidth : 1, ctx.strokeStyle = strokeStyle, setTextStyle(ctx, character);
 }
 function getStrByWithCanvas(desc, width, character, guessIndex, needTestLetter) {
+  if (desc.length <= 1) return 0;
   if (!width || width <= 0) return 0;
   const textMeasure = application.graphicUtil.textMeasure;
   let index = guessIndex,
@@ -10169,6 +10246,13 @@ function testLetter2(string, index) {
 }
 function measureTextCanvas(text, character) {
   let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "actual";
+  var _a;
+  if ("" === text) return {
+    ascent: 0,
+    height: 0,
+    descent: 0,
+    width: 0
+  };
   const measurement = application.graphicUtil.textMeasure.measureText(text, character),
     result = {
       ascent: 0,
@@ -10178,7 +10262,9 @@ function measureTextCanvas(text, character) {
     },
     ascent = "actual" === mode ? measurement.actualBoundingBoxAscent : measurement.fontBoundingBoxAscent,
     descent = "actual" === mode ? measurement.actualBoundingBoxDescent : measurement.fontBoundingBoxDescent;
-  return "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent), result;
+  "number" != typeof ascent || "number" != typeof descent ? (result.width = Math.floor(measurement.width), result.height = character.fontSize || 0, result.ascent = result.height, result.descent = 0) : (result.width = Math.floor(measurement.width), result.height = Math.floor(ascent + descent), result.ascent = Math.floor(ascent), result.descent = result.height - result.ascent);
+  const space = null !== (_a = character.space) && void 0 !== _a ? _a : 0;
+  return result.width += space, result;
 }
 
 var __decorate$1A = undefined && undefined.__decorate || function (decorators, target, key, desc) {
@@ -11316,6 +11402,7 @@ const defaultThemeObj = {
     text: DefaultTextAttribute,
     rect: DefaultRectAttribute,
     polygon: DefaultPolygonAttribute,
+    star: DefaultStarAttribute,
     richtext: DefaultRichTextAttribute,
     richtextIcon: DefaultRichTextIconAttribute,
     image: DefaultImageAttribute,
@@ -11334,6 +11421,7 @@ function newThemeObj() {
     text: Object.assign({}, defaultThemeObj.text),
     rect: Object.assign({}, defaultThemeObj.rect),
     polygon: Object.assign({}, defaultThemeObj.polygon),
+    star: Object.assign({}, defaultThemeObj.star),
     richtext: Object.assign({}, defaultThemeObj.richtext),
     richtextIcon: Object.assign({}, defaultThemeObj.richtextIcon),
     image: Object.assign({}, defaultThemeObj.image),
@@ -11813,7 +11901,7 @@ class FederatedEvent {
   }
   _composedDetailPath(params) {
     if (params && params.graphic) {
-      const g = this.pickParams.graphic;
+      const g = params.graphic;
       if (g.stage) {
         const path = g.stage.eventSystem.manager.propagationPath(g);
         this.detailPath.push(path), this._composedDetailPath(params.params);
@@ -15189,7 +15277,7 @@ class RectSymbol extends BaseSymbol {
 }
 var rect = new RectSymbol();
 
-const tempBounds$1 = new AABBBounds();
+const tempBounds = new AABBBounds();
 class CustomSymbolClass {
   constructor(type, path) {
     let isSvg = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
@@ -15218,7 +15306,7 @@ class CustomSymbolClass {
         let {
           path: path
         } = _ref;
-        tempBounds$1.x1 = path.bounds.x1 * size, tempBounds$1.y1 = path.bounds.y1 * size, tempBounds$1.x2 = path.bounds.x2 * size, tempBounds$1.y2 = path.bounds.y2 * size, bounds.union(tempBounds$1);
+        tempBounds.x1 = path.bounds.x1 * size, tempBounds.y1 = path.bounds.y1 * size, tempBounds.x2 = path.bounds.x2 * size, tempBounds.y2 = path.bounds.y2 * size, bounds.union(tempBounds);
       });
     }
     this.path.bounds && (bounds.x1 = this.path.bounds.x1 * size, bounds.y1 = this.path.bounds.y1 * size, bounds.x2 = this.path.bounds.x2 * size, bounds.y2 = this.path.bounds.y2 * size);
@@ -15532,6 +15620,7 @@ const PYRAMID3D_NUMBER_TYPE = genNumberType();
 const RECT_NUMBER_TYPE = genNumberType();
 const RECT3D_NUMBER_TYPE = genNumberType();
 const RICHTEXT_NUMBER_TYPE = genNumberType();
+genNumberType();
 const SYMBOL_NUMBER_TYPE = genNumberType();
 const TEXT_NUMBER_TYPE = genNumberType();
 const GraphicService = Symbol.for("GraphicService");
@@ -15550,8 +15639,8 @@ const SVG_PARSE_ATTRIBUTE_MAP = {
 const SVG_PARSE_ATTRIBUTE_MAP_KEYS = Object.keys(SVG_PARSE_ATTRIBUTE_MAP);
 
 const _tempBounds = new AABBBounds(),
-  tempMatrix = new Matrix(),
-  tempBounds = new AABBBounds();
+  tempMatrix = new Matrix();
+  new AABBBounds();
 const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
 const tempConstantXYKey = ["x", "y"],
   tempConstantScaleXYKey = ["scaleX", "scaleY"],
@@ -15786,6 +15875,9 @@ class Graphic extends Node {
       y: y
     });
   }
+  setWidthHeightWithoutTransform(aabbBounds) {
+    this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
+  }
   setAttributes(params) {
     let forceUpdateTag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
     let context = arguments.length > 2 ? arguments[2] : undefined;
@@ -16067,24 +16159,12 @@ class Graphic extends Node {
   needUpdateLayout() {
     return !!(this._updateTag & UpdateTag.UPDATE_LAYOUT);
   }
-  getAnchor(anchor, params) {
+  getAnchor(anchor, params, resetScale) {
     const _anchor = [0, 0],
       getBounds = () => {
         if (params.b) return params.b;
-        const {
-          scaleX: scaleX,
-          scaleY: scaleY,
-          angle: angle
-        } = this.attribute;
-        return tempBounds.copy(this._AABBBounds), this.setAttributes({
-          scaleX: 1,
-          scaleY: 1,
-          angle: 0
-        }), params.b = this.AABBBounds.clone(), this._AABBBounds.copy(tempBounds), this.setAttributes({
-          scaleX: scaleX,
-          scaleY: scaleY,
-          angle: angle
-        }), params.b;
+        const graphic = this.clone();
+        return graphic.attribute.angle = 0, graphic.attribute.scaleCenter = null, resetScale && (graphic.attribute.scaleX = 1, graphic.attribute.scaleY = 1), params.b = graphic.AABBBounds, params.b;
       };
     if ("string" == typeof anchor[0]) {
       const ratio = parseFloat(anchor[0]) / 100,
@@ -16111,9 +16191,9 @@ class Graphic extends Node {
     } = this.attribute;
     let _anchor = [0, 0];
     const params = {};
-    if (anchor && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
+    if (anchor && angle && (_anchor = this.getAnchor(anchor, params)), !scaleCenter || 1 === scaleX && 1 === scaleY) normalTransform(this._transMatrix, this._transMatrix.reset(), x, y, scaleX, scaleY, angle, anchor && _anchor);else {
       const m = this._transMatrix;
-      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
+      m.reset(), m.translate(_anchor[0], _anchor[1]), m.rotate(angle), m.translate(-_anchor[0], -_anchor[1]), m.translate(x, y), _anchor = this.getAnchor(scaleCenter, params, !0), application.transformUtil.fromMatrix(m, m).scale(scaleX, scaleY, {
         x: _anchor[0],
         y: _anchor[1]
       });
@@ -17440,7 +17520,7 @@ class Circle extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    return updateBoundsOfCommonOuterBorder(attribute, circleTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, circleTheme, !1, this), aabbBounds;
+    return updateBoundsOfCommonOuterBorder(attribute, circleTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, circleTheme, !1, this), aabbBounds;
   }
   updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds) {
     const {
@@ -17690,7 +17770,7 @@ let Text$1 = class Text extends Graphic {
       const shadowBlurHalfWidth = shadowBlur / Math.abs(scaleX + scaleY);
       boundStroke(tb1, shadowBlurHalfWidth, !0, strokeBoundsBuffer), aabbBounds.union(tb1);
     }
-    return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
+    return application.graphicService.combindShadowAABBBounds(aabbBounds, this), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, textTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, transformBoundsWithMatrix(aabbBounds, aabbBounds, this.transMatrix), aabbBounds;
   }
   updateSingallineAABBBounds(text) {
     this.updateMultilineAABBBounds([text]);
@@ -18071,7 +18151,7 @@ let Symbol$1 = class Symbol extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+    updateBoundsOfSymbolOuterBorder(attribute, symbolTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, this.x1WithoutTransform = aabbBounds.x1, this.y1WithoutTransform = aabbBounds.y1;
     const {
       lineJoin = symbolTheme.lineJoin
     } = attribute;
@@ -18143,7 +18223,7 @@ let Line$1 = class Line extends Graphic {
     return getTheme$1(this).line;
   }
   updateAABBBounds(attribute, lineTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     const {
       lineJoin = lineTheme.lineJoin
     } = attribute;
@@ -18240,7 +18320,7 @@ class Rect extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
+    return updateBoundsOfCommonOuterBorder(attribute, rectTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, rectTheme, !1, this), aabbBounds;
   }
   needUpdateTags(keys) {
     return super.needUpdateTags(keys, RECT_UPDATE_TAG_KEY);
@@ -18611,6 +18691,7 @@ function getFixedLRTB(left, right, top, bottom) {
 }
 class Paragraph {
   constructor(text, newLine, character, ascentDescentMode) {
+    var _a, _b;
     this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", this.ascentDescentMode = ascentDescentMode;
     const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
     this.lineHeight = "number" == typeof lineHeight ? lineHeight > this.fontSize ? lineHeight : this.fontSize : Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
@@ -18623,7 +18704,7 @@ class Paragraph {
     let halfDetaHeight = 0,
       deltaAscent = 0,
       deltaDescent = 0;
-    this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
+    this.height > height && (halfDetaHeight = (this.height - height) / 2, deltaAscent = Math.ceil(halfDetaHeight), deltaDescent = Math.floor(halfDetaHeight)), "top" === this.textBaseline ? (this.ascent = halfDetaHeight, this.descent = height - halfDetaHeight) : "bottom" === this.textBaseline ? (this.ascent = height - halfDetaHeight, this.descent = halfDetaHeight) : "middle" === this.textBaseline ? (this.ascent = this.height / 2, this.descent = this.height / 2) : (this.ascent = ascent + deltaAscent, this.descent = descent + deltaDescent), this.length = text.length, this.width = width || 0, this.text = text || "", this.newLine = newLine || !1, this.character = character, this.left = 0, this.top = 0, this.ellipsis = "normal", this.ellipsisWidth = 0, this.ellipsisOtherParagraphWidth = 0, this.space = character.space, this.dx = null !== (_a = character.dx) && void 0 !== _a ? _a : 0, this.dy = null !== (_b = character.dy) && void 0 !== _b ? _b : 0, "vertical" === character.direction && (this.direction = character.direction, this.widthOrigin = this.width, this.heightOrigin = this.height, this.width = this.heightOrigin, this.height = this.widthOrigin, this.lineHeight = this.height), this.ellipsisStr = "...";
   }
   updateWidth() {
     const {
@@ -18642,11 +18723,11 @@ class Paragraph {
       if ("hide" === this.ellipsis) return;
       if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
         const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          "vertical" === direction || (left -= this.ellipsisWidth - width);
+          left -= this.ellipsisWidth - width;
         }
       }
     }
@@ -18657,20 +18738,21 @@ class Paragraph {
     });
   }
   draw(ctx, top, ascent, deltaLeft, isLineFirst, textAlign, lineHeight) {
+    var _a;
     let baseline = top + ascent,
       text = this.text,
-      left = this.left + deltaLeft;
+      left = this.left + deltaLeft + (null !== (_a = this.space) && void 0 !== _a ? _a : 0) / 2;
     baseline += this.top;
     let direction = this.direction;
     if (this.verticalEllipsis) text = this.ellipsisStr, direction = "vertical", baseline -= this.ellipsisWidth / 2;else {
       if ("hide" === this.ellipsis) return;
       if ("add" === this.ellipsis) text += this.ellipsisStr, "right" !== textAlign && "end" !== textAlign || (left -= this.ellipsisWidth);else if ("replace" === this.ellipsis) {
         const index = getStrByWithCanvas(text, ("vertical" === direction ? this.height : this.width) - this.ellipsisWidth + this.ellipsisOtherParagraphWidth, this.character, text.length - 1);
-        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) {
+        if (text = text.slice(0, index), text += this.ellipsisStr, "right" === textAlign || "end" === textAlign) if ("vertical" === direction) ;else {
           const {
             width: width
           } = measureTextCanvas(this.text.slice(index), this.character, this.ascentDescentMode);
-          "vertical" === direction || (left -= this.ellipsisWidth - width);
+          left -= this.ellipsisWidth - width;
         }
       }
     }
@@ -18685,7 +18767,7 @@ class Paragraph {
     const {
       lineWidth = 1
     } = this.character;
-    if (this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline), this.character.fill && ctx.fillText(text, left, baseline), this.character.fill) if (this.character.lineThrough || this.character.underline) {
+    if (this.character.stroke && lineWidth && ctx.strokeText(text, left, baseline + this.dy), this.character.fill && ctx.fillText(text, left, baseline + this.dy), this.character.fill) if (this.character.lineThrough || this.character.underline) {
       if (this.character.underline) {
         const top = 1 + baseline,
           lrtb = getFixedLRTB(left, left + (this.widthOrigin || this.width), top, top + (this.character.fontSize ? Math.max(1, Math.floor(this.character.fontSize / 10)) : 1));
@@ -18814,7 +18896,7 @@ class Image extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    return updateBoundsOfCommonOuterBorder(attribute, imageTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), application.graphicService.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, this), aabbBounds;
+    return updateBoundsOfCommonOuterBorder(attribute, imageTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, imageTheme, !1, this), aabbBounds;
   }
   getDefaultAttribute(name) {
     return DefaultImageAttribute[name];
@@ -19157,7 +19239,7 @@ class RichText extends Graphic {
       maxWidth = richtextTheme.maxWidth,
       maxHeight = richtextTheme.maxHeight,
       textAlign = richtextTheme.textAlign,
-      verticalDirection = null !== (_b = null !== (_a = attribute.textBaseline) && void 0 !== _a ? _a : richtextTheme.textBaseline) && void 0 !== _b ? _b : richtextTheme.verticalDirection,
+      textBaseline = null !== (_b = null !== (_a = attribute.textBaseline) && void 0 !== _a ? _a : richtextTheme.textBaseline) && void 0 !== _b ? _b : "top",
       editOptions: editOptions
     } = attribute;
     if (width > 0 && height > 0) aabbBounds.set(0, 0, width, height);else {
@@ -19172,7 +19254,7 @@ class RichText extends Graphic {
     }
     editOptions && editOptions.keepHeightWhileEmpty && !aabbBounds.height() && !(null === (_c = attribute.textConfig) || void 0 === _c ? void 0 : _c.length) && (aabbBounds.y2 = aabbBounds.y1 + (null !== (_d = attribute.fontSize) && void 0 !== _d ? _d : 12), aabbBounds.x2 = aabbBounds.x1 + 2);
     let deltaY = 0;
-    switch (verticalDirection) {
+    switch (textBaseline) {
       case "top":
         deltaY = 0;
         break;
@@ -19193,7 +19275,7 @@ class RichText extends Graphic {
       case "right":
         deltaX = -aabbBounds.width();
     }
-    return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
+    return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
   }
   needUpdateTags(keys) {
     return super.needUpdateTags(keys, RICHTEXT_UPDATE_TAG_KEY);
@@ -19411,7 +19493,7 @@ class Path extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+    updateBoundsOfCommonOuterBorder(attribute, pathTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     const {
       lineJoin = pathTheme.lineJoin
     } = attribute;
@@ -19468,7 +19550,7 @@ class Area extends Graphic {
     return getTheme$1(this).area;
   }
   updateAABBBounds(attribute, areaTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
+    this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds), this.setWidthHeightWithoutTransform(aabbBounds);
     const {
       lineJoin = areaTheme.lineJoin
     } = attribute;
@@ -19673,7 +19755,7 @@ class Arc extends Graphic {
       tb1: tb1,
       tb2: tb2
     } = application.graphicService.updateTempAABBBounds(aabbBounds);
-    updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2);
+    updateBoundsOfCommonOuterBorder(attribute, arcTheme, tb1), aabbBounds.union(tb1), tb1.setValue(tb2.x1, tb2.y1, tb2.x2, tb2.y2), this.setWidthHeightWithoutTransform(aabbBounds);
     const {
       lineJoin = arcTheme.lineJoin
     } = attribute;
@@ -19801,7 +19883,7 @@ class Polygon extends Graphic {
     return getTheme$1(this).polygon;
   }
   updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
+    this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1;
     const {
       lineJoin = polygonTheme.lineJoin
     } = attribute;
@@ -26866,6 +26948,7 @@ let BrowserContext2d = class {
     return this.nativeContext.createRadialGradient(x0, y0, r0, x1, y1, r1);
   }
   createConicGradient(x, y, startAngle, endAngle) {
+    if (this.nativeContext.createConicGradient && Math.abs(endAngle - startAngle - 2 * Math.PI) < .001) return this.nativeContext.createConicGradient(startAngle, x, y);
     let pattern,
       edit = !1;
     const ctx = this;
@@ -31436,7 +31519,9 @@ const delayMap$3 = {
 loadScrollbarComponent();
 let ScrollBar$1 = class ScrollBar extends AbstractComponent {
   constructor(attributes, options) {
-    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._onRailPointerDown = e => {
+    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._handleTouchMove = e => {
+      isValid$1(this._prePos) && e.preventDefault();
+    }, this._onRailPointerDown = e => {
       const {
           viewX: viewX,
           viewY: viewY
@@ -31480,8 +31565,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       const triggers = getEndTriggersOfDrag(),
         obj = "browser" === vglobal.env ? vglobal : this.stage;
       obj.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-        capture: !0,
-        passive: !0
+        capture: !0
       }), triggers.forEach(trigger => {
         obj.addEventListener(trigger, this._onSliderPointerUp);
       });
@@ -31502,7 +31586,6 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       } = this.getSliderRenderBounds();
       return "vertical" === direction ? (currentPos = y, delta = currentPos - this._prePos, currentScrollValue = delta / height) : (currentPos = x, delta = currentPos - this._prePos, currentScrollValue = delta / width), [currentPos, currentScrollValue];
     }, this._onSliderPointerMove = e => {
-      e.preventDefault();
       const {
         stopSliderMovePropagation = !0
       } = this.attribute;
@@ -31518,7 +31601,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
         preScrollRange = this.getScrollRange(),
         [currentPos, currentScrollValue] = this._computeScrollValue(e),
         range = [preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue];
-      this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
+      this._prePos = null, this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
         pre: preRange,
         value: clampRange$1(range, limitRange[0], limitRange[1])
       }), this._clearDragEvents();
@@ -31560,7 +31643,9 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       delayType = "throttle",
       delayTime = 0
     } = this.attribute;
-    this._rail && this._rail.addEventListener("pointerdown", delayMap$3[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown);
+    this._rail && this._rail.addEventListener("pointerdown", delayMap$3[delayType](this._onRailPointerDown, delayTime)), this._slider && this._slider.addEventListener("pointerdown", this._onSliderPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    });
   }
   render() {
     this._reset();
@@ -31674,8 +31759,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
     const triggers = getEndTriggersOfDrag(),
       obj = "browser" === vglobal.env ? vglobal : this.stage;
     obj.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-      capture: !0,
-      passive: !1
+      capture: !0
     }), triggers.forEach(trigger => {
       obj.removeEventListener(trigger, this._onSliderPointerUp);
     });
@@ -31683,6 +31767,11 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
   _reset() {
     this._sliderRenderBounds = null, this._sliderLimitRange = null;
   }
+  release(all) {
+    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    }), this._clearDragEvents();
+  }
 };
 ScrollBar$1.defaultAttributes = {
   direction: "horizontal",
@@ -32401,6 +32490,7 @@ class PopTip extends AbstractComponent {
       contentStyle = {},
       panel: panel,
       logoSymbol: logoSymbol,
+      poptipAnchor = "position",
       logoText: logoText,
       logoTextStyle = {},
       triangleMode = "default",
@@ -32412,7 +32502,8 @@ class PopTip extends AbstractComponent {
       visible: visible,
       state: state,
       dx = 0,
-      dy = 0
+      dy = 0,
+      positionBounds: positionBounds
     } = this.attribute;
     let {
       title = "",
@@ -32498,21 +32589,28 @@ class PopTip extends AbstractComponent {
         titleShape.setAttribute("maxLineWidth", maxSpace - buf), contentShape.setAttribute("maxLineWidth", maxSpace - buf), poptipHeight = parsedPadding[0] + parsedPadding[2], titleVisible && (poptipHeight += titleShape.AABBBounds.height() + space), poptipHeight += contentShape.AABBBounds.height();
       }
     }
-    const layout = "auto" === position;
+    const layout = "auto" === position || isArray$1(position),
+      positionList = isArray$1(position) ? position : this.positionList;
     let maxBBoxI,
       maxBBoxSize = -1 / 0;
-    for (let i = 0; i < this.positionList.length + 1; i++) {
-      const p = layout ? this.positionList[i === this.positionList.length ? maxBBoxI : i] : position;
+    for (let i = 0; i < positionList.length + 1; i++) {
+      const p = layout ? positionList[i === positionList.length ? maxBBoxI : i] : position;
       let symbolType = "arrow2Left",
         offsetX = (isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 4,
         offsetY = 0;
-      "top" === p || "bottom" === p || "left" === p || "right" === p ? symbolType = "arrow2Left" : "concise" === triangleMode && (symbolType = conciseSymbolMap[p], offsetX = ["tl", "bl", "rt", "rb"].includes(position) ? (isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2 : -(isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2, offsetY = ["tl", "tr", "lb", "rb"].includes(position) ? -(isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2 : (isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2);
+      "top" === p || "bottom" === p || "left" === p || "right" === p ? symbolType = "arrow2Left" : "concise" === triangleMode && (symbolType = conciseSymbolMap[p], offsetX = ["tl", "bl", "rt", "rb"].includes(p) ? (isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2 : -(isArray$1(symbolSize) ? symbolSize[0] : symbolSize) / 2, offsetY = ["tl", "tr", "lb", "rb"].includes(p) ? -(isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2 : (isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2);
       const {
         angle: angle,
         offset: offset
       } = this.getAngleAndOffset(p, popTipWidth, poptipHeight, isArray$1(spaceSize) ? spaceSize : [spaceSize, spaceSize - lineWidth], symbolType);
-      if (isBoolean$1(bgVisible)) {
-        const bgSymbol = group.createOrUpdateChild("poptip-symbol-panel", Object.assign(Object.assign({}, backgroundStyle), {
+      let bgSymbol,
+        anchorPoint = {
+          x: 0,
+          y: 0
+        };
+      if ("bounds" === poptipAnchor && positionBounds && (anchorPoint = this.calculateAnchorPoint(p, positionBounds)), isBoolean$1(bgVisible)) {
+        let bgRect;
+        bgSymbol = group.createOrUpdateChild("poptip-symbol-panel", Object.assign(Object.assign({}, backgroundStyle), {
           visible: bgVisible && (contentVisible || titleVisible),
           x: offsetX,
           y: offsetY,
@@ -32525,9 +32623,7 @@ class PopTip extends AbstractComponent {
           dy: offset[1] - (null !== (_j = backgroundStyle.space) && void 0 !== _j ? _j : 0),
           size: symbolSize,
           zIndex: 9
-        }), "symbol");
-        let bgRect;
-        isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel), bgRect = panel.panelSymbolType ? group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
+        }), "symbol"), isEmpty(null == state ? void 0 : state.panel) || (bgSymbol.states = state.panel), bgRect = panel.panelSymbolType ? group.createOrUpdateChild("poptip-rect-panel", Object.assign(Object.assign({}, backgroundStyle), {
           visible: bgVisible && (contentVisible || titleVisible),
           x: 0,
           y: 0,
@@ -32544,8 +32640,8 @@ class PopTip extends AbstractComponent {
         }), "rect"), isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
       }
       if (group.setAttributes({
-        x: -offset[0] + dx,
-        y: -offset[1] + dy,
+        x: -offset[0] + dx + anchorPoint.x,
+        y: -offset[1] + dy + anchorPoint.y,
         anchor: [offsetX, offsetY]
       }), logoSymbol) {
         const {
@@ -32573,20 +32669,87 @@ class PopTip extends AbstractComponent {
           zIndex: 10
         }), "text");
       }
-      if (!layout || !range) break;
+      if (!range) break;
       {
         _tBounds.setValue(0, 0, popTipWidth, poptipHeight).transformWithMatrix(group.globalTransMatrix);
         const b = _tBounds,
           stageBounds = new Bounds().setValue(0, 0, range[0], range[1]);
-        if (rectInsideAnotherRect(b, stageBounds, !1)) break;
-        {
-          const bbox = getRectIntersect(b, stageBounds, !1),
-            size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
-          size > maxBBoxSize && (maxBBoxSize = size, maxBBoxI = i);
+        if (layout) {
+          if (rectInsideAnotherRect(b, stageBounds, !1)) break;
+          {
+            const bbox = getRectIntersect(b, stageBounds, !1),
+              size = (bbox.x2 - bbox.x1) * (bbox.y2 - bbox.y1);
+            size > maxBBoxSize && (maxBBoxSize = size, maxBBoxI = i);
+          }
         }
+        if (["top", "bottom", "left", "right"].includes(p)) {
+          const isVerticalPosition = "top" === p || "bottom" === p,
+            isHorizontalPosition = "left" === p || "right" === p;
+          let mainDirectionOverlap = !1;
+          if (isVerticalPosition ? mainDirectionOverlap = "top" === p && b.y1 < 0 || "bottom" === p && b.y2 > stageBounds.y2 : isHorizontalPosition && (mainDirectionOverlap = "left" === p && b.x1 < 0 || "right" === p && b.x2 > stageBounds.x2), !mainDirectionOverlap) {
+            let secondaryOffset = 0;
+            const szNumber = (isArray$1(symbolSize) ? symbolSize[1] : symbolSize) / 2;
+            isVerticalPosition ? (b.x1 < 0 ? secondaryOffset = -b.x1 : b.x2 > stageBounds.x2 && (secondaryOffset = stageBounds.x2 - b.x2), group.setAttribute("x", group.attribute.x + secondaryOffset), bgSymbol.setAttribute("dx", min$1(max$1(bgSymbol.attribute.dx - secondaryOffset, szNumber), b.width() - szNumber))) : isHorizontalPosition && (b.y1 < 0 ? secondaryOffset = -b.y1 : b.y2 > stageBounds.y2 && (secondaryOffset = stageBounds.y2 - b.y2), group.setAttribute("y", group.attribute.y + secondaryOffset), bgSymbol.setAttribute("dy", min$1(max$1(bgSymbol.attribute.dy - secondaryOffset, szNumber), b.height() - szNumber)));
+            break;
+          }
+        }
+        if (!layout) break;
       }
     }
   }
+  calculateAnchorPoint(position, positionBounds) {
+    if (!positionBounds) return {
+      x: 0,
+      y: 0
+    };
+    const {
+        x: x,
+        y: y
+      } = this.attribute,
+      {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2
+      } = positionBounds,
+      width = x2 - x1,
+      height = y2 - y1;
+    switch (position) {
+      case "top":
+      case "tl":
+      case "tr":
+        return {
+          x: x1 + width / 2 - x,
+          y: y1 - y
+        };
+      case "bottom":
+      case "bl":
+      case "br":
+        return {
+          x: x1 + width / 2 - x,
+          y: y2 - y
+        };
+      case "left":
+      case "lt":
+      case "lb":
+        return {
+          x: x1 - x,
+          y: y1 + height / 2 - y
+        };
+      case "right":
+      case "rt":
+      case "rb":
+        return {
+          x: x2 - x,
+          y: y1 + height / 2 - y
+        };
+      default:
+        return {
+          x: 0,
+          y: 0
+        };
+    }
+  }
   getAngleAndOffset(position, width, height, size, symbolType) {
     const sizeH = "arrow2Left" === symbolType ? size[1] / 2 : size[1];
     switch (position) {
@@ -32748,10 +32911,12 @@ let PopTipRenderContribution = class {
       this.poptipComponent.setAttributes(Object.assign(Object.assign({
         visibleAll: !0,
         pickable: !1,
-        childrenPickable: !1
+        childrenPickable: !1,
+        poptipAnchor: "bounds"
       }, poptip), {
         x: matrix.e,
-        y: matrix.f
+        y: matrix.f,
+        positionBounds: graphic.globalAABBBounds
       })), drawContext.stage.tryInitInteractiveLayer();
       const interactiveLayer = drawContext.stage.getLayer("_builtin_interactive");
       interactiveLayer && interactiveLayer.add(this.poptipComponent);
@@ -33505,10 +33670,11 @@ function getPolygonPath(points, closed) {
 }
 function textIntersect(textA, textB, sep) {
   var _a;
-  let a, b;
-  const angle = null === (_a = textA.attribute) || void 0 === _a ? void 0 : _a.angle,
-    isAABBIntersects = (textA, textB, sep) => (a = textA.AABBBounds, b = textB.AABBBounds, sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2));
-  return isAngleHorizontal(angle, Number.EPSILON) ? isAABBIntersects(textA, textB, sep) : (a = textA.OBBBounds, b = textB.OBBBounds, !a || !b || a.empty() || b.empty() ? isAABBIntersects(textA, textB, sep) : a.intersects(b));
+  const angle = null === (_a = textA.attribute) || void 0 === _a ? void 0 : _a.angle;
+  if (isAngleHorizontal(angle, Number.EPSILON)) return sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds);
+  const a = textA.OBBBounds,
+    b = textB.OBBBounds;
+  return !a || !b || a.empty() || b.empty() ? sep > aabbSeparation(textA.AABBBounds, textB.AABBBounds) : a.intersects(b) || sep > obbSeparation(a, b);
 }
 function hasOverlap$1(items, pad) {
   for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (b = items[i], textIntersect(a, b, pad)) return !0;
@@ -35737,7 +35903,9 @@ class LinearScale extends ContinuousScale {
     super(...arguments), this.type = ScaleEnum.Linear;
   }
   clone() {
-    return new LinearScale().domain(this._domain, !0).range(this._range, !0).unknown(this._unknown).clamp(this.clamp(), null, !0).interpolate(this._interpolate);
+    var _a;
+    const scale = new LinearScale();
+    return scale.domain(this._domain, !0).range(this._range, !0).unknown(this._unknown).clamp(this.clamp(), null, !0).interpolate(this._interpolate), this._niceType && (scale._niceType = this._niceType, scale._domainValidator = this._domainValidator, scale._niceDomain = null === (_a = this._niceDomain) || void 0 === _a ? void 0 : _a.slice()), scale;
   }
   tickFormat() {
     return () => {};
@@ -39035,13 +39203,13 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
       const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
         triggers = getEndTriggersOfDrag();
       evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0,
-        passive: !1
+        capture: !0
+      }), this.addEventListener("pointermove", this._onHandlerPointerMove, {
+        capture: !0
       }), triggers.forEach(trigger => {
         evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
       });
     }, this._pointerMove = e => {
-      e.preventDefault();
       const {
           start: startAttr,
           end: endAttr,
@@ -39058,7 +39226,7 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         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), brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this._activeCache.lastPos = pos, this.setStateAttr(start, end, !0), realTime && this._dispatchEvent("change", {
+      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
@@ -39134,10 +39302,11 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
     const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
       triggers = getEndTriggersOfDrag();
     evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
-      capture: !0,
-      passive: !1
+      capture: !0
     }), triggers.forEach(trigger => {
       evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+    }), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
+      capture: !0
     });
   }
   _onHandlerPointerEnter(e) {
@@ -39857,17 +40026,26 @@ function commonLineClipIn(line, label, duration, delay, easing) {
     l.animate().wait(delay + startSymbolDuration + index * stepDuration).to({
       clipRange: 1
     }, stepDuration, easing);
-  }), graphicFadeIn(line.endSymbol, delay + startSymbolDuration + lineDuration, endSymbolDuration, easing), graphicFadeIn(label.getTextShape(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing), graphicFadeIn(label.getBgRect(), delay + startSymbolDuration + lineDuration + endSymbolDuration, labelDuration, easing);
+  }), graphicFadeIn(line.endSymbol, delay + startSymbolDuration + lineDuration, endSymbolDuration, easing), array(label).forEach(labelNode => {
+    const delayTime = delay + startSymbolDuration + lineDuration + endSymbolDuration;
+    graphicFadeIn(labelNode.getTextShape(), delayTime, labelDuration, easing), graphicFadeIn(labelNode.getBgRect(), delayTime, labelDuration, easing);
+  });
 }
 
 function commonLineFadeIn(line, label, duration, delay, easing) {
-  segmentFadeIn(line, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
+  segmentFadeIn(line, delay, duration, easing), array(label).forEach(labelNode => {
+    tagFadeIn(labelNode, delay, duration, easing);
+  });
 }
 function areaFadeIn(area, label, duration, delay, easing) {
-  graphicFadeIn(area, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
+  graphicFadeIn(area, delay, duration, easing), array(label).forEach(labelNode => {
+    tagFadeIn(labelNode, delay, duration, easing);
+  });
 }
 function arcAreaFadeIn(area, label, duration, delay, easing) {
-  graphicFadeIn(area, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
+  graphicFadeIn(area, delay, duration, easing), array(label).forEach(labelNode => {
+    tagFadeIn(labelNode, delay, duration, easing);
+  });
 }
 function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
   var _a;
@@ -39875,13 +40053,19 @@ function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
 }
 
 function commonLineFadeOut(line, label, duration, delay, easing) {
-  segmentFadeOut(line, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
+  segmentFadeOut(line, delay, duration, easing), array(label).forEach(labelNode => {
+    tagFadeOut(labelNode, delay, duration, easing);
+  });
 }
 function areaFadeOut(area, label, duration, delay, easing) {
-  graphicFadeOut(area, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
+  graphicFadeOut(area, delay, duration, easing), array(label).forEach(labelNode => {
+    tagFadeOut(labelNode, delay, duration, easing);
+  });
 }
 function arcAreaFadeOut(area, label, duration, delay, easing) {
-  graphicFadeOut(area, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
+  graphicFadeOut(area, delay, duration, easing), array(label).forEach(labelNode => {
+    tagFadeOut(labelNode, delay, duration, easing);
+  });
 }
 function pointFadeOut(itemLine, decorativeLine, item, duration, delay, easing) {
   var _a;
@@ -40053,6 +40237,57 @@ const DefaultExitMarkerAnimation = {
   delay: 0
 };
 
+class MarkLabelMixin {
+  getLabel() {
+    return this._label;
+  }
+  _addMarkLabels(container, labelName, defaultLabelAttrs) {
+    const {
+        label: label,
+        state: state
+      } = this.attribute,
+      labelStates = array(null == state ? void 0 : state.label),
+      labelBackgroundStates = array(null == state ? void 0 : state.labelBackground),
+      labelShapes = array(label).map((labelAttrs, index) => {
+        var _a, _b;
+        const finalLabelAttrs = merge$1({}, defaultLabelAttrs, labelAttrs),
+          markLabel = new Tag(Object.assign(Object.assign({}, finalLabelAttrs), {
+            state: {
+              panel: merge$1({}, DEFAULT_STATES$2, null !== (_a = labelBackgroundStates[index]) && void 0 !== _a ? _a : last(labelBackgroundStates)),
+              text: merge$1({}, DEFAULT_STATES$2, null !== (_b = labelStates[index]) && void 0 !== _b ? _b : last(labelStates))
+            }
+          }));
+        return markLabel.name = labelName, container.add(markLabel), this.setLabelPos(markLabel, finalLabelAttrs), markLabel;
+      });
+    this._label = 1 === array(labelShapes).length ? labelShapes[0] : labelShapes;
+  }
+  _updateMarkLabels(defaultLabelAttrs) {
+    const {
+        label: label,
+        state: state
+      } = this.attribute,
+      labelShapes = array(this._label),
+      labelStates = array(null == state ? void 0 : state.label),
+      labelBackgroundStates = array(null == state ? void 0 : state.labelBackground);
+    if (labelShapes.length) {
+      const labels = array(label);
+      labelShapes.forEach((labelItem, index) => {
+        var _a, _b;
+        const finalLabelAttrs = merge$1({}, defaultLabelAttrs, labels[index]);
+        labelItem.setAttributes(Object.assign(Object.assign({
+          dx: 0,
+          dy: 0
+        }, finalLabelAttrs), {
+          state: {
+            panel: merge$1({}, DEFAULT_STATES$2, null !== (_a = labelBackgroundStates[index]) && void 0 !== _a ? _a : last(labelBackgroundStates)),
+            text: merge$1({}, DEFAULT_STATES$2, null !== (_b = labelStates[index]) && void 0 !== _b ? _b : last(labelStates))
+          }
+        })), this.setLabelPos(labelItem, finalLabelAttrs);
+      });
+    }
+  }
+}
+
 class MarkCommonLine extends Marker {
   constructor() {
     super(...arguments), this.name = "markCommonLine", this.defaultUpdateAnimation = DefaultUpdateMarkLineAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
@@ -40060,24 +40295,20 @@ class MarkCommonLine extends Marker {
   getLine() {
     return this._line;
   }
-  getLabel() {
-    return this._label;
-  }
-  setLabelPos() {
+  setLabelPos(labelNode, labelAttrs) {
     const {
-        label = {},
         limitRect: limitRect
       } = this.attribute,
       {
         position: position,
         confine: confine,
         autoRotate: autoRotate
-      } = label,
-      labelPoint = this.getPointAttrByPosition(position),
+      } = labelAttrs,
+      labelPoint = this.getPointAttrByPosition(position, labelAttrs),
       labelAngle = position.toString().toLocaleLowerCase().includes("start") ? this._line.getStartAngle() || 0 : this._line.getEndAngle() || 0;
-    if (this._label.setAttributes(Object.assign(Object.assign({}, labelPoint.position), {
-      angle: autoRotate ? this.getRotateByAngle(labelPoint.angle) : 0,
-      textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), label.textStyle)
+    if (labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint.position), {
+      angle: autoRotate ? this.getRotateByAngle(labelPoint.angle, labelAttrs) : 0,
+      textStyle: Object.assign(Object.assign({}, this.getTextStyle(position, labelAngle, autoRotate)), labelAttrs.textStyle)
     })), limitRect && confine) {
       const {
         x: x,
@@ -40085,7 +40316,7 @@ class MarkCommonLine extends Marker {
         width: width,
         height: height
       } = limitRect;
-      limitShapeInBounds(this._label, {
+      limitShapeInBounds(labelNode, {
         x1: x,
         y1: y,
         x2: x + width,
@@ -40094,36 +40325,14 @@ class MarkCommonLine extends Marker {
     }
   }
   initMarker(container) {
-    const {
-        label: label,
-        state: state
-      } = this.attribute,
-      line = this.createSegment();
-    line.name = "mark-common-line-line", this._line = line, container.add(line);
-    const markLabel = new Tag(Object.assign(Object.assign({}, label), {
-      state: {
-        panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-        text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-      }
-    }));
-    markLabel.name = "mark-common-line-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
+    const line = this.createSegment();
+    line.name = "mark-common-line-line", this._line = line, container.add(line), this.addMarkLineLabels(container);
   }
   updateMarker() {
-    const {
-      label: label,
-      state: state
-    } = this.attribute;
-    this.setLineAttributes(), this._label && (this._label.setAttributes(Object.assign(Object.assign({
-      dx: 0,
-      dy: 0
-    }, label), {
-      state: {
-        panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-        text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-      }
-    })), this.setLabelPos());
+    this.setLineAttributes(), this.updateMarkLineLabels();
   }
 }
+mixin(MarkCommonLine, MarkLabelMixin);
 
 const FUZZY_EQUAL_DELTA = .001;
 const DEFAULT_MARK_LINE_THEME = {
@@ -40312,6 +40521,7 @@ const DEFAULT_MARK_ARC_LINE_THEME = {
     lineWidth: 0
   },
   label: {
+    autoRotate: !0,
     position: IMarkCommonArcLabelPosition.arcOuterMiddle,
     refX: 0,
     refY: 0,
@@ -40366,6 +40576,7 @@ const DEFAULT_MARK_AREA_THEME = {
 const DEFAULT_MARK_ARC_AREA_THEME = {
   interactive: !0,
   label: {
+    autoRotate: !0,
     position: IMarkCommonArcLabelPosition.arcOuterMiddle,
     textStyle: {
       fill: "#fff",
@@ -40621,15 +40832,12 @@ class MarkLine extends MarkCommonLine {
   constructor(attributes, options) {
     super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkLine.defaultAttributes, attributes)), this.name = "markLine";
   }
-  getPointAttrByPosition(position) {
+  getPointAttrByPosition(position, labelAttrs) {
     var _a;
     const {
-        label = {}
-      } = this.attribute,
-      {
         refX = 0,
         refY = 0
-      } = label,
+      } = labelAttrs,
       points = this._line.getMainSegmentPoints(),
       lineEndAngle = null !== (_a = this._line.getEndAngle()) && void 0 !== _a ? _a : 0,
       labelAngle = (lineEndAngle),
@@ -40655,9 +40863,9 @@ class MarkLine extends MarkCommonLine {
       angle: labelAngle
     };
   }
-  getRotateByAngle(angle) {
+  getRotateByAngle(angle, labelAttrs) {
     var _a;
-    return (isPostiveXAxis(angle) ? angle : angle - Math.PI) + (null !== (_a = this.attribute.label.refAngle) && void 0 !== _a ? _a : 0);
+    return (isPostiveXAxis(angle) ? angle : angle - Math.PI) + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0);
   }
   getTextStyle(position, labelAngle, autoRotate) {
     return fuzzyEqualNumber(Math.abs(labelAngle), Math.PI / 2, FUZZY_EQUAL_DELTA) || fuzzyEqualNumber(Math.abs(labelAngle), 3 * Math.PI / 2, FUZZY_EQUAL_DELTA) ? getTextAlignAttrOfVerticalDir(autoRotate, labelAngle, position) : isPostiveXAxis(labelAngle) ? DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.postiveXAxis[position] : DEFAULT_CARTESIAN_MARK_LINE_TEXT_STYLE_MAP.negativeXAxis[position];
@@ -40723,6 +40931,12 @@ class MarkLine extends MarkCommonLine {
       });else if (!isValidNumber$1(point.x) || !isValidNumber$1(point.y)) return void (validFlag = !1);
     }), validFlag;
   }
+  addMarkLineLabels(container) {
+    this._addMarkLabels(container, "mark-common-line-label", MarkLine.defaultAttributes.label);
+  }
+  updateMarkLineLabels() {
+    this._updateMarkLabels(MarkLine.defaultAttributes.label);
+  }
 }
 MarkLine.defaultAttributes = DEFAULT_MARK_LINE_THEME;
 
@@ -40737,9 +40951,6 @@ class MarkArea extends Marker {
   getArea() {
     return this._area;
   }
-  getLabel() {
-    return this._label;
-  }
   constructor(attributes, options) {
     super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArea.defaultAttributes, attributes)), this.name = "markArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
   }
@@ -40756,24 +40967,21 @@ class MarkArea extends Marker {
       };
     return (position.includes("left") || position.includes("Left")) && (result.x = x1), (position.includes("right") || position.includes("Right")) && (result.x = x2), (position.includes("top") || position.includes("Top")) && (result.y = y1), (position.includes("bottom") || position.includes("Bottom")) && (result.y = y2), result;
   }
-  setLabelPos() {
+  setLabelPos(labelNode, labelAttrs) {
     var _a;
-    if (this._label && this._area) {
-      const {
-          label = {}
-        } = this.attribute,
-        labelPosition = null !== (_a = label.position) && void 0 !== _a ? _a : "middle",
+    if (this._area) {
+      const labelPosition = null !== (_a = labelAttrs.position) && void 0 !== _a ? _a : "middle",
         labelPoint = this.getPointAttrByPosition(labelPosition);
-      if (this._label.setAttributes(Object.assign(Object.assign({}, labelPoint), {
-        textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-      })), this.attribute.limitRect && label.confine) {
+      if (labelNode.setAttributes(Object.assign(Object.assign({}, labelPoint), {
+        textStyle: Object.assign(Object.assign({}, DEFAULT_CARTESIAN_MARK_AREA_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle)
+      })), this.attribute.limitRect && labelAttrs.confine) {
         const {
           x: x,
           y: y,
           width: width,
           height: height
         } = this.attribute.limitRect;
-        limitShapeInBounds(this._label, {
+        limitShapeInBounds(labelNode, {
           x1: x,
           y1: y,
           x2: x + width,
@@ -40785,40 +40993,23 @@ class MarkArea extends Marker {
   initMarker(container) {
     const {
         points: points,
-        label: label,
         areaStyle: areaStyle,
         state: state
       } = this.attribute,
       area = graphicCreator.polygon(Object.assign({
         points: points
       }, areaStyle));
-    area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "mark-area-polygon", this._area = area, container.add(area);
-    const markLabel = new Tag(Object.assign(Object.assign({}, label), {
-      state: {
-        panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-        text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-      }
-    }));
-    markLabel.name = "mark-area-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
+    area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "mark-area-polygon", this._area = area, container.add(area), this._addMarkLabels(container, "mark-area-label", MarkArea.defaultAttributes.label);
   }
   updateMarker() {
     const {
       points: points,
-      label: label,
       areaStyle: areaStyle,
       state: state
     } = this.attribute;
     this._area && (this._area.setAttributes(Object.assign({
       points: points
-    }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && this._label.setAttributes(Object.assign(Object.assign({
-      dx: 0,
-      dy: 0
-    }, label), {
-      state: {
-        panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-        text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-      }
-    })), this.setLabelPos();
+    }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._updateMarkLabels(MarkArea.defaultAttributes.label);
   }
   isValidPoints() {
     const {
@@ -40831,7 +41022,7 @@ class MarkArea extends Marker {
     }), validFlag;
   }
 }
-MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
+MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME, mixin(MarkArea, MarkLabelMixin);
 
 loadMarkArcLineComponent();
 function registerMarkArcLineAnimate() {
@@ -40842,24 +41033,19 @@ class MarkArcLine extends MarkCommonLine {
     MarkArcLine._animate && this._animationConfig && MarkArcLine._animate(this._line, this._label, this._animationConfig, state);
   }
   constructor(attributes, options) {
-    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcLine.defaultAttributes, attributes, {
-      label: {
-        autoRotate: !0
-      }
-    })), this.name = "markArcLine";
+    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcLine.defaultAttributes, attributes)), this.name = "markArcLine";
   }
-  getPointAttrByPosition(direction) {
+  getPointAttrByPosition(direction, labelAttrs) {
     const {
         center: center,
         radius: radius,
         startAngle: startAngle,
-        endAngle: endAngle,
-        label: label
+        endAngle: endAngle
       } = this.attribute,
       {
         refX = 0,
         refY = 0
-      } = label;
+      } = labelAttrs;
     let angle;
     switch (direction) {
       case IMarkCommonArcLabelPosition.arcInnerStart:
@@ -40889,9 +41075,9 @@ class MarkArcLine extends MarkCommonLine {
   getTextStyle(position) {
     return DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[position];
   }
-  getRotateByAngle(angle) {
+  getRotateByAngle(angle, labelAttrs) {
     var _a;
-    return angle - Math.PI / 2 + (null !== (_a = this.attribute.label.refAngle) && void 0 !== _a ? _a : 0);
+    return angle - Math.PI / 2 + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0);
   }
   createSegment() {
     const {
@@ -40948,6 +41134,12 @@ class MarkArcLine extends MarkCommonLine {
   isValidPoints() {
     return !0;
   }
+  addMarkLineLabels(container) {
+    this._addMarkLabels(container, "mark-common-line-label", MarkArcLine.defaultAttributes.label);
+  }
+  updateMarkLineLabels() {
+    this._updateMarkLabels(MarkArcLine.defaultAttributes.label);
+  }
 }
 MarkArcLine.defaultAttributes = DEFAULT_MARK_ARC_LINE_THEME;
 
@@ -40962,29 +41154,21 @@ class MarkArcArea extends Marker {
   getArea() {
     return this._area;
   }
-  getLabel() {
-    return this._label;
-  }
   constructor(attributes, options) {
-    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcArea.defaultAttributes, attributes, {
-      label: {
-        autoRotate: !0
-      }
-    })), this.name = "markArcArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
+    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcArea.defaultAttributes, attributes)), this.name = "markArcArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
   }
-  getPointAttrByPosition(position) {
+  getPointAttrByPosition(position, labelAttrs) {
     const {
         center: center,
         innerRadius: innerRadius,
         outerRadius: outerRadius,
         startAngle: startAngle,
-        endAngle: endAngle,
-        label: label
+        endAngle: endAngle
       } = this.attribute,
       {
         refX = 0,
         refY = 0
-      } = label;
+      } = labelAttrs;
     let radius, angle;
     switch (position) {
       case IMarkCommonArcLabelPosition.center:
@@ -41019,28 +41203,25 @@ class MarkArcArea extends Marker {
       angle: angle
     };
   }
-  setLabelPos() {
+  setLabelPos(labelNode, labelAttrs) {
     var _a;
-    if (this._label && this._area) {
+    if (this._area) {
       const {
-          label = {}
-        } = this.attribute,
-        {
           position: labelPosition = "arcInnerMiddle",
           autoRotate: autoRotate
-        } = label,
-        labelAttr = this.getPointAttrByPosition(labelPosition);
-      if (this._label.setAttributes(Object.assign(Object.assign({}, labelAttr.position), {
-        angle: autoRotate ? labelAttr.angle - Math.PI / 2 + (null !== (_a = label.refAngle) && void 0 !== _a ? _a : 0) : 0,
-        textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), label.textStyle)
-      })), this.attribute.limitRect && label.confine) {
+        } = labelAttrs,
+        labelAttr = this.getPointAttrByPosition(labelPosition, labelAttrs);
+      if (labelNode.setAttributes(Object.assign(Object.assign({}, labelAttr.position), {
+        angle: autoRotate ? labelAttr.angle - Math.PI / 2 + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0) : 0,
+        textStyle: Object.assign(Object.assign({}, DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[labelPosition]), labelAttrs.textStyle)
+      })), this.attribute.limitRect && labelAttrs.confine) {
         const {
           x: x,
           y: y,
           width: width,
           height: height
         } = this.attribute.limitRect;
-        limitShapeInBounds(this._label, {
+        limitShapeInBounds(labelNode, {
           x1: x,
           y1: y,
           x2: x + width,
@@ -41057,7 +41238,6 @@ class MarkArcArea extends Marker {
         startAngle: startAngle,
         endAngle: endAngle,
         areaStyle: areaStyle,
-        label: label,
         state: state
       } = this.attribute,
       area = graphicCreator.arc(Object.assign({
@@ -41068,14 +41248,7 @@ class MarkArcArea extends Marker {
         startAngle: startAngle,
         endAngle: endAngle
       }, areaStyle));
-    area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "polar-mark-area-area", this._area = area, container.add(area);
-    const markLabel = new Tag(Object.assign(Object.assign({}, label), {
-      state: {
-        panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-        text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-      }
-    }));
-    markLabel.name = "mark-area-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
+    area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "polar-mark-area-area", this._area = area, container.add(area), this._addMarkLabels(container, "mark-area-label", MarkArcArea.defaultAttributes.label);
   }
   updateMarker() {
     const {
@@ -41095,21 +41268,13 @@ class MarkArcArea extends Marker {
       outerRadius: outerRadius,
       startAngle: startAngle,
       endAngle: endAngle
-    }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && (this._label.setAttributes(Object.assign(Object.assign({
-      dx: 0,
-      dy: 0
-    }, label), {
-      state: {
-        panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-        text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
-      }
-    })), this.setLabelPos());
+    }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._updateMarkLabels(MarkArcArea.defaultAttributes.label);
   }
   isValidPoints() {
     return !0;
   }
 }
-MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME;
+MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME, mixin(MarkArcArea, MarkLabelMixin);
 
 loadMarkPointComponent();
 function registerMarkPointAnimate() {
@@ -42638,14 +42803,13 @@ class Slider extends AbstractComponent {
       const triggers = getEndTriggersOfDrag(),
         obj = "browser" === vglobal.env ? vglobal : this.stage;
       obj.addEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0,
-        passive: !1
+        capture: !0
       }), triggers.forEach(trigger => {
         obj.addEventListener(trigger, this._onHandlerPointerUp);
       });
     }, this._onHandlerPointerMove = e => {
       var _a, _b;
-      e.preventDefault(), this._isChanging = !0;
+      this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -42679,13 +42843,12 @@ class Slider extends AbstractComponent {
       const triggers = getEndTriggersOfDrag(),
         obj = "browser" === vglobal.env ? vglobal : this.stage;
       obj.addEventListener("pointermove", this._onTrackPointerMove, {
-        capture: !0,
-        passive: !1
+        capture: !0
       }), triggers.forEach(trigger => {
         obj.addEventListener(trigger, this._onTrackPointerUp);
       });
     }, this._onTrackPointerMove = e => {
-      e.preventDefault(), this._isChanging = !0;
+      this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -43060,13 +43223,11 @@ class Slider extends AbstractComponent {
     const triggers = getEndTriggersOfDrag(),
       obj = "browser" === vglobal.env ? vglobal : this.stage;
     obj.removeEventListener("pointermove", this._onHandlerPointerMove, {
-      capture: !0,
-      passive: !1
+      capture: !0
     }), triggers.forEach(trigger => {
       obj.removeEventListener(trigger, this._onHandlerPointerUp);
     }), obj.removeEventListener("pointermove", this._onTrackPointerMove, {
-      capture: !0,
-      passive: !1
+      capture: !0
     }), triggers.forEach(trigger => {
       obj.removeEventListener(trigger, this._onTrackPointerUp);
     });
@@ -44449,13 +44610,13 @@ class ContinuousPlayer extends BasePlayer {
 
 var IOperateType;
 !function (IOperateType) {
-  IOperateType.drawStart = "drawStart", IOperateType.drawEnd = "drawEnd", IOperateType.drawing = "drawing", IOperateType.moving = "moving", IOperateType.moveStart = "moveStart", IOperateType.moveEnd = "moveEnd", IOperateType.brushClear = "brushClear";
+  IOperateType.drawStart = "drawStart", IOperateType.drawEnd = "drawEnd", IOperateType.drawing = "drawing", IOperateType.moving = "moving", IOperateType.moveStart = "moveStart", IOperateType.moveEnd = "moveEnd", IOperateType.brushActive = "brushActive", IOperateType.brushClear = "brushClear";
 }(IOperateType || (IOperateType = {}));
 
 const DEFAULT_BRUSH_ATTRIBUTES = {
   trigger: "pointerdown",
   updateTrigger: "pointermove",
-  endTrigger: "pointerup",
+  endTrigger: ["pointerup", "pointerleave"],
   resetTrigger: "pointerupoutside",
   hasMask: !0,
   brushMode: "single",
@@ -44471,10 +44632,10 @@ const DEFAULT_BRUSH_ATTRIBUTES = {
   delayType: "throttle",
   delayTime: 10,
   interactiveRange: {
-    y1: -1 / 0,
-    y2: 1 / 0,
-    x1: -1 / 0,
-    x2: 1 / 0
+    minY: -1 / 0,
+    maxY: 1 / 0,
+    minX: -1 / 0,
+    maxX: 1 / 0
   }
 };
 const DEFAULT_SIZE_THRESHOLD = 5;
@@ -44490,83 +44651,36 @@ const delayMap$1 = {
 loadBrushComponent();
 let Brush$1 = class Brush extends AbstractComponent {
   constructor(attributes, options) {
-    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._isDrawedBeforeEnd = !1, this._isDownBeforeUpOutside = !1, this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._onBrushStart = e => {
-      var _a;
-      if (this._outOfInteractiveRange(e)) return void (this._isDownBeforeUpOutside = !0);
-      e.stopPropagation();
-      const brushMoved = null === (_a = this.attribute.brushMoved) || void 0 === _a || _a;
-      this._activeMoveState = brushMoved && this._isPosInBrushMask(e), this._activeDrawState = !this._activeMoveState, this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e);
-    }, this._onBrushing = e => {
-      this._outOfInteractiveRange(e) || ((this._activeDrawState || this._activeMoveState) && e.stopPropagation(), this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e));
-    }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
-      var _a;
-      if (!this._activeDrawState && !this._activeMoveState) return;
-      e.preventDefault();
+    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._firstUpdate = !0, this._onBrushStart = e => {
+      if (this._outOfInteractiveRange(e)) return void (this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)));
       const {
-        removeOnClick = !0
+        updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
+        endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
+        brushMoved = !0
       } = this.attribute;
-      this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick ? ((null === (_a = this._operatingMask) || void 0 === _a ? void 0 : _a._AABBBounds.empty()) && this._dispatchEvent(IOperateType.brushClear, {
-        operateMask: this._operatingMask,
-        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-        event: e
-      }), this._container.incrementalClearChild(), this._brushMaskAABBBoundsDict = {}) : (this._activeDrawState && this._dispatchEvent(IOperateType.drawEnd, {
-        operateMask: this._operatingMask,
-        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-        event: e
-      }), this._activeMoveState && this._dispatchEvent(IOperateType.moveEnd, {
-        operateMask: this._operatingMask,
-        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-        event: e
-      })), this._activeDrawState = !1, this._activeMoveState = !1, this._isDrawedBeforeEnd = !1, this._operatingMask && this._operatingMask.setAttribute("pickable", !1);
+      array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd)), e.stopPropagation(), this._firstUpdate = !0, this._activeMoveState = brushMoved && this._isPosInBrushMask(e), this._activeDrawState = !this._activeMoveState, this._startPos = this.eventPosToStagePos(e), this._cacheDrawPoints = [this._startPos];
+    }, this._onBrushing = e => {
+      this._outOfInteractiveRange(e) || (e.stopPropagation(), this._firstUpdate ? (this._activeDrawState && this._initDraw(e), this._activeMoveState && this._initMove(e), this._firstUpdate = !1) : (this._activeDrawState && this._drawing(e), this._activeMoveState && this._moving(e)));
+    }, this._onBrushingWithDelay = 0 === this.attribute.delayTime ? this._onBrushing : delayMap$1[this.attribute.delayType](this._onBrushing, this.attribute.delayTime), this._onBrushEnd = e => {
+      this._releaseBrushUpdateEvents(), e.preventDefault(), this._activeDrawState && this._drawEnd(e), this._activeMoveState && this._moveEnd(e), this._activeDrawState = !1, this._activeMoveState = !1;
     }, this._onBrushClear = e => {
-      e.preventDefault();
-      const {
-        removeOnClick = !0
-      } = this.attribute;
-      this._isDownBeforeUpOutside && removeOnClick && (this._dispatchEvent(IOperateType.brushClear, {
-        operateMask: this._operatingMask,
-        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-        event: e
-      }), this._container.incrementalClearChild(), this._brushMaskAABBBoundsDict = {}), this._activeDrawState = !1, this._activeMoveState = !1, this._isDrawedBeforeEnd = !1, this._isDownBeforeUpOutside = !1, this._operatingMask && this._operatingMask.setAttribute("pickable", !1);
+      e.preventDefault(), this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)), this._activeDrawState = !1, this._activeMoveState = !1;
     };
   }
   _bindBrushEvents() {
-    if (this.attribute.disableTriggerEvent) return;
+    if (this.releaseBrushEvents(), this.attribute.disableTriggerEvent) return;
     const {
       trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
-      updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
-      endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
       resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
     } = this.attribute;
-    array(trigger).forEach(t => vglobal.addEventListener(t, this._onBrushStart)), array(updateTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushEnd)), array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
-  }
-  _isPosInBrushMask(e) {
-    const pos = this.eventPosToStagePos(e),
-      brushMasks = this._container.getChildren();
-    for (let i = 0; i < brushMasks.length; i++) {
-      const {
-          points = [],
-          dx = 0,
-          dy = 0
-        } = brushMasks[i].attribute,
-        pointsConsiderOffset = points.map(point => ({
-          x: point.x + dx,
-          y: point.y + dy
-        }));
-      if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) return this._operatingMask = brushMasks[i], !0;
-    }
-    return !1;
+    array(trigger).forEach(t => this.stage.addEventListener(t, this._onBrushStart)), array(resetTrigger).forEach(t => this.stage.addEventListener(t, this._onBrushClear));
   }
   _initDraw(e) {
     const {
         brushMode: brushMode
       } = this.attribute,
       pos = this.eventPosToStagePos(e);
-    this._cacheDrawPoints = [pos], this._isDrawedBeforeEnd = !1, "single" === brushMode && (this._brushMaskAABBBoundsDict = {}, this._container.incrementalClearChild()), this._addBrushMask(), this._dispatchEvent(IOperateType.drawStart, {
-      operateMask: this._operatingMask,
-      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-      event: e
-    });
+    this._cacheDrawPoints.push(pos), "single" === brushMode && this._clearMask(), this._addBrushMask(), this._dispatchBrushEvent(IOperateType.drawStart, e), 1 === Object.keys(this._brushMaskAABBBoundsDict).length && this._dispatchBrushEvent(IOperateType.brushActive, e);
   }
   _initMove(e) {
     var _a, _b;
@@ -44590,17 +44704,12 @@ let Brush$1 = class Brush extends AbstractComponent {
       maxMoveStepX = maxX - x2,
       minMoveStepY = minY - y1,
       maxMoveStepY = maxY - y2;
-    this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX], this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY], this._operatingMask.setAttribute("pickable", !0), this._dispatchEvent(IOperateType.moveStart, {
-      operateMask: this._operatingMask,
-      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-      event: e
-    });
+    this._operatingMaskMoveRangeX = [minMoveStepX, maxMoveStepX], this._operatingMaskMoveRangeY = [minMoveStepY, maxMoveStepY], this._operatingMask.setAttribute("pickable", !0), this._dispatchBrushEvent(IOperateType.moveStart, e);
   }
   _drawing(e) {
-    var _a, _b;
+    var _a;
     const pos = this.eventPosToStagePos(e),
       {
-        sizeThreshold = DEFAULT_SIZE_THRESHOLD,
         brushType: brushType
       } = this.attribute,
       cacheLength = this._cacheDrawPoints.length;
@@ -44610,18 +44719,7 @@ let Brush$1 = class Brush extends AbstractComponent {
     }
     "polygon" === brushType || cacheLength <= 1 ? this._cacheDrawPoints.push(pos) : this._cacheDrawPoints[cacheLength - 1] = pos;
     const maskPoints = this._computeMaskPoints();
-    this._operatingMask.setAttribute("points", maskPoints);
-    const {
-      x1 = 0,
-      x2 = 0,
-      y1 = 0,
-      y2 = 0
-    } = null === (_b = this._operatingMask) || void 0 === _b ? void 0 : _b._AABBBounds;
-    this._isDrawedBeforeEnd = !this._operatingMask._AABBBounds.empty() && !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold), this._isDrawedBeforeEnd && (this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchEvent(IOperateType.drawing, {
-      operateMask: this._operatingMask,
-      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-      event: e
-    }));
+    this._operatingMask.setAttribute("points", maskPoints), this._dispatchBrushEvent(IOperateType.drawing, e);
   }
   _moving(e) {
     const startPos = this._cacheMovePoint,
@@ -44634,11 +44732,46 @@ let Brush$1 = class Brush extends AbstractComponent {
     this._operatingMask.setAttributes({
       dx: moveX,
       dy: moveY
-    }), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchEvent(IOperateType.moving, {
-      operateMask: this._operatingMask,
-      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
-      event: e
-    });
+    }), this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchBrushEvent(IOperateType.moving, e);
+  }
+  _drawEnd(e) {
+    const {
+      removeOnClick = !0,
+      sizeThreshold = DEFAULT_SIZE_THRESHOLD
+    } = this.attribute;
+    if (this._outOfInteractiveRange(e)) this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e));else {
+      const {
+          x: x1,
+          y: y1
+        } = this._startPos,
+        {
+          x: x2,
+          y: y2
+        } = this.eventPosToStagePos(e);
+      Math.abs(x2 - x1) <= 1 && Math.abs(y2 - y1) <= 1 && removeOnClick ? this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)) : Math.abs(x2 - x1) < sizeThreshold && Math.abs(y1 - y2) < sizeThreshold ? (delete this._brushMaskAABBBoundsDict[this._operatingMask.name], this._container.setAttributes({}), this._container.removeChild(this._operatingMask), this._isEmptyMask() && this._dispatchBrushEvent(IOperateType.brushClear, e)) : (this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds, this._dispatchBrushEvent(IOperateType.drawEnd, e));
+    }
+  }
+  _moveEnd(e) {
+    this._operatingMask && this._operatingMask.setAttribute("pickable", !1), this._dispatchBrushEvent(IOperateType.moveEnd, e);
+  }
+  render() {
+    this._bindBrushEvents();
+    const group = this.createOrUpdateChild("brush-container", {}, "group");
+    this._container = group;
+  }
+  releaseBrushEvents() {
+    const {
+      trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
+      resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
+    } = this.attribute;
+    array(trigger).forEach(t => this.stage.removeEventListener(t, this._onBrushStart)), array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear)), this._releaseBrushUpdateEvents();
+  }
+  _releaseBrushUpdateEvents() {
+    const {
+      updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
+      endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger
+    } = this.attribute;
+    array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd));
   }
   _computeMaskPoints() {
     const {
@@ -44696,6 +44829,23 @@ let Brush$1 = class Brush extends AbstractComponent {
       }));
     brushMask.name = `brush-${Date.now()}`, this._operatingMask = brushMask, this._container.add(brushMask), this._brushMaskAABBBoundsDict[brushMask.name] = brushMask.AABBBounds;
   }
+  _isPosInBrushMask(e) {
+    const pos = this.eventPosToStagePos(e),
+      brushMasks = this._container.getChildren();
+    for (let i = 0; i < brushMasks.length; i++) {
+      const {
+          points = [],
+          dx = 0,
+          dy = 0
+        } = brushMasks[i].attribute,
+        pointsConsiderOffset = points.map(point => ({
+          x: point.x + dx,
+          y: point.y + dy
+        }));
+      if (polygonContainPoint(pointsConsiderOffset, pos.x, pos.y)) return this._operatingMask = brushMasks[i], !0;
+    }
+    return !1;
+  }
   _outOfInteractiveRange(e) {
     const {
         interactiveRange: interactiveRange
@@ -44712,21 +44862,18 @@ let Brush$1 = class Brush extends AbstractComponent {
   eventPosToStagePos(e) {
     return this.stage.eventPointTransform(e);
   }
-  render() {
-    this._bindBrushEvents();
-    const group = this.createOrUpdateChild("brush-container", {}, "group");
-    this._container = group;
+  _dispatchBrushEvent(operateType, e) {
+    this._dispatchEvent(operateType, {
+      operateMask: this._operatingMask,
+      operatedMaskAABBBounds: this._brushMaskAABBBoundsDict,
+      event: e
+    });
   }
-  releaseBrushEvents() {
-    const {
-      delayType = "throttle",
-      delayTime = 0,
-      trigger = DEFAULT_BRUSH_ATTRIBUTES.trigger,
-      updateTrigger = DEFAULT_BRUSH_ATTRIBUTES.updateTrigger,
-      endTrigger = DEFAULT_BRUSH_ATTRIBUTES.endTrigger,
-      resetTrigger = DEFAULT_BRUSH_ATTRIBUTES.resetTrigger
-    } = this.attribute;
-    array(trigger).forEach(t => vglobal.removeEventListener(t, this._onBrushStart)), array(updateTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushingWithDelay)), array(endTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushEnd)), array(resetTrigger).forEach(t => this.stage.removeEventListener(t, this._onBrushClear));
+  _clearMask() {
+    this._brushMaskAABBBoundsDict = {}, this._container.incrementalClearChild(), this._operatingMask = null;
+  }
+  _isEmptyMask() {
+    return isEmpty(this._brushMaskAABBBoundsDict) || Object.keys(this._brushMaskAABBBoundsDict).every(key => this._brushMaskAABBBoundsDict[key].empty());
   }
 };
 Brush$1.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
@@ -56961,6 +57108,7 @@ var ChartEvent;
     ChartEvent["brushChange"] = "brushChange";
     ChartEvent["brushEnd"] = "brushEnd";
     ChartEvent["brushClear"] = "brushClear";
+    ChartEvent["brushActive"] = "brushActive";
     ChartEvent["legendSelectedDataChange"] = "legendSelectedDataChange";
     ChartEvent["legendFilter"] = "legendFilter";
     ChartEvent["legendItemClick"] = "legendItemClick";
@@ -59612,6 +59760,9 @@ class BaseModel extends CompilableBase {
     }
     beforeRelease() {
     }
+    clear() {
+        this.getMarks().forEach(m => { var _a; return (_a = m.clear) === null || _a === void 0 ? void 0 : _a.call(m); });
+    }
     release() {
         var _a;
         this._releaseEvent();
@@ -61764,6 +61915,9 @@ class CompilableMark extends GrammarItem {
         }
         return undefined;
     }
+    clear() {
+        this._event.off(HOOK_EVENT.AFTER_DO_RENDER);
+    }
     release() {
         super.release();
         this.state.release();
@@ -63713,7 +63867,7 @@ const registerVChartCore = () => {
 };
 registerVChartCore();
 
-const version = "1.13.9-alpha.5";
+const version = "1.13.9";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -67860,6 +68014,9 @@ class AxisComponent extends BaseComponent {
             if (spec.label.state) {
                 axisAttrs.label.state = transformAxisLabelStateStyle(spec.label.state);
             }
+            if (isFunction$1(spec.label.dataFilter)) {
+                axisAttrs.label.dataFilter = (data, layer) => spec.label.dataFilter(data, layer, { vchart: this._option.globalInstance });
+            }
         }
         else {
             axisAttrs.label = {
@@ -67872,7 +68029,9 @@ class AxisComponent extends BaseComponent {
                 length: spec.tick.tickSize,
                 inside: spec.tick.inside,
                 alignWithLabel: spec.tick.alignWithLabel,
-                dataFilter: spec.tick.dataFilter
+                dataFilter: isFunction$1(spec.tick.dataFilter)
+                    ? (data) => spec.tick.dataFilter(data, { vchart: this._option.globalInstance })
+                    : undefined
             };
             if (spec.tick.style) {
                 axisAttrs.tick.style = isFunction$1(spec.tick.style)
@@ -71125,58 +71284,83 @@ class BaseChart extends CompilableBase {
             }
         });
     }
-    _setStateInDatum(stateKey, checkReverse, datum, filter, region) {
+    filterGraphicsByDatum(datum, opt = {}) {
+        var _a;
         datum = datum ? array(datum) : null;
         const keys = !datum ? null : Object.keys(datum[0]);
-        this.getRegionsInQuerier(region).forEach(r => {
-            if (!datum) {
-                r.interaction.clearEventElement(stateKey, true);
-                return;
-            }
-            r.getSeries().forEach(s => {
-                s.getMarks().forEach(m => {
-                    if (!m.getProduct()) {
-                        return;
-                    }
-                    if (!filter || (isFunction$1(filter) && filter(s, m))) {
-                        const isCollect = m.getProduct().isCollectionMark();
-                        const elements = m.getProduct().elements;
-                        let pickElements = [];
-                        if (isCollect) {
-                            pickElements = elements.filter(e => {
-                                const elDatum = e.getDatum();
-                                datum.every((d, index) => keys.every(k => d[k] == elDatum[index][k]));
-                            });
+        const allElements = [];
+        const getDatumOfElement = (_a = opt.getDatum) !== null && _a !== void 0 ? _a : ((el) => el.getDatum());
+        this.getRegionsInQuerier(opt.region).forEach(r => {
+            const pickElements = [];
+            datum &&
+                r.getSeries().forEach(s => {
+                    s.getMarks().forEach(m => {
+                        if (!m.getProduct()) {
+                            return;
                         }
-                        else {
-                            if (datum.length > 1) {
-                                const datumTemp = datum.slice();
-                                pickElements = elements.filter(e => {
-                                    if (datumTemp.length === 0) {
-                                        return false;
-                                    }
-                                    const elDatum = e.getDatum();
-                                    const index = datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k]));
-                                    if (index >= 0) {
-                                        datumTemp.splice(index, 1);
-                                        return true;
+                        if (!opt.filter || (isFunction$1(opt.filter) && opt.filter(s, m))) {
+                            const isCollect = m.getProduct().isCollectionMark();
+                            const elements = m.getProduct().elements;
+                            if (isCollect) {
+                                elements.filter(e => {
+                                    const elDatum = getDatumOfElement(e, m, s, r);
+                                    const isPick = elDatum && datum.every((d, index) => keys.every(k => d[k] == elDatum[index][k]));
+                                    if (isPick) {
+                                        pickElements.push(e);
+                                        allElements.push(e);
+                                        opt.callback && opt.callback(e, m, s, r);
                                     }
-                                    return false;
                                 });
                             }
                             else {
-                                const el = elements.find(e => keys.every(k => datum[0][k] == e.getDatum()[k]));
-                                el && (pickElements = [el]);
+                                if (datum.length > 1) {
+                                    const datumTemp = datum.slice();
+                                    elements.forEach(e => {
+                                        const elDatum = getDatumOfElement(e, m, s, r);
+                                        const index = elDatum && datumTemp.findIndex(d => keys.every(k => d[k] == elDatum[k]));
+                                        if (index >= 0) {
+                                            datumTemp.splice(index, 1);
+                                            pickElements.push(e);
+                                            allElements.push(e);
+                                            opt.callback && opt.callback(e, m, s, r);
+                                        }
+                                    });
+                                }
+                                else {
+                                    const el = elements.find(e => {
+                                        const elDatum = getDatumOfElement(e, m, s, r);
+                                        return elDatum && keys.every(k => datum[0][k] == elDatum[k]);
+                                    });
+                                    if (el) {
+                                        pickElements.push(el);
+                                        allElements.push(el);
+                                        opt.callback && opt.callback(el, m, s, r);
+                                    }
+                                }
                             }
                         }
-                        pickElements.forEach(element => {
-                            r.interaction.startInteraction(stateKey, element);
-                        });
-                    }
+                    });
                 });
-            });
-            if (checkReverse) {
-                r.interaction.reverseEventElement(stateKey);
+            opt.regionCallback && opt.regionCallback(pickElements, r);
+        });
+        return allElements;
+    }
+    _setStateInDatum(stateKey, checkReverse, datum, filter, region) {
+        this.filterGraphicsByDatum(datum, {
+            filter,
+            region,
+            regionCallback: (elements, r) => {
+                if (!datum) {
+                    r.interaction.clearEventElement(stateKey, true);
+                }
+                else if (elements.length) {
+                    elements.forEach(e => {
+                        r.interaction.startInteraction(stateKey, e);
+                    });
+                    if (checkReverse) {
+                        r.interaction.reverseEventElement(stateKey);
+                    }
+                }
             }
         });
     }
@@ -72776,9 +72960,7 @@ class BarSeries extends CartesianSeries {
                     else if (domainMin > 0) {
                         return scale.scale(domainMin);
                     }
-                    else {
-                        return scale.scale(0);
-                    }
+                    return scale.scale(0);
                 }
             }
         };
@@ -76986,7 +77168,7 @@ const pie = (originData, op) => {
         return data;
     }
     if (!showAllZero && showEmptyCircle && isDataEmpty(data, angleField, supportNegative)) {
-        return data;
+        return [];
     }
     const appendArcInfo = (data, startAngle, angle) => {
         data[asStartAngle] = startAngle;
@@ -77475,6 +77657,7 @@ class BasePieSeries extends PolarSeries {
             }, {
                 dataView: false
             });
+            this._emptyArcMark.setDepend(this._pieMark);
         }
     }
     startAngleScale(datum) {
@@ -77510,8 +77693,8 @@ class BasePieSeries extends PolarSeries {
         const emptyPieMark = this._emptyArcMark;
         if (emptyPieMark) {
             this.setMarkStyle(emptyPieMark, Object.assign(Object.assign({}, initialStyle), { visible: () => {
-                    const angleField = this.getAngleField()[0];
-                    return isDataEmpty(this.getViewData().latestData, angleField, this._supportNegative);
+                    const data = this.getViewData().latestData;
+                    return !data || !data.length;
                 } }), 'normal', AttributeLevel.Series);
         }
     }
@@ -79720,7 +79903,8 @@ class ProgressLikeSeries extends PolarSeries {
                 return value;
             }
         }
-        return this.angleAxisHelper.dataToPosition([datum[this._angleField[0]]]);
+        const angle = this.angleAxisHelper.dataToPosition([datum[this._angleField[0]]]);
+        return this._spec.clamp ? valueInScaleRange(angle, this.angleAxisHelper.getScale(0)) : angle;
     }
     getDimensionField() {
         return this._specRadiusField;
@@ -79753,12 +79937,12 @@ class ProgressLikeSeries extends PolarSeries {
             clip: true,
             clipPath: () => {
                 const axis = this._getAngleAxis();
+                const { x, y } = this.angleAxisHelper.center();
+                const radius = this._computeLayoutRadius();
                 if (this._isTickMaskVisible(axis)) {
                     const { tickMask } = this._spec;
                     const { angle, offsetAngle, style = {} } = tickMask;
                     const subTickData = this._getAngleAxisSubTickData(axis);
-                    const { x, y } = this.angleAxisHelper.center();
-                    const radius = this._computeLayoutRadius();
                     const markStyle = style;
                     return subTickData.map(({ value }) => {
                         const pos = this.angleAxisHelper.dataToPosition([value]) + degreeToRadian(offsetAngle);
@@ -80179,7 +80363,11 @@ class LinearProgressSeries extends CartesianSeries {
                             leftPadding);
                     },
                     y1: (datum) => { var _a, _b; return valueInScaleRange(this.dataToPositionY(datum), (_b = (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0)); },
-                    y: () => { var _a; return (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition }); },
+                    y: () => {
+                        var _a, _b, _c;
+                        const value = (_a = this._yAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition });
+                        return this._spec.clamp ? valueInScaleRange(value, (_c = (_b = this._yAxisHelper) === null || _b === void 0 ? void 0 : _b.getScale) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) : value;
+                    },
                     width: this._spec.bandWidth - leftPadding - rightPadding,
                     cornerRadius: this._spec.cornerRadius,
                     fill: this.getColorAttribute()
@@ -80198,7 +80386,11 @@ class LinearProgressSeries extends CartesianSeries {
                             topPadding);
                     },
                     height: this._spec.bandWidth - topPadding - bottomPadding,
-                    x: () => { var _a; return (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition }); },
+                    x: () => {
+                        var _a, _b, _c;
+                        const value = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.dataToPosition([0], { bandPosition: this._bandPosition });
+                        return this._spec.clamp ? valueInScaleRange(value, (_c = (_b = this._xAxisHelper) === null || _b === void 0 ? void 0 : _b.getScale) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) : value;
+                    },
                     cornerRadius: this._spec.cornerRadius,
                     fill: this.getColorAttribute()
                 }, 'normal', AttributeLevel.Series);
@@ -87634,12 +87826,14 @@ class GaugeSeries extends ProgressLikeSeries {
     _getAngleValueStartWithoutMask(datum) {
         const startAngle = this._getAngleValueStartWithoutPadAngle(datum);
         const endAngle = this._getAngleValueEndWithoutPadAngle(datum);
-        return clamper(startAngle, (startAngle + endAngle) / 2)(startAngle + (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+        const angle = clamper(startAngle, (startAngle + endAngle) / 2)(startAngle + (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+        return this._spec.clamp ? valueInScaleRange(angle, this.angleAxisHelper.getScale(0)) : angle;
     }
     _getAngleValueEndWithoutMask(datum) {
         const startAngle = this._getAngleValueStartWithoutPadAngle(datum);
         const endAngle = this._getAngleValueEndWithoutPadAngle(datum);
-        return clamper(endAngle, (startAngle + endAngle) / 2)(endAngle - (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+        const angle = clamper(endAngle, (startAngle + endAngle) / 2)(endAngle - (endAngle > startAngle ? 1 : -1) * Math.abs(this._padAngle / 2));
+        return this._spec.clamp ? valueInScaleRange(angle, this.angleAxisHelper.getScale(0)) : angle;
     }
     _getAngleValueStartWithoutPadAngle(datum) {
         return isValid$1(datum[SEGMENT_FIELD_START])
@@ -89950,21 +90144,21 @@ function isValidStrokeOrFill(attr) {
     return isValid$1(attr) && attr !== 'none' && !((_a = attr.includes) === null || _a === void 0 ? void 0 : _a.call(attr, 'url'));
 }
 const getLineWidth = (attributes) => {
-    const strokeWidth = parseFloat(attributes['strokeWidth']);
+    const strokeWidth = parseFloat(attributes.strokeWidth);
     if (!isNaN(strokeWidth)) {
         return strokeWidth;
     }
-    const stroke = attributes['stroke'];
+    const stroke = attributes.stroke;
     return stroke && isValidStrokeOrFill(stroke) ? 1 : 0;
 };
 const getFill = (attributes, defaultFill) => {
     var _a;
-    const fill = (_a = attributes['fill']) !== null && _a !== void 0 ? _a : defaultFill;
+    const fill = (_a = attributes.fill) !== null && _a !== void 0 ? _a : defaultFill;
     return fill && isValidStrokeOrFill(fill) ? fill : undefined;
 };
 const getStroke = (attributes, defaultStroke) => {
     var _a;
-    const stroke = (_a = attributes['stroke']) !== null && _a !== void 0 ? _a : defaultStroke;
+    const stroke = (_a = attributes.stroke) !== null && _a !== void 0 ? _a : defaultStroke;
     return stroke && isValidStrokeOrFill(stroke) ? stroke : false;
 };
 const commonAttributes = (attributes) => {
@@ -89973,7 +90167,7 @@ const commonAttributes = (attributes) => {
 const graphicAttributeTransform = {
     group: (attributes) => {
         const common = commonAttributes(attributes);
-        return Object.assign(Object.assign({}, common), { visibleAll: common['visible'] !== false });
+        return Object.assign(Object.assign({}, common), { visibleAll: common.visible !== false });
     },
     rule: (attributes) => {
         return Object.assign(Object.assign({}, commonAttributes(attributes)), { x: parseFloat(attributes.x1), y: parseFloat(attributes.y1), x1: parseFloat(attributes.x2), y1: parseFloat(attributes.y2) });
@@ -90024,7 +90218,7 @@ const pictogram = (data) => {
             el._uniqueId = `${el.id}-${index}`;
             el.data = undefined;
             const { graphicType: type, transform } = el;
-            let finalAttributes = {
+            const finalAttributes = {
                 visible: el.attributes.visibility !== 'hidden' && el.attributes.visibility !== 'collapse'
             };
             if (el.graphicType === 'text') {
@@ -90059,7 +90253,7 @@ const pictogram = (data) => {
                 return result;
             });
             if (children && children.length) {
-                let startX = (_b = (_a = texts[i]._textGroupStyle) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
+                const startX = (_b = (_a = texts[i]._textGroupStyle) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
                 let curX = startX;
                 for (let j = 0; j < children.length; j++) {
                     const currentChild = children[j];
@@ -91586,7 +91780,7 @@ class LinearProgressChartSpecTransformer extends CartesianChartSpecTransformer {
     }
     _getDefaultSeriesSpec(spec) {
         var _a, _b;
-        const series = super._getDefaultSeriesSpec(spec, ['bandWidth', 'progress', 'track']);
+        const series = super._getDefaultSeriesSpec(spec, ['bandWidth', 'progress', 'track', 'clamp']);
         series.direction = (_a = spec.direction) !== null && _a !== void 0 ? _a : 'horizontal';
         series.cornerRadius = (_b = spec.cornerRadius) !== null && _b !== void 0 ? _b : 0;
         return series;
@@ -92035,49 +92229,40 @@ class SankeyChart extends BaseChart {
     }
     _setStateInDatum(stateKey, checkReverse, datum, filter, region) {
         const activeDatum = isArray$1(datum) ? datum[0] : datum;
-        const keys = !activeDatum ? null : Object.keys(activeDatum);
-        this.getRegionsInQuerier(region).forEach(r => {
-            if (!activeDatum) {
-                r.interaction.clearEventElement(stateKey, true);
-                return;
-            }
-            let hasPick = false;
-            r.getSeries().forEach(s => {
-                var _a, _b;
-                let activeNodeOrLink = null;
-                s.getMarksWithoutRoot().forEach(m => {
-                    if (m.type === 'text') {
-                        return;
-                    }
-                    let pickElement = null;
-                    const mark = m.getProduct();
-                    if (!mark) {
-                        return;
-                    }
-                    if (!filter || (isFunction$1(filter) && filter(s, m))) {
-                        pickElement = mark.elements.find((e) => keys.every(k => {
-                            var _a;
-                            let datum = (_a = e.getDatum()) === null || _a === void 0 ? void 0 : _a.datum;
-                            if (isArray$1(datum)) {
-                                datum = datum[0];
-                            }
-                            return activeDatum[k] == (datum === null || datum === void 0 ? void 0 : datum[k]);
-                        }));
-                    }
-                    if (pickElement) {
-                        hasPick = true;
-                        r.interaction.startInteraction(stateKey, pickElement);
-                        if (mark.id().includes('node') || mark.id().includes('link')) {
-                            activeNodeOrLink = pickElement;
-                        }
+        const markFilter = (series, mark) => {
+            return mark.type !== 'text' && mark.getProduct() && (!filter || filter(series, mark));
+        };
+        this.filterGraphicsByDatum(activeDatum, {
+            filter: markFilter,
+            region,
+            getDatum: e => {
+                var _a;
+                let d = (_a = e.getDatum()) === null || _a === void 0 ? void 0 : _a.datum;
+                if (isArray$1(d)) {
+                    d = d[0];
+                }
+                return d;
+            },
+            callback: (element, mark, s, r) => {
+                var _a, _b, _c;
+                const id = (_a = mark.getProduct()) === null || _a === void 0 ? void 0 : _a.id();
+                if (id && (id.includes('node') || id.includes('link'))) {
+                    (_c = (_b = s)._handleEmphasisElement) === null || _c === void 0 ? void 0 : _c.call(_b, { item: element });
+                }
+            },
+            regionCallback: (elements, r) => {
+                if (!activeDatum) {
+                    r.interaction.clearEventElement(stateKey, true);
+                    return;
+                }
+                else if (elements.length) {
+                    elements.forEach(e => {
+                        r.interaction.startInteraction(stateKey, e);
+                    });
+                    if (checkReverse) {
+                        r.interaction.reverseEventElement(stateKey);
                     }
-                });
-                if (activeNodeOrLink) {
-                    (_b = (_a = s)._handleEmphasisElement) === null || _b === void 0 ? void 0 : _b.call(_a, { item: activeNodeOrLink });
                 }
-            });
-            if (checkReverse && hasPick) {
-                r.interaction.reverseEventElement(stateKey);
             }
         });
     }
@@ -94457,7 +94642,7 @@ class BaseCrossHair extends BaseComponent {
         Object.keys(this._stateByField).forEach(field => {
             const fieldSpec = this._spec[field];
             if (fieldSpec && fieldSpec.visible && fieldSpec.defaultSelect) {
-                const { axisIndex, datum } = fieldSpec.defaultSelect;
+                const { axisIndex = 0, datum } = fieldSpec.defaultSelect;
                 const axis = this._option.getComponentsByKey('axes').find(c => c.getSpecIndex() === axisIndex);
                 if (axis) {
                     this._stateByField[field].currentValue.clear();
@@ -95013,36 +95198,37 @@ const layoutCrosshair$1 = (stateItem) => {
         };
     }
     else if (type === 'rect') {
-        const extend = getRectSize(attributes, bandSize, cacheInfo.axis);
+        const [offset0, offset1] = getRectSize(attributes, bandSize, offsetSize, cacheInfo.axis);
         const { coordRange } = cacheInfo;
         positionAttribute = {
             visible: true,
             start: {
-                [coordKey]: Math.max(coord - extend / 2 - offsetSize / 2, coordRange[0]),
+                [coordKey]: Math.max(coord + offset0, coordRange[0]),
                 [anotherAxisKey]: sizeRange[0]
             },
             end: {
-                [coordKey]: Math.min(coord + bandSize + extend / 2 + offsetSize / 2, coordRange[1]),
+                [coordKey]: Math.min(coord + offset1, coordRange[1]),
                 [anotherAxisKey]: sizeRange[1]
             }
         };
     }
     return positionAttribute;
 };
-const getRectSize = (hair, bandSize, axis) => {
+const getRectSize = (hair, bandSize, offsetSize, axis) => {
     var _a, _b, _c;
-    let extend = 0;
+    const visualSize = bandSize === 0 ? offsetSize : bandSize;
+    let size = visualSize;
     if ((_a = hair.style) === null || _a === void 0 ? void 0 : _a.sizePercent) {
-        extend = (hair.style.sizePercent - 1) * bandSize;
+        size = visualSize * hair.style.sizePercent;
     }
     else if (typeof ((_b = hair.style) === null || _b === void 0 ? void 0 : _b.size) === 'number') {
-        extend = hair.style.size - bandSize;
+        size = hair.style.size;
     }
     else if (typeof ((_c = hair.style) === null || _c === void 0 ? void 0 : _c.size) === 'function') {
         const axisRect = axis.getLayoutRect();
-        extend = hair.style.size(axisRect, axis) - bandSize;
+        size = hair.style.size(axisRect, axis);
     }
-    return extend;
+    return bandSize === 0 ? [-size / 2, size / 2] : [bandSize / 2 - size / 2, size / 2 + bandSize / 2];
 };
 
 class CartesianCrossHair extends BaseCrossHair {
@@ -97532,17 +97718,22 @@ function computeOffsetFromRegion(point, offset, region) {
     }
     return offset;
 }
+function getProcessInfo(spec) {
+    return {
+        isXProcess: isValid$1(spec.x),
+        isYProcess: isValid$1(spec.y),
+        isX1Process: isValid$1(spec.x1),
+        isY1Process: isValid$1(spec.y1),
+        isAngleProcess: isValid$1(spec.angle),
+        isRadiusProcess: isValid$1(spec.radius),
+        isAngle1Process: isValid$1(spec.angle1),
+        isRadius1Process: isValid$1(spec.radius1),
+        isCoordinatesProcess: isValid$1(spec.coordinates),
+        isValidProcess: isValid$1(spec.process)
+    };
+}
 function getMarkLineProcessInfo(spec) {
-    const isXProcess = 'x' in spec;
-    const isYProcess = 'y' in spec;
-    const isX1Process = 'x1' in spec;
-    const isY1Process = 'y1' in spec;
-    const isAngleProcess = 'angle' in spec;
-    const isRadiusProcess = 'radius' in spec;
-    const isAngle1Process = 'angle1' in spec;
-    const isRadius1Process = 'radius1' in spec;
-    const isCoordinatesProcess = 'coordinates' in spec;
-    const isValidProcess = 'process' in spec;
+    const { isXProcess, isYProcess, isX1Process, isY1Process, isAngleProcess, isRadiusProcess, isAngle1Process, isRadius1Process, isCoordinatesProcess, isValidProcess } = getProcessInfo(spec);
     return {
         doXProcess: isXProcess && !isYProcess && !isY1Process,
         doXYY1Process: isXProcess && isYProcess && isY1Process,
@@ -97558,15 +97749,7 @@ function getMarkLineProcessInfo(spec) {
     };
 }
 function getMarkAreaProcessInfo(spec) {
-    const isXProcess = 'x' in spec;
-    const isX1Process = 'x1' in spec;
-    const isYProcess = 'y' in spec;
-    const isY1Process = 'y1' in spec;
-    const isAngleProcess = 'angle' in spec;
-    const isRadiusProcess = 'radius' in spec;
-    const isAngle1Process = 'angle1' in spec;
-    const isRadius1Process = 'radius1' in spec;
-    const isCoordinatesProcess = 'coordinates' in spec;
+    const { isXProcess, isYProcess, isX1Process, isY1Process, isAngleProcess, isRadiusProcess, isAngle1Process, isRadius1Process, isCoordinatesProcess } = getProcessInfo(spec);
     return {
         doXProcess: isXProcess && isX1Process && !isYProcess && !isY1Process,
         doYProcess: isYProcess && isY1Process && !isXProcess && !isX1Process,
@@ -98084,13 +98267,14 @@ class BaseMarkLine extends BaseMarker {
         return 'cartesian';
     }
     _createMarkerComponent() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-        const { label = {}, startSymbol = {}, endSymbol = {} } = this._spec;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const { startSymbol = {}, endSymbol = {} } = this._spec;
+        const label = array((_a = this._spec.label) !== null && _a !== void 0 ? _a : {});
         const markLineAttrs = {
             zIndex: this.layoutZIndex,
-            interactive: (_a = this._spec.interactive) !== null && _a !== void 0 ? _a : true,
-            hover: (_b = this._spec.interactive) !== null && _b !== void 0 ? _b : true,
-            select: (_c = this._spec.interactive) !== null && _c !== void 0 ? _c : true,
+            interactive: (_b = this._spec.interactive) !== null && _b !== void 0 ? _b : true,
+            hover: (_c = this._spec.interactive) !== null && _c !== void 0 ? _c : true,
+            select: (_d = this._spec.interactive) !== null && _d !== void 0 ? _d : true,
             points: [
                 { x: 0, y: 0 },
                 { x: 0, y: 0 }
@@ -98102,17 +98286,25 @@ class BaseMarkLine extends BaseMarker {
             radius: 0,
             startAngle: 0,
             endAngle: 0,
-            lineStyle: transformStyle(transformToGraphic((_d = this._spec.line) === null || _d === void 0 ? void 0 : _d.style), this._markerData, this._markAttributeContext),
-            clipInRange: (_e = this._spec.clip) !== null && _e !== void 0 ? _e : false,
-            label: transformLabelAttributes(label, this._markerData, this._markAttributeContext),
+            lineStyle: transformStyle(transformToGraphic((_e = this._spec.line) === null || _e === void 0 ? void 0 : _e.style), this._markerData, this._markAttributeContext),
+            clipInRange: (_f = this._spec.clip) !== null && _f !== void 0 ? _f : false,
+            label: label.map(labelItem => {
+                return transformLabelAttributes(labelItem, this._markerData, this._markAttributeContext);
+            }),
             state: {
-                line: transformState((_g = (_f = this._spec.line) === null || _f === void 0 ? void 0 : _f.state) !== null && _g !== void 0 ? _g : {}, this._markerData, this._markAttributeContext),
-                lineStartSymbol: transformState((_j = (_h = this._spec.startSymbol) === null || _h === void 0 ? void 0 : _h.state) !== null && _j !== void 0 ? _j : {}, this._markerData, this._markAttributeContext),
-                lineEndSymbol: transformState((_l = (_k = this._spec.endSymbol) === null || _k === void 0 ? void 0 : _k.state) !== null && _l !== void 0 ? _l : {}, this._markerData, this._markAttributeContext),
-                label: transformState((_p = (_o = (_m = this._spec) === null || _m === void 0 ? void 0 : _m.label) === null || _o === void 0 ? void 0 : _o.state) !== null && _p !== void 0 ? _p : {}, this._markerData, this._markAttributeContext),
-                labelBackground: transformState((_t = (_s = (_r = (_q = this._spec) === null || _q === void 0 ? void 0 : _q.label) === null || _r === void 0 ? void 0 : _r.labelBackground) === null || _s === void 0 ? void 0 : _s.state) !== null && _t !== void 0 ? _t : {}, this._markerData, this._markAttributeContext)
+                line: transformState((_h = (_g = this._spec.line) === null || _g === void 0 ? void 0 : _g.state) !== null && _h !== void 0 ? _h : {}, this._markerData, this._markAttributeContext),
+                lineStartSymbol: transformState((_k = (_j = this._spec.startSymbol) === null || _j === void 0 ? void 0 : _j.state) !== null && _k !== void 0 ? _k : {}, this._markerData, this._markAttributeContext),
+                lineEndSymbol: transformState((_m = (_l = this._spec.endSymbol) === null || _l === void 0 ? void 0 : _l.state) !== null && _m !== void 0 ? _m : {}, this._markerData, this._markAttributeContext),
+                label: label.map(labelItem => {
+                    var _a;
+                    return transformState((_a = labelItem.state) !== null && _a !== void 0 ? _a : {}, this._markerData, this._markAttributeContext);
+                }),
+                labelBackground: label.map(labelItem => {
+                    var _a, _b;
+                    return transformState((_b = (_a = labelItem.labelBackground) === null || _a === void 0 ? void 0 : _a.state) !== null && _b !== void 0 ? _b : {}, this._markerData, this._markAttributeContext);
+                })
             },
-            animation: (_u = this._spec.animation) !== null && _u !== void 0 ? _u : false,
+            animation: (_o = this._spec.animation) !== null && _o !== void 0 ? _o : false,
             animationEnter: this._spec.animationEnter,
             animationExit: this._spec.animationExit,
             animationUpdate: this._spec.animationUpdate
@@ -98137,7 +98329,7 @@ class BaseMarkLine extends BaseMarker {
         return markLine;
     }
     _getUpdateMarkerAttrs() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const spec = this._spec;
         const data = this._markerData;
         const startRelativeSeries = this._startRelativeSeries;
@@ -98147,7 +98339,7 @@ class BaseMarkLine extends BaseMarker {
         const seriesData = relativeSeries.getViewData().latestData;
         const dataPoints = data.latestData[0] && data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
         let limitRect;
-        if (spec.clip || ((_a = spec.label) === null || _a === void 0 ? void 0 : _a.confine)) {
+        if (spec.clip || array(spec.label).some(labelCfg => labelCfg === null || labelCfg === void 0 ? void 0 : labelCfg.confine)) {
             const { minX, maxX, minY, maxY } = computeClipRange([
                 startRelativeSeries.getRegion(),
                 endRelativeSeries.getRegion(),
@@ -98160,10 +98352,13 @@ class BaseMarkLine extends BaseMarker {
                 height: maxY - minY
             };
         }
-        const markerComponentAttr = (_c = (_b = this._markerComponent) === null || _b === void 0 ? void 0 : _b.attribute) !== null && _c !== void 0 ? _c : {};
-        const labelAttrs = Object.assign(Object.assign({}, markerComponentAttr.label), { text: this._spec.label.formatMethod
-                ? this._spec.label.formatMethod(dataPoints, seriesData)
-                : (_d = markerComponentAttr.label) === null || _d === void 0 ? void 0 : _d.text });
+        const markerComponentAttr = (_b = (_a = this._markerComponent) === null || _a === void 0 ? void 0 : _a.attribute) !== null && _b !== void 0 ? _b : {};
+        const prevLabelAttrs = array(markerComponentAttr.label);
+        const specLabels = array(this._spec.label);
+        const labelAttrs = prevLabelAttrs.map((prevLabel, index) => {
+            const specLabel = specLabels[index] || {};
+            return Object.assign(Object.assign({}, prevLabel), { text: specLabel.formatMethod ? specLabel.formatMethod(dataPoints, seriesData) : prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.text });
+        });
         return Object.assign(Object.assign({}, pointsAttr), { label: labelAttrs, limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY });
     }
     _markerLayout() {
@@ -98265,7 +98460,7 @@ class CartesianMarkLine extends BaseMarkLine {
         return { points };
     }
     _markerLayout() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d;
         const updateAttrs = this._getUpdateMarkerAttrs();
         if (this._spec.type === 'type-step') {
             const startRelativeSeries = this._startRelativeSeries;
@@ -98292,34 +98487,23 @@ class CartesianMarkLine extends BaseMarkLine {
             else {
                 expandDistanceValue = expandDistance;
             }
-            const { points, label, limitRect } = updateAttrs;
+            const { points, limitRect } = updateAttrs;
             const joinPoints = getInsertPoints(points[0], points[1], connectDirection, expandDistanceValue);
             let labelPositionAttrs;
             if (multiSegment && isValid$1(mainSegmentIndex)) {
                 labelPositionAttrs = {
                     position: 'middle',
-                    autoRotate: false,
-                    refX: 0,
-                    refY: 0
+                    autoRotate: false
                 };
             }
             else {
-                labelPositionAttrs = Object.assign(Object.assign({ position: 'start', autoRotate: false }, getTextOffset(points[0], points[1], connectDirection, expandDistanceValue)), { refX: 0, refY: 0 });
-            }
-            if (isValidNumber$1((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.refX)) {
-                labelPositionAttrs.refX += this._spec.label.refX;
-            }
-            if (isValidNumber$1((_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.refY)) {
-                labelPositionAttrs.refY += this._spec.label.refY;
-            }
-            if (isValidNumber$1((_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.dx)) {
-                labelPositionAttrs.dx = (labelPositionAttrs.dx || 0) + this._spec.label.dx;
+                labelPositionAttrs = Object.assign({ position: 'start', autoRotate: false }, getTextOffset(points[0], points[1], connectDirection, expandDistanceValue));
             }
-            if (isValidNumber$1((_d = this._spec.label) === null || _d === void 0 ? void 0 : _d.dy)) {
-                labelPositionAttrs.dy = (labelPositionAttrs.dy || 0) + this._spec.label.dy;
-            }
-            const markerComponentAttr = (_f = (_e = this._markerComponent) === null || _e === void 0 ? void 0 : _e.attribute) !== null && _f !== void 0 ? _f : {};
-            (_g = this._markerComponent) === null || _g === void 0 ? void 0 : _g.setAttributes({
+            const markerComponentAttr = (_b = (_a = this._markerComponent) === null || _a === void 0 ? void 0 : _a.attribute) !== null && _b !== void 0 ? _b : {};
+            const prevLabelAttrs = array(markerComponentAttr.label);
+            const updateLabels = array(updateAttrs.label);
+            const labelsInSpec = array(this._spec.label);
+            (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.setAttributes({
                 points: multiSegment
                     ? [
                         [joinPoints[0], joinPoints[1]],
@@ -98327,7 +98511,30 @@ class CartesianMarkLine extends BaseMarkLine {
                         [joinPoints[2], joinPoints[3]]
                     ]
                     : joinPoints,
-                label: Object.assign(Object.assign(Object.assign({}, label), labelPositionAttrs), { textStyle: Object.assign(Object.assign({}, markerComponentAttr.label.textStyle), { textAlign: 'center', textBaseline: 'middle' }) }),
+                label: updateLabels.map((labelItem, index) => {
+                    var _a, _b, _c, _d;
+                    let refX = 0;
+                    let refY = 0;
+                    let dx = (_a = labelPositionAttrs.dx) !== null && _a !== void 0 ? _a : 0;
+                    let dy = (_b = labelPositionAttrs.dy) !== null && _b !== void 0 ? _b : 0;
+                    const labelSpec = (_c = labelsInSpec[index]) !== null && _c !== void 0 ? _c : labelsInSpec[0];
+                    if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.refX)) {
+                        refX += labelSpec.refX;
+                    }
+                    if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.refY)) {
+                        refY += labelSpec.refY;
+                    }
+                    if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.dx)) {
+                        dx += labelSpec.dx;
+                    }
+                    if (isValidNumber$1(labelSpec === null || labelSpec === void 0 ? void 0 : labelSpec.dy)) {
+                        dy += labelSpec.dy;
+                    }
+                    return Object.assign(Object.assign(Object.assign({}, labelItem), labelPositionAttrs), { refX,
+                        refY,
+                        dx,
+                        dy, textStyle: Object.assign(Object.assign({}, (_d = prevLabelAttrs[index]) === null || _d === void 0 ? void 0 : _d.textStyle), { textAlign: 'center', textBaseline: 'middle' }) });
+                }),
                 limitRect,
                 multiSegment,
                 mainSegmentIndex,
@@ -98336,7 +98543,7 @@ class CartesianMarkLine extends BaseMarkLine {
             });
         }
         else {
-            (_h = this._markerComponent) === null || _h === void 0 ? void 0 : _h.setAttributes(updateAttrs);
+            (_d = this._markerComponent) === null || _d === void 0 ? void 0 : _d.setAttributes(updateAttrs);
         }
     }
     _computeOptions() {
@@ -98400,15 +98607,15 @@ class CartesianMarkLine extends BaseMarkLine {
                 type: 'markerAggregation',
                 options
             });
-            if (spec.process && 'x' in spec.process) {
+            if (spec.process && isValid$1(spec.process.x)) {
                 options = [this._processSpecByDims([{ dim: 'x', specValue: spec.process.x }])];
                 needAggr = true;
             }
-            if (spec.process && 'y' in spec.process) {
+            if (spec.process && isValid$1(spec.process.y)) {
                 options = options = [this._processSpecByDims([{ dim: 'y', specValue: spec.process.y }])];
                 needAggr = true;
             }
-            if (spec.process && 'xy' in spec.process) {
+            if (spec.process && isValid$1(spec.process.xy)) {
                 const { xField, yField } = relativeSeries.getSpec();
                 options = {
                     fieldX: xField,
@@ -98690,8 +98897,8 @@ class BaseMarkArea extends BaseMarker {
         return 'cartesian';
     }
     _createMarkerComponent() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        const label = (_a = this._spec.label) !== null && _a !== void 0 ? _a : {};
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const label = array((_a = this._spec.label) !== null && _a !== void 0 ? _a : {});
         const markAreaAttrs = {
             zIndex: this.layoutZIndex,
             interactive: (_b = this._spec.interactive) !== null && _b !== void 0 ? _b : true,
@@ -98713,13 +98920,20 @@ class BaseMarkArea extends BaseMarker {
             endAngle: 0,
             areaStyle: transformStyle(transformToGraphic((_e = this._spec.area) === null || _e === void 0 ? void 0 : _e.style), this._markerData, this._markAttributeContext),
             clipInRange: (_f = this._spec.clip) !== null && _f !== void 0 ? _f : false,
-            label: transformLabelAttributes(label, this._markerData, this._markAttributeContext),
+            label: label.map((labelItem) => {
+                return transformLabelAttributes(labelItem, this._markerData, this._markAttributeContext);
+            }),
             state: {
                 area: transformState((_g = this._spec.area) === null || _g === void 0 ? void 0 : _g.state, this._markerData, this._markAttributeContext),
-                label: transformState((_h = this._spec.label) === null || _h === void 0 ? void 0 : _h.state, this._markerData, this._markAttributeContext),
-                labelBackground: transformState((_l = (_k = (_j = this._spec) === null || _j === void 0 ? void 0 : _j.label) === null || _k === void 0 ? void 0 : _k.labelBackground) === null || _l === void 0 ? void 0 : _l.state, this._markerData, this._markAttributeContext)
+                label: label.map((labelItem) => {
+                    return transformState(labelItem.state, this._markerData, this._markAttributeContext);
+                }),
+                labelBackground: label.map((labelItem) => {
+                    var _a;
+                    return transformState((_a = labelItem.labelBackground) === null || _a === void 0 ? void 0 : _a.state, this._markerData, this._markAttributeContext);
+                })
             },
-            animation: (_m = this._spec.animation) !== null && _m !== void 0 ? _m : false,
+            animation: (_h = this._spec.animation) !== null && _h !== void 0 ? _h : false,
             animationEnter: this._spec.animationEnter,
             animationExit: this._spec.animationExit,
             animationUpdate: this._spec.animationUpdate
@@ -98728,7 +98942,7 @@ class BaseMarkArea extends BaseMarker {
         return markArea;
     }
     _markerLayout() {
-        var _a, _b, _c, _d;
+        var _a;
         const spec = this._spec;
         const data = this._markerData;
         const startRelativeSeries = this._startRelativeSeries;
@@ -98742,7 +98956,7 @@ class BaseMarkArea extends BaseMarker {
                 : data.latestData
             : seriesData;
         let limitRect;
-        if (spec.clip || ((_a = spec.label) === null || _a === void 0 ? void 0 : _a.confine)) {
+        if (spec.clip || array(spec.label).some(labelCfg => labelCfg === null || labelCfg === void 0 ? void 0 : labelCfg.confine)) {
             const { minX, maxX, minY, maxY } = computeClipRange([
                 startRelativeSeries.getRegion(),
                 endRelativeSeries.getRegion(),
@@ -98756,10 +98970,15 @@ class BaseMarkArea extends BaseMarker {
             };
         }
         if (this._markerComponent) {
-            this._markerComponent.setAttributes(Object.assign(Object.assign({}, pointsAttr), { label: Object.assign(Object.assign({}, (_b = this._markerComponent.attribute) === null || _b === void 0 ? void 0 : _b.label), { text: this._spec.label.formatMethod
-                        ?
-                            this._spec.label.formatMethod(dataPoints, seriesData)
-                        : (_d = (_c = this._markerComponent.attribute) === null || _c === void 0 ? void 0 : _c.label) === null || _d === void 0 ? void 0 : _d.text }), limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY }));
+            const prevLabelAttrs = array((_a = this._markerComponent.attribute) === null || _a === void 0 ? void 0 : _a.label);
+            const specLabels = array(this._spec.label);
+            this._markerComponent.setAttributes(Object.assign(Object.assign({}, pointsAttr), { label: prevLabelAttrs.map((prevLabel, index) => {
+                    const specLabel = specLabels[index] || {};
+                    return Object.assign(Object.assign({}, prevLabel), { text: specLabel.formatMethod
+                            ?
+                                specLabel.formatMethod(dataPoints, seriesData)
+                            : prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.text });
+                }), limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY }));
         }
     }
     _initDataView() {
@@ -99988,9 +100207,9 @@ class CartesianMarkPoint extends BaseMarkPoint {
         const spec = this._spec;
         const data = this._markerData;
         const relativeSeries = this._relativeSeries;
-        const isXYLayout = 'x' in spec && 'y' in spec;
-        const isCoordinateLayout = 'coordinate' in spec;
-        const isPositionLayout = 'position' in spec;
+        const isXYLayout = isValid$1(spec.x) && isValid$1(spec.y);
+        const isCoordinateLayout = isValid$1(spec.coordinate);
+        const isPositionLayout = isValid$1(spec.position);
         const autoRange = (_a = spec === null || spec === void 0 ? void 0 : spec.autoRange) !== null && _a !== void 0 ? _a : false;
         let point;
         if (isXYLayout) {
@@ -100113,7 +100332,6 @@ class Brush extends BaseComponent {
         this._outOfBrushElementsMap = {};
         this._linkedInBrushElementsMap = {};
         this._linkedOutOfBrushElementsMap = {};
-        this._needInitOutState = true;
         this._cacheInteractiveRangeAttrs = [];
         this._needDisablePickable = false;
         this._releatedAxes = [];
@@ -100121,6 +100339,11 @@ class Brush extends BaseComponent {
         this._axisDataZoomMap = {};
         this._zoomRecord = [];
     }
+    static getSpecInfo(chartSpec) {
+        return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+            return s.visible !== false;
+        });
+    }
     init() {
         const inBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.inBrush);
         const outOfBrushMarkAttr = this._transformBrushedMarkAttr(this._spec.outOfBrush);
@@ -100133,9 +100356,22 @@ class Brush extends BaseComponent {
             });
         });
     }
-    static getSpecInfo(chartSpec) {
-        return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
-            return s.visible !== false;
+    _initNeedOperatedItem() {
+        const seriesUserId = this._spec.seriesId;
+        const seriesIndex = this._spec.seriesIndex;
+        this._relativeRegions.forEach(r => {
+            const allMarks = [];
+            r.getSeries().forEach((s) => {
+                if ((seriesUserId && array(seriesUserId).includes(s.userId.toString())) ||
+                    (seriesIndex && array(seriesIndex).includes(s.getSpecIndex())) ||
+                    (!seriesIndex && !seriesUserId)) {
+                    allMarks.push(...s.getMarksWithoutRoot());
+                }
+                this._itemMap[r.id] = allMarks;
+            });
+        });
+        this._linkedSeries.forEach(s => {
+            this._linkedItemMap[s.id] = s.getMarksWithoutRoot();
         });
     }
     created() {
@@ -100147,41 +100383,91 @@ class Brush extends BaseComponent {
         this._initAxisDataZoomMap();
         this._initNeedOperatedItem();
     }
-    _extendDataInBrush(elementsMap) {
-        var _a, _b;
-        const data = [];
-        for (const brushName in elementsMap) {
-            for (const elementKey in elementsMap[brushName]) {
-                data.push(Object.assign({}, (_b = (_a = elementsMap[brushName][elementKey]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0]));
+    _bindRegions() {
+        if (!isValid$1(this._spec.regionId) && !isValid$1(this._spec.regionIndex)) {
+            this._relativeRegions = this._option.getAllRegions();
+        }
+        else {
+            this._relativeRegions = this._option.getRegionsInUserIdOrIndex(array(this._spec.regionId), array(this._spec.regionIndex));
+        }
+    }
+    _bindLinkedSeries() {
+        if (!isValid$1(this._spec.brushLinkSeriesId) && !isValid$1(this._spec.brushLinkSeriesIndex)) {
+            return;
+        }
+        this._linkedSeries = this._option.getSeriesInUserIdOrIndex(array(this._spec.brushLinkSeriesId), array(this._spec.brushLinkSeriesIndex));
+    }
+    _initRegionAxisMap() {
+        if (isValid$1(this._spec.axisId)) {
+            array(this._spec.axisId).forEach((axisId) => {
+                this._releatedAxes.push(this._option.getComponentByUserId(axisId));
+            });
+        }
+        else if (isValid$1(this._spec.axisIndex)) {
+            array(this._spec.axisIndex).forEach((axisIndex) => {
+                this._releatedAxes.push(this._option.getComponentByIndex('axes', axisIndex));
+            });
+        }
+        else {
+            this._releatedAxes = this._option.getComponentsByKey('axes');
+        }
+        this._releatedAxes.forEach((axis) => {
+            axis === null || axis === void 0 ? void 0 : axis.getRegions().forEach((region) => {
+                if (this._regionAxisMap['region_' + region.id]) {
+                    this._regionAxisMap['region_' + region.id].push(axis);
+                }
+                else {
+                    this._regionAxisMap['region_' + region.id] = [axis];
+                }
+            });
+        });
+    }
+    _initAxisDataZoomMap() {
+        this._option.getComponentsByKey('dataZoom').forEach((dz) => {
+            if (dz.relatedAxisComponent) {
+                this._axisDataZoomMap[dz.relatedAxisComponent.id] = dz;
             }
+        });
+    }
+    initEvent() {
+    }
+    onRender(ctx) {
+    }
+    changeRegions(regions) {
+    }
+    _compareSpec(spec, prevSpec) {
+        if (this._brushComponents) {
+            this._relativeRegions.forEach((region, index) => {
+                this._updateBrushComponent(region, index);
+            });
         }
-        return data;
+        const result = super._compareSpec(spec, prevSpec);
+        if (!isEqual(prevSpec, spec)) {
+            result.reRender = true;
+            result.reMake = true;
+        }
+        return result;
     }
-    _extendDatumOutOfBrush(elementsMap) {
+    onLayoutEnd(ctx) {
         var _a;
-        const data = [];
-        for (const elementKey in elementsMap) {
-            data.push((_a = elementsMap[elementKey].data) === null || _a === void 0 ? void 0 : _a[0]);
+        super.onLayoutEnd(ctx);
+        if (this._option.disableTriggerEvent) {
+            return;
+        }
+        const brushVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
+        if (brushVisible) {
+            if (!this._brushComponents) {
+                this._brushComponents = [];
+                this._relativeRegions.forEach((region, index) => {
+                    this._createBrushComponent(region, index);
+                });
+            }
+            else {
+                this._relativeRegions.forEach((region, index) => {
+                    this._updateBrushComponent(region, index);
+                });
+            }
         }
-        return data;
-    }
-    _getBrushInteractiveAttr(region) {
-        const regionLayoutPosition = region.getLayoutStartPoint();
-        const regionLayoutRect = region.getLayoutRect();
-        const seriesRegionStartX = regionLayoutPosition.x;
-        const seriesRegionEndX = seriesRegionStartX + regionLayoutRect.width;
-        const seriesRegionStartY = regionLayoutPosition.y;
-        const seriesRegionEndY = seriesRegionStartY + regionLayoutRect.height;
-        return {
-            interactiveRange: {
-                minY: seriesRegionStartY,
-                maxY: seriesRegionEndY,
-                minX: seriesRegionStartX,
-                maxX: seriesRegionEndX
-            },
-            xRange: [seriesRegionStartX, seriesRegionEndX],
-            yRange: [seriesRegionStartY, seriesRegionEndY]
-        };
     }
     _updateBrushComponent(region, componentIndex) {
         const interactiveAttr = this._getBrushInteractiveAttr(region);
@@ -100189,7 +100475,6 @@ class Brush extends BaseComponent {
         brushComponent.setAttributes(interactiveAttr);
         this._initMarkBrushState(componentIndex, '');
         brushComponent.children[0].removeAllChild();
-        this._needInitOutState = true;
     }
     _createBrushComponent(region, componentIndex) {
         var _a, _b;
@@ -100197,9 +100482,12 @@ class Brush extends BaseComponent {
         const brush = new Brush$1(Object.assign(Object.assign(Object.assign({ zIndex: this.layoutZIndex, brushStyle: transformToGraphic((_a = this._spec) === null || _a === void 0 ? void 0 : _a.style) }, interactiveAttr), this._spec), { disableTriggerEvent: this._option.disableTriggerEvent }));
         brush.id = (_b = this._spec.id) !== null && _b !== void 0 ? _b : `brush-${this.id}`;
         this.getContainer().add(brush);
-        const { brushMode = 'single' } = this._spec;
         this._brushComponents.push(brush);
         this._cacheInteractiveRangeAttrs.push(interactiveAttr);
+        brush.addEventListener(IOperateType.brushActive, (e) => {
+            this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE);
+            this._emitEvent(ChartEvent.brushActive, region);
+        });
         brush.addEventListener(IOperateType.drawStart, (e) => {
             this._emitEvent(ChartEvent.brushStart, region);
         });
@@ -100207,41 +100495,45 @@ class Brush extends BaseComponent {
             this._emitEvent(ChartEvent.brushStart, region);
         });
         brush.addEventListener(IOperateType.drawing, (e) => {
-            if (this._needInitOutState && brushMode === 'single') {
-                this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE);
-            }
-            this._needInitOutState = false;
             this._needDisablePickable = true;
-            this._handleBrushChange(ChartEvent.brushChange, region, e);
+            this._handleBrushChange(region, e);
             this._emitEvent(ChartEvent.brushChange, region);
         });
         brush.addEventListener(IOperateType.moving, (e) => {
-            this._handleBrushChange(ChartEvent.brushChange, region, e);
+            this._handleBrushChange(region, e);
             this._emitEvent(ChartEvent.brushChange, region);
         });
         brush.addEventListener(IOperateType.brushClear, (e) => {
             this._initMarkBrushState(componentIndex, '');
-            this._needInitOutState = true;
             this._needDisablePickable = false;
-            this._handleBrushChange(ChartEvent.brushChange, region, e);
-            this._handleBrushChange(ChartEvent.brushClear, region, e);
-            this._emitEvent(ChartEvent.brushChange, region);
             this._emitEvent(ChartEvent.brushClear, region);
         });
         brush.addEventListener(IOperateType.drawEnd, (e) => {
-            this._needInitOutState = true;
+            var _a;
             this._needDisablePickable = false;
             const { operateMask } = e.detail;
-            this._handleBrushChange(ChartEvent.brushEnd, region, e);
-            const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
-            if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
-                this._setAxisAndDataZoom(operateMask, region);
+            if ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.onBrushEnd) {
+                if (this._spec.onBrushEnd(e) === true) {
+                    this.clearGraphic();
+                    this._initMarkBrushState(componentIndex, '');
+                    this._needDisablePickable = false;
+                    this._emitEvent(ChartEvent.brushClear, region);
+                }
+                else {
+                    this._spec.onBrushEnd(e);
+                    this._emitEvent(ChartEvent.brushEnd, region);
+                }
+            }
+            else {
+                const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
+                if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
+                    this._setAxisAndDataZoom(operateMask, region);
+                }
+                this._emitEvent(ChartEvent.brushEnd, region);
             }
-            this._emitEvent(ChartEvent.brushEnd, region);
         });
         brush.addEventListener(IOperateType.moveEnd, (e) => {
             const { operateMask } = e.detail;
-            this._handleBrushChange(ChartEvent.brushEnd, region, e);
             const inBrushData = this._extendDataInBrush(this._inBrushElementsMap);
             if (!this._spec.zoomWhenEmpty && inBrushData.length > 0) {
                 this._setAxisAndDataZoom(operateMask, region);
@@ -100249,12 +100541,65 @@ class Brush extends BaseComponent {
             this._emitEvent(ChartEvent.brushEnd, region);
         });
     }
-    _handleBrushChange(eventType, region, e) {
+    _getBrushInteractiveAttr(region) {
+        const regionLayoutPosition = region.getLayoutStartPoint();
+        const regionLayoutRect = region.getLayoutRect();
+        const seriesRegionStartX = regionLayoutPosition.x;
+        const seriesRegionEndX = seriesRegionStartX + regionLayoutRect.width;
+        const seriesRegionStartY = regionLayoutPosition.y;
+        const seriesRegionEndY = seriesRegionStartY + regionLayoutRect.height;
+        return {
+            interactiveRange: {
+                minY: seriesRegionStartY,
+                maxY: seriesRegionEndY,
+                minX: seriesRegionStartX,
+                maxX: seriesRegionEndX
+            },
+            xRange: [seriesRegionStartX, seriesRegionEndX],
+            yRange: [seriesRegionStartY, seriesRegionEndY]
+        };
+    }
+    _transformBrushedMarkAttr(brushedStyle) {
+        const styleResult = {};
+        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbol) {
+            styleResult.symbolType = brushedStyle.symbol;
+        }
+        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbolSize) {
+            styleResult.size = brushedStyle.symbolSize;
+        }
+        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.color) {
+            styleResult.fill = brushedStyle.color;
+        }
+        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.colorAlpha) {
+            styleResult.fillOpacity = brushedStyle.colorAlpha;
+        }
+        return Object.assign(Object.assign({}, transformToGraphic(brushedStyle)), styleResult);
+    }
+    _handleBrushChange(region, e) {
         const { operateMask } = e.detail;
         this._reconfigItem(operateMask, region);
         this._reconfigLinkedItem(operateMask, region);
     }
+    _extendDataInBrush(elementsMap) {
+        var _a, _b;
+        const data = [];
+        for (const brushName in elementsMap) {
+            for (const elementKey in elementsMap[brushName]) {
+                data.push(Object.assign({}, (_b = (_a = elementsMap[brushName][elementKey]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0]));
+            }
+        }
+        return data;
+    }
+    _extendDatumOutOfBrush(elementsMap) {
+        var _a;
+        const data = [];
+        for (const elementKey in elementsMap) {
+            data.push((_a = elementsMap[elementKey].data) === null || _a === void 0 ? void 0 : _a[0]);
+        }
+        return data;
+    }
     _emitEvent(eventType, region) {
+        var _a;
         this.event.emit(eventType, {
             model: this,
             value: {
@@ -100269,27 +100614,28 @@ class Brush extends BaseComponent {
                 linkedInBrushElementsMap: this._linkedInBrushElementsMap,
                 linkedOutOfBrushElementsMap: this._linkedOutOfBrushElementsMap,
                 zoomRecord: this._zoomRecord
-            }
+            },
+            vchart: (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalInstance
         });
     }
-    _transformBrushedMarkAttr(brushedStyle) {
-        const styleResult = {};
-        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbol) {
-            styleResult.symbolType = brushedStyle.symbol;
-        }
-        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.symbolSize) {
-            styleResult.size = brushedStyle.symbolSize;
-        }
-        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.color) {
-            styleResult.fill = brushedStyle.color;
-        }
-        if (brushedStyle === null || brushedStyle === void 0 ? void 0 : brushedStyle.colorAlpha) {
-            styleResult.fillOpacity = brushedStyle.colorAlpha;
-        }
-        return Object.assign(Object.assign({}, transformToGraphic(brushedStyle)), styleResult);
-    }
     _reconfigItem(operateMask, region) {
+        var _a, _b, _c;
+        if (!(operateMask === null || operateMask === void 0 ? void 0 : operateMask.globalTransMatrix) || !((_a = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _a === void 0 ? void 0 : _a.points)) {
+            return;
+        }
+        const points = (_c = (_b = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _b === void 0 ? void 0 : _b.points) !== null && _c !== void 0 ? _c : [];
+        const { a, b, c, d, e, f } = operateMask.globalTransMatrix;
+        const pointsCoord = points.map((p) => {
+            return {
+                x: a * p.x + c * p.y + e,
+                y: b * p.x + d * p.y + f
+            };
+        });
+        const { markTypeFilter = [] } = this._spec;
         this._itemMap[region.id].forEach((mark) => {
+            if (markTypeFilter.includes(mark.type)) {
+                return;
+            }
             const grammarMark = mark.getProduct();
             if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
                 return;
@@ -100299,7 +100645,8 @@ class Brush extends BaseComponent {
                 var _a, _b, _c;
                 const graphicItem = el.getGraphicItem();
                 const elementKey = mark.id + '_' + el.key;
-                if (((_a = this._outOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) && this._isBrushContainItem(operateMask, graphicItem)) {
+                const isBrushContainItem = this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem);
+                if (((_a = this._outOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) && isBrushContainItem) {
                     el.addState(IN_BRUSH_STATE);
                     if (!this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) {
                         this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name] = {};
@@ -100307,8 +100654,7 @@ class Brush extends BaseComponent {
                     this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name][elementKey] = el;
                     delete this._outOfBrushElementsMap[elementKey];
                 }
-                else if (((_c = (_b = this._inBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) &&
-                    !this._isBrushContainItem(operateMask, graphicItem)) {
+                else if (((_c = (_b = this._inBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) && !isBrushContainItem) {
                     el.removeState(IN_BRUSH_STATE);
                     el.addState(OUT_BRUSH_STATE);
                     this._outOfBrushElementsMap[elementKey] = el;
@@ -100319,14 +100665,36 @@ class Brush extends BaseComponent {
         });
     }
     _reconfigLinkedItem(operateMask, region) {
+        var _a;
+        if (!(operateMask === null || operateMask === void 0 ? void 0 : operateMask.globalTransMatrix) || !((_a = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _a === void 0 ? void 0 : _a.points)) {
+            return;
+        }
         const regionLayoutPos = region.getLayoutStartPoint();
         const seriesId = region.getSeries().map(s => s.id);
         this._linkedSeries.forEach((s) => {
+            var _a, _b;
             if (!seriesId.includes(s.id)) {
                 const sRegionLayoutPos = s.getRegion().getLayoutStartPoint();
                 const regionOffsetX = sRegionLayoutPos.x - regionLayoutPos.x;
                 const regionOffsetY = sRegionLayoutPos.y - regionLayoutPos.y;
+                const points = (_b = (_a = operateMask === null || operateMask === void 0 ? void 0 : operateMask.attribute) === null || _a === void 0 ? void 0 : _a.points) !== null && _b !== void 0 ? _b : [];
+                const { a, b, c, d, e, f } = operateMask.globalTransMatrix;
+                const dx = regionOffsetX || 0;
+                const dy = regionOffsetY || 0;
+                const pointsCoord = points.map((p) => {
+                    return {
+                        x: a * p.x + c * p.y + e + dx,
+                        y: b * p.x + d * p.y + f + dy
+                    };
+                });
+                operateMask.globalAABBBounds
+                    .clone()
+                    .set(operateMask.globalAABBBounds.x1 + dx, operateMask.globalAABBBounds.y1 + dy, operateMask.globalAABBBounds.x2 + dx, operateMask.globalAABBBounds.y2 + dy);
+                const { markTypeFilter = [] } = this._spec;
                 this._linkedItemMap[s.id].forEach((mark) => {
+                    if (markTypeFilter.includes(mark.type)) {
+                        return;
+                    }
                     const grammarMark = mark.getProduct();
                     if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
                         return;
@@ -100337,7 +100705,7 @@ class Brush extends BaseComponent {
                         const graphicItem = el.getGraphicItem();
                         const elementKey = mark.id + '_' + el.key;
                         if (((_a = this._linkedOutOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) &&
-                            this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY })) {
+                            this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem)) {
                             el.addState(IN_BRUSH_STATE);
                             if (!this._linkedInBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) {
                                 this._linkedInBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name] = {};
@@ -100346,7 +100714,7 @@ class Brush extends BaseComponent {
                             delete this._linkedOutOfBrushElementsMap[elementKey];
                         }
                         else if (((_c = (_b = this._linkedInBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) &&
-                            !this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY })) {
+                            !this._isBrushContainItem(operateMask.globalAABBBounds, pointsCoord, graphicItem)) {
                             el.removeState(IN_BRUSH_STATE);
                             el.addState(OUT_BRUSH_STATE);
                             this._linkedOutOfBrushElementsMap[elementKey] = el;
@@ -100357,75 +100725,81 @@ class Brush extends BaseComponent {
             }
         });
     }
-    _isBrushContainItem(brushMask, item, linkedOffset) {
-        var _a, _b, _c;
-        if (!(brushMask === null || brushMask === void 0 ? void 0 : brushMask.globalTransMatrix) || !((_a = brushMask === null || brushMask === void 0 ? void 0 : brushMask.attribute) === null || _a === void 0 ? void 0 : _a.points)) {
-            return false;
-        }
-        const points = (_c = (_b = brushMask === null || brushMask === void 0 ? void 0 : brushMask.attribute) === null || _b === void 0 ? void 0 : _b.points) !== null && _c !== void 0 ? _c : [];
-        const { a, b, c, d, e, f } = brushMask.globalTransMatrix;
-        const dx = (linkedOffset === null || linkedOffset === void 0 ? void 0 : linkedOffset.dx) || 0;
-        const dy = (linkedOffset === null || linkedOffset === void 0 ? void 0 : linkedOffset.dy) || 0;
-        const pointsCoord = points.map((p) => {
-            return {
-                x: a * p.x + c * p.y + e + dx,
-                y: b * p.x + d * p.y + f + dy
-            };
-        });
-        brushMask.globalAABBBounds
-            .clone()
-            .set(brushMask.globalAABBBounds.x1 + dx, brushMask.globalAABBBounds.y1 + dy, brushMask.globalAABBBounds.x2 + dx, brushMask.globalAABBBounds.y2 + dy);
-        const x = item.globalTransMatrix.e;
-        const y = item.globalTransMatrix.f;
+    _isBrushContainItem(brushMaskAABBBounds, brushMaskPointsCoord, item) {
         let itemBounds = [];
-        if (item.type === 'symbol') {
-            const { size: itemSize = 0 } = item === null || item === void 0 ? void 0 : item.attribute;
-            const size = array(itemSize)[0] / 2;
+        if (['symbol', 'rect'].includes(item.type)) {
+            const { x1, x2, y1, y2 } = item === null || item === void 0 ? void 0 : item.globalAABBBounds;
             itemBounds = [
                 {
-                    x: x - size,
-                    y: y - size
+                    x: x1,
+                    y: y1
                 },
                 {
-                    x: x + size,
-                    y: y - size
+                    x: x2,
+                    y: y1
                 },
                 {
-                    x: x + size,
-                    y: y + size
+                    x: x2,
+                    y: y2
                 },
                 {
-                    x: x - size,
-                    y: y + size
+                    x: x1,
+                    y: y2
                 }
             ];
-            return polygonIntersectPolygon(pointsCoord, itemBounds);
+            return polygonIntersectPolygon(brushMaskPointsCoord, itemBounds);
         }
-        else if (item.type === 'rect') {
-            const { x1, x2, y1, y2 } = item === null || item === void 0 ? void 0 : item.AABBBounds;
-            const width = Math.abs(x1 - x2);
-            const height = Math.abs(y1 - y2);
-            itemBounds = [
-                {
-                    x: x,
-                    y: y
-                },
-                {
-                    x: x + width,
-                    y: y
-                },
-                {
-                    x: x + width,
-                    y: y + height
-                },
-                {
-                    x: x,
-                    y: y + height
+        return brushMaskAABBBounds.intersects(item.globalAABBBounds);
+    }
+    _initMarkBrushState(componentIndex, stateName) {
+        this._brushComponents.forEach((brush, index) => {
+            if (index !== componentIndex) {
+                brush.children[0].removeAllChild();
+            }
+        });
+        this._inBrushElementsMap = {};
+        this._outOfBrushElementsMap = {};
+        this._linkedInBrushElementsMap = {};
+        this._linkedOutOfBrushElementsMap = {};
+        const { markTypeFilter = [] } = this._spec;
+        Object.entries(this._itemMap).forEach(([regionId, marks]) => {
+            marks.forEach((mark) => {
+                if (markTypeFilter.includes(mark.type)) {
+                    return;
                 }
-            ];
-            return polygonIntersectPolygon(pointsCoord, itemBounds);
-        }
-        return brushMask.globalAABBBounds.intersects(item.globalAABBBounds);
+                const grammarMark = mark.getProduct();
+                if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
+                    return;
+                }
+                const elements = grammarMark.elements;
+                elements.forEach((el) => {
+                    const elementKey = mark.id + '_' + el.key;
+                    el.removeState(IN_BRUSH_STATE);
+                    el.removeState(OUT_BRUSH_STATE);
+                    el.addState(stateName);
+                    this._outOfBrushElementsMap[elementKey] = el;
+                });
+            });
+        });
+        Object.entries(this._linkedItemMap).forEach(([seriesId, marks]) => {
+            marks.forEach((mark) => {
+                if (markTypeFilter.includes(mark.type)) {
+                    return;
+                }
+                const grammarMark = mark.getProduct();
+                if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
+                    return;
+                }
+                const elements = grammarMark.elements;
+                elements.forEach((el) => {
+                    const elementKey = mark.id + '_' + el.key;
+                    el.removeState(IN_BRUSH_STATE);
+                    el.removeState(OUT_BRUSH_STATE);
+                    el.addState(stateName);
+                    this._linkedOutOfBrushElementsMap[elementKey] = el;
+                });
+            });
+        });
     }
     _stateClamp(state) {
         return Math.min(Math.max(0, state), 1);
@@ -100491,139 +100865,9 @@ class Brush extends BaseComponent {
             });
         }
     }
-    _bindRegions() {
-        if (isValid$1(this._spec.regionId) && isValid$1(this._spec.regionIndex)) {
-            this._relativeRegions = this._option.getAllRegions();
-        }
-        this._relativeRegions = this._option.getRegionsInUserIdOrIndex(array(this._spec.regionId), array(this._spec.regionIndex));
-    }
-    _bindLinkedSeries() {
-        if (isValid$1(this._spec.brushLinkSeriesId) && isValid$1(this._spec.brushLinkSeriesIndex)) {
-            return;
-        }
-        this._linkedSeries = this._option.getSeriesInUserIdOrIndex(array(this._spec.brushLinkSeriesId), array(this._spec.brushLinkSeriesIndex));
-    }
-    _initRegionAxisMap() {
-        if (isValid$1(this._spec.axisId)) {
-            array(this._spec.axisId).forEach((axisId) => {
-                this._releatedAxes.push(this._option.getComponentByUserId(axisId));
-            });
-        }
-        else if (isValid$1(this._spec.axisIndex)) {
-            array(this._spec.axisIndex).forEach((axisIndex) => {
-                this._releatedAxes.push(this._option.getComponentByIndex('axes', axisIndex));
-            });
-        }
-        else {
-            this._releatedAxes = this._option.getComponentsByKey('axes');
-        }
-        this._releatedAxes.forEach((axis) => {
-            axis === null || axis === void 0 ? void 0 : axis.getRegions().forEach((region) => {
-                if (this._regionAxisMap['region_' + region.id]) {
-                    this._regionAxisMap['region_' + region.id].push(axis);
-                }
-                else {
-                    this._regionAxisMap['region_' + region.id] = [axis];
-                }
-            });
-        });
-    }
-    _initAxisDataZoomMap() {
-        this._option.getComponentsByKey('dataZoom').forEach((dz) => {
-            if (dz.relatedAxisComponent) {
-                this._axisDataZoomMap[dz.relatedAxisComponent.id] = dz;
-            }
-        });
-    }
-    _initNeedOperatedItem() {
-        const seriesUserId = this._spec.seriesId;
-        const seriesIndex = this._spec.seriesIndex;
-        this._relativeRegions.forEach(r => {
-            const allMarks = [];
-            r.getSeries().forEach((s) => {
-                if ((seriesUserId && array(seriesUserId).includes(s.userId.toString())) ||
-                    (seriesIndex && array(seriesIndex).includes(s.getSpecIndex())) ||
-                    (!seriesIndex && !seriesUserId)) {
-                    allMarks.push(...s.getMarksWithoutRoot());
-                }
-                this._itemMap[r.id] = allMarks;
-            });
-        });
-        this._linkedSeries.forEach(s => {
-            this._linkedItemMap[s.id] = s.getMarksWithoutRoot();
-        });
-    }
-    _initMarkBrushState(componentIndex, stateName) {
-        this._brushComponents.forEach((brush, index) => {
-            if (index !== componentIndex) {
-                brush.children[0].removeAllChild();
-            }
-        });
-        this._inBrushElementsMap = {};
-        this._outOfBrushElementsMap = {};
-        this._linkedInBrushElementsMap = {};
-        this._linkedOutOfBrushElementsMap = {};
-        this._option.getAllSeries().forEach((s) => {
-            s.getMarksWithoutRoot().forEach((mark) => {
-                const grammarMark = mark.getProduct();
-                if (!grammarMark || !grammarMark.elements || !grammarMark.elements.length) {
-                    return;
-                }
-                const elements = grammarMark.elements;
-                elements.forEach((el) => {
-                    const elementKey = mark.id + '_' + el.key;
-                    el.removeState(IN_BRUSH_STATE);
-                    el.removeState(OUT_BRUSH_STATE);
-                    el.addState(stateName);
-                    this._outOfBrushElementsMap[elementKey] = el;
-                    this._linkedOutOfBrushElementsMap[elementKey] = el;
-                });
-            });
-        });
-    }
-    initEvent() {
-    }
-    onRender(ctx) {
-    }
-    changeRegions(regions) {
-    }
     _getNeedClearVRenderComponents() {
         return this._brushComponents;
     }
-    _compareSpec(spec, prevSpec) {
-        if (this._brushComponents) {
-            this._relativeRegions.forEach((region, index) => {
-                this._updateBrushComponent(region, index);
-            });
-        }
-        const result = super._compareSpec(spec, prevSpec);
-        if (!isEqual(prevSpec, spec)) {
-            result.reRender = true;
-            result.reMake = true;
-        }
-        return result;
-    }
-    onLayoutEnd(ctx) {
-        var _a;
-        super.onLayoutEnd(ctx);
-        if (this._option.disableTriggerEvent) {
-            return;
-        }
-        const brushVisible = (_a = this._spec.visible) !== null && _a !== void 0 ? _a : true;
-        if (brushVisible) {
-            if (!this._brushComponents) {
-                this._brushComponents = [];
-                this._relativeRegions.forEach((region, index) => {
-                    this._createBrushComponent(region, index);
-                });
-            }
-            else {
-                this._relativeRegions.forEach((region, index) => {
-                    this._updateBrushComponent(region, index);
-                });
-            }
-        }
-    }
     clearGraphic() {
         if (this._brushComponents) {
             this._brushComponents.forEach(brush => {
@@ -100634,7 +100878,9 @@ class Brush extends BaseComponent {
     clear() {
         if (this._brushComponents) {
             const container = this.getContainer();
-            this._brushComponents.forEach(brush => {
+            this._brushComponents.forEach((brush, index) => {
+                this._initMarkBrushState(index, '');
+                this._needDisablePickable = false;
                 brush.removeAllChild();
                 brush.releaseBrushEvents();
                 if (container) {
@@ -102628,16 +102874,29 @@ class DomTooltipHandler extends BaseTooltipHandler {
         }
     }
     _updateDomStyle(sizeKey = 'width') {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const rootDom = this._rootDom;
         const contentDom = [...rootDom.children].find(child => child.className.includes(TOOLTIP_CONTENT_BOX_CLASS_NAME));
+        const titleDom = [...rootDom.children].find(child => child.className.includes(TOOLTIP_TITLE_CLASS_NAME));
         if (contentDom) {
             const tooltipSpec = this._component.getSpec();
             const contentStyle = {};
-            if (isValid$1((_a = tooltipSpec === null || tooltipSpec === void 0 ? void 0 : tooltipSpec.style) === null || _a === void 0 ? void 0 : _a.maxContentHeight)) {
-                const titleDom = rootDom.children[0];
+            const titleLabel = (_a = tooltipSpec.style) === null || _a === void 0 ? void 0 : _a.titleLabel;
+            const autoFixTitleWidth = titleLabel && titleLabel.autoWidth && titleLabel.multiLine !== false;
+            if (autoFixTitleWidth && titleDom) {
+                const maxWidth = [...contentDom.children].reduce((res, col) => {
+                    return sizeKey === 'height'
+                        ? res + col.getBoundingClientRect().width
+                        : Math.max(res, col.getBoundingClientRect().width);
+                }, 0);
+                if (maxWidth > 0) {
+                    titleDom.style.maxWidth = `${maxWidth}px`;
+                    titleDom.style.maxWidth = `${Math.ceil(contentDom.getBoundingClientRect().width)}px`;
+                }
+            }
+            if (isValid$1((_b = tooltipSpec === null || tooltipSpec === void 0 ? void 0 : tooltipSpec.style) === null || _b === void 0 ? void 0 : _b.maxContentHeight)) {
                 const titleHeight = titleDom && titleDom.className.includes(TOOLTIP_TITLE_CLASS_NAME)
-                    ? titleDom.getBoundingClientRect().height + ((_b = tooltipSpec.style.spaceRow) !== null && _b !== void 0 ? _b : 0)
+                    ? titleDom.getBoundingClientRect().height + ((_c = tooltipSpec.style.spaceRow) !== null && _c !== void 0 ? _c : 0)
                     : 0;
                 const viewRect = this._chartOption.getChartViewRect();
                 const maxHeight = calcLayoutNumber(tooltipSpec.style.maxContentHeight, Math.min(viewRect.height, document.body.clientHeight) -
@@ -102655,7 +102914,7 @@ class DomTooltipHandler extends BaseTooltipHandler {
             if (rows) {
                 for (let i = 0; i < rows.length; i++) {
                     const row = rows[i];
-                    const cols = (_c = row.children) !== null && _c !== void 0 ? _c : [];
+                    const cols = (_d = row.children) !== null && _d !== void 0 ? _d : [];
                     for (let j = 0; j < cols.length; j++) {
                         const width = cols[j].getBoundingClientRect()[sizeKey];
                         if (widthByCol[j] === undefined || widthByCol[j] < width) {
@@ -102665,7 +102924,7 @@ class DomTooltipHandler extends BaseTooltipHandler {
                 }
                 for (let i = 0; i < rows.length; i++) {
                     const row = rows[i];
-                    const cols = (_d = row.children) !== null && _d !== void 0 ? _d : [];
+                    const cols = (_e = row.children) !== null && _e !== void 0 ? _e : [];
                     for (let j = 0; j < cols.length; j++) {
                         cols[j].style[sizeKey] = `${widthByCol[j]}px`;
                     }
@@ -103831,4 +104090,4 @@ const registerMediaQuery = () => {
     registerChartPlugin(MediaQuery);
 };
 
-export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, 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, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };
+export { Arc3dMark, ArcMark, AreaChart, AreaMark, AreaSeries, AxisSyncPlugin, Bar3dChart, Bar3dSeries, BarChart, BarSeries, BaseChart, BaseChartSpecTransformer, BaseMark, BaseSeries, BoxPlotChart, BoxPlotSeries, Brush, CanvasTooltipHandler, CartesianAxis, CartesianBandAxis, CartesianChartSpecTransformer, CartesianCrossHair, CartesianLinearAxis, CartesianLogAxis, CartesianMarkArea, CartesianMarkLine, CartesianMarkPoint, CartesianSeries, CartesianSymlogAxis, CartesianTimeAxis, CirclePackingChart, CirclePackingSeries, CircularProgressChart, CircularProgressSeries, CommonChart, CommonChartSpecTransformer, ComponentMark, ComposedEventMapper, ContinuousLegend, CorrelationChart, CorrelationSeries, CustomMark, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, DEFAULT_DATA_INDEX, DEFAULT_DATA_KEY, DEFAULT_DATA_SERIES_FIELD, DEFAULT_MEASURE_CANVAS_ID, DEFAULT_SERIES_STYLE_NAME, DataZoom, DimensionClickEvent, DimensionEventEnum, DimensionHoverEvent, DiscreteLegend, DomTooltipHandler, DotSeries, Event$1 as Event, Factory$1 as Factory, FormatterPlugin, Funnel3dChart, Funnel3dSeries, FunnelChart, FunnelSeries, GaugeChart, GaugePointerSeries, GaugeSeries, GeoCoordinate, GeoMarkPoint, GridLayout, GroupMark, HeatmapChart, HeatmapSeries, Histogram3dChart, HistogramChart, ImageMark, Indicator, Label, Layout$1 as Layout, Layout3d, LineChart, LineMark, LineSeries, LinearProgressChart, LinearProgressSeries, LinkSeries, LiquidChart, LiquidSeries, MOSAIC_CAT_END_PERCENT, MOSAIC_CAT_START_PERCENT, MOSAIC_VALUE_END_PERCENT, MOSAIC_VALUE_START_PERCENT, MapChart, MapLabelComponent, MapSeries, MediaQuery, MosaicChart, MosaicSeries, PREFIX, PathMark, PictogramChart, PictogramSeries, Pie3dChart, Pie3dSeries, PieChart, PieSeries, Player, PolarAxis, PolarBandAxis, PolarCrossHair, PolarLinearAxis, PolarMarkArea, PolarMarkLine, PolarMarkPoint, PolarSeries, PolygonMark, ProgressLikeSeries, Pyramid3dMark, RadarChart, RadarSeries, RangeAreaChart, RangeAreaSeries, RangeColumn3dChart, RangeColumn3dSeries, RangeColumnChart, RangeColumnSeries, Rect3dMark, 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, SankeyChart, SankeySeries, ScatterChart, ScatterSeries, ScrollBar, SequenceChart, SeriesMarkNameEnum, SeriesTypeEnum, SeriesTypeForThemeEnum, SunburstChart, SunburstSeries, SymbolMark, TextMark, ThemeManager$1 as ThemeManager, Title, Tooltip, TooltipResult, TotalLabel, TreemapChart, TreemapSeries, VChart, VennChart, VennSeries, WaterfallChart, WaterfallSeries, WordCloud3dChart, WordCloud3dSeries, WordCloudChart, WordCloudSeries, alternatingWave, builtinThemes, centerToCorner, columnCenterToEdge, columnEdgeToCenter, columnLeftToRight, columnRightToLeft, computeActualDataScheme, cornerToCenter, createArc, createArea, createGroup, createLine, createRect, createRichText, createSymbol, createText, darkTheme$1 as darkTheme, dataScheme, VChart as default, defaultThemeName, diagonalCenterToEdge, diagonalTopLeftToBottomRight, functionTransform, getActualColor, getCartesianDimensionInfo, getColorSchemeBySeries, getDataScheme, getFieldAlias, getMergedTheme, getPolarDimensionInfo, getRegionStackGroup, getTheme, hasThemeMerged, isColorKey, isProgressiveDataColorScheme, isTokenKey, lightTheme, mergeFields, particleEffect, pulseWave, queryColorFromColorScheme, queryToken, randomOpacity, register3DPlugin, registerAllEnv, registerAllMarks, registerAnimate, registerArc3dMark, registerArcMark, registerAreaChart, registerAreaMark, registerAreaSeries, registerBar3dChart, registerBar3dSeries, registerBarChart, registerBarSeries, registerBoxplotChart, registerBoxplotSeries, registerBrowserEnv, registerBrush, registerCanvasTooltipHandler, registerCartesianBandAxis, registerCartesianCrossHair, registerCartesianLinearAxis, registerCartesianLogAxis, registerCartesianSymlogAxis, registerCartesianTimeAxis, registerChartPlugin, registerCirclePackingChart, registerCirclePackingSeries, registerCircularProgressChart, registerCircularProgressSeries, registerCommonChart, registerComponentMark, registerContinuousLegend, registerCorrelationChart, registerCustomMark, registerDataZoom, registerDiscreteLegend, registerDomTooltipHandler, registerDotSeries, registerDragPlugin, registerFormatPlugin, registerFunnel3dChart, registerFunnel3dSeries, registerFunnelChart, registerFunnelSeries, registerGaugeChart, registerGaugePointerSeries, registerGaugeSeries, registerGeoCoordinate, registerGeoMarkPoint, registerGesturePlugin, registerGridLayout, registerGroupMark, registerHarmonyEnv, registerHeatmapChart, registerHeatmapSeries, registerHistogram3dChart, registerHistogramChart, registerHtmlAttributePlugin, registerImageMark, registerIndicator, registerLabel, registerLarkEnv, registerLayout3d, registerLineChart, registerLineMark, registerLineSeries, registerLinearProgressChart, registerLinearProgressSeries, registerLinkSeries, registerLiquidChart, registerLiquidSeries, registerLynxEnv, registerMapChart, registerMapLabel, registerMapSeries, registerMarkArea, registerMarkLine, registerMarkPoint, registerMediaQuery, registerMorph, registerMosaicChart, registerMosaicSeries, registerNodeEnv, registerPathMark, registerPictogramChart, registerPictogramSeries, registerPie3dChart, registerPie3dSeries, registerPieChart, registerPieSeries, registerPlayer, registerPolarBandAxis, registerPolarCrossHair, registerPolarLinearAxis, registerPolarMarkArea, registerPolarMarkLine, registerPolarMarkPoint, registerPolygonMark, registerPoptip, registerPyramid3dMark, registerRadarChart, registerRadarSeries, registerRangeAreaChart, registerRangeAreaSeries, registerRangeColumn3dChart, registerRangeColumn3dSeries, registerRangeColumnChart, registerRangeColumnSeries, registerReactAttributePlugin, registerRect3dMark, registerRectMark, registerRippleMark, registerRoseChart, registerRoseSeries, registerRuleMark, registerSankeyChart, registerSankeySeries, registerScatterChart, registerScatterSeries, registerScrollBar, registerSequenceChart, registerSunBurstSeries, registerSunburstChart, registerSymbolMark, registerTTEnv, registerTaroEnv, registerTextMark, registerTheme, registerTitle, registerTooltip, registerTotalLabel, registerTreemapChart, registerTreemapSeries, registerVennChart, registerVennSeries, registerWXEnv, registerWaterfallChart, registerWaterfallSeries, registerWordCloud3dChart, registerWordCloud3dSeries, registerWordCloudChart, registerWordCloudSeries, registerWordCloudShapeChart, removeTheme, rippleEffect, rotationScan, rowBottomToTop, rowCenterToEdge, rowEdgeToCenter, rowTopToBottom, snakeWave, sortStackValueGroup, specTransform, spiralEffect, stack, stackGroup, stackMosaic, stackMosaicTotal, stackOffsetSilhouette, stackTotal, themeExist, themes, token, transformColorSchemeToStandardStruct, version, vglobal };