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

package/build/index.js

@@ -31431,6 +31431,10 @@
     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
@@ -31463,6 +31467,7 @@
           }
           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;
@@ -31477,11 +31482,15 @@
           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
@@ -31499,6 +31508,7 @@
           } = 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;
@@ -31507,7 +31517,6 @@
             [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]
@@ -31518,11 +31527,7 @@
           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) {
@@ -31671,6 +31676,16 @@
           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;
       }
@@ -39019,14 +39034,20 @@
         }, 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,
@@ -39043,13 +39064,12 @@
             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,
@@ -39064,11 +39084,7 @@
             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,
@@ -39087,7 +39103,9 @@
         } = 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 {
@@ -39118,11 +39136,21 @@
           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 {
@@ -39661,6 +39689,11 @@
       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;
 
@@ -39830,26 +39863,17 @@
         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;
@@ -39857,19 +39881,13 @@
     }
 
     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;
@@ -40041,57 +40059,6 @@
       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;
@@ -40099,20 +40066,24 @@
       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,
@@ -40120,7 +40091,7 @@
             width: width,
             height: height
           } = limitRect;
-          limitShapeInBounds(labelNode, {
+          limitShapeInBounds(this._label, {
             x1: x,
             y1: y,
             x2: x + width,
@@ -40129,14 +40100,36 @@
         }
       }
       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 = {
@@ -40325,7 +40318,6 @@
         lineWidth: 0
       },
       label: {
-        autoRotate: !0,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         refX: 0,
         refY: 0,
@@ -40380,7 +40372,6 @@
     const DEFAULT_MARK_ARC_AREA_THEME = {
       interactive: !0,
       label: {
-        autoRotate: !0,
         position: IMarkCommonArcLabelPosition.arcOuterMiddle,
         textStyle: {
           fill: "#fff",
@@ -40636,12 +40627,15 @@
       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),
@@ -40667,9 +40661,9 @@
           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];
@@ -40735,12 +40729,6 @@
           });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;
 
@@ -40755,6 +40743,9 @@
       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;
       }
@@ -40771,21 +40762,24 @@
           };
         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,
@@ -40797,23 +40791,40 @@
       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 {
@@ -40826,7 +40837,7 @@
         }), validFlag;
       }
     }
-    MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME, mixin(MarkArea, MarkLabelMixin);
+    MarkArea.defaultAttributes = DEFAULT_MARK_AREA_THEME;
 
     loadMarkArcLineComponent();
     function registerMarkArcLineAnimate() {
@@ -40837,19 +40848,24 @@
         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:
@@ -40879,9 +40895,9 @@
       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 {
@@ -40938,12 +40954,6 @@
       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;
 
@@ -40958,21 +40968,29 @@
       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:
@@ -41007,25 +41025,28 @@
           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,
@@ -41042,6 +41063,7 @@
             startAngle: startAngle,
             endAngle: endAngle,
             areaStyle: areaStyle,
+            label: label,
             state: state
           } = this.attribute,
           area = graphicCreator.arc(Object.assign({
@@ -41052,7 +41074,14 @@
             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 {
@@ -41072,13 +41101,21 @@
           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() {
@@ -42598,19 +42635,23 @@
           } = 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,
@@ -42631,24 +42672,26 @@
             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,
@@ -42689,13 +42732,9 @@
           }
           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,
@@ -43016,11 +43055,28 @@
           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,
@@ -43119,6 +43175,11 @@
           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,
@@ -44400,7 +44461,7 @@
     const DEFAULT_BRUSH_ATTRIBUTES = {
       trigger: "pointerdown",
       updateTrigger: "pointermove",
-      endTrigger: "pointerup",
+      endTrigger: ["pointerup", "pointerleave"],
       resetTrigger: "pointerupoutside",
       hasMask: !0,
       brushMode: "single",
@@ -44438,41 +44499,22 @@
         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() {
@@ -44483,35 +44525,14 @@
           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;
@@ -44535,11 +44556,7 @@
           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;
@@ -44562,11 +44579,7 @@
           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,
@@ -44579,11 +44592,21 @@
         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 {
@@ -44641,6 +44664,23 @@
           }));
         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
@@ -44657,21 +44697,18 @@
       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;
@@ -63658,7 +63695,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.13.9-alpha.1";
+    const version = "1.13.9-alpha.10";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -98029,14 +98066,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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 }
@@ -98048,25 +98084,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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
@@ -98091,7 +98119,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return markLine;
         }
         _getUpdateMarkerAttrs() {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const spec = this._spec;
             const data = this._markerData;
             const startRelativeSeries = this._startRelativeSeries;
@@ -98101,7 +98129,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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(),
@@ -98114,13 +98142,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     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() {
@@ -98222,7 +98247,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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;
@@ -98249,7 +98274,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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)) {
@@ -98263,10 +98288,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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]],
@@ -98274,22 +98309,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             [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,
@@ -98298,7 +98318,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
             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() {
@@ -98652,8 +98672,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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,
@@ -98675,20 +98695,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 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
@@ -98697,7 +98710,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return markArea;
         }
         _markerLayout() {
-            var _a;
+            var _a, _b, _c, _d;
             const spec = this._spec;
             const data = this._markerData;
             const startRelativeSeries = this._startRelativeSeries;
@@ -98711,7 +98724,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     : 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(),
@@ -98725,15 +98738,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 };
             }
             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() {