@visactor/vchart 1.12.3 → 1.12.4

package/build/index.js

@@ -13490,7 +13490,9 @@
         if (children.length) shadowRoot.setTheme({
           [children[0].type]: childAttrs
         }), children.forEach(element => {
-          shadowRoot.appendChild(element);
+          element.setAttributes({
+            pickable: !1
+          }), shadowRoot.appendChild(element);
         });else {
           const box = graphic.AABBBounds,
             width = box.width(),
@@ -13502,7 +13504,8 @@
               x: 0,
               y: 0,
               width: width,
-              height: height
+              height: height,
+              pickable: !1
             });
             shadowRoot.appendChild(child), children.push(child);
           });
@@ -13889,7 +13892,7 @@
         return this._transMatrix || (this._transMatrix = new Matrix()), this.shouldUpdateLocalMatrix() && (this.doUpdateLocalMatrix(), clearTag && this.clearUpdateLocalPositionTag()), this._transMatrix;
       }
       shouldUpdateAABBBounds() {
-        return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
+        return this.shadowRoot ? (!!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds()) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this) : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) && application.graphicService.validCheck(this.attribute, this.getGraphicTheme(), this._AABBBounds, this);
       }
       shouldSelfChangeUpdateAABBBounds() {
         return this.shadowRoot ? !!(this._updateTag & UpdateTag.UPDATE_BOUNDS) || this.shadowRoot.shouldUpdateAABBBounds() : !!(this._updateTag & UpdateTag.UPDATE_BOUNDS);
@@ -18799,7 +18802,6 @@
         return getTheme$1(this).circle;
       }
       updateAABBBounds(attribute, circleTheme, aabbBounds, full) {
-        if (!application.graphicService.validCheck(attribute, circleTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds) : this.updateCircleAABBBoundsAccurate(attribute, circleTheme, aabbBounds));
         const {
           tb1: tb1,
@@ -18992,7 +18994,6 @@
         return getTheme$1(this).text;
       }
       updateAABBBounds(attribute, textTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, textTheme, aabbBounds, this)) return aabbBounds;
         const {
           text = textTheme.text
         } = this.attribute;
@@ -19969,7 +19970,6 @@
         return getTheme$1(this).symbol;
       }
       updateAABBBounds(attribute, symbolTheme, aabbBounds, full) {
-        if (!application.graphicService.validCheck(attribute, symbolTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateSymbolAABBBoundsImprecise(attribute, symbolTheme, aabbBounds) : this.updateSymbolAABBBoundsAccurate(attribute, symbolTheme, aabbBounds));
         const {
           tb1: tb1,
@@ -20047,7 +20047,6 @@
         return getTheme$1(this).line;
       }
       updateAABBBounds(attribute, lineTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, lineTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
         const {
           lineJoin = lineTheme.lineJoin
@@ -20128,7 +20127,6 @@
         return getTheme$1(this).rect;
       }
       updateAABBBounds(attribute, rectTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, rectTheme, aabbBounds, this)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds)) {
           let {
             width: width,
@@ -20306,9 +20304,9 @@
         return getTheme$1(this).glyph;
       }
       updateAABBBounds(attribute, theme, aabbBounds) {
-        return application.graphicService.validCheck(attribute, theme, aabbBounds, this) ? (this.getSubGraphic().forEach(node => {
+        return this.getSubGraphic().forEach(node => {
           aabbBounds.union(node.AABBBounds);
-        }), aabbBounds) : aabbBounds;
+        }), aabbBounds;
       }
       doUpdateAABBBounds() {
         this._AABBBounds.clear();
@@ -20632,7 +20630,6 @@
         return getTheme$1(this).image;
       }
       updateAABBBounds(attribute, imageTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, imageTheme, aabbBounds, this)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds)) {
           const {
             width = imageTheme.width,
@@ -20906,7 +20903,6 @@
         return getTheme$1(this).richtext;
       }
       updateAABBBounds(attribute, richtextTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, richtextTheme, aabbBounds, this)) return aabbBounds;
         const {
           width = richtextTheme.width,
           height = richtextTheme.height,
@@ -21123,7 +21119,6 @@
         return getTheme$1(this).path;
       }
       updateAABBBounds(attribute, pathTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, pathTheme, aabbBounds, this)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds)) {
           const pathShape = this.getParsedPathShape();
           aabbBounds.union(pathShape.getBounds());
@@ -21189,7 +21184,6 @@
         return getTheme$1(this).area;
       }
       updateAABBBounds(attribute, areaTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, areaTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds)), application.graphicService.updateTempAABBBounds(aabbBounds);
         const {
           lineJoin = areaTheme.lineJoin
@@ -21390,7 +21384,6 @@
         return getTheme$1(this).arc;
       }
       updateAABBBounds(attribute, arcTheme, aabbBounds, full) {
-        if (!application.graphicService.validCheck(attribute, arcTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds));
         const {
           tb1: tb1,
@@ -21523,7 +21516,6 @@
         return getTheme$1(this).polygon;
       }
       updateAABBBounds(attribute, polygonTheme, aabbBounds) {
-        if (!application.graphicService.validCheck(attribute, polygonTheme, aabbBounds, this)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds), application.graphicService.updateTempAABBBounds(aabbBounds);
         const {
           lineJoin = polygonTheme.lineJoin
@@ -21664,6 +21656,9 @@
           y: 0
         }), this.type = "shadowroot", this.shadowHost = graphic;
       }
+      clearUpdateBoundTag() {
+        super.clearUpdateBoundTag(), this.shadowHost && this.shadowHost.clearUpdateBoundTag();
+      }
       addUpdateBoundTag() {
         super.addUpdateBoundTag(), this.shadowHost && this.shadowHost.addUpdateBoundTag();
       }
@@ -22967,7 +22962,7 @@
           "virtual" === l.layerMode && (l = l.getNativeHandler().mainHandler.layer), list.includes(l) || list.push(l);
         }
         list.forEach(layer => {
-          layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer.render({
+          layer.renderCount > this.renderCount || (layer.renderCount = this.renderCount + 1, layer === this.interactiveLayer && this.dirtyBounds && this.dirtyBounds.clear(), layer.render({
             renderService: this.renderService,
             background: layer === this.defaultLayer ? this.background : void 0,
             updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
@@ -22976,14 +22971,14 @@
           }, Object.assign({
             renderStyle: this.renderStyle
           }, params)));
-        }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && this.interactiveLayer.render({
+        }), this.interactiveLayer && !layerList.includes(this.interactiveLayer) && (this.dirtyBounds && this.dirtyBounds.clear(), this.interactiveLayer.render({
           renderService: this.renderService,
           updateBounds: !(!this.dirtyBounds || this.dirtyBounds.empty()),
           viewBox: this.window.getViewBox(),
           transMatrix: this.window.getViewBoxTransform()
         }, Object.assign({
           renderStyle: this.renderStyle
-        }, params));
+        }, params)));
       }
       resizeWindow(w, h) {
         let rerender = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -24611,6 +24606,18 @@
       Factory$2.registerPlugin("ViewTransform3dPlugin", ViewTransform3dPlugin);
     };
 
+    function combineDomains(domains) {
+        const result = [];
+        for (let index = 0; index < domains.length; index++) {
+            const domain = domains[index];
+            if (index === 0) {
+                result.push(domain[0]);
+            }
+            result.push(domain[1]);
+        }
+        return result;
+    }
+
     const warn = (msg, detail) => {
         if (isFunction$1(config.warnHandler)) {
             config.warnHandler.call(null, msg, detail);
@@ -30519,10 +30526,10 @@
           if (visible && isBoolean$1(bgVisible)) {
             const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
               visible: bgVisible && !!text,
-              x: textShape.AABBBounds.x1,
-              y: textShape.AABBBounds.y1,
-              width: textShape.AABBBounds.width(),
-              height: textShape.AABBBounds.height()
+              x: textShape.AABBBounds.x1 - parsedPadding[1],
+              y: textShape.AABBBounds.y1 - parsedPadding[0],
+              width: textShape.AABBBounds.width() + (parsedPadding[1] + parsedPadding[3]),
+              height: textShape.AABBBounds.height() + (parsedPadding[0] + parsedPadding[2])
             }), "rect");
             if (isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), backgroundStyle.customShape) {
               const customShape = backgroundStyle.customShape;
@@ -31547,9 +31554,9 @@
           easing: easing,
           increaseEffect = !0
         } = animationConfig;
-        return prev.animate().to(next.attribute, duration, easing), void (increaseEffect && playIncreaseCount(prev, next, duration, easing));
+        return prev.animate().to(next.attribute, duration, easing), void (increaseEffect && "text" === prev.type && "text" === next.type && playIncreaseCount(prev, next, duration, easing));
       }
-      animationConfig.forEach((cfg, i) => {
+      animationConfig.forEach(cfg => {
         const {
             duration: duration,
             easing: easing,
@@ -31557,10 +31564,9 @@
             channel: channel
           } = cfg,
           {
-            from: from,
             to: to
           } = update$1(prev, next, channel, cfg.options);
-        isEmpty(to) || prev.animate().to(to, duration, easing), "text" in from && "text" in to && increaseEffect && playIncreaseCount(prev, next, duration, easing);
+        isEmpty(to) || prev.animate().to(to, duration, easing), increaseEffect && "text" === prev.type && "text" === next.type && playIncreaseCount(prev, next, duration, easing);
       });
     }
     const update$1 = (prev, next, channel, options) => {
@@ -31779,6 +31785,9 @@
         y: cy + (dy > 0 ? h : -h)
       };
     }
+    function getAlignOffset(align) {
+      return "left" === align ? 0 : "right" === align ? 1 : .5;
+    }
 
     function loadLabelComponent() {
       registerGroup(), registerText(), registerRichtext(), registerLine();
@@ -31895,7 +31904,7 @@
         return createTextGraphicByType(textAttrs, "textType");
       }
       _prepare() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         const currentBaseMarks = [];
         let baseMarks;
         if (baseMarks = isFunction$1(this.attribute.getBaseMarks) ? this.attribute.getBaseMarks() : getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName), baseMarks.forEach(mark => {
@@ -31922,13 +31931,23 @@
             textData && baseMark && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
           }
           if (!1 !== this.attribute.animation) {
-            const animation = isObject$2(this.attribute.animation) ? this.attribute.animation : {};
+            const {
+                animation: animation,
+                animationEnter: animationEnter,
+                animationExit: animationExit,
+                animationUpdate: animationUpdate
+              } = this.attribute,
+              animationCfg = isObject$2(animation) ? animation : {};
             this._animationConfig = {
-              enter: merge$2({}, DefaultLabelAnimation, animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
-              exit: merge$2({}, DefaultLabelAnimation, animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
-              update: isArray$1(this.attribute.animationUpdate) ? this.attribute.animationUpdate : merge$2({}, DefaultLabelAnimation, animation, null !== (_e = this.attribute.animationUpdate) && void 0 !== _e ? _e : {})
+              enter: !1 !== animationEnter && merge$2({}, DefaultLabelAnimation, animationCfg, null != animationEnter ? animationEnter : {}),
+              exit: !1 !== animationExit && merge$2({}, DefaultLabelAnimation, animationCfg, null != animationExit ? animationExit : {}),
+              update: !1 !== animationUpdate && (isArray$1(animationUpdate) ? animationUpdate : merge$2({}, DefaultLabelAnimation, animationCfg, null != animationUpdate ? animationUpdate : {}))
             };
-          }
+          } else this._animationConfig = {
+            enter: !1,
+            exit: !1,
+            update: !1
+          };
         }
       }
       getRelatedGraphic(item) {
@@ -32093,9 +32112,6 @@
         };
       }
       _renderLabels(labels) {
-        !1 === this._enableAnimation || !1 === this.attribute.animation ? this._renderWithOutAnimation(labels) : this._renderWithAnimation(labels);
-      }
-      _renderWithAnimation(labels) {
         var _a;
         const {
             syncState: syncState
@@ -32110,8 +32126,7 @@
         labels && labels.forEach((text, index) => {
           var _a;
           const relatedGraphic = this.getRelatedGraphic(text.attribute),
-            textId = text.attribute.id,
-            textKey = this._isCollectionBase ? textId : relatedGraphic,
+            textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic,
             state = (null == prevTextMap ? void 0 : prevTextMap.get(textKey)) ? "update" : "enter";
           let labelLine;
           if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), syncState && this.updateStatesOfLabels([labelLine ? {
@@ -32119,73 +32134,78 @@
             labelLine: labelLine
           } : {
             text: text
-          }], null !== (_a = relatedGraphic.currentStates) && void 0 !== _a ? _a : []), "enter" === state) {
-            if (texts.push(text), currentTextMap.set(textKey, labelLine ? {
-              text: text,
-              labelLine: labelLine
-            } : {
-              text: text
-            }), relatedGraphic) {
-              const {
-                from: from,
-                to: to
-              } = getAnimationAttributes(text.attribute, "fadeIn");
-              this.add(text), labelLine && (labelLines.push(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", a => {
-                text.setAttributes(from), labelLine && labelLine.setAttributes(from);
-                const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
-                relatedGraphic.on("afterAttributeUpdate", listener);
-              });
-            }
-          } else if ("update" === state) {
-            const prevLabel = prevTextMap.get(textKey);
-            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel);
-            const prevText = prevLabel.text,
-              {
-                duration: duration,
-                easing: easing
-              } = this._animationConfig.update;
-            updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && labelLine && prevLabel.labelLine.animate().to(labelLine.attribute, duration, easing);
-          }
-        }), prevTextMap.forEach(label => {
-          var _a;
-          null === (_a = label.text) || void 0 === _a || _a.animate().to(getAnimationAttributes(label.text.attribute, "fadeOut").to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd(() => {
-            this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
-          });
-        }), this._graphicToText = currentTextMap;
-      }
-      _renderWithOutAnimation(labels) {
-        var _a;
-        const {
-            syncState: syncState
-          } = this.attribute,
-          currentTextMap = new Map(),
-          prevTextMap = this._graphicToText || new Map(),
-          {
-            visible: showLabelLine
-          } = null !== (_a = this.attribute.line) && void 0 !== _a ? _a : {};
-        labels && labels.forEach(text => {
-          var _a;
-          const relatedGraphic = this.getRelatedGraphic(text.attribute),
-            state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter",
-            textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
-          let labelLine;
-          if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), syncState && this.updateStatesOfLabels([labelLine ? {
+          }], null !== (_a = relatedGraphic.currentStates) && void 0 !== _a ? _a : []), "enter" === state) texts.push(text), currentTextMap.set(textKey, labelLine ? {
             text: text,
             labelLine: labelLine
           } : {
             text: text
-          }], null !== (_a = relatedGraphic.currentStates) && void 0 !== _a ? _a : []), "enter" === state) currentTextMap.set(textKey, labelLine ? {
+          }), this._addLabel({
             text: text,
             labelLine: labelLine
-          } : {
-            text: text
-          }), this.add(text), labelLine && this.add(labelLine), this._syncStateWithRelatedGraphic(relatedGraphic);else if ("update" === state) {
+          }, texts, labelLines, index);else if ("update" === state) {
             const prevLabel = prevTextMap.get(textKey);
-            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), prevLabel.labelLine && labelLine && prevLabel.labelLine.setAttributes(labelLine.attribute);
+            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), this._updateLabel(prevLabel, {
+              text: text,
+              labelLine: labelLine
+            });
           }
-        }), prevTextMap.forEach(label => {
+        }), this._removeLabel(prevTextMap), this._graphicToText = currentTextMap;
+      }
+      _addLabel(label, texts, labelLines, index) {
+        const {
+            text: text,
+            labelLine: labelLine
+          } = label,
+          relatedGraphic = this.getRelatedGraphic(text.attribute);
+        if (this._syncStateWithRelatedGraphic(relatedGraphic), !1 !== this._enableAnimation && !1 !== this._animationConfig.enter) {
+          if (relatedGraphic) {
+            const {
+              from: from,
+              to: to
+            } = getAnimationAttributes(text.attribute, "fadeIn");
+            text && this.add(text), labelLine && (labelLines.push(labelLine), this.add(labelLine)), this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", a => {
+              text.setAttributes(from), labelLine && labelLine.setAttributes(from);
+              const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
+              relatedGraphic.on("afterAttributeUpdate", listener);
+            });
+          }
+        } else text && this.add(text), labelLine && this.add(labelLine);
+      }
+      _updateLabel(prevLabel, currentLabel) {
+        const {
+            text: prevText,
+            labelLine: prevLabelLine
+          } = prevLabel,
+          {
+            text: curText,
+            labelLine: curLabelLine
+          } = currentLabel;
+        if (!1 !== this._enableAnimation && !1 !== this._animationConfig.update) {
+          const {
+            duration: duration,
+            easing: easing
+          } = this._animationConfig.update;
+          updateAnimation(prevText, curText, this._animationConfig.update), prevLabelLine && curLabelLine && prevLabel.labelLine.animate().to(curLabelLine.attribute, duration, easing);
+        } else prevLabel.text.setAttributes(curText.attribute), prevLabelLine && curLabelLine && prevLabel.labelLine.setAttributes(curLabelLine.attribute);
+      }
+      _removeLabel(textMap) {
+        const removeLabelAndLine = label => {
           this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
-        }), this._graphicToText = currentTextMap;
+        };
+        if (!1 !== this._enableAnimation && !1 !== this._animationConfig.exit) {
+          const {
+            duration: duration,
+            easing: easing
+          } = this._animationConfig.exit;
+          textMap.forEach(label => {
+            var _a;
+            null === (_a = label.text) || void 0 === _a || _a.animate().to(getAnimationAttributes(label.text.attribute, "fadeOut").to, duration, easing).onEnd(() => {
+              removeLabelAndLine(label);
+            });
+          });
+        } else textMap.forEach(label => {
+          removeLabelAndLine(label);
+        });
       }
       updateStatesOfLabels(labels, currentStates) {
         labels.forEach(label => {
@@ -32193,7 +32213,7 @@
         });
       }
       _syncStateWithRelatedGraphic(relatedGraphic) {
-        this.attribute.syncState && relatedGraphic.on("afterAttributeUpdate", this._handleRelatedGraphicSetState);
+        this.attribute.syncState && relatedGraphic && relatedGraphic.on("afterAttributeUpdate", this._handleRelatedGraphicSetState);
       }
       _afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, _ref) {
         let {
@@ -32523,7 +32543,7 @@
           restAttributes = __rest$7(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
-        }, merge$2({}, ArcLabel.defaultAttributes, restAttributes))), this.name = "arc-label", this._ellipsisWidth = 0, this._arcLeft = new Map(), this._arcRight = new Map();
+        }, merge$2({}, ArcLabel.defaultAttributes, restAttributes))), this.name = "arc-label", this._ellipsisWidth = 0, this._arcLeft = new Map(), this._arcRight = new Map(), this._line2MinLength = 0, this._alignOffset = 0;
       }
       _overlapping(labels) {
         return labels;
@@ -32535,6 +32555,7 @@
         };
       }
       _layout(texts) {
+        var _a;
         if (!texts || !texts.length) return;
         const labels = super._layout(texts),
           textBoundsArray = labels.map(label => this.getGraphicBounds(label)),
@@ -32548,7 +32569,9 @@
           ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
         }
         const data = labels.map(label => label.attribute),
-          arcs = this.layoutArcLabels(this.attribute.position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
+          currentMarks = Array.from(this._idToGraphic.values());
+        this._line2MinLength = isFunction$1(this.attribute.line.line2MinLength) ? this.attribute.line.line2MinLength(texts, currentMarks, this.attribute) : this.attribute.line.line2MinLength, this._alignOffset = null !== (_a = isFunction$1(this.attribute.layout.alignOffset) ? this.attribute.layout.alignOffset(texts, currentMarks, this.attribute) : this.attribute.layout.alignOffset) && void 0 !== _a ? _a : 0;
+        const arcs = this.layoutArcLabels(this.attribute.position, this.attribute, currentMarks, data, textBoundsArray, ellipsisWidth);
         for (let i = 0; i < data.length; i++) {
           const textData = data[i],
             basedArc = arcs.find(arc => {
@@ -32654,13 +32677,12 @@
         var _a, _b, _c;
         const center_x = null !== (_a = currentMarks[0].attribute.x) && void 0 !== _a ? _a : 0,
           height = 2 * (null !== (_b = currentMarks[0].attribute.y) && void 0 !== _b ? _b : 0),
-          line2MinLength = attribute.line.line2MinLength,
           labelLayout = attribute.layout,
           spaceWidth = attribute.spaceWidth;
         if (arcs.forEach(arc => {
           const direction = isQuadrantLeft(arc.quadrant) ? -1 : 1;
           arc.labelPosition = {
-            x: arc.outerCenter.x + direction * (arc.labelSize.width / 2 + line2MinLength + spaceWidth),
+            x: arc.outerCenter.x + direction * (arc.labelSize.width / 2 + this._line2MinLength + spaceWidth),
             y: arc.outerCenter.y
           };
         }), arcs.sort((a, b) => a.labelPosition.y - b.labelPosition.y), !1 !== attribute.coverEnable || "none" === labelLayout.strategy) {
@@ -32670,10 +32692,10 @@
               labelSize: labelSize
             } = arc;
             arc.labelLimit = labelSize.width, arc.pointB = isQuadrantLeft(arc.quadrant) ? {
-              x: labelPosition.x + labelSize.width / 2 + line2MinLength + spaceWidth,
+              x: labelPosition.x + labelSize.width / 2 + this._line2MinLength + spaceWidth,
               y: labelPosition.y
             } : {
-              x: labelPosition.x - labelSize.width / 2 - line2MinLength - spaceWidth,
+              x: labelPosition.x - labelSize.width / 2 - this._line2MinLength - spaceWidth,
               y: labelPosition.y
             }, this._computeX(arc, attribute, currentMarks);
           }
@@ -32701,21 +32723,23 @@
         const width = 2 * center_x;
         return arcs.forEach(arc => {
           var _a, _b;
-          arc.labelVisible && (isLess(arc.pointB.x, line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0, attribute.offsetAngle && (arc.angle += attribute.offsetAngle), arc.labelLine = Object.assign({}, attribute.line);
+          arc.labelVisible && (isLess(arc.pointB.x, this._line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - this._line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0, attribute.offsetAngle && (arc.angle += attribute.offsetAngle), arc.labelLine = Object.assign(Object.assign({}, attribute.line), {
+            visible: arc.labelVisible
+          });
         }), arcs;
       }
       _computeX(arc, attribute, currentMarks) {
         var _a;
         const center = arc.circleCenter,
-          plotLayout_width = 2 * center.x;
-        center.y;
+          plotLayout_x1 = 0,
+          plotLayout_x2 = this.attribute.width;
+        this.attribute.height;
         let maxRadius = 0;
         currentMarks.forEach(currentMark => {
           currentMark.attribute.outerRadius > maxRadius && (maxRadius = currentMark.attribute.outerRadius);
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height),
           line1MinLength = attribute.line.line1MinLength,
-          line2MinLength = attribute.line.line2MinLength,
           labelLayoutAlign = null === (_a = attribute.layout) || void 0 === _a ? void 0 : _a.align,
           spaceWidth = attribute.spaceWidth,
           {
@@ -32729,9 +32753,9 @@
         }, labelPosition.x = NaN, arc.labelLimit = 0);
         const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height),
           flag = isQuadrantLeft(quadrant) ? -1 : 1;
-        let cx = 0;
-        let limit = (flag > 0 ? plotLayout_width - pointB.x : pointB.x) - line2MinLength - spaceWidth;
-        "labelLine" === labelLayoutAlign && (cx = (radius + line1MinLength + line2MinLength) * flag + center.x, limit = (flag > 0 ? plotLayout_width - cx : cx) - spaceWidth);
+        let cx = 0,
+          limit = (flag > 0 ? plotLayout_x2 - pointB.x : pointB.x - plotLayout_x1) - this._line2MinLength - spaceWidth;
+        "labelLine" === labelLayoutAlign && (cx = (radius + line1MinLength + this._line2MinLength) * flag + center.x, limit = (flag > 0 ? plotLayout_x2 - cx : cx - plotLayout_x1) - spaceWidth);
         const text = this._getFormatLabelText(arc.refDatum, limit);
         arc.labelText = text;
         let labelWidth = Math.min(limit, arc.labelSize.width);
@@ -32739,23 +32763,18 @@
           case "labelLine":
             break;
           case "edge":
-            cx = flag > 0 ? plotLayout_width - labelWidth - spaceWidth : labelWidth + spaceWidth;
+            cx = flag > 0 ? plotLayout_x2 - labelWidth - spaceWidth : plotLayout_x1 + labelWidth + spaceWidth;
             break;
           default:
-            cx = pointB.x + flag * line2MinLength;
+            cx = pointB.x + flag * this._line2MinLength;
         }
         labelWidth = Math.max(this._ellipsisWidth, labelWidth), arc.labelLimit = labelWidth, arc.pointC = {
           x: cx,
           y: labelPosition.y
         };
-        const targetCenterOffset = .5 * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
-        if ("edge" === labelLayoutAlign) {
-          const alignOffset = 0;
-          labelPosition.x = (flag > 0 ? plotLayout_width + alignOffset : alignOffset) - flag * targetCenterOffset;
-        } else {
-          const alignOffset = 0;
-          labelPosition.x = cx + alignOffset + flag * (spaceWidth + targetCenterOffset);
-        }
+        const align = this._computeAlign(arc, attribute),
+          targetCenterOffset = getAlignOffset(align) * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
+        "edge" === labelLayoutAlign ? (labelPosition.x = (flag > 0 ? plotLayout_x2 : plotLayout_x1) - flag * targetCenterOffset + flag * this._alignOffset, arc.pointC.x += flag * this._alignOffset) : labelPosition.x = cx + flag * (this._alignOffset + spaceWidth + targetCenterOffset);
       }
       _computeAlign(arc, attribute) {
         var _a, _b, _c, _d, _e, _f;
@@ -33097,6 +33116,7 @@
                 type: type
               } = dataLabel,
               id = null !== (_a = dataLabel.id) && void 0 !== _a ? _a : `${baseMarkGroupName}-${type}-${i}`;
+            "arc" === dataLabel.type && (dataLabel.width = size.width, dataLabel.height = size.height);
             let component = this._componentMap.get(id);
             component ? (component.setBitmapTool(tool), component.setBitmap(bitmap), component.setAttributes(dataLabel), currentComponentMap.set(id, component)) : (component = new labelComponent(dataLabel), component.setBitmap(bitmap), component.setBitmapTool(tool), this.add(component), currentComponentMap.set(id, component));
           }
@@ -33378,7 +33398,7 @@
 
     var AXIS_ELEMENT_NAME;
     !function (AXIS_ELEMENT_NAME) {
-      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background";
+      AXIS_ELEMENT_NAME.innerView = "inner-view", AXIS_ELEMENT_NAME.axisContainer = "axis-container", AXIS_ELEMENT_NAME.labelContainer = "axis-label-container", AXIS_ELEMENT_NAME.tickContainer = "axis-tick-container", AXIS_ELEMENT_NAME.tick = "axis-tick", AXIS_ELEMENT_NAME.subTick = "axis-sub-tick", AXIS_ELEMENT_NAME.label = "axis-label", AXIS_ELEMENT_NAME.title = "axis-title", AXIS_ELEMENT_NAME.gridContainer = "axis-grid-container", AXIS_ELEMENT_NAME.grid = "axis-grid", AXIS_ELEMENT_NAME.gridRegion = "axis-grid-region", AXIS_ELEMENT_NAME.line = "axis-line", AXIS_ELEMENT_NAME.background = "axis-background", AXIS_ELEMENT_NAME.axisLabelBackground = "axis-label-background", AXIS_ELEMENT_NAME.axisBreak = "axis-break", AXIS_ELEMENT_NAME.axisBreakSymbol = "axis-break-symbol";
     }(AXIS_ELEMENT_NAME || (AXIS_ELEMENT_NAME = {}));
     var AxisStateValue;
     !function (AxisStateValue) {
@@ -33390,6 +33410,7 @@
       [AxisStateValue.hover]: {},
       [AxisStateValue.hoverReverse]: {}
     };
+    const TopZIndex = 999;
 
     const DEFAULT_AXIS_THEME = {
       title: {
@@ -33445,6 +33466,12 @@
         }
       }
     };
+    const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {
+      size: 8,
+      stroke: "#000",
+      lineWidth: 1,
+      zIndex: 1
+    };
 
     const clampRadian = function () {
       let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -33476,6 +33503,20 @@
         y: baseY - dy
       };
     }
+    function getAxisBreakSymbolAttrs() {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var _a, _b;
+      const {
+          style = {},
+          angle = .5 * Math.PI
+        } = props,
+        symbolStyle = merge$2({}, DEFAULT_AXIS_BREAK_SYMBOL_STYLE, style),
+        symbolSize = null !== (_a = symbolStyle.size) && void 0 !== _a ? _a : DEFAULT_AXIS_BREAK_SYMBOL_STYLE.size;
+      return Object.assign(Object.assign({}, symbolStyle), {
+        symbolType: null !== (_b = symbolStyle.symbolType) && void 0 !== _b ? _b : `M ${-symbolSize / 2} ${symbolSize * Math.sin(angle)} L ${symbolSize / 2} ${-symbolSize * Math.sin(angle)}`,
+        symbolSize: symbolSize
+      });
+    }
     function getElMap(g) {
       const elMap = {};
       return traverseGroup(g, el => {
@@ -33878,6 +33919,17 @@
     function itemIntersect(item1, item2) {
       return isRectIntersect(item1.AABBBounds, item2.AABBBounds, !1) && (!item1.rotatedBounds || !item2.rotatedBounds || isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, !0));
     }
+    const DELTA_ANGLE = Math.sin(Math.PI / 10);
+    function isAngleVertical(angle) {
+      const hasAngle = !isNil$1(angle) && 0 !== angle,
+        cos = hasAngle ? Math.cos(angle) : 1;
+      return hasAngle && Math.abs(cos) <= DELTA_ANGLE;
+    }
+    function isAngleHorizontal(angle) {
+      const hasAngle = !isNil$1(angle) && 0 !== angle,
+        sin = hasAngle ? Math.sin(angle) : 0;
+      return !hasAngle || Math.abs(sin) <= DELTA_ANGLE;
+    }
 
     const methods$2 = {
       parity: function (items) {
@@ -34002,6 +34054,18 @@
       };
     }
 
+    function normalizeOverflowLimitLength(overflowLimitLength) {
+      return isValidNumber$1(overflowLimitLength) ? {
+        left: overflowLimitLength,
+        right: overflowLimitLength
+      } : isObject$2(overflowLimitLength) ? {
+        left: overflowLimitLength.left || 0,
+        right: overflowLimitLength.right || 0
+      } : {
+        left: 0,
+        right: 0
+      };
+    }
     function autoLimit(labels, config) {
       const {
         limitLength: limitLength,
@@ -34011,15 +34075,15 @@
         axisLength: axisLength
       } = config;
       if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
-      const DELTA = Math.sin(Math.PI / 10);
+      const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength);
       labels.forEach(label => {
         var _a;
         const angle = label.attribute.angle,
           hasAngle = !isNil$1(angle),
           cos = hasAngle ? Math.cos(angle) : 1,
           sin = hasAngle ? Math.sin(angle) : 0,
-          isHorizontal = !hasAngle || Math.abs(sin) <= DELTA,
-          isVertical = hasAngle && Math.abs(cos) <= DELTA,
+          isHorizontal = isAngleHorizontal(angle),
+          isVertical = isAngleVertical(angle),
           isX = "top" === orient || "bottom" === orient;
         if (isX) {
           if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
@@ -34039,8 +34103,15 @@
               x1: x1,
               x2: x2
             } = label.AABBBounds,
-            tan = sin / cos;
-          limitLabelLength = tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength ? (axisLength - x1) / Math.abs(cos) : tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0 ? x2 / Math.abs(cos) : Math.abs(limitLength / sin);
+            tan = sin / cos,
+            verticalSizeLimit = Math.abs(limitLength / sin);
+          if (tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength) {
+            const lengthLimit = (axisLength - x1) / Math.abs(cos) + overflowLimitLength.right;
+            limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
+          } else if (tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0) {
+            const lengthLimit = x2 / Math.abs(cos) + overflowLimitLength.left;
+            limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
+          } else limitLabelLength = verticalSizeLimit;
         } else limitLabelLength = Math.abs(limitLength / cos);
         isValidNumber$1(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber$1(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
           maxLineWidth: limitLabelLength,
@@ -34049,6 +34120,39 @@
       });
     }
 
+    function autoWrap(labels, config) {
+      const {
+        limitLength: limitLength,
+        axisLength: axisLength,
+        ellipsis = "...",
+        orient: orient
+      } = config;
+      if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
+      const verticalLimitLength = axisLength / labels.length;
+      labels.forEach(label => {
+        var _a;
+        const angle = label.attribute.angle,
+          isHorizontal = isAngleHorizontal(angle),
+          isVertical = isAngleVertical(angle),
+          isX = "top" === orient || "bottom" === orient;
+        if (isX) {
+          if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) return;
+          if (isHorizontal && Math.floor(label.AABBBounds.width()) <= verticalLimitLength) return;
+        } else {
+          if (isVertical && Math.floor(label.AABBBounds.height()) <= verticalLimitLength) return;
+          if (isHorizontal && Math.floor(label.AABBBounds.width()) <= limitLength) return;
+        }
+        let limitLabelLength = null,
+          heightLimit = null;
+        isX ? isVertical ? (limitLabelLength = limitLength, heightLimit = verticalLimitLength) : (limitLabelLength = verticalLimitLength, heightLimit = limitLength) : isVertical ? (limitLabelLength = verticalLimitLength, heightLimit = limitLength) : (limitLabelLength = limitLength, heightLimit = verticalLimitLength), label.setAttributes({
+          maxLineWidth: limitLabelLength,
+          ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis,
+          whiteSpace: "normal",
+          heightLimit: heightLimit
+        });
+      });
+    }
+
     function alignAxisLabels(labels, start, containerSize, orient, align) {
       "left" === orient || "right" === orient ? "left" === align ? labels.forEach(label => {
         var _a;
@@ -34148,7 +34252,50 @@
       }
       _renderInner(container) {
         var _a;
-        super._renderInner(container);
+        if (this._breaks = null, this.attribute.breaks && this.attribute.breaks.length) {
+          const transformedBreaks = [];
+          for (let index = 0; index < this.attribute.breaks.length; index++) {
+            const aBreak = this.attribute.breaks[index],
+              {
+                range: range,
+                breakSymbol: breakSymbol,
+                rawRange: rawRange
+              } = aBreak;
+            transformedBreaks.push({
+              startPoint: this.getTickCoord(range[0]),
+              endPoint: this.getTickCoord(range[1]),
+              range: range,
+              breakSymbol: breakSymbol,
+              rawRange: rawRange
+            });
+          }
+          this._breaks = transformedBreaks;
+        }
+        super._renderInner(container), this._breaks && this._breaks.length && this._breaks.forEach((b, index) => {
+          const {
+            startPoint: startPoint,
+            endPoint: endPoint,
+            breakSymbol: breakSymbol,
+            rawRange: rawRange
+          } = b;
+          if (!1 !== (null == breakSymbol ? void 0 : breakSymbol.visible)) {
+            const axisBreakGroup = graphicCreator.group({
+              zIndex: TopZIndex
+            });
+            axisBreakGroup.name = AXIS_ELEMENT_NAME.axisBreak, axisBreakGroup.id = this._getNodeId(`${AXIS_ELEMENT_NAME.axisBreak}-${index}`), axisBreakGroup.data = rawRange;
+            const symbolStyle = getAxisBreakSymbolAttrs(breakSymbol),
+              shape1 = graphicCreator.symbol(Object.assign({
+                x: startPoint.x,
+                y: startPoint.y
+              }, symbolStyle));
+            shape1.name = AXIS_ELEMENT_NAME.axisBreakSymbol;
+            const shape2 = graphicCreator.symbol(Object.assign({
+              x: endPoint.x,
+              y: endPoint.y
+            }, symbolStyle));
+            shape2.name = AXIS_ELEMENT_NAME.axisBreakSymbol, axisBreakGroup.add(shape1), axisBreakGroup.add(shape2), container.add(axisBreakGroup);
+          }
+        });
         const {
           panel: panel
         } = this.attribute;
@@ -34175,18 +34322,25 @@
             startSymbol: startSymbol,
             endSymbol: endSymbol,
             style: style,
-            breakRange: breakRange,
-            breakShape: breakShape,
-            breakShapeStyle: breakShapeStyle,
             state: state
           } = _a,
-          restLineAttrs = __rest$5(_a, ["startSymbol", "endSymbol", "style", "breakRange", "breakShape", "breakShapeStyle", "state"]),
+          restLineAttrs = __rest$5(_a, ["startSymbol", "endSymbol", "style", "state"]),
           lineAttrs = Object.assign({
-            points: [start, end],
             startSymbol: startSymbol,
             endSymbol: endSymbol,
             lineStyle: style
           }, restLineAttrs);
+        if (this._breaks && this._breaks.length) {
+          const linePoints = [];
+          let lastStartPoint = start;
+          this._breaks.forEach(b => {
+            const {
+              startPoint: startPoint,
+              endPoint: endPoint
+            } = b;
+            linePoints.push([lastStartPoint, startPoint]), lastStartPoint = endPoint;
+          }), linePoints.push([lastStartPoint, end]), lineAttrs.points = linePoints, lineAttrs.multiSegment = !0;
+        } else lineAttrs.points = [start, end];
         isEmpty(state) || (lineAttrs.state = {
           line: merge$2({}, DEFAULT_STATES$1, state),
           symbol: merge$2({}, DEFAULT_STATES$1, state)
@@ -34392,13 +34546,24 @@
             autoHide: autoHide$1,
             autoHideMethod: autoHideMethod,
             autoHideSeparation: autoHideSeparation,
-            lastVisible: lastVisible
+            lastVisible: lastVisible,
+            autoWrap: autoWrap$1,
+            overflowLimitLength: overflowLimitLength
           } = label;
         if (isFunction$1(layoutFunc)) layoutFunc(labelShapes, labelData, layer, this);else {
-          if (autoRotate$1 && autoRotate(labelShapes, {
+          if (autoRotate$1) autoRotate(labelShapes, {
             labelRotateAngle: autoRotateAngle,
             orient: orient
-          }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0) {
+          });else if (autoWrap$1) {
+            const axisLength = "left" === orient || "right" === orient ? Math.abs(this.attribute.start.y - this.attribute.end.y) : Math.abs(this.attribute.start.x - this.attribute.end.x);
+            autoWrap(labelShapes, {
+              orient: orient,
+              limitLength: limitLength,
+              axisLength: axisLength,
+              ellipsis: limitEllipsis
+            });
+          }
+          if (!autoWrap$1 && autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0) {
             const isVertical = "left" === orient || "right" === orient,
               axisLength = isVertical ? Math.abs(this.attribute.start.y - this.attribute.end.y) : Math.abs(this.attribute.start.x - this.attribute.end.x),
               verticalLimitLength = isVertical ? axisLength / labelShapes.length : autoHide$1 || autoRotate$1 ? 1 / 0 : axisLength / labelShapes.length;
@@ -34407,7 +34572,8 @@
               verticalLimitLength: verticalLimitLength,
               ellipsis: limitEllipsis,
               orient: orient,
-              axisLength: axisLength
+              axisLength: axisLength,
+              overflowLimitLength: overflowLimitLength
             });
           }
           autoHide$1 && autoHide(labelShapes, {
@@ -34468,6 +34634,9 @@
         }
         return limitLength && (limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount), limitLength;
       }
+      release() {
+        super.release(), this._breaks = null;
+      }
     }
     LineAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(LineAxis, LineAxisMixin);
 
@@ -35789,7 +35958,28 @@
       }
     }
 
+    function getScaleTicks(op, scale, count, getTicks) {
+      let scaleTicks;
+      const {
+        breakData: breakData
+      } = op;
+      if (breakData && breakData()) {
+        const {
+            breakDomains: breakDomains
+          } = breakData(),
+          domain = scale.domain();
+        scaleTicks = [];
+        for (let i = 0; i < domain.length - 1; i++) {
+          getTicks(count, [domain[i], domain[i + 1]]).forEach(tick => {
+            breakDomains.some(breakDomain => tick >= breakDomain[0] && tick <= breakDomain[1]) || scaleTicks.push(tick);
+          });
+        }
+        scale.domain(domain);
+      } else scaleTicks = getTicks(count);
+      return scaleTicks;
+    }
     const continuousTicks = (scale, op) => {
+      var _a, _b;
       if (!isContinuous(scale.type)) return convertDomainToTickData(scale.domain());
       const range = scale.range(),
         rangeSize = Math.abs(range[range.length - 1] - range[0]);
@@ -35799,27 +35989,33 @@
         forceTickCount: forceTickCount,
         tickStep: tickStep,
         noDecimals = !1,
-        labelStyle: labelStyle
+        labelStyle: labelStyle,
+        breakData: breakData
       } = op;
       let scaleTicks;
-      if (isValid$1(tickStep)) scaleTicks = scale.stepTicks(tickStep);else if (isValid$1(forceTickCount)) scaleTicks = scale.forceTicks(forceTickCount);else if ("d3" === op.tickMode) {
-        const count = isFunction$1(tickCount) ? tickCount({
+      if (isValid$1(tickStep)) scaleTicks = scale.stepTicks(tickStep);else if (isValid$1(forceTickCount)) scaleTicks = getScaleTicks(op, scale, forceTickCount, (count, subDomain) => subDomain && subDomain.length ? scale.domain(subDomain, !0).forceTicks(count) : scale.forceTicks(count));else if ("d3" === op.tickMode) {
+        const count = null !== (_a = isFunction$1(tickCount) ? tickCount({
           axisLength: rangeSize,
           labelStyle: labelStyle
-        }) : tickCount;
-        scaleTicks = scale.d3Ticks(null != count ? count : 5, {
+        }) : tickCount) && void 0 !== _a ? _a : 5;
+        scaleTicks = getScaleTicks(op, scale, count, (count, subDomain) => subDomain && subDomain.length ? scale.domain(subDomain, !0).d3Ticks(count, {
           noDecimals: noDecimals
-        });
+        }) : scale.d3Ticks(count, {
+          noDecimals: noDecimals
+        }));
       } else {
-        const count = isFunction$1(tickCount) ? tickCount({
+        const count = null !== (_b = isFunction$1(tickCount) ? tickCount({
             axisLength: rangeSize,
             labelStyle: labelStyle
-          }) : tickCount,
+          }) : tickCount) && void 0 !== _b ? _b : 5,
           customTicks = isFunction$1(op.tickMode) ? op.tickMode : void 0;
-        scaleTicks = scale.ticks(null != count ? count : 5, {
+        scaleTicks = getScaleTicks(op, scale, count, (count, subDomain) => subDomain && subDomain.length ? scale.domain(subDomain, !0).ticks(count, {
           noDecimals: noDecimals,
           customTicks: customTicks
-        });
+        }) : scale.ticks(count, {
+          noDecimals: noDecimals,
+          customTicks: customTicks
+        }));
       }
       if (op.sampling && ("cartesian" === op.coordinateType || "polar" === op.coordinateType && "radius" === op.axisOrientType)) {
         const {
@@ -35830,7 +36026,8 @@
           AABBBounds: bounds,
           value: scaleTicks[i]
         }));
-        for (; items.length >= 3 && hasOverlap$1(items, labelGap);) items = methods$1.parity(items);
+        const samplingMethod = breakData && breakData() ? methods$1.greedy : methods$1.parity;
+        for (; items.length >= 3 && hasOverlap$1(items, labelGap);) items = samplingMethod(items, labelGap);
         const ticks = items.map(item => item.value);
         ticks.length < 3 && labelFlush && (ticks.length > 1 && ticks.pop(), last(ticks) !== last(scaleTicks) && ticks.push(last(scaleTicks))), scaleTicks = ticks;
       }
@@ -40920,7 +41117,7 @@
         super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Title.defaultAttributes, attributes)), this.name = "title";
       }
       render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         const {
             textType: textType,
             text: text,
@@ -40944,96 +41141,124 @@
             y: parsedPadding[0],
             zIndex: 1
           }, "group");
-        if (!1 !== this.attribute.visible && !1 !== textStyle.visible) if ("rich" === textType || isValid$1(textStyle.character)) {
-          const attr = Object.assign({
-            x: null !== (_a = textStyle.x) && void 0 !== _a ? _a : 0,
-            y: null !== (_b = textStyle.y) && void 0 !== _b ? _b : 0,
-            width: null !== (_d = null !== (_c = textStyle.width) && void 0 !== _c ? _c : width) && void 0 !== _d ? _d : 0,
-            height: null !== (_f = null !== (_e = textStyle.height) && void 0 !== _e ? _e : height) && void 0 !== _f ? _f : 0,
-            ellipsis: null === (_g = textStyle.ellipsis) || void 0 === _g || _g,
-            wordBreak: null !== (_h = textStyle.wordBreak) && void 0 !== _h ? _h : "break-word",
-            maxHeight: textStyle.maxHeight,
-            maxWidth: textStyle.maxWidth,
-            textConfig: null !== (_j = textStyle.character) && void 0 !== _j ? _j : text
-          }, textStyle);
-          this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
-        } else if ("html" === textType) {
-          const attr = Object.assign({
-            html: Object.assign(Object.assign({
-              dom: text
-            }, DEFAULT_HTML_TEXT_SPEC), textStyle),
-            x: null !== (_k = textStyle.x) && void 0 !== _k ? _k : 0,
-            y: null !== (_l = textStyle.y) && void 0 !== _l ? _l : 0,
-            width: null !== (_o = null !== (_m = textStyle.width) && void 0 !== _m ? _m : width) && void 0 !== _o ? _o : 0,
-            height: null !== (_q = null !== (_p = textStyle.height) && void 0 !== _p ? _p : height) && void 0 !== _q ? _q : 0,
-            ellipsis: null === (_r = textStyle.ellipsis) || void 0 === _r || _r,
-            wordBreak: null !== (_s = textStyle.wordBreak) && void 0 !== _s ? _s : "break-word",
-            maxHeight: textStyle.maxHeight,
-            maxWidth: textStyle.maxWidth,
-            textConfig: []
-          }, textStyle);
-          this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
-        } else isValid$1(text) && (this._mainTitle = group.createOrUpdateChild("mainTitle", Object.assign(Object.assign({
-          text: isArray$1(text) ? text : [text],
-          wrap: !0
-        }, textStyle), {
-          maxLineWidth: null !== (_t = textStyle.maxLineWidth) && void 0 !== _t ? _t : width,
-          heightLimit: textStyle.heightLimit,
-          lineClamp: textStyle.lineClamp,
-          ellipsis: null === (_u = textStyle.ellipsis) || void 0 === _u || _u,
-          x: 0,
-          y: 0
-        }), "text"));
+        if (!1 !== this.attribute.visible && !1 !== textStyle.visible) {
+          const {
+            width: mainTitleWidth,
+            height: mainTitleHeight,
+            maxHeight: mainTitleMaxHeight,
+            maxWidth: mainTitleMaxWidth,
+            x = 0,
+            y = 0,
+            ellipsis = !0,
+            wordBreak = "break-word",
+            maxWidth: maxWidth,
+            lineClamp: lineClamp
+          } = textStyle;
+          if ("rich" === textType || isValid$1(textStyle.character)) {
+            const attr = Object.assign({
+              x: x,
+              y: y,
+              width: null !== (_a = null != mainTitleWidth ? mainTitleWidth : width) && void 0 !== _a ? _a : 0,
+              height: null !== (_b = null != mainTitleHeight ? mainTitleHeight : height) && void 0 !== _b ? _b : 0,
+              ellipsis: null == ellipsis || ellipsis,
+              wordBreak: null != wordBreak ? wordBreak : "break-word",
+              maxHeight: null != mainTitleMaxHeight ? mainTitleMaxHeight : maxHeight,
+              maxWidth: null != mainTitleMaxWidth ? mainTitleMaxWidth : maxWidth,
+              textConfig: null !== (_c = textStyle.character) && void 0 !== _c ? _c : text
+            }, textStyle);
+            this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
+          } else if ("html" === textType) {
+            const attr = Object.assign({
+              html: Object.assign(Object.assign({
+                dom: text
+              }, DEFAULT_HTML_TEXT_SPEC), textStyle),
+              x: x,
+              y: y,
+              width: null !== (_d = null != mainTitleWidth ? mainTitleWidth : width) && void 0 !== _d ? _d : 0,
+              height: null !== (_e = null != mainTitleHeight ? mainTitleHeight : height) && void 0 !== _e ? _e : 0,
+              ellipsis: ellipsis,
+              wordBreak: wordBreak,
+              maxHeight: null != mainTitleMaxHeight ? mainTitleMaxHeight : maxHeight,
+              maxWidth: null != mainTitleMaxWidth ? mainTitleMaxWidth : maxWidth,
+              textConfig: []
+            }, textStyle);
+            this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
+          } else isValid$1(text) && (this._mainTitle = group.createOrUpdateChild("mainTitle", Object.assign(Object.assign({
+            text: isArray$1(text) ? text : [text],
+            whiteSpace: "normal"
+          }, textStyle), {
+            maxLineWidth: null !== (_g = null !== (_f = textStyle.maxLineWidth) && void 0 !== _f ? _f : mainTitleWidth) && void 0 !== _g ? _g : width,
+            heightLimit: null != mainTitleHeight ? mainTitleHeight : maxHeight,
+            lineClamp: lineClamp,
+            ellipsis: ellipsis,
+            x: x,
+            y: y
+          }), "text"));
+        }
         const maintextHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0,
           maintextWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
-        if (!1 !== this.attribute.visible && !1 !== subtextStyle.visible) if ("rich" === subtextType || isValid$1(subtextStyle.character)) {
-          const attr = Object.assign({
-            x: null !== (_v = subtextStyle.x) && void 0 !== _v ? _v : 0,
-            y: null !== (_w = subtextStyle.y) && void 0 !== _w ? _w : 0,
-            width: null !== (_y = null !== (_x = subtextStyle.width) && void 0 !== _x ? _x : width) && void 0 !== _y ? _y : 0,
-            height: null !== (_0 = null !== (_z = subtextStyle.height) && void 0 !== _z ? _z : height) && void 0 !== _0 ? _0 : 0,
-            ellipsis: null === (_1 = subtextStyle.ellipsis) || void 0 === _1 || _1,
-            wordBreak: null !== (_2 = subtextStyle.wordBreak) && void 0 !== _2 ? _2 : "break-word",
-            maxHeight: subtextStyle.maxHeight,
-            maxWidth: subtextStyle.maxWidth,
-            textConfig: null !== (_3 = subtextStyle.character) && void 0 !== _3 ? _3 : subtext
-          }, subtextStyle);
-          this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
-        } else if ("html" === subtextType) {
-          const attr = Object.assign({
-            html: Object.assign(Object.assign({
-              dom: subtext
-            }, DEFAULT_HTML_TEXT_SPEC), subtextStyle),
-            x: null !== (_4 = subtextStyle.x) && void 0 !== _4 ? _4 : 0,
-            y: null !== (_5 = subtextStyle.y) && void 0 !== _5 ? _5 : 0,
-            width: null !== (_7 = null !== (_6 = subtextStyle.width) && void 0 !== _6 ? _6 : width) && void 0 !== _7 ? _7 : 0,
-            height: null !== (_9 = null !== (_8 = subtextStyle.height) && void 0 !== _8 ? _8 : height) && void 0 !== _9 ? _9 : 0,
-            ellipsis: null === (_10 = subtextStyle.ellipsis) || void 0 === _10 || _10,
-            wordBreak: null !== (_11 = subtextStyle.wordBreak) && void 0 !== _11 ? _11 : "break-word",
-            maxHeight: subtextStyle.maxHeight,
-            maxWidth: subtextStyle.maxWidth,
-            textConfig: []
-          }, subtextStyle);
-          this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
-        } else isValid$1(subtext) && (this._subTitle = group.createOrUpdateChild("subTitle", Object.assign(Object.assign({
-          text: isArray$1(subtext) ? subtext : [subtext],
-          wrap: !0
-        }, subtextStyle), {
-          maxLineWidth: null !== (_12 = subtextStyle.maxLineWidth) && void 0 !== _12 ? _12 : width,
-          heightLimit: subtextStyle.heightLimit,
-          lineClamp: subtextStyle.lineClamp,
-          ellipsis: null === (_13 = subtextStyle.ellipsis) || void 0 === _13 || _13,
-          x: 0,
-          y: maintextHeight
-        }), "text"));
+        if (!1 !== this.attribute.visible && !1 !== subtextStyle.visible) {
+          const {
+              width: subTitleWidth,
+              height: subTitleHeight,
+              maxWidth: subTitleMaxWidth,
+              maxHeight: subTitleMaxHeight,
+              x = 0,
+              y = 0,
+              ellipsis = !0,
+              wordBreak = "break-word",
+              lineClamp: lineClamp
+            } = subtextStyle,
+            maxSubTextHeight = Math.max(Number.MIN_VALUE, maxHeight - maintextHeight);
+          if ("rich" === subtextType || isValid$1(subtextStyle.character)) {
+            const attr = Object.assign({
+              x: x,
+              y: y,
+              width: null !== (_h = null != subTitleWidth ? subTitleWidth : width) && void 0 !== _h ? _h : 0,
+              height: null !== (_j = null != subTitleHeight ? subTitleHeight : height) && void 0 !== _j ? _j : 0,
+              ellipsis: ellipsis,
+              wordBreak: wordBreak,
+              maxHeight: null != subTitleMaxHeight ? subTitleMaxHeight : maxSubTextHeight,
+              maxWidth: null != subTitleMaxWidth ? subTitleMaxWidth : maxWidth,
+              textConfig: null !== (_k = subtextStyle.character) && void 0 !== _k ? _k : subtext
+            }, subtextStyle);
+            this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
+          } else if ("html" === subtextType) {
+            const attr = Object.assign({
+              html: Object.assign(Object.assign({
+                dom: subtext
+              }, DEFAULT_HTML_TEXT_SPEC), subtextStyle),
+              x: x,
+              y: y,
+              width: null !== (_l = null != subTitleWidth ? subTitleWidth : width) && void 0 !== _l ? _l : 0,
+              height: null !== (_m = null != subTitleHeight ? subTitleHeight : height) && void 0 !== _m ? _m : 0,
+              ellipsis: ellipsis,
+              wordBreak: wordBreak,
+              maxHeight: null != subTitleMaxHeight ? subTitleMaxHeight : maxSubTextHeight,
+              maxWidth: null != subTitleMaxWidth ? subTitleMaxWidth : maxWidth,
+              textConfig: []
+            }, subtextStyle);
+            this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
+          } else isValid$1(subtext) && (this._subTitle = group.createOrUpdateChild("subTitle", Object.assign(Object.assign({
+            text: isArray$1(subtext) ? subtext : [subtext],
+            whiteSpace: "normal"
+          }, subtextStyle), {
+            maxLineWidth: null !== (_o = subtextStyle.maxLineWidth) && void 0 !== _o ? _o : width,
+            heightLimit: null !== (_p = subtextStyle.heightLimit) && void 0 !== _p ? _p : maxSubTextHeight,
+            lineClamp: lineClamp,
+            ellipsis: ellipsis,
+            x: 0,
+            y: maintextHeight
+          }), "text"));
+        }
         const subtextHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0,
           subtextWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
         let titleWidth = Math.max(maintextWidth, subtextWidth),
-          titleHeight = maintextHeight + (null !== (_14 = subtextStyle.height) && void 0 !== _14 ? _14 : subtextHeight);
-        if (isValid$1(width) && (titleWidth = width, this._mainTitle && this._mainTitle.setAttribute("maxLineWidth", width), this._subTitle && this._subTitle.setAttribute("maxLineWidth", width)), isValid$1(height) && (titleHeight = height), isValid$1(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$1(maxWidth) && (this._mainTitle && this._mainTitle.setAttribute("maxLineWidth", maxWidth), this._subTitle && this._subTitle.setAttribute("maxLineWidth", maxWidth), this._mainTitle && this._mainTitle.setAttribute("maxWidth", maxWidth), this._subTitle && this._subTitle.setAttribute("maxWidth", maxWidth), titleWidth > maxWidth && (titleWidth = maxWidth)), isValid$1(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$1(maxHeight) && (this._mainTitle && this._mainTitle.setAttribute("maxHeight", maxHeight), this._subTitle && this._subTitle.setAttribute("maxHeight", maxHeight - maintextHeight), titleHeight > maxHeight && (titleHeight = maxHeight)), group.attribute.width = titleWidth, group.attribute.height = titleHeight, group.attribute.boundsPadding = parsedPadding, this._mainTitle) {
+          titleHeight = maintextHeight + (null !== (_q = subtextStyle.height) && void 0 !== _q ? _q : subtextHeight);
+        if (isValid$1(width) && (titleWidth = width), isValid$1(height) && (titleHeight = height), isValid$1(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$1(maxWidth) && titleWidth > maxWidth && (titleWidth = maxWidth), isValid$1(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$1(maxHeight) && titleHeight > maxHeight && (titleHeight = maxHeight), group.attribute.width = titleWidth, group.attribute.height = titleHeight, group.attribute.boundsPadding = parsedPadding, this._mainTitle) {
           if (isValid$1(align) || isValid$1(textStyle.align)) {
             const mainTitleAlign = textStyle.align ? textStyle.align : align,
-              mainTitleWidth = null !== (_15 = textStyle.width) && void 0 !== _15 ? _15 : maintextWidth;
+              mainTitleWidth = null !== (_r = textStyle.width) && void 0 !== _r ? _r : maintextWidth;
             "left" === mainTitleAlign ? (this._mainTitle.setAttribute("x", 0), this._mainTitle.setAttribute("textAlign", "left")) : "center" === mainTitleAlign ? (this._mainTitle.setAttribute("x", mainTitleWidth / 2), this._mainTitle.setAttribute("textAlign", "center")) : "right" === mainTitleAlign && (this._mainTitle.setAttribute("x", mainTitleWidth), this._mainTitle.setAttribute("textAlign", "right"));
           }
           if (isValid$1(verticalAlign) || isValid$1(textStyle.verticalAlign)) {
@@ -41045,13 +41270,13 @@
         if (this._subTitle) {
           if (isValid$1(align) || isValid$1(subtextStyle.align)) {
             const subTitleAlign = subtextStyle.align ? subtextStyle.align : align,
-              subTitleWidth = null !== (_16 = subtextStyle.width) && void 0 !== _16 ? _16 : subtextWidth;
+              subTitleWidth = null !== (_s = subtextStyle.width) && void 0 !== _s ? _s : subtextWidth;
             "left" === subTitleAlign ? (this._subTitle.setAttribute("x", 0), this._subTitle.setAttribute("textAlign", "left")) : "center" === subTitleAlign ? (this._subTitle.setAttribute("x", subTitleWidth / 2), this._subTitle.setAttribute("textAlign", "center")) : "right" === subTitleAlign && (this._subTitle.setAttribute("x", subTitleWidth), this._subTitle.setAttribute("textAlign", "right"));
           }
           if (isValid$1(verticalAlign) || isValid$1(textStyle.verticalAlign)) {
             const subTitleVerticalAlign = subtextStyle.verticalAlign ? subtextStyle.verticalAlign : verticalAlign,
               subTitleYStart = maintextHeight,
-              subTitleHeight = null !== (_17 = subtextStyle.height) && void 0 !== _17 ? _17 : 0;
+              subTitleHeight = null !== (_t = subtextStyle.height) && void 0 !== _t ? _t : 0;
             "top" === subTitleVerticalAlign ? (this._subTitle.setAttribute("y", subTitleYStart), this._subTitle.setAttribute("textBaseline", "top")) : "middle" === subTitleVerticalAlign ? (this._subTitle.setAttribute("y", subTitleYStart + subTitleHeight / 2), this._subTitle.setAttribute("textBaseline", "middle")) : "bottom" === subTitleVerticalAlign && (this._subTitle.setAttribute("y", subTitleYStart + subTitleHeight), this._subTitle.setAttribute("textBaseline", "bottom"));
           }
         }
@@ -50421,9 +50646,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         };
         markNodes.forEach(node => {
           const mark = node.mark;
-          mark.animate && 0 === mark.animate.getAnimatorCount() ? releaseUp(node) : mark.addEventListener("animationEnd", () => {
+          mark.animate && 0 !== mark.animate.getAnimatorCount() ? mark.addEventListener("animationEnd", () => {
             mark.animate && 0 === mark.animate.getAnimatorCount() && releaseUp(node);
-          });
+          }) : releaseUp(node);
         }), this._cachedGrammars.clear();
       }
       runAfter(callback) {
@@ -56283,6 +56508,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
         }
+        clearAllEventElement() {
+            if (this._disableTriggerEvent) {
+                return;
+            }
+            for (const [stateValue, elements] of this._stateElements) {
+                elements.forEach(e => {
+                    e.clearStates();
+                });
+                this._stateElements.set(stateValue, []);
+            }
+        }
         reverseEventElement(stateValue) {
             if (this._disableTriggerEvent) {
                 return;
@@ -56337,12 +56573,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
         }
+        resetAllInteraction() {
+            for (const [stateValue, interactions] of this._vgrammarInteractions) {
+                if (interactions) {
+                    interactions.forEach(vgInteraction => {
+                        vgInteraction.reset(null);
+                    });
+                }
+            }
+        }
     }
 
     const USER_LAYOUT_RECT_LEVEL = 9;
     const DEFAULT_LAYOUT_RECT_LEVEL = 0;
     var LayoutZIndex;
     (function (LayoutZIndex) {
+        LayoutZIndex[LayoutZIndex["SeriesGroup"] = 0] = "SeriesGroup";
         LayoutZIndex[LayoutZIndex["Axis_Grid"] = 50] = "Axis_Grid";
         LayoutZIndex[LayoutZIndex["CrossHair_Grid"] = 100] = "CrossHair_Grid";
         LayoutZIndex[LayoutZIndex["Region"] = 450] = "Region";
@@ -57396,12 +57642,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return hasDataZoom || hasScrollBar ? true : this._layout.layoutClip;
         }
         created() {
-            var _a;
+            var _a, _b;
             this.initLayout();
             super.created();
             const clip = (_a = this._spec.clip) !== null && _a !== void 0 ? _a : this._getClipDefaultValue();
             this._groupMark = this._createGroupMark('regionGroup', this.userId, this.layoutZIndex);
-            this._interactionMark = this._createGroupMark('regionInteractionGroup', this.userId + '_interaction', LayoutZIndex.Interaction);
+            this._interactionMark = this._createGroupMark('regionInteractionGroup', ((_b = this.userId) !== null && _b !== void 0 ? _b : this.type) + '_interaction', LayoutZIndex.Interaction);
             if (!isEmpty(this._spec.style)) {
                 this._backgroundMark = this._createMark({ type: "rect", name: 'regionBackground' });
                 if (clip) {
@@ -57417,7 +57663,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         this._groupMark.addMark(mark);
                     }
                 });
-                this._backgroundMark && this._backgroundMark.setZIndex(0);
+                this._backgroundMark && this._backgroundMark.setZIndex(LayoutZIndex.SeriesGroup - 1);
                 this._foregroundMark && this._foregroundMark.setZIndex(LayoutZIndex.Mark + 1);
             }
             this.createTrigger();
@@ -60384,6 +60630,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._chart.clearState(state);
         }
+        clearAllStates() {
+            if (!this._chart) {
+                return;
+            }
+            this._chart.clearAllStates();
+        }
         clearSelected() {
             if (!this._chart) {
                 return;
@@ -60891,7 +61143,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.3";
+    const version = "1.12.4";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -60907,13 +61159,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         constructor() {
             this.activeTriggerSet = {
                 mark: new Set(),
-                dimension: new Set(),
                 group: new Set()
             };
             this.ignoreTriggerSet = {
-                mark: new Set(),
-                dimension: new Set(),
-                group: new Set()
+                mark: new Set()
             };
         }
     }
@@ -61950,7 +62199,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._viewDataMap = new Map();
             this._viewDataFilter = null;
             this._data = null;
-            this.layoutZIndex = 0;
+            this.layoutZIndex = LayoutZIndex.SeriesGroup;
             this._invalidType = 'break';
             this._region = options.region;
             this._dataSet = options.dataSet;
@@ -63751,13 +64000,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     function isValidAlignDomain(domain) {
-        return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(domain[1]) && domain[1] >= domain[0];
+        return domain.length === 2 && isValidNumber$1(domain[0]) && isValidNumber$1(last(domain)) && last(domain) >= domain[0];
     }
     function getScaleInfo(axis, domain) {
-        const total = domain[1] - domain[0];
-        const includeZero = domain[1] * domain[0] < 0;
+        const total = last(domain) - domain[0];
+        const includeZero = last(domain) * domain[0] < 0;
         let negative = domain[0] <= 0 ? 0 - domain[0] : 0;
-        let positive = domain[1] > 0 ? domain[1] - 0 : 0;
+        let positive = last(domain) > 0 ? last(domain) - 0 : 0;
         if (total === 0) {
             if (domain[0] < 0) {
                 negative = 1;
@@ -63992,12 +64241,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return data;
         }
         const targetDomain = targetScale.domain();
-        const targetRange = targetDomain[1] - targetDomain[0];
+        const targetRange = last(targetDomain) - targetDomain[0];
         if (targetRange === 0) {
             return data;
         }
         const currentDomain = currentScale.domain();
-        const currentRange = currentDomain[1] - currentDomain[0];
+        const currentRange = last(currentDomain) - currentDomain[0];
         if (targetRange === 0) {
             return data;
         }
@@ -64173,6 +64422,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             rawValue: value
         };
     }
+    function shouldUpdateAxis(preHelper, curHelper, forceUpdate) {
+        return forceUpdate || !preHelper || preHelper.getAxisId() === curHelper.getAxisId();
+    }
 
     class ComponentPluginService extends BasePluginService {
         constructor(component) {
@@ -64617,10 +64869,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     else if (viewData && viewData.latestData && viewData.latestData.length) {
                         const seriesData = (_a = s.getViewDataStatistics) === null || _a === void 0 ? void 0 : _a.call(s);
+                        const userSetBreaks = this.type === ComponentTypeEnum.cartesianLinearAxis && this._spec.breaks && this._spec.breaks.length;
                         field.forEach(f => {
                             var _a;
                             if ((_a = seriesData === null || seriesData === void 0 ? void 0 : seriesData.latestData) === null || _a === void 0 ? void 0 : _a[f]) {
-                                data.push(seriesData.latestData[f]);
+                                if (userSetBreaks) {
+                                    data.push(Object.assign(Object.assign({}, seriesData.latestData[f]), { values: viewData.latestData.map((obj) => obj[f]) }));
+                                }
+                                else {
+                                    data.push(seriesData.latestData[f]);
+                                }
                             }
                         });
                     }
@@ -65011,13 +65269,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     eachSeries(this._regions, s => {
                         const orient = this.getOrient();
                         if (isXAxis(orient)) {
-                            s.setXAxisHelper(this.axisHelper());
+                            if (shouldUpdateAxis(s.getXAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                                s.setXAxisHelper(this.axisHelper());
+                            }
                         }
                         else if (isYAxis(orient)) {
-                            s.setYAxisHelper(this.axisHelper());
+                            if (shouldUpdateAxis(s.getYAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                                s.setYAxisHelper(this.axisHelper());
+                            }
                         }
                         else if (isZAxis(orient)) {
-                            s.setZAxisHelper(this.axisHelper());
+                            if (shouldUpdateAxis(s.getZAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                                s.setZAxisHelper(this.axisHelper());
+                            }
                         }
                     }, {
                         userId: this._seriesUserId,
@@ -65091,7 +65355,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 ? (_a = item
                                     .getTickData()
                                     .getLatestData()) === null || _a === void 0 ? void 0 : _a.find((d) => d.value === 0)
-                                : item.getScale().domain()[0] <= 0 && item.getScale().domain()[1] >= 0));
+                                : item.getScale().domain()[0] <= 0 && last(item.getScale().domain()) >= 0));
                     };
                     const relativeAxes = axesComponents.filter(item => isValidAxis(item));
                     if (relativeAxes.length) {
@@ -65197,8 +65461,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setLayout3dBox(box3d) {
             this.layout3dBox = box3d;
         }
-        updateScaleRange() {
-            let isScaleChange = false;
+        getNewScaleRange() {
             const { width, height } = this.getLayoutRect();
             const { left, right, top, bottom } = this._innerOffset;
             let newRange = [];
@@ -65218,8 +65481,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     newRange = this._inverse ? [top, height - bottom] : [height - bottom, top];
                 }
             }
-            const [start, end] = this._scale.range();
-            if (newRange[0] !== start || newRange[1] !== end) {
+            return newRange;
+        }
+        updateScaleRange() {
+            let isScaleChange = false;
+            const newRange = this.getNewScaleRange();
+            const range = this._scale.range();
+            if (newRange.length === range.length && newRange.every((value, index) => value === range[index])) {
+                isScaleChange = false;
+            }
+            else {
                 isScaleChange = true;
                 this._scale.range(newRange);
             }
@@ -65387,16 +65658,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const orient = this.getOrient();
             eachSeries(this._regions, s => {
                 if (isXAxis(orient)) {
-                    s.setScaleX(this._scale);
-                    s.setXAxisHelper(this.axisHelper());
+                    if (shouldUpdateAxis(s.getXAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                        s.setScaleX(this._scale);
+                        s.setXAxisHelper(this.axisHelper());
+                    }
                 }
                 else if (isYAxis(orient)) {
-                    s.setScaleY(this._scale);
-                    s.setYAxisHelper(this.axisHelper());
+                    if (shouldUpdateAxis(s.getYAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                        s.setScaleY(this._scale);
+                        s.setYAxisHelper(this.axisHelper());
+                    }
                 }
                 else if (isZAxis(orient)) {
-                    s.setScaleZ(this._scale);
-                    s.setZAxisHelper(this.axisHelper());
+                    if (shouldUpdateAxis(s.getZAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                        s.setScaleZ(this._scale);
+                        s.setZAxisHelper(this.axisHelper());
+                    }
                 }
             }, {
                 userId: this._seriesUserId,
@@ -65455,7 +65732,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     : clamp$1(pos, this._innerOffset.top, this.getLayoutRect().height - this._innerOffset.bottom);
             }
             const range = this._scale.range();
-            if ((pos - range[0]) * (pos - range[1]) > 0) {
+            if ((pos - range[0]) * (pos - last(range)) > 0) {
                 return null;
             }
             return this._scale.invert(pos);
@@ -65594,7 +65871,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         const normalizedValue = this._getNormalizedValue([obj.value], length);
                         return getAxisItem(obj.value, normalizedValue);
                     })
-                        .filter((entry) => entry.value >= 0 && entry.value <= 1)
+                        .filter((entry) => {
+                        const { value, rawValue } = entry;
+                        const domain = this._scale.domain();
+                        if (this.getSpec().type === 'log') {
+                            return value >= 0 && value <= 1;
+                        }
+                        if (isContinuous(this._scale.type)) {
+                            return rawValue >= domain[0] && rawValue <= last(domain);
+                        }
+                        return domain.includes(rawValue);
+                    })
                 ];
             }
             return [];
@@ -65623,17 +65910,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             if (this._autoIndentOnce && this._hasAutoIndent) {
                 ['x1', 'x2', 'y1', 'y2'].forEach(key => {
-                    this.layout.getLastComputeOutBounds()[key] = this._layoutCache._lastComputeOutBounds[key];
+                    this.layout.getLastComputeOutBounds()[key] =
+                        this._layoutCache._lastComputeOutBounds[key];
                 });
             }
             else {
                 this._hasAutoIndent = true;
                 ['x1', 'x2', 'y1', 'y2'].forEach(key => {
-                    if (this.layout.getLastComputeOutBounds()[key] < this._layoutCache._lastComputeOutBounds[key]) {
-                        this.layout.getLastComputeOutBounds()[key] = this._layoutCache._lastComputeOutBounds[key];
+                    if (this.layout.getLastComputeOutBounds()[key] <
+                        this._layoutCache._lastComputeOutBounds[key]) {
+                        this.layout.getLastComputeOutBounds()[key] =
+                            this._layoutCache._lastComputeOutBounds[key];
                     }
                     else {
-                        this._layoutCache._lastComputeOutBounds[key] = this.layout.getLastComputeOutBounds()[key];
+                        this._layoutCache._lastComputeOutBounds[key] =
+                            this.layout.getLastComputeOutBounds()[key];
                     }
                 });
             }
@@ -65703,6 +65994,60 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     CartesianAxis.type = ComponentTypeEnum.cartesianAxis;
     CartesianAxis.specKey = 'axes';
 
+    const setDomain = (min, max, breaks) => breaks.reduce((r, b, i) => {
+        r.push([b, breaks.length === i + 1 ? max : breaks[i + 1]]);
+        return r;
+    }, [[min, breaks[0]]]);
+    function breakDomain(data, points) {
+        const min = data[0];
+        const max = data[data.length - 1];
+        const breaks = points.filter(point => point > min && point < max);
+        if (breaks.length === 0) {
+            return [[min, max]];
+        }
+        return setDomain(min, max, breaks);
+    }
+    const sorter = (a, b) => a - b;
+    const fillBins = (data, points) => {
+        const bins = [0];
+        let i = 0;
+        let j = 0;
+        while (i < points.length) {
+            if (data[j] <= points[i]) {
+                bins[i] += 1;
+                j += 1;
+            }
+            else {
+                i += 1;
+                bins[i] = 0;
+            }
+        }
+        bins[i] = data.slice(j).length;
+        return bins;
+    };
+    function breakScope(data, points) {
+        const bins = fillBins(data, points);
+        const count = data.length;
+        return bins
+            .reduce((res, bin, i) => {
+            const last = res[i - 1] ? res[i - 1][1] : 0;
+            const next = (last * 100 + +(bin / count).toFixed(2) * 100) / 100;
+            res.push([last, next > 1 ? 1 : next > 0.95 ? 1 : next]);
+            return res;
+        }, [])
+            .filter(s => {
+            return !(s[0] === 0 && s[1] === 0) && !(s[0] === 1 && s[1] === 1);
+        });
+    }
+    function breakData(data, points) {
+        data.sort(sorter);
+        points.sort(sorter);
+        return {
+            domain: breakDomain(data, points),
+            scope: breakScope(data, points)
+        };
+    }
+
     const e10 = Math.sqrt(50);
     const e5 = Math.sqrt(10);
     const e2 = Math.sqrt(2);
@@ -65733,7 +66078,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             else if (isFunction$1(tick.tickCount)) {
                 const range = this._scale.range();
-                let rangeSize = Math.abs(range[range.length - 1] - range[0]);
+                let rangeSize = Math.abs(last(range) - range[0]);
                 if (rangeSize === 1 && this._option) {
                     const isX = isXAxis(this._orient);
                     rangeSize = isX ? this._option.getChartViewRect().width : this._option.getChartViewRect().height;
@@ -65794,13 +66139,48 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._scale.scale(value);
         }
         computeLinearDomain(data) {
-            const domain = [];
+            let domain = [];
             if (data.length) {
+                const userSetBreaks = this._spec.breaks && this._spec.breaks.length;
+                let values = [];
+                let minDomain;
+                let maxDomain;
                 data.forEach(d => {
                     const { min, max } = d;
-                    domain[0] = domain[0] === undefined ? min : Math.min(domain[0], min);
-                    domain[1] = domain[1] === undefined ? max : Math.max(domain[1], max);
+                    minDomain = minDomain === undefined ? min : Math.min(minDomain, min);
+                    maxDomain = maxDomain === undefined ? max : Math.max(maxDomain, max);
+                    if (userSetBreaks) {
+                        values = values.concat(d.values);
+                    }
                 });
+                if (userSetBreaks) {
+                    const breakRanges = [];
+                    const breaks = [];
+                    for (let index = 0; index < this._spec.breaks.length; index++) {
+                        const { range } = this._spec.breaks[index];
+                        if (range[0] <= range[1] && range[1] <= maxDomain) {
+                            breakRanges.push(range);
+                            breaks.push(this._spec.breaks[index]);
+                        }
+                    }
+                    breakRanges.sort((a, b) => a[0] - b[0]);
+                    if (breakRanges.length) {
+                        const { domain: breakDomains, scope: breakScopes } = breakData(values, combineDomains(breakRanges));
+                        domain = combineDomains(breakDomains);
+                        this._break = {
+                            domain: breakDomains,
+                            scope: breakScopes,
+                            breakDomains: breakRanges,
+                            breaks
+                        };
+                    }
+                    else {
+                        domain = [minDomain, maxDomain];
+                    }
+                }
+                else {
+                    domain = [minDomain, maxDomain];
+                }
             }
             else {
                 domain[0] = 0;
@@ -65817,7 +66197,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             let domainMin = domain[0];
-            let domainMax = domain[domain.length - 1];
+            let domainMax = last(domain);
             if (domainMin === domainMax) {
                 if (domainMax === 0) {
                     domainMax = 1;
@@ -65847,7 +66227,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 num = Math.abs(num);
                 if (num < 1) {
                     domain[0] = 0;
-                    domain[1] = 1;
+                    domain[domain.length - 1] = 1;
                 }
                 else {
                     let step = num / DEFAULT_TICK_COUNT;
@@ -65855,12 +66235,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const err = step / Math.pow(10, power);
                     step = (err >= e10 ? 10 : err >= e5 ? 5 : err >= e2 ? 2 : 1) * Math.pow(10, power);
                     domain[0] = 0;
-                    domain[1] = step * 10;
+                    domain[domain.length - 1] = step * 10;
                 }
                 if (flag < 0) {
                     domain.reverse();
                     domain[0] *= -1;
-                    domain[1] *= -1;
+                    domain[domain.length - 1] *= -1;
                 }
             }
             return domain;
@@ -65868,7 +66248,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         includeZero(domain) {
             if (this._zero) {
                 domain[0] = Math.min(domain[0], 0);
-                domain[domain.length - 1] = Math.max(domain[domain.length - 1], 0);
+                domain[domain.length - 1] = Math.max(last(domain), 0);
             }
         }
         setExtendDomain(key, value) {
@@ -65910,7 +66290,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const { min, max } = this._domain;
             isValid$1(min) && (domain[0] = min);
-            isValid$1(max) && (domain[1] = max);
+            isValid$1(max) && (domain[domain.length - 1] = max);
         }
         setSoftDomainMinMax(domain) {
             const { softMin, softMax } = this._spec;
@@ -65927,10 +66307,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isValid$1(softMax)) {
                 let softMaxValue = isFunction$1(softMax) ? softMax(domain) : softMax;
                 if (isNil$1(softMaxValue)) {
-                    softMaxValue = domain[1];
+                    softMaxValue = last(domain);
                 }
-                if (softMaxValue >= domain[1]) {
-                    domain[1] = softMaxValue;
+                if (softMaxValue >= last(domain)) {
+                    domain[domain.length - 1] = softMaxValue;
                 }
                 this._softMaxValue = softMaxValue;
             }
@@ -65969,7 +66349,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._domainAfterSpec;
         }
         _updateNiceLabelFormatter(domain) {
-            const domainSpan = Math.abs(domain[1] - domain[0]);
+            const domainSpan = Math.abs(last(domain) - domain[0]);
             const n = Math.max(-Math.floor(Math.log10(domainSpan)), 0) + 2;
             const unit = Math.pow(10, n);
             this.niceLabelFormatter = (value) => {
@@ -66006,6 +66386,46 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._scale.domain(range);
         }
+        _tickTransformOption() {
+            var _a;
+            return Object.assign(Object.assign({}, super._tickTransformOption()), { breakData: ((_a = this._spec.breaks) === null || _a === void 0 ? void 0 : _a.length) ? () => this._break : null });
+        }
+        _getUpdateAttribute(ignoreGrid) {
+            var _a, _b;
+            const attrs = super._getUpdateAttribute(ignoreGrid);
+            if (!isZAxis(this._orient) && ((_b = (_a = this._break) === null || _a === void 0 ? void 0 : _a.breaks) === null || _b === void 0 ? void 0 : _b.length)) {
+                const { width, height } = this.getLayoutRect();
+                const isX = isXAxis(this._orient);
+                const axisLength = isX ? width : height;
+                attrs.breaks = this._break.breaks.map(obj => {
+                    const { range, breakSymbol, gap = 6 } = obj;
+                    const position = this.valueToPosition((range[0] + range[1]) / 2);
+                    const ratio = position / axisLength;
+                    let gapRatio;
+                    if (isPercent(gap)) {
+                        gapRatio = Number(gap.substring(0, gap.length - 1)) / 100;
+                    }
+                    else {
+                        gapRatio = gap / axisLength;
+                    }
+                    const symbolAngle = isValidNumber$1(breakSymbol === null || breakSymbol === void 0 ? void 0 : breakSymbol.angle) ? breakSymbol.angle : isX ? 60 : 15;
+                    return {
+                        range: [ratio - gapRatio / 2, ratio + gapRatio / 2],
+                        breakSymbol: Object.assign(Object.assign({ visible: true }, breakSymbol), { angle: (symbolAngle * Math.PI) / 180 }),
+                        rawRange: range
+                    };
+                });
+            }
+            return attrs;
+        }
+        getNewScaleRange() {
+            var _a, _b;
+            let newRange = super.getNewScaleRange();
+            if (((_a = this._spec.breaks) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this._break) === null || _b === void 0 ? void 0 : _b.scope)) {
+                newRange = combineDomains(this._break.scope).map(val => newRange[0] + (last(newRange) - newRange[0]) * val);
+            }
+            return newRange;
+        }
         computeDomain(data) {
             return this.computeLinearDomain(data);
         }
@@ -66340,10 +66760,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.computeData(params === null || params === void 0 ? void 0 : params.value);
                     eachSeries(this._regions, s => {
                         if (isXAxis(this.getOrient())) {
-                            s.setXAxisHelper(this.axisHelper());
+                            if (shouldUpdateAxis(s.getXAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                                s.setXAxisHelper(this.axisHelper());
+                            }
                         }
                         else {
-                            s.setYAxisHelper(this.axisHelper());
+                            if (shouldUpdateAxis(s.getYAxisHelper(), this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                                s.setYAxisHelper(this.axisHelper());
+                            }
                         }
                     }, {
                         userId: this._seriesUserId,
@@ -66521,9 +66945,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             super.initTooltip();
-            const { dimension, group, mark } = this._tooltipHelper.activeTriggerSet;
+            const { group, mark } = this._tooltipHelper.activeTriggerSet;
             if (this._lineMark) {
-                dimension.add(this._lineMark);
                 group.add(this._lineMark);
             }
             if (this._symbolMark) {
@@ -67763,6 +68186,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             });
         }
+        clearAllStates() {
+            this.getAllRegions().forEach(r => {
+                r.interaction.clearAllEventElement();
+                r.interaction.resetAllInteraction();
+                return;
+            });
+        }
         clearSelected() {
             this.clearState(STATE_VALUE_ENUM.STATE_SELECTED);
         }
@@ -68676,13 +69106,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new AreaSeriesTooltipHelper(this);
-            const { dimension, group, mark } = this._tooltipHelper.activeTriggerSet;
+            const { group, mark } = this._tooltipHelper.activeTriggerSet;
             if (this._areaMark) {
-                dimension.add(this._areaMark);
                 group.add(this._areaMark);
             }
             if (this._lineMark) {
-                dimension.add(this._lineMark);
                 group.add(this._lineMark);
             }
             if (this._symbolMark) {
@@ -69301,7 +69729,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             [STACK_FIELD_END_PERCENT]: maxPercent
                         }
                         : undefined));
-                    rectPaths.push(createRect(Object.assign(Object.assign({}, (this.direction === "horizontal"
+                    const rectAttr = this.direction === "horizontal"
                         ? {
                             x: this._getBarXStart(mockDatum, xScale),
                             x1: this._getBarXEnd(mockDatum, xScale),
@@ -69313,7 +69741,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             y1: this._getBarYEnd(mockDatum, yScale),
                             x: this._getPosition(this.direction, mockDatum),
                             width: this._getBarWidth(this._xAxisHelper)
-                        })), { cornerRadius: this._spec.stackCornerRadius, fill: true })));
+                        };
+                    rectPaths.push(createRect(Object.assign(Object.assign({}, rectAttr), { cornerRadius: isFunction$1(this._spec.stackCornerRadius)
+                            ? this._spec.stackCornerRadius(rectAttr, mockDatum, this._markAttributeContext)
+                            : this._spec.stackCornerRadius, fill: true })));
                 });
                 return rectPaths;
             });
@@ -73401,7 +73832,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new RangeAreaSeriesTooltipHelper(this);
-            this._areaMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._areaMark);
         }
         _isFieldAllValid() {
             const viewStatistics = this.getViewDataStatistics();
@@ -74096,12 +74526,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 customShape: (_a = this._spec.pie) === null || _a === void 0 ? void 0 : _a.customShape,
                 stateSort: (_b = this._spec.pie) === null || _b === void 0 ? void 0 : _b.stateSort
             });
-            this._emptyArcMark = this._createMark({
-                name: 'emptyCircle',
-                type: 'arc'
-            }, {
-                dataView: false
-            });
+            if (this._showEmptyCircle) {
+                this._emptyArcMark = this._createMark({
+                    name: 'emptyCircle',
+                    type: 'arc'
+                }, {
+                    dataView: false
+                });
+            }
         }
         startAngleScale(datum) {
             return field$2(ARC_START_ANGLE)(datum);
@@ -74135,7 +74567,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const emptyPieMark = this._emptyArcMark;
             if (emptyPieMark) {
-                this.setMarkStyle(emptyPieMark, Object.assign(Object.assign({}, initialStyle), { visible: () => this._showEmptyCircle && this.getViewData().latestData.length === 0 }), 'normal', AttributeLevel.Series);
+                this.setMarkStyle(emptyPieMark, Object.assign(Object.assign({}, initialStyle), { visible: () => this.getViewData().latestData.length === 0 }), 'normal', AttributeLevel.Series);
             }
         }
         initInteraction() {
@@ -74643,10 +75075,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.computeData(param === null || param === void 0 ? void 0 : param.value);
                     eachSeries(this._regions, s => {
                         if (this.getOrient() === 'radius') {
-                            s.radiusAxisHelper = this.axisHelper();
+                            if (shouldUpdateAxis(s.radiusAxisHelper, this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                                s.radiusAxisHelper = this.axisHelper();
+                            }
                         }
                         else {
-                            s.angleAxisHelper = this.axisHelper();
+                            if (shouldUpdateAxis(s.angleAxisHelper, this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                                s.angleAxisHelper = this.axisHelper();
+                            }
                         }
                     }, {
                         userId: this._seriesUserId,
@@ -74736,12 +75172,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         updateSeriesScale() {
             eachSeries(this._regions, s => {
                 if (this.getOrient() === 'radius') {
-                    s.setRadiusScale(this._scale);
-                    s.radiusAxisHelper = this.axisHelper();
+                    if (shouldUpdateAxis(s.radiusAxisHelper, this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                        s.setRadiusScale(this._scale);
+                        s.radiusAxisHelper = this.axisHelper();
+                    }
                 }
                 else {
-                    s.setAngleScale(this._scale);
-                    s.angleAxisHelper = this.axisHelper();
+                    if (shouldUpdateAxis(s.angleAxisHelper, this.axisHelper(), isValid$1(this._seriesUserId) || isValid$1(this._seriesIndex))) {
+                        s.setAngleScale(this._scale);
+                        s.angleAxisHelper = this.axisHelper();
+                    }
                 }
             }, {
                 userId: this._seriesUserId,
@@ -75459,13 +75899,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             super.initTooltip();
-            const { dimension, group, mark } = this._tooltipHelper.activeTriggerSet;
+            const { group, mark } = this._tooltipHelper.activeTriggerSet;
             if (this._lineMark) {
-                dimension.add(this._lineMark);
                 group.add(this._lineMark);
             }
             if (this._areaMark) {
-                dimension.add(this._areaMark);
                 group.add(this._areaMark);
             }
             if (this._symbolMark) {
@@ -75551,40 +75989,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     },
                     content: [
                         {
-                            hasShape: true,
-                            shapeType: 'square',
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: (datum) => datum.type,
                             value: (datum) => datum.id
                         },
                         {
-                            hasShape: true,
-                            shapeType: 'square',
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: 'event_time',
                             value: (datum) => TimeUtil.getInstance().timeFormat('%Y%m%d', datum.event_time)
                         },
                         {
-                            hasShape: true,
-                            shapeType: 'square',
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: 'action_type',
                             value: (datum) => datum.action_type
                         },
                         {
-                            shapeType: 'square',
-                            hasShape: true,
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: 'children',
                             value: (datum) => {
                                 return datum.children;
                             }
                         }
-                    ],
+                    ].map(entry => {
+                        return Object.assign({ hasShape: true, shapeType: 'square', shapeColor: this.shapeColorCallback, shapeStroke: this.shapeStrokeCallback }, entry);
+                    }),
                     updateContent: (prev, datum, params) => {
                         const childrenContent = [];
                         const childrenPrev = prev.filter((p) => p.key === 'children');
@@ -75970,38 +76394,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     },
                     content: [
                         {
-                            hasShape: true,
-                            shapeType: 'square',
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: 'time',
                             value: (datum) => TimeUtil.getInstance().timeFormat('%Y%m%d %H:%M', datum.from.split('_')[1])
                         },
                         {
-                            hasShape: true,
-                            shapeType: 'square',
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: 'type',
                             value: (datum) => datum.action_type
                         },
                         {
-                            hasShape: true,
-                            shapeType: 'square',
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: 'from',
                             value: (datum) => datum.from
                         },
                         {
-                            hasShape: true,
-                            shapeType: 'square',
-                            shapeColor: this.shapeColorCallback,
-                            shapeStroke: this.shapeStrokeCallback,
                             key: 'to',
                             value: (datum) => datum.to
                         }
-                    ]
+                    ].map(entry => {
+                        return Object.assign({ hasShape: true, shapeType: 'square', shapeColor: this.shapeColorCallback, shapeStroke: this.shapeStrokeCallback }, entry);
+                    })
                 };
             }
             return null;
@@ -77118,7 +77528,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initMarkStyleOfWord(wordMark, wordSpec, colorHexField, seriesField, isFillingWord) {
-            var _a, _b, _c, _d;
+            var _a, _b;
             if (!wordMark) {
                 return;
             }
@@ -77130,16 +77540,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     : (datum) => datum[this._textField],
                 x: (datum) => datum.x,
                 y: (datum) => datum.y,
-                fontFamily: (datum) => datum.fontFamily,
                 fontSize: (datum) => datum.fontSize,
                 fontStyle: (datum) => datum.fontStyle,
-                fontWeight: (datum) => datum.fontWeight,
                 angle: (datum) => datum.angle,
-                visible: datum => datum.visible
+                visible: (datum) => datum.visible
             }, 'normal', AttributeLevel.Series);
             this.setMarkStyle(wordMark, {
-                fontFamily: (_b = (_a = wordSpec === null || wordSpec === void 0 ? void 0 : wordSpec.style) === null || _a === void 0 ? void 0 : _a.fontFamily) !== null && _b !== void 0 ? _b : this._defaultFontFamily,
-                fill: (_d = (_c = wordSpec === null || wordSpec === void 0 ? void 0 : wordSpec.style) === null || _c === void 0 ? void 0 : _c.fill) !== null && _d !== void 0 ? _d : this.getWordColor
+                fill: (_b = (_a = wordSpec === null || wordSpec === void 0 ? void 0 : wordSpec.style) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : this.getWordColor,
+                fontWeight: (datum) => datum.fontWeight,
+                fontFamily: (datum) => datum.fontFamily
             }, 'normal', AttributeLevel.User_Mark);
         }
         initTooltip() {
@@ -77233,7 +77642,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     ? { field: this._spec.fontWeightField }
                     : this._valueField
                         ? this._calculateFontWeight
-                        : null,
+                        : wordStyleSpec.fontWeight,
                 fontStyle: (_h = this._spec.fontStyleField) !== null && _h !== void 0 ? _h : wordStyleSpec.fontStyle
             };
         }
@@ -77243,9 +77652,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _wordCloudShapeTransformOption() {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            const wordStyleSpec = (_b = (_a = this._spec.word) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
+            const fillingWordStyleSpec = (_b = (_a = this._spec.fillingWord) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
             const wordCloudShapeConfig = (_c = this._wordCloudShapeConfig) !== null && _c !== void 0 ? _c : {};
-            return Object.assign(Object.assign(Object.assign({}, wordCloudShapeConfig), this._getCommonTransformOptions()), { rotateList: this._rotateAngles, fillingRotateList: wordCloudShapeConfig.fillingRotateAngles, fillingFontFamily: (_e = (_d = wordCloudShapeConfig.fillingFontFamilyField) !== null && _d !== void 0 ? _d : wordStyleSpec.fontFamily) !== null && _e !== void 0 ? _e : this._defaultFontFamily, fillingPadding: (_g = (_f = this._spec.fillingWord) === null || _f === void 0 ? void 0 : _f.padding) !== null && _g !== void 0 ? _g : DEFAULT_FONT_PADDING, fillingFontStyle: (_h = wordCloudShapeConfig.fillingFontStyleField) !== null && _h !== void 0 ? _h : wordStyleSpec.fontStyle, fillingFontWeight: (_j = wordCloudShapeConfig.fillingFontWeightField) !== null && _j !== void 0 ? _j : wordStyleSpec.fontWeight });
+            return Object.assign(Object.assign(Object.assign({}, wordCloudShapeConfig), this._getCommonTransformOptions()), { rotateList: this._rotateAngles, fillingRotateList: wordCloudShapeConfig.fillingRotateAngles, fillingFontFamily: (_e = (_d = wordCloudShapeConfig.fillingFontFamilyField) !== null && _d !== void 0 ? _d : fillingWordStyleSpec.fontFamily) !== null && _e !== void 0 ? _e : this._defaultFontFamily, fillingPadding: (_g = (_f = this._spec.fillingWord) === null || _f === void 0 ? void 0 : _f.padding) !== null && _g !== void 0 ? _g : DEFAULT_FONT_PADDING, fillingFontStyle: (_h = wordCloudShapeConfig.fillingFontStyleField) !== null && _h !== void 0 ? _h : fillingWordStyleSpec.fontStyle, fillingFontWeight: (_j = wordCloudShapeConfig.fillingFontWeightField) !== null && _j !== void 0 ? _j : fillingWordStyleSpec.fontWeight });
         }
         getStatisticFields() {
             const fields = [];
@@ -83104,6 +83513,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         targetField: this._spec.targetField,
                         valueField: this._spec.valueField,
                         direction: this.direction,
+                        crossNodeAlign: this._spec.crossNodeAlign,
                         nodeAlign: (_a = this._spec.nodeAlign) !== null && _a !== void 0 ? _a : 'justify',
                         nodeGap: (_b = this._spec.nodeGap) !== null && _b !== void 0 ? _b : 8,
                         nodeWidth: (_c = this._spec.nodeWidth) !== null && _c !== void 0 ? _c : 10,
@@ -84054,6 +84464,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
+    class GaugePointerTooltipHelper extends BaseSeriesTooltipHelper {
+        updateTooltipSpec() {
+            var _a;
+            super.updateTooltipSpec();
+            if (isNil$1((_a = this.spec) === null || _a === void 0 ? void 0 : _a.dimension)) {
+                this.spec = Object.assign(Object.assign({}, this.spec), { dimension: {
+                        visible: false
+                    } });
+            }
+        }
+    }
+
     class GaugePointerSeries extends ProgressLikeSeries {
         constructor() {
             super(...arguments);
@@ -84124,7 +84546,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initTooltip() {
-            super.initTooltip();
+            this._tooltipHelper = new GaugePointerTooltipHelper(this);
             this._pointerMark && this._tooltipHelper.activeTriggerSet.mark.add(this._pointerMark);
         }
         _getPointerAnchor(datum, markSpec) {
@@ -87949,7 +88371,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class SankeyChartSpecTransformer extends BaseChartSpecTransformer {
         _getDefaultSeriesSpec(spec) {
-            const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { categoryField: spec.categoryField, valueField: spec.valueField, sourceField: spec.sourceField, targetField: spec.targetField, direction: spec.direction, nodeAlign: spec.nodeAlign, nodeGap: spec.nodeGap, nodeWidth: spec.nodeWidth, linkWidth: spec.linkWidth, minStepWidth: spec.minStepWidth, minNodeHeight: spec.minNodeHeight, minLinkHeight: spec.minLinkHeight, dropIsolatedNode: spec.dropIsolatedNode, nodeHeight: spec.nodeHeight, linkHeight: spec.linkHeight, equalNodeHeight: spec.equalNodeHeight, linkOverlap: spec.linkOverlap, iterations: spec.iterations, nodeKey: spec.nodeKey, linkSortBy: spec.linkSortBy, nodeSortBy: spec.nodeSortBy, setNodeLayer: spec.setNodeLayer, node: spec.node, link: spec.link, label: spec.label, emphasis: spec.emphasis, inverse: spec.inverse });
+            const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { categoryField: spec.categoryField, valueField: spec.valueField, sourceField: spec.sourceField, targetField: spec.targetField, direction: spec.direction, nodeAlign: spec.nodeAlign, crossNodeAlign: spec.crossNodeAlign, nodeGap: spec.nodeGap, nodeWidth: spec.nodeWidth, linkWidth: spec.linkWidth, minStepWidth: spec.minStepWidth, minNodeHeight: spec.minNodeHeight, minLinkHeight: spec.minLinkHeight, dropIsolatedNode: spec.dropIsolatedNode, nodeHeight: spec.nodeHeight, linkHeight: spec.linkHeight, equalNodeHeight: spec.equalNodeHeight, linkOverlap: spec.linkOverlap, iterations: spec.iterations, nodeKey: spec.nodeKey, linkSortBy: spec.linkSortBy, nodeSortBy: spec.nodeSortBy, setNodeLayer: spec.setNodeLayer, node: spec.node, link: spec.link, label: spec.label, emphasis: spec.emphasis, inverse: spec.inverse });
             const seriesType = this.seriesType;
             if (seriesType) {
                 series.type = seriesType;
@@ -89829,9 +90251,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._cacheActualTooltip.content = (_d = (_c = pattern.updateContent) === null || _c === void 0 ? void 0 : _c.call(pattern, content, data, params)) !== null && _d !== void 0 ? _d : content;
             }
         }
-        shouldHandleTooltip(params, mouseEventData) {
+        shouldHandleTooltip(params, info) {
             var _a, _b;
-            const { tooltipInfo: info } = mouseEventData;
             if (isNil$1(info)) {
                 return false;
             }
@@ -89910,14 +90331,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return targetDimensionInfo;
         }
         getMouseEventData(params) {
-            var _a;
             return {
                 tooltipInfo: this._getDimensionInfo(params),
-                ignore: [...((_a = this.component.getOption().getAllSeries()) !== null && _a !== void 0 ? _a : [])].some(model => {
-                    var _a;
-                    const ignoreTriggers = (_a = model.tooltipHelper) === null || _a === void 0 ? void 0 : _a.ignoreTriggerSet.dimension;
-                    return (params.model && (ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.model))) || (params.mark && (ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.mark)));
-                })
+                ignore: false
             };
         }
     }
@@ -89974,12 +90390,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getMouseEventData(params) {
             var _a, _b;
             let info;
-            let ignore;
             if (((_a = params.model) === null || _a === void 0 ? void 0 : _a.modelType) === 'series') {
                 const series = params.model;
                 const helper = series.tooltipHelper;
                 const activeTriggers = helper === null || helper === void 0 ? void 0 : helper.activeTriggerSet.group;
-                const ignoreTriggers = helper === null || helper === void 0 ? void 0 : helper.ignoreTriggerSet.group;
                 if ((activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.model)) || (activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.mark))) {
                     const patternSpec = this.component.getSpec()[this.activeType];
                     const triggerMark = (patternSpec === null || patternSpec === void 0 ? void 0 : patternSpec.triggerMark) ? array(patternSpec.triggerMark) : [];
@@ -89991,13 +90405,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         };
                     }
                 }
-                else if ((ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.model)) || (ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.mark))) {
-                    ignore = true;
-                }
             }
             return {
                 tooltipInfo: info,
-                ignore
+                ignore: false
             };
         }
         _getGroupDatum(params) {
@@ -90158,9 +90569,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (ignoreMark && isMarkInfo(this._cacheInfo)) {
                         success.mark = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick, true);
                     }
-                    else if (ignoreDimension && isDimensionInfo(this._cacheInfo)) {
-                        success.dimension = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick, true);
-                    }
                     else if (isValid$1(dimensionInfo)) {
                         success.dimension = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
                     }
@@ -90172,10 +90580,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._showTooltipByMouseEvent = (activeType, mouseEventData, params, isClick, useCache) => {
                 var _a;
                 const processor = this.processor[activeType];
-                if (!processor.shouldHandleTooltip(params, {
-                    tooltipInfo: mouseEventData.tooltipInfo[activeType],
-                    ignore: mouseEventData.ignore[activeType]
-                })) {
+                if (!processor.shouldHandleTooltip(params, mouseEventData.tooltipInfo[activeType])) {
                     return false;
                 }
                 if (this._timer) {
@@ -91461,11 +91866,24 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _parseFieldInfo() {
             const { xField, yField } = this._spec;
-            if (xField && xField.visible) {
-                this._xHair = this._parseField(xField, 'xField');
+            this._parseAndSetCrosshair(xField, 'x');
+            this._parseAndSetCrosshair(yField, 'y');
+        }
+        _parseAndSetCrosshair(field, axis) {
+            const hairProp = `_${axis}Hair`;
+            const crosshairProp = `_${axis}Crosshair`;
+            if (field && field.visible) {
+                this[hairProp] = this._parseField(field, `${axis}Field`);
+                if (this[crosshairProp]) {
+                    const { style, type } = this[hairProp];
+                    const styleKey = type === 'rect' ? 'rectStyle' : 'lineStyle';
+                    this[crosshairProp].setAttributes({
+                        [styleKey]: style
+                    });
+                }
             }
-            if (yField && yField.visible) {
-                this._yHair = this._parseField(yField, 'yField');
+            else if (this[crosshairProp] && this[crosshairProp].parent) {
+                this[crosshairProp].parent.removeChild(this[crosshairProp]);
             }
         }
         _updateCrosshair(dim, type, attributes) {
@@ -92015,7 +92433,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         let filter = null;
         if (isContinuous()) {
-            filter = (d) => d[datumField] >= newDomain[0] && d[datumField] <= newDomain[1];
+            filter = (d) => d[datumField] >= newDomain[0] && d[datumField] <= last(newDomain);
         }
         else {
             filter = (d) => {
@@ -92513,15 +92931,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const domain = scale.domain();
             if (isContinuous(scale.type)) {
                 if (this._isReverse()) {
-                    return domain[0] + (domain[1] - domain[0]) * (1 - state);
+                    return domain[0] + (last(domain) - domain[0]) * (1 - state);
                 }
-                return domain[0] + (domain[1] - domain[0]) * state;
+                return domain[0] + (last(domain) - domain[0]) * state;
             }
             let range = scale.range();
             if (this._isReverse()) {
                 range = range.slice().reverse();
             }
-            const posInRange = range[0] + (range[1] - range[0]) * state;
+            const posInRange = range[0] + (last(range) - range[0]) * state;
             return scale.invert(posInRange);
         }
         dataToStatePoint(data) {
@@ -92531,7 +92949,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._isHorizontal && isContinuous(scale.type)) {
                 range = range.slice().reverse();
             }
-            return (pos - range[0]) / (range[1] - range[0]);
+            return (pos - range[0]) / (last(range) - range[0]);
         }
         _modeCheck(statePoint, mode) {
             if (statePoint === 'start') {
@@ -92565,12 +92983,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._end = end;
             this._minSpan = (_a = this._spec.minSpan) !== null && _a !== void 0 ? _a : 0;
             this._maxSpan = (_b = this._spec.maxSpan) !== null && _b !== void 0 ? _b : 1;
-            if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== this._stateScale.domain()[1]) {
+            if (isContinuous(this._stateScale.type) && this._stateScale.domain()[0] !== last(this._stateScale.domain())) {
                 if (this._spec.minValueSpan) {
-                    this._minSpan = this._spec.minValueSpan / (this._stateScale.domain()[1] - this._stateScale.domain()[0]);
+                    this._minSpan = this._spec.minValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
                 }
                 if (this._spec.maxValueSpan) {
-                    this._maxSpan = this._spec.maxValueSpan / (this._stateScale.domain()[1] - this._stateScale.domain()[0]);
+                    this._maxSpan = this._spec.maxValueSpan / (last(this._stateScale.domain()) - this._stateScale.domain()[0]);
                 }
             }
             this._minSpan = Math.max(0, this._minSpan);
@@ -93042,7 +93460,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return false;
             }
             const domain = scale.domain();
-            if (isContinuous(scale.type) && domain[0] === domain[1]) {
+            if (isContinuous(scale.type) && domain[0] === last(domain)) {
                 return false;
             }
             if (isDiscrete(scale.type) && uniqArray(domain).length === 1) {
@@ -96019,6 +96437,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     });
                     if (component) {
                         component.setSkipBeforeLayouted(true);
+                        if (regionLabelInfo[0] && isValid$1(regionLabelInfo[0].labelSpec.zIndex)) {
+                            component.setZIndex(regionLabelInfo[0].labelSpec.zIndex);
+                        }
                         this._marks.addMark(component);
                         this._labelComponentMap.set(component, () => {
                             return this._labelInfoMap.get(region);
@@ -96033,6 +96454,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             support3d: labelInfo.baseMark.getSupport3d()
                         });
                         if (component) {
+                            if (isValid$1(labelInfo.labelSpec.zIndex)) {
+                                component.setZIndex(labelInfo.labelSpec.zIndex);
+                            }
                             component.setSkipBeforeLayouted(true);
                             this._marks.addMark(component);
                             this._labelComponentMap.set(component, () => {
@@ -96993,13 +97417,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     else {
                         const range = axis.getScale().range();
                         const rangeFactor = (_b = axis.getScale().rangeFactor()) !== null && _b !== void 0 ? _b : [0, 1];
-                        const isAxisReverse = range[1] < range[0];
+                        const isAxisReverse = last(range) < range[0];
                         const startPosTemp = boundsStart - region.getLayoutStartPoint()[regionStartAttr];
                         const endPosTemp = boundsEnd - region.getLayoutStartPoint()[regionStartAttr];
                         const endPos = isAxisReverse ? Math.min(startPosTemp, endPosTemp) : Math.max(startPosTemp, endPosTemp);
                         const startPos = isAxisReverse ? Math.max(startPosTemp, endPosTemp) : Math.min(startPosTemp, endPosTemp);
-                        const start = ((startPos - range[0]) / (range[1] - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
-                        const end = ((endPos - range[0]) / (range[1] - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                        const start = ((startPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
+                        const end = ((endPos - range[0]) / (last(range) - range[0])) * (rangeFactor[1] - rangeFactor[0]) + rangeFactor[0];
                         const newStart = this._stateClamp(start - axisRangeExpand);
                         const newEnd = this._stateClamp(end + axisRangeExpand);
                         axis.getScale().rangeFactor([newStart, newEnd]);
@@ -97314,7 +97738,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
                         if (this._isLayout === false) {
                             const component = product.getGroupGraphicItem();
-                            if (component.listenerCount('*') === 0) {
+                            if ((component === null || component === void 0 ? void 0 : component.listenerCount('*')) === 0) {
                                 component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
                             }
                         }