@visactor/vchart 1.12.3 → 1.12.4-alpha.0

package/build/index.js

@@ -24611,6 +24611,18 @@
       Factory$2.registerPlugin("ViewTransform3dPlugin", ViewTransform3dPlugin);
     };
 
+    function combineArray(arr) {
+        const result = [];
+        for (let index = 0; index < arr.length; index++) {
+            const element = arr[index];
+            if (index === 0) {
+                result.push(element[0]);
+            }
+            result.push(element[1]);
+        }
+        return result;
+    }
+
     const warn = (msg, detail) => {
         if (isFunction$1(config.warnHandler)) {
             config.warnHandler.call(null, msg, detail);
@@ -30519,10 +30531,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 +31559,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 +31569,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) => {
@@ -31895,7 +31906,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 +31933,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 +32114,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 +32128,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 +32136,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 +32215,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 {
@@ -33378,7 +33400,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 +33412,7 @@
       [AxisStateValue.hover]: {},
       [AxisStateValue.hoverReverse]: {}
     };
+    const TopZIndex = 999;
 
     const DEFAULT_AXIS_THEME = {
       title: {
@@ -33445,6 +33468,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 +33505,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 +33921,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) {
@@ -34011,15 +34065,14 @@
         axisLength: axisLength
       } = config;
       if (isEmpty(labels) || !isValidNumber$1(limitLength)) return;
-      const DELTA = Math.sin(Math.PI / 10);
       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;
@@ -34049,6 +34102,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 +34234,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 +34304,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 +34528,23 @@
             autoHide: autoHide$1,
             autoHideMethod: autoHideMethod,
             autoHideSeparation: autoHideSeparation,
-            lastVisible: lastVisible
+            lastVisible: lastVisible,
+            autoWrap: autoWrap$1
           } = 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;
@@ -34468,6 +34614,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 +35938,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 +35969,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 +36006,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 +41097,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 +41121,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 +41250,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"));
           }
         }
@@ -60891,7 +61096,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.3";
+    const version = "1.12.4-alpha.0";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -63751,13 +63956,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 +64197,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;
         }
@@ -64617,10 +64822,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]);
+                                }
                             }
                         });
                     }
@@ -65091,7 +65302,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 +65408,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 +65428,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);
             }
@@ -65455,7 +65673,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 +65812,14 @@ 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 (isContinuous(this._scale.type)) {
+                            return rawValue >= domain[0] && rawValue <= last(domain);
+                        }
+                        return domain.includes(rawValue);
+                    })
                 ];
             }
             return [];
@@ -65623,17 +65848,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 +65932,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);
@@ -65794,13 +66077,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 || range[1] <= minDomain)) {
+                            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, combineArray(breakRanges));
+                        domain = combineArray(breakDomains);
+                        this._break = {
+                            domain: breakDomains,
+                            scope: breakScopes,
+                            breakDomains: breakRanges,
+                            breaks
+                        };
+                    }
+                    else {
+                        domain = [minDomain, maxDomain];
+                    }
+                }
+                else {
+                    domain = [minDomain, maxDomain];
+                }
             }
             else {
                 domain[0] = 0;
@@ -65847,7 +66165,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 +66173,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;
@@ -65910,7 +66228,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 +66245,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 = domain[domain.length - 1];
                 }
-                if (softMaxValue >= domain[1]) {
-                    domain[1] = softMaxValue;
+                if (softMaxValue >= domain[domain.length - 1]) {
+                    domain[domain.length - 1] = softMaxValue;
                 }
                 this._softMaxValue = softMaxValue;
             }
@@ -65969,7 +66287,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(domain[domain.length - 1] - domain[0]);
             const n = Math.max(-Math.floor(Math.log10(domainSpan)), 0) + 2;
             const unit = Math.pow(10, n);
             this.niceLabelFormatter = (value) => {
@@ -66006,6 +66324,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 = combineArray(this._break.scope).map(val => newRange[0] + (last(newRange) - newRange[0]) * val);
+            }
+            return newRange;
+        }
         computeDomain(data) {
             return this.computeLinearDomain(data);
         }
@@ -91461,11 +91819,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 +92386,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 +92884,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 +92902,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 +92936,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 +93413,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) {
@@ -96993,13 +97364,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 +97685,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)));
                             }
                         }