@visactor/vchart 1.13.9-alpha.1 → 1.13.9-alpha.10

package/build/index.es.js

@@ -31425,6 +31425,10 @@ const SCROLLBAR_START_EVENT = "scrollDown";
 const SCROLLBAR_EVENT$1 = "scrollDrag";
 const SCROLLBAR_END_EVENT$1 = "scrollUp";
 
+function getEndTriggersOfDrag() {
+  return "browser" === vglobal.env ? ["pointerup", "pointerleave", "pointercancel"] : ["pointerup", "pointerleave", "pointerupoutside"];
+}
+
 const delayMap$3 = {
   debounce: debounce,
   throttle: throttle
@@ -31457,6 +31461,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       }
       this.setScrollRange([currentScrollValue - (range[1] - range[0]) / 2, currentScrollValue + (range[1] - range[0]) / 2], !1), this.stage && !this.stage.autoRender && this.stage.renderNextFrame();
     }, this._onSliderPointerDown = e => {
+      this._clearDragEvents();
       const {
         stopSliderDownPropagation = !0
       } = this.attribute;
@@ -31471,11 +31476,15 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       this._prePos = "horizontal" === direction ? x : y, this._dispatchEvent(SCROLLBAR_START_EVENT, {
         pos: this._prePos,
         event: e
-      }), "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-        capture: !0
-      }), vglobal.addEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-        capture: !0
-      }), this.stage.addEventListener("pointerup", this._onSliderPointerUp), this.stage.addEventListener("pointerupoutside", this._onSliderPointerUp));
+      });
+      const triggers = getEndTriggersOfDrag(),
+        obj = "browser" === vglobal.env ? vglobal : this.stage;
+      obj.addEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+        capture: !0,
+        passive: !0
+      }), triggers.forEach(trigger => {
+        obj.addEventListener(trigger, this._onSliderPointerUp);
+      });
     }, this._computeScrollValue = e => {
       const {
           direction: direction
@@ -31493,6 +31502,7 @@ 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;
@@ -31501,7 +31511,6 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
         [currentPos, currentScrollValue] = this._computeScrollValue(e);
       this.setScrollRange([preScrollRange[0] + currentScrollValue, preScrollRange[1] + currentScrollValue], !0), this._prePos = currentPos;
     }, this._onSliderPointerMoveWithDelay = 0 === this.attribute.delayTime ? this._onSliderPointerMove : delayMap$3[this.attribute.delayType](this._onSliderPointerMove, this.attribute.delayTime), this._onSliderPointerUp = e => {
-      e.preventDefault();
       const {
           range: preRange,
           limitRange = [0, 1]
@@ -31512,11 +31521,7 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       this._dispatchEvent(SCROLLBAR_END_EVENT$1, {
         pre: preRange,
         value: clampRange$1(range, limitRange[0], limitRange[1])
-      }), "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-        capture: !0
-      }), vglobal.removeEventListener("pointerup", this._onSliderPointerUp)) : (this.stage.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
-        capture: !0
-      }), this.stage.removeEventListener("pointerup", this._onSliderPointerUp), this.stage.removeEventListener("pointerupoutside", this._onSliderPointerUp));
+      }), this._clearDragEvents();
     };
   }
   setScrollRange(range) {
@@ -31665,6 +31670,16 @@ let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       sliderSize = this._sliderSize;
     return "horizontal" === direction ? clampRange$1([x1 + min * width, x1 + max * width], x1, width - sliderSize) : clampRange$1([y1 + min * height, y1 + max * height], y1, height - sliderSize);
   }
+  _clearDragEvents() {
+    const triggers = getEndTriggersOfDrag(),
+      obj = "browser" === vglobal.env ? vglobal : this.stage;
+    obj.removeEventListener("pointermove", this._onSliderPointerMoveWithDelay, {
+      capture: !0,
+      passive: !1
+    }), triggers.forEach(trigger => {
+      obj.removeEventListener(trigger, this._onSliderPointerUp);
+    });
+  }
   _reset() {
     this._sliderRenderBounds = null, this._sliderLimitRange = null;
   }
@@ -39013,14 +39028,20 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
     }, this.state = {
       start: 0,
       end: 1
-    }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
-      e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e), "browser" === vglobal.env && (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
-      }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)), this.addEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
+    }, this._statePointToData = state => state, this._handleTouchMove = e => {
+      this._activeState && e.preventDefault();
+    }, this._onHandlerPointerDown = (e, tag) => {
+      this._clearDragEvents(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandlerMask) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandlerMask) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e);
+      const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+        triggers = getEndTriggersOfDrag();
+      evtTarget.addEventListener("pointermove", this._onHandlerPointerMove, {
+        capture: !0,
+        passive: !1
+      }), triggers.forEach(trigger => {
+        evtTarget.addEventListener(trigger, this._onHandlerPointerUp);
       });
     }, this._pointerMove = e => {
-      e.stopPropagation();
+      e.preventDefault();
       const {
           start: startAttr,
           end: endAttr,
@@ -39037,13 +39058,12 @@ 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), 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", {
+      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", {
         start: start,
         end: end,
         tag: this._activeTag
       }));
     }, this._onHandlerPointerMove = 0 === this.attribute.delayTime ? this._pointerMove : delayMap$2[this.attribute.delayType](this._pointerMove, this.attribute.delayTime), this._onHandlerPointerUp = e => {
-      e.preventDefault();
       const {
         start: start,
         end: end,
@@ -39058,11 +39078,7 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
         start: this.state.start,
         end: this.state.end,
         tag: this._activeTag
-      }), "browser" === vglobal.env && (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
-      }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)), this.removeEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
-      }), this.removeEventListener("pointerup", this._onHandlerPointerUp);
+      }), this._clearDragEvents();
     };
     const {
       position: position,
@@ -39081,7 +39097,9 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
     } = this.attribute;
     this._startHandlerMask && this._startHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "start")), this._endHandlerMask && this._endHandlerMask.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "end")), this._middleHandlerSymbol && this._middleHandlerSymbol.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleSymbol")), this._middleHandlerRect && this._middleHandlerRect.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "middleRect"));
     const selectedTag = brushSelect ? "background" : "middleRect";
-    this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), this.addEventListener("pointerup", this._onHandlerPointerUp), this.addEventListener("pointerupoutside", this._onHandlerPointerUp), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave));
+    this._selectedBackground && this._selectedBackground.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), brushSelect && this._background && this._background.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), brushSelect && this._previewGroup && this._previewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, "background")), this._selectedPreviewGroup && this._selectedPreviewGroup.addEventListener("pointerdown", e => this._onHandlerPointerDown(e, selectedTag)), "auto" === showDetail && (this.addEventListener("pointerenter", this._onHandlerPointerEnter), this.addEventListener("pointerleave", this._onHandlerPointerLeave)), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    });
   }
   dragMaskSize() {
     const {
@@ -39112,11 +39130,21 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
       y: 0
     };
   }
+  _clearDragEvents() {
+    const evtTarget = "browser" === vglobal.env ? vglobal : this.stage,
+      triggers = getEndTriggersOfDrag();
+    evtTarget.removeEventListener("pointermove", this._onHandlerPointerMove, {
+      capture: !0,
+      passive: !1
+    }), triggers.forEach(trigger => {
+      evtTarget.removeEventListener(trigger, this._onHandlerPointerUp);
+    });
+  }
   _onHandlerPointerEnter(e) {
-    e.stopPropagation(), this._showText = !0, this.renderText();
+    this._showText = !0, this.renderText();
   }
   _onHandlerPointerLeave(e) {
-    e.stopPropagation(), this._showText = !1, this.renderText();
+    this._showText = !1, this.renderText();
   }
   backgroundDragZoom(startPos, endPos) {
     const {
@@ -39655,6 +39683,11 @@ let DataZoom$1 = class DataZoom extends AbstractComponent {
   setStatePointToData(callback) {
     isFunction$1(callback) && (this._statePointToData = callback);
   }
+  release(all) {
+    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    }), this._clearDragEvents();
+  }
 };
 DataZoom$1.defaultAttributes = DEFAULT_DATA_ZOOM_ATTRIBUTES;
 
@@ -39824,26 +39857,17 @@ 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), array(label).forEach(labelNode => {
-    const delayTime = delay + startSymbolDuration + lineDuration + endSymbolDuration;
-    graphicFadeIn(labelNode.getTextShape(), delayTime, labelDuration, easing), graphicFadeIn(labelNode.getBgRect(), delayTime, labelDuration, 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);
 }
 
 function commonLineFadeIn(line, label, duration, delay, easing) {
-  segmentFadeIn(line, delay, duration, easing), array(label).forEach(labelNode => {
-    tagFadeIn(labelNode, delay, duration, easing);
-  });
+  segmentFadeIn(line, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
 }
 function areaFadeIn(area, label, duration, delay, easing) {
-  graphicFadeIn(area, delay, duration, easing), array(label).forEach(labelNode => {
-    tagFadeIn(labelNode, delay, duration, easing);
-  });
+  graphicFadeIn(area, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
 }
 function arcAreaFadeIn(area, label, duration, delay, easing) {
-  graphicFadeIn(area, delay, duration, easing), array(label).forEach(labelNode => {
-    tagFadeIn(labelNode, delay, duration, easing);
-  });
+  graphicFadeIn(area, delay, duration, easing), tagFadeIn(label, delay, duration, easing);
 }
 function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
   var _a;
@@ -39851,19 +39875,13 @@ function pointFadeIn(itemLine, decorativeLine, item, duration, delay, easing) {
 }
 
 function commonLineFadeOut(line, label, duration, delay, easing) {
-  segmentFadeOut(line, delay, duration, easing), array(label).forEach(labelNode => {
-    tagFadeOut(labelNode, delay, duration, easing);
-  });
+  segmentFadeOut(line, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
 }
 function areaFadeOut(area, label, duration, delay, easing) {
-  graphicFadeOut(area, delay, duration, easing), array(label).forEach(labelNode => {
-    tagFadeOut(labelNode, delay, duration, easing);
-  });
+  graphicFadeOut(area, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
 }
 function arcAreaFadeOut(area, label, duration, delay, easing) {
-  graphicFadeOut(area, delay, duration, easing), array(label).forEach(labelNode => {
-    tagFadeOut(labelNode, delay, duration, easing);
-  });
+  graphicFadeOut(area, delay, duration, easing), tagFadeOut(label, delay, duration, easing);
 }
 function pointFadeOut(itemLine, decorativeLine, item, duration, delay, easing) {
   var _a;
@@ -40035,57 +40053,6 @@ 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;
@@ -40093,20 +40060,24 @@ class MarkCommonLine extends Marker {
   getLine() {
     return this._line;
   }
-  setLabelPos(labelNode, labelAttrs) {
+  getLabel() {
+    return this._label;
+  }
+  setLabelPos() {
     const {
+        label = {},
         limitRect: limitRect
       } = this.attribute,
       {
         position: position,
         confine: confine,
         autoRotate: autoRotate
-      } = labelAttrs,
-      labelPoint = this.getPointAttrByPosition(position, labelAttrs),
+      } = label,
+      labelPoint = this.getPointAttrByPosition(position),
       labelAngle = position.toString().toLocaleLowerCase().includes("start") ? this._line.getStartAngle() || 0 : this._line.getEndAngle() || 0;
-    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)
+    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)
     })), limitRect && confine) {
       const {
         x: x,
@@ -40114,7 +40085,7 @@ class MarkCommonLine extends Marker {
         width: width,
         height: height
       } = limitRect;
-      limitShapeInBounds(labelNode, {
+      limitShapeInBounds(this._label, {
         x1: x,
         y1: y,
         x2: x + width,
@@ -40123,14 +40094,36 @@ class MarkCommonLine extends Marker {
     }
   }
   initMarker(container) {
-    const line = this.createSegment();
-    line.name = "mark-common-line-line", this._line = line, container.add(line), this.addMarkLineLabels(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();
   }
   updateMarker() {
-    this.setLineAttributes(), this.updateMarkLineLabels();
+    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());
   }
 }
-mixin(MarkCommonLine, MarkLabelMixin);
 
 const FUZZY_EQUAL_DELTA = .001;
 const DEFAULT_MARK_LINE_THEME = {
@@ -40319,7 +40312,6 @@ const DEFAULT_MARK_ARC_LINE_THEME = {
     lineWidth: 0
   },
   label: {
-    autoRotate: !0,
     position: IMarkCommonArcLabelPosition.arcOuterMiddle,
     refX: 0,
     refY: 0,
@@ -40374,7 +40366,6 @@ const DEFAULT_MARK_AREA_THEME = {
 const DEFAULT_MARK_ARC_AREA_THEME = {
   interactive: !0,
   label: {
-    autoRotate: !0,
     position: IMarkCommonArcLabelPosition.arcOuterMiddle,
     textStyle: {
       fill: "#fff",
@@ -40630,12 +40621,15 @@ 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, labelAttrs) {
+  getPointAttrByPosition(position) {
     var _a;
     const {
+        label = {}
+      } = this.attribute,
+      {
         refX = 0,
         refY = 0
-      } = labelAttrs,
+      } = label,
       points = this._line.getMainSegmentPoints(),
       lineEndAngle = null !== (_a = this._line.getEndAngle()) && void 0 !== _a ? _a : 0,
       labelAngle = (lineEndAngle),
@@ -40661,9 +40655,9 @@ class MarkLine extends MarkCommonLine {
       angle: labelAngle
     };
   }
-  getRotateByAngle(angle, labelAttrs) {
+  getRotateByAngle(angle) {
     var _a;
-    return (isPostiveXAxis(angle) ? angle : angle - Math.PI) + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0);
+    return (isPostiveXAxis(angle) ? angle : angle - Math.PI) + (null !== (_a = this.attribute.label.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];
@@ -40729,12 +40723,6 @@ 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;
 
@@ -40749,6 +40737,9 @@ 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;
   }
@@ -40765,21 +40756,24 @@ 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(labelNode, labelAttrs) {
+  setLabelPos() {
     var _a;
-    if (this._area) {
-      const labelPosition = null !== (_a = labelAttrs.position) && void 0 !== _a ? _a : "middle",
+    if (this._label && this._area) {
+      const {
+          label = {}
+        } = this.attribute,
+        labelPosition = null !== (_a = label.position) && void 0 !== _a ? _a : "middle",
         labelPoint = this.getPointAttrByPosition(labelPosition);
-      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) {
+      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) {
         const {
           x: x,
           y: y,
           width: width,
           height: height
         } = this.attribute.limitRect;
-        limitShapeInBounds(labelNode, {
+        limitShapeInBounds(this._label, {
           x1: x,
           y1: y,
           x2: x + width,
@@ -40791,23 +40785,40 @@ 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), this._addMarkLabels(container, "mark-area-label", MarkArea.defaultAttributes.label);
+    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();
   }
   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._updateMarkLabels(MarkArea.defaultAttributes.label);
+    }, 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();
   }
   isValidPoints() {
     const {
@@ -40820,7 +40831,7 @@ class MarkArea extends Marker {
     }), validFlag;
   }
 }
-MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME, mixin(MarkArea, MarkLabelMixin);
+MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
 
 loadMarkArcLineComponent();
 function registerMarkArcLineAnimate() {
@@ -40831,19 +40842,24 @@ 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)), this.name = "markArcLine";
+    super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcLine.defaultAttributes, attributes, {
+      label: {
+        autoRotate: !0
+      }
+    })), this.name = "markArcLine";
   }
-  getPointAttrByPosition(direction, labelAttrs) {
+  getPointAttrByPosition(direction) {
     const {
         center: center,
         radius: radius,
         startAngle: startAngle,
-        endAngle: endAngle
+        endAngle: endAngle,
+        label: label
       } = this.attribute,
       {
         refX = 0,
         refY = 0
-      } = labelAttrs;
+      } = label;
     let angle;
     switch (direction) {
       case IMarkCommonArcLabelPosition.arcInnerStart:
@@ -40873,9 +40889,9 @@ class MarkArcLine extends MarkCommonLine {
   getTextStyle(position) {
     return DEFAULT_POLAR_MARKER_TEXT_STYLE_MAP[position];
   }
-  getRotateByAngle(angle, labelAttrs) {
+  getRotateByAngle(angle) {
     var _a;
-    return angle - Math.PI / 2 + (null !== (_a = labelAttrs.refAngle) && void 0 !== _a ? _a : 0);
+    return angle - Math.PI / 2 + (null !== (_a = this.attribute.label.refAngle) && void 0 !== _a ? _a : 0);
   }
   createSegment() {
     const {
@@ -40932,12 +40948,6 @@ 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;
 
@@ -40952,21 +40962,29 @@ 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)), this.name = "markArcArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
+    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;
   }
-  getPointAttrByPosition(position, labelAttrs) {
+  getPointAttrByPosition(position) {
     const {
         center: center,
         innerRadius: innerRadius,
         outerRadius: outerRadius,
         startAngle: startAngle,
-        endAngle: endAngle
+        endAngle: endAngle,
+        label: label
       } = this.attribute,
       {
         refX = 0,
         refY = 0
-      } = labelAttrs;
+      } = label;
     let radius, angle;
     switch (position) {
       case IMarkCommonArcLabelPosition.center:
@@ -41001,25 +41019,28 @@ class MarkArcArea extends Marker {
       angle: angle
     };
   }
-  setLabelPos(labelNode, labelAttrs) {
+  setLabelPos() {
     var _a;
-    if (this._area) {
+    if (this._label && this._area) {
       const {
+          label = {}
+        } = this.attribute,
+        {
           position: labelPosition = "arcInnerMiddle",
           autoRotate: autoRotate
-        } = 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) {
+        } = 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) {
         const {
           x: x,
           y: y,
           width: width,
           height: height
         } = this.attribute.limitRect;
-        limitShapeInBounds(labelNode, {
+        limitShapeInBounds(this._label, {
           x1: x,
           y1: y,
           x2: x + width,
@@ -41036,6 +41057,7 @@ class MarkArcArea extends Marker {
         startAngle: startAngle,
         endAngle: endAngle,
         areaStyle: areaStyle,
+        label: label,
         state: state
       } = this.attribute,
       area = graphicCreator.arc(Object.assign({
@@ -41046,7 +41068,14 @@ 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), this._addMarkLabels(container, "mark-area-label", MarkArcArea.defaultAttributes.label);
+    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();
   }
   updateMarker() {
     const {
@@ -41066,13 +41095,21 @@ 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._updateMarkLabels(MarkArcArea.defaultAttributes.label);
+    }, 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());
   }
   isValidPoints() {
     return !0;
   }
 }
-MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME, mixin(MarkArcArea, MarkLabelMixin);
+MarkArcArea.defaultAttributes = DEFAULT_MARK_ARC_AREA_THEME;
 
 loadMarkPointComponent();
 function registerMarkPointAnimate() {
@@ -42592,19 +42629,23 @@ class Slider extends AbstractComponent {
       } = this.attribute;
       tooltip && tooltip.alwaysShow || (this._tooltipState = null, this._tooltipShape && this._tooltipShape.setAttribute("visible", !1), this._tooltipText && this._tooltipText.setAttribute("visible", !1), this._dispatchTooltipEvent("sliderTooltipHide"));
     }, this._onHandlerPointerdown = e => {
-      e.stopPropagation(), this._isChanging = !0;
+      this._clearAllDragEvents(), this._isChanging = !0;
       const {
         x: x,
         y: y
       } = this.stage.eventPointTransform(e);
-      this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
-      }), vglobal.addEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.addEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
-      }), this.stage.addEventListener("pointerup", this._onHandlerPointerUp), this.stage.addEventListener("pointerupoutside", this._onHandlerPointerUp));
+      this._currentHandler = e.target, this._prePos = this._isHorizontal ? x : y;
+      const triggers = getEndTriggersOfDrag(),
+        obj = "browser" === vglobal.env ? vglobal : this.stage;
+      obj.addEventListener("pointermove", this._onHandlerPointerMove, {
+        capture: !0,
+        passive: !1
+      }), triggers.forEach(trigger => {
+        obj.addEventListener(trigger, this._onHandlerPointerUp);
+      });
     }, this._onHandlerPointerMove = e => {
       var _a, _b;
-      e.stopPropagation(), this._isChanging = !0;
+      e.preventDefault(), this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -42625,24 +42666,26 @@ class Slider extends AbstractComponent {
         currentValue = this.calculateValueByPos(newPos);
       "text" === this._currentHandler.type ? this._updateHandlerText(this._currentHandler, newPos, currentValue) : this._updateHandler(this._currentHandler, newPos, currentValue), this._updateTrack(), this._prePos = currentPos, this._dispatchChangeEvent();
     }, this._onHandlerPointerUp = e => {
-      e.preventDefault(), this._isChanging = !1, this._currentHandler = null, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
-      }), vglobal.removeEventListener("pointerup", this._onHandlerPointerUp)) : (this.stage.removeEventListener("pointermove", this._onHandlerPointerMove, {
-        capture: !0
-      }), this.stage.removeEventListener("pointerup", this._onHandlerPointerUp), this.stage.removeEventListener("pointerupoutside", this._onHandlerPointerUp));
+      this._isChanging = !1, this._currentHandler = null, this._clearAllDragEvents();
+    }, this._handleTouchMove = e => {
+      this._isChanging && e.preventDefault();
     }, this._onTrackPointerdown = e => {
-      e.stopPropagation(), this._isChanging = !0;
+      this._clearAllDragEvents(), this._isChanging = !0;
       const {
         x: x,
         y: y
       } = this.stage.eventPointTransform(e);
-      this._prePos = this._isHorizontal ? x : y, "browser" === vglobal.env ? (vglobal.addEventListener("pointermove", this._onTrackPointerMove, {
-        capture: !0
-      }), vglobal.addEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.addEventListener("pointermove", this._onTrackPointerMove, {
-        capture: !0
-      }), this.stage.addEventListener("pointerup", this._onTrackPointerUp), this.stage.addEventListener("pointerupoutside", this._onTrackPointerUp));
+      this._prePos = this._isHorizontal ? x : y;
+      const triggers = getEndTriggersOfDrag(),
+        obj = "browser" === vglobal.env ? vglobal : this.stage;
+      obj.addEventListener("pointermove", this._onTrackPointerMove, {
+        capture: !0,
+        passive: !1
+      }), triggers.forEach(trigger => {
+        obj.addEventListener(trigger, this._onTrackPointerUp);
+      });
     }, this._onTrackPointerMove = e => {
-      e.stopPropagation(), this._isChanging = !0;
+      e.preventDefault(), this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -42683,13 +42726,9 @@ class Slider extends AbstractComponent {
       }
       this._prePos = currentPos, this._dispatchChangeEvent();
     }, this._onTrackPointerUp = e => {
-      e.preventDefault(), this._isChanging = !1, "browser" === vglobal.env ? (vglobal.removeEventListener("pointermove", this._onTrackPointerMove, {
-        capture: !0
-      }), vglobal.removeEventListener("pointerup", this._onTrackPointerUp)) : (this.stage.removeEventListener("pointermove", this._onTrackPointerMove, {
-        capture: !0
-      }), this.stage.removeEventListener("pointerup", this._onTrackPointerUp), this.stage.removeEventListener("pointerupoutside", this._onTrackPointerUp));
+      this._isChanging = !1, this._clearAllDragEvents();
     }, this._onRailPointerDown = e => {
-      e.stopPropagation(), this._isChanging = !0;
+      this._clearAllDragEvents(), this._isChanging = !0;
       const {
         railWidth: railWidth,
         railHeight: railHeight,
@@ -43010,11 +43049,28 @@ class Slider extends AbstractComponent {
       slidable: slidable,
       range: range
     } = this.attribute;
-    slidable && (this._startHandler && this._startHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._startHandlerText && this._startHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandler && this._endHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandlerText && this._endHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), isObject$2(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown), this._railContainer.addEventListener("pointerdown", this._onRailPointerDown));
+    slidable && (this._startHandler && this._startHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._startHandlerText && this._startHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandler && this._endHandler.addEventListener("pointerdown", this._onHandlerPointerdown), this._endHandlerText && this._endHandlerText.addEventListener("pointerdown", this._onHandlerPointerdown), isObject$2(range) && range.draggableTrack && this._track.addEventListener("pointerdown", this._onTrackPointerdown), this._railContainer.addEventListener("pointerdown", this._onRailPointerDown), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    }));
   }
   _bindTooltipEvents() {
     this.attribute.disableTriggerEvent || (this._mainContainer.addEventListener("pointerenter", this._onTooltipShow), this._mainContainer.addEventListener("pointermove", this._onTooltipUpdate), this._mainContainer.addEventListener("pointerleave", this._onTooltipHide));
   }
+  _clearAllDragEvents() {
+    const triggers = getEndTriggersOfDrag(),
+      obj = "browser" === vglobal.env ? vglobal : this.stage;
+    obj.removeEventListener("pointermove", this._onHandlerPointerMove, {
+      capture: !0,
+      passive: !1
+    }), triggers.forEach(trigger => {
+      obj.removeEventListener(trigger, this._onHandlerPointerUp);
+    }), obj.removeEventListener("pointermove", this._onTrackPointerMove, {
+      capture: !0,
+      passive: !1
+    }), triggers.forEach(trigger => {
+      obj.removeEventListener(trigger, this._onTrackPointerUp);
+    });
+  }
   _updateTrack() {
     const {
         inverse: inverse,
@@ -43113,6 +43169,11 @@ class Slider extends AbstractComponent {
       endHandler: endHandler
     };
   }
+  release(all) {
+    super.release(all), ("browser" === vglobal.env ? vglobal : this.stage).addEventListener("touchmove", this._handleTouchMove, {
+      passive: !1
+    }), this._clearAllDragEvents();
+  }
 }
 Slider.defaultAttributes = {
   slidable: !0,
@@ -44394,7 +44455,7 @@ var IOperateType;
 const DEFAULT_BRUSH_ATTRIBUTES = {
   trigger: "pointerdown",
   updateTrigger: "pointermove",
-  endTrigger: "pointerup",
+  endTrigger: ["pointerup", "pointerleave"],
   resetTrigger: "pointerupoutside",
   hasMask: !0,
   brushMode: "single",
@@ -44432,41 +44493,22 @@ let Brush$1 = class Brush extends AbstractComponent {
     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();
+      this._isDownBeforeUpOutside = !1, 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._isDownBeforeUpOutside) return this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)), void (this._isDownBeforeUpOutside = !1);
       if (!this._activeDrawState && !this._activeMoveState) return;
       e.preventDefault();
       const {
         removeOnClick = !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);
+      this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick ? (null === (_a = this._operatingMask) || void 0 === _a ? void 0 : _a._AABBBounds.empty()) ? this._isEmptyMask() || (this._clearMask(), this._dispatchBrushEvent(IOperateType.brushClear, e)) : (delete this._brushMaskAABBBoundsDict[this._operatingMask.name], this._container.setAttributes({}), this._container.removeChild(this._operatingMask), this._isEmptyMask() ? this._dispatchBrushEvent(IOperateType.drawEnd, e) : this._dispatchBrushEvent(IOperateType.brushClear, e)) : (this._activeDrawState && this._dispatchBrushEvent(IOperateType.drawEnd, e), this._activeMoveState && this._dispatchBrushEvent(IOperateType.moveEnd, e)), this._activeDrawState = !1, this._activeMoveState = !1, this._isDrawedBeforeEnd = !1, this._operatingMask && this._operatingMask.setAttribute("pickable", !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, this._isDrawedBeforeEnd = !1, this._isDownBeforeUpOutside = !1;
     };
   }
   _bindBrushEvents() {
@@ -44477,35 +44519,14 @@ let Brush$1 = class Brush extends AbstractComponent {
       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(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));
   }
   _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 = [pos], this._isDrawedBeforeEnd = !1, "single" === brushMode && this._clearMask(), this._addBrushMask(), this._dispatchBrushEvent(IOperateType.drawStart, e);
   }
   _initMove(e) {
     var _a, _b;
@@ -44529,11 +44550,7 @@ 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;
@@ -44556,11 +44573,7 @@ let Brush$1 = class Brush extends AbstractComponent {
       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._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._dispatchBrushEvent(IOperateType.drawing, e);
   }
   _moving(e) {
     const startPos = this._cacheMovePoint,
@@ -44573,11 +44586,21 @@ 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);
+  }
+  render() {
+    this.releaseBrushEvents(), this._bindBrushEvents();
+    const group = this.createOrUpdateChild("brush-container", {}, "group");
+    this._container = group;
+  }
+  releaseBrushEvents() {
+    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 => this.stage.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));
   }
   _computeMaskPoints() {
     const {
@@ -44635,6 +44658,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
@@ -44651,21 +44691,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;
@@ -63652,7 +63689,7 @@ const registerVChartCore = () => {
 };
 registerVChartCore();
 
-const version = "1.13.9-alpha.1";
+const version = "1.13.9-alpha.10";
 
 const addVChartProperty = (data, op) => {
     const context = op.beforeCall();
@@ -98023,14 +98060,13 @@ class BaseMarkLine extends BaseMarker {
         return 'cartesian';
     }
     _createMarkerComponent() {
-        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 : {});
+        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;
         const markLineAttrs = {
             zIndex: this.layoutZIndex,
-            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,
+            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,
             points: [
                 { x: 0, y: 0 },
                 { x: 0, y: 0 }
@@ -98042,25 +98078,17 @@ class BaseMarkLine extends BaseMarker {
             radius: 0,
             startAngle: 0,
             endAngle: 0,
-            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);
-            }),
+            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),
             state: {
-                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);
-                })
+                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)
             },
-            animation: (_o = this._spec.animation) !== null && _o !== void 0 ? _o : false,
+            animation: (_u = this._spec.animation) !== null && _u !== void 0 ? _u : false,
             animationEnter: this._spec.animationEnter,
             animationExit: this._spec.animationExit,
             animationUpdate: this._spec.animationUpdate
@@ -98085,7 +98113,7 @@ class BaseMarkLine extends BaseMarker {
         return markLine;
     }
     _getUpdateMarkerAttrs() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const spec = this._spec;
         const data = this._markerData;
         const startRelativeSeries = this._startRelativeSeries;
@@ -98095,7 +98123,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 || array(spec.label).some(labelCfg => labelCfg === null || labelCfg === void 0 ? void 0 : labelCfg.confine)) {
+        if (spec.clip || ((_a = spec.label) === null || _a === void 0 ? void 0 : _a.confine)) {
             const { minX, maxX, minY, maxY } = computeClipRange([
                 startRelativeSeries.getRegion(),
                 endRelativeSeries.getRegion(),
@@ -98108,13 +98136,10 @@ class BaseMarkLine extends BaseMarker {
                 height: maxY - minY
             };
         }
-        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 });
-        });
+        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 });
         return Object.assign(Object.assign({}, pointsAttr), { label: labelAttrs, limitRect, dx: this._layoutOffsetX, dy: this._layoutOffsetY });
     }
     _markerLayout() {
@@ -98216,7 +98241,7 @@ class CartesianMarkLine extends BaseMarkLine {
         return { points };
     }
     _markerLayout() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const updateAttrs = this._getUpdateMarkerAttrs();
         if (this._spec.type === 'type-step') {
             const startRelativeSeries = this._startRelativeSeries;
@@ -98243,7 +98268,7 @@ class CartesianMarkLine extends BaseMarkLine {
             else {
                 expandDistanceValue = expandDistance;
             }
-            const { points, limitRect } = updateAttrs;
+            const { points, label, limitRect } = updateAttrs;
             const joinPoints = getInsertPoints(points[0], points[1], connectDirection, expandDistanceValue);
             let labelPositionAttrs;
             if (multiSegment && isValid$1(mainSegmentIndex)) {
@@ -98257,10 +98282,20 @@ class CartesianMarkLine extends BaseMarkLine {
             else {
                 labelPositionAttrs = Object.assign(Object.assign({ position: 'start', autoRotate: false }, getTextOffset(points[0], points[1], connectDirection, expandDistanceValue)), { refX: 0, refY: 0 });
             }
-            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 label = array((_c = updateAttrs.label) !== null && _c !== void 0 ? _c : {});
-            (_d = this._markerComponent) === null || _d === void 0 ? void 0 : _d.setAttributes({
+            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;
+            }
+            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({
                 points: multiSegment
                     ? [
                         [joinPoints[0], joinPoints[1]],
@@ -98268,22 +98303,7 @@ class CartesianMarkLine extends BaseMarkLine {
                         [joinPoints[2], joinPoints[3]]
                     ]
                     : joinPoints,
-                label: label.map((labelItem, index) => {
-                    var _a;
-                    if (isValidNumber$1(labelItem === null || labelItem === void 0 ? void 0 : labelItem.refX)) {
-                        labelPositionAttrs.refX += labelItem.refX;
-                    }
-                    if (isValidNumber$1(labelItem === null || labelItem === void 0 ? void 0 : labelItem.refY)) {
-                        labelPositionAttrs.refY += labelItem.refY;
-                    }
-                    if (isValidNumber$1(labelItem === null || labelItem === void 0 ? void 0 : labelItem.dx)) {
-                        labelPositionAttrs.dx = (labelPositionAttrs.dx || 0) + labelItem.dx;
-                    }
-                    if (isValidNumber$1(labelItem === null || labelItem === void 0 ? void 0 : labelItem.dy)) {
-                        labelPositionAttrs.dy = (labelPositionAttrs.dy || 0) + labelItem.dy;
-                    }
-                    return Object.assign(Object.assign(Object.assign({}, labelItem), labelPositionAttrs), { textStyle: Object.assign(Object.assign({}, (_a = prevLabelAttrs[index]) === null || _a === void 0 ? void 0 : _a.textStyle), { textAlign: 'center', textBaseline: 'middle' }) });
-                }),
+                label: Object.assign(Object.assign(Object.assign({}, label), labelPositionAttrs), { textStyle: Object.assign(Object.assign({}, markerComponentAttr.label.textStyle), { textAlign: 'center', textBaseline: 'middle' }) }),
                 limitRect,
                 multiSegment,
                 mainSegmentIndex,
@@ -98292,7 +98312,7 @@ class CartesianMarkLine extends BaseMarkLine {
             });
         }
         else {
-            (_e = this._markerComponent) === null || _e === void 0 ? void 0 : _e.setAttributes(updateAttrs);
+            (_h = this._markerComponent) === null || _h === void 0 ? void 0 : _h.setAttributes(updateAttrs);
         }
     }
     _computeOptions() {
@@ -98646,8 +98666,8 @@ class BaseMarkArea extends BaseMarker {
         return 'cartesian';
     }
     _createMarkerComponent() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const label = array((_a = this._spec.label) !== null && _a !== void 0 ? _a : {});
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const label = (_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,
@@ -98669,20 +98689,13 @@ 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: label.map((labelItem) => {
-                return transformLabelAttributes(labelItem, this._markerData, this._markAttributeContext);
-            }),
+            label: transformLabelAttributes(label, this._markerData, this._markAttributeContext),
             state: {
                 area: transformState((_g = this._spec.area) === null || _g === void 0 ? void 0 : _g.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);
-                })
+                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)
             },
-            animation: (_h = this._spec.animation) !== null && _h !== void 0 ? _h : false,
+            animation: (_m = this._spec.animation) !== null && _m !== void 0 ? _m : false,
             animationEnter: this._spec.animationEnter,
             animationExit: this._spec.animationExit,
             animationUpdate: this._spec.animationUpdate
@@ -98691,7 +98704,7 @@ class BaseMarkArea extends BaseMarker {
         return markArea;
     }
     _markerLayout() {
-        var _a;
+        var _a, _b, _c, _d;
         const spec = this._spec;
         const data = this._markerData;
         const startRelativeSeries = this._startRelativeSeries;
@@ -98705,7 +98718,7 @@ class BaseMarkArea extends BaseMarker {
                 : data.latestData
             : seriesData;
         let limitRect;
-        if (spec.clip || array(spec.label).some(labelCfg => labelCfg === null || labelCfg === void 0 ? void 0 : labelCfg.confine)) {
+        if (spec.clip || ((_a = spec.label) === null || _a === void 0 ? void 0 : _a.confine)) {
             const { minX, maxX, minY, maxY } = computeClipRange([
                 startRelativeSeries.getRegion(),
                 endRelativeSeries.getRegion(),
@@ -98719,15 +98732,10 @@ class BaseMarkArea extends BaseMarker {
             };
         }
         if (this._markerComponent) {
-            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 }));
+            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 }));
         }
     }
     _initDataView() {