@visactor/vrender-components 0.20.2 → 0.20.3

package/dist/index.es.js

@@ -4550,7 +4550,7 @@ class Graphic extends Node {
     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);
@@ -9293,7 +9293,6 @@ class Circle extends Graphic {
     return getTheme(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,
@@ -9486,7 +9485,6 @@ class Text extends Graphic {
     return getTheme(this).text;
   }
   updateAABBBounds(attribute, textTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, textTheme, aabbBounds, this)) return aabbBounds;
     const {
       text = textTheme.text
     } = this.attribute;
@@ -10595,7 +10593,6 @@ let Symbol$1 = class Symbol extends Graphic {
     return getTheme(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,
@@ -10673,7 +10670,6 @@ let Line$1 = class Line extends Graphic {
     return getTheme(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
@@ -10754,7 +10750,6 @@ class Rect extends Graphic {
     return getTheme(this).rect;
   }
   updateAABBBounds(attribute, rectTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, rectTheme, aabbBounds, this)) return aabbBounds;
     if (!this.updatePathProxyAABBBounds(aabbBounds)) {
       let {
         width: width,
@@ -11079,7 +11074,6 @@ class Image extends Graphic {
     return getTheme(this).image;
   }
   updateAABBBounds(attribute, imageTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, imageTheme, aabbBounds, this)) return aabbBounds;
     if (!this.updatePathProxyAABBBounds(aabbBounds)) {
       const {
         width = imageTheme.width,
@@ -11353,7 +11347,6 @@ class RichText extends Graphic {
     return getTheme(this).richtext;
   }
   updateAABBBounds(attribute, richtextTheme, aabbBounds) {
-    if (!application.graphicService.validCheck(attribute, richtextTheme, aabbBounds, this)) return aabbBounds;
     const {
       width = richtextTheme.width,
       height = richtextTheme.height,
@@ -11570,7 +11563,6 @@ class Path extends Graphic {
     return getTheme(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());
@@ -11636,7 +11628,6 @@ class Area extends Graphic {
     return getTheme(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
@@ -11837,7 +11828,6 @@ class Arc extends Graphic {
     return getTheme(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,
@@ -11945,7 +11935,6 @@ class Polygon extends Graphic {
     return getTheme(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
@@ -14774,7 +14763,7 @@ class Tag extends AbstractComponent {
             textShape = group.createOrUpdateChild('tag-text', richTextAttrs, 'richtext');
             const { visible: bgVisible } = panel, backgroundStyle = __rest(panel, ["visible"]);
             if (visible && isBoolean(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() }), 'rect');
+                const bgRect = this.createOrUpdateChild('tag-panel', Object.assign(Object.assign({}, backgroundStyle), { visible: bgVisible && !!text, 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(state === null || state === void 0 ? void 0 : state.panel)) {
                     bgRect.states = state.panel;
                 }
@@ -15876,16 +15865,18 @@ function updateAnimation(prev, next, animationConfig) {
     if (!isArray(animationConfig)) {
         const { duration, easing, increaseEffect = true } = animationConfig;
         prev.animate().to(next.attribute, duration, easing);
-        increaseEffect && playIncreaseCount(prev, next, duration, easing);
+        if (increaseEffect && prev.type === 'text' && next.type === 'text') {
+            playIncreaseCount(prev, next, duration, easing);
+        }
         return;
     }
-    animationConfig.forEach((cfg, i) => {
+    animationConfig.forEach(cfg => {
         const { duration, easing, increaseEffect = true, channel } = cfg;
-        const { from, to } = update(prev, next, channel, cfg.options);
+        const { to } = update(prev, next, channel, cfg.options);
         if (!isEmpty(to)) {
             prev.animate().to(to, duration, easing);
         }
-        if ('text' in from && 'text' in to && increaseEffect) {
+        if (increaseEffect && prev.type === 'text' && next.type === 'text') {
             playIncreaseCount(prev, next, duration, easing);
         }
     });
@@ -16112,6 +16103,15 @@ function getIntersection(dx, dy, cx, cy, w, h) {
     }
     return { x: cx + (dx * h) / Math.abs(dy), y: cy + (dy > 0 ? h : -h) };
 }
+function getAlignOffset(align) {
+    if (align === 'left') {
+        return 0;
+    }
+    else if (align === 'right') {
+        return 1;
+    }
+    return 0.5;
+}
 
 function loadLabelComponent() {
     registerGroup();
@@ -16297,7 +16297,7 @@ class LabelBase extends AbstractComponent {
         return createTextGraphicByType(textAttrs, 'textType');
     }
     _prepare() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         const currentBaseMarks = [];
         let baseMarks;
         if (isFunction(this.attribute.getBaseMarks)) {
@@ -16361,13 +16361,23 @@ class LabelBase extends AbstractComponent {
             }
         }
         if (this.attribute.animation !== false) {
-            const animation = isObject(this.attribute.animation) ? this.attribute.animation : {};
+            const { animation, animationEnter, animationExit, animationUpdate } = this.attribute;
+            const animationCfg = isObject(animation) ? animation : {};
             this._animationConfig = {
-                enter: merge({}, DefaultLabelAnimation, animation, (_c = this.attribute.animationEnter) !== null && _c !== void 0 ? _c : {}),
-                exit: merge({}, DefaultLabelAnimation, animation, (_d = this.attribute.animationExit) !== null && _d !== void 0 ? _d : {}),
-                update: isArray(this.attribute.animationUpdate)
-                    ? this.attribute.animationUpdate
-                    : merge({}, DefaultLabelAnimation, animation, (_e = this.attribute.animationUpdate) !== null && _e !== void 0 ? _e : {})
+                enter: animationEnter !== false ? merge({}, DefaultLabelAnimation, animationCfg, animationEnter !== null && animationEnter !== void 0 ? animationEnter : {}) : false,
+                exit: animationExit !== false ? merge({}, DefaultLabelAnimation, animationCfg, animationExit !== null && animationExit !== void 0 ? animationExit : {}) : false,
+                update: animationUpdate !== false
+                    ? isArray(animationUpdate)
+                        ? animationUpdate
+                        : merge({}, DefaultLabelAnimation, animationCfg, animationUpdate !== null && animationUpdate !== void 0 ? animationUpdate : {})
+                    : false
+            };
+        }
+        else {
+            this._animationConfig = {
+                enter: false,
+                exit: false,
+                update: false
             };
         }
     }
@@ -16535,15 +16545,6 @@ class LabelBase extends AbstractComponent {
         return { x1: x, x2: x, y1: y, y2: y };
     }
     _renderLabels(labels) {
-        const disableAnimation = this._enableAnimation === false || this.attribute.animation === false;
-        if (disableAnimation) {
-            this._renderWithOutAnimation(labels);
-        }
-        else {
-            this._renderWithAnimation(labels);
-        }
-    }
-    _renderWithAnimation(labels) {
         var _a;
         const { syncState } = this.attribute;
         const currentTextMap = new Map();
@@ -16555,8 +16556,7 @@ class LabelBase extends AbstractComponent {
             labels.forEach((text, index) => {
                 var _a;
                 const relatedGraphic = this.getRelatedGraphic(text.attribute);
-                const textId = text.attribute.id;
-                const textKey = this._isCollectionBase ? textId : relatedGraphic;
+                const textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
                 const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(textKey)) ? 'update' : 'enter';
                 let labelLine;
                 if (showLabelLine) {
@@ -16568,90 +16568,88 @@ class LabelBase extends AbstractComponent {
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
-                    if (relatedGraphic) {
-                        const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
-                        this.add(text);
-                        if (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);
-                            });
-                    }
+                    this._addLabel({ text, labelLine }, texts, labelLines, index);
                 }
                 else if (state === 'update') {
                     const prevLabel = prevTextMap.get(textKey);
                     prevTextMap.delete(textKey);
                     currentTextMap.set(textKey, prevLabel);
-                    const prevText = prevLabel.text;
-                    const { duration, easing } = this._animationConfig.update;
-                    updateAnimation(prevText, text, this._animationConfig.update);
-                    if (prevLabel.labelLine && labelLine) {
-                        prevLabel.labelLine.animate().to(labelLine.attribute, duration, easing);
-                    }
-                }
-            });
-        prevTextMap.forEach(label => {
-            var _a;
-            (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd(() => {
-                this.removeChild(label.text);
-                if (label.labelLine) {
-                    this.removeChild(label.labelLine);
+                    this._updateLabel(prevLabel, { text, labelLine });
                 }
             });
-        });
+        this._removeLabel(prevTextMap);
         this._graphicToText = currentTextMap;
     }
-    _renderWithOutAnimation(labels) {
-        var _a;
-        const { syncState } = this.attribute;
-        const currentTextMap = new Map();
-        const prevTextMap = this._graphicToText || new Map();
-        const { visible: showLabelLine } = (_a = this.attribute.line) !== null && _a !== void 0 ? _a : {};
-        labels &&
-            labels.forEach(text => {
-                var _a;
-                const relatedGraphic = this.getRelatedGraphic(text.attribute);
-                const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
-                const textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
-                let labelLine;
-                if (showLabelLine) {
-                    labelLine = this._createLabelLine(text, relatedGraphic);
-                }
-                if (syncState) {
-                    this.updateStatesOfLabels([labelLine ? { text, labelLine } : { text }], (_a = relatedGraphic.currentStates) !== null && _a !== void 0 ? _a : []);
-                }
-                if (state === 'enter') {
-                    currentTextMap.set(textKey, labelLine ? { text, labelLine } : { text });
+    _addLabel(label, texts, labelLines, index) {
+        const { text, labelLine } = label;
+        const relatedGraphic = this.getRelatedGraphic(text.attribute);
+        this._syncStateWithRelatedGraphic(relatedGraphic);
+        if (this._enableAnimation !== false && this._animationConfig.enter !== false) {
+            if (relatedGraphic) {
+                const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
+                if (text) {
                     this.add(text);
-                    if (labelLine) {
-                        this.add(labelLine);
-                    }
-                    this._syncStateWithRelatedGraphic(relatedGraphic);
                 }
-                else if (state === 'update') {
-                    const prevLabel = prevTextMap.get(textKey);
-                    prevTextMap.delete(textKey);
-                    currentTextMap.set(textKey, prevLabel);
-                    prevLabel.text.setAttributes(text.attribute);
-                    if (prevLabel.labelLine && labelLine) {
-                        prevLabel.labelLine.setAttributes(labelLine.attribute);
-                    }
+                if (labelLine) {
+                    labelLines.push(labelLine);
+                    this.add(labelLine);
                 }
-            });
-        prevTextMap.forEach(label => {
+                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 (text) {
+                this.add(text);
+            }
+            if (labelLine) {
+                this.add(labelLine);
+            }
+        }
+    }
+    _updateLabel(prevLabel, currentLabel) {
+        const { text: prevText, labelLine: prevLabelLine } = prevLabel;
+        const { text: curText, labelLine: curLabelLine } = currentLabel;
+        if (this._enableAnimation !== false && this._animationConfig.update !== false) {
+            const { duration, easing } = this._animationConfig.update;
+            updateAnimation(prevText, curText, this._animationConfig.update);
+            if (prevLabelLine && curLabelLine) {
+                prevLabel.labelLine.animate().to(curLabelLine.attribute, duration, easing);
+            }
+        }
+        else {
+            prevLabel.text.setAttributes(curText.attribute);
+            if (prevLabelLine && curLabelLine) {
+                prevLabel.labelLine.setAttributes(curLabelLine.attribute);
+            }
+        }
+    }
+    _removeLabel(textMap) {
+        const removeLabelAndLine = (label) => {
             this.removeChild(label.text);
             if (label.labelLine) {
                 this.removeChild(label.labelLine);
             }
-        });
-        this._graphicToText = currentTextMap;
+        };
+        if (this._enableAnimation !== false && this._animationConfig.exit !== false) {
+            const { duration, easing } = this._animationConfig.exit;
+            textMap.forEach(label => {
+                var _a;
+                (_a = label.text) === null || _a === void 0 ? void 0 : _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 => {
@@ -16666,7 +16664,7 @@ class LabelBase extends AbstractComponent {
         });
     }
     _syncStateWithRelatedGraphic(relatedGraphic) {
-        if (this.attribute.syncState) {
+        if (this.attribute.syncState && relatedGraphic) {
             relatedGraphic.on('afterAttributeUpdate', this._handleRelatedGraphicSetState);
         }
     }
@@ -16989,6 +16987,8 @@ class ArcLabel extends LabelBase {
         this._ellipsisWidth = 0;
         this._arcLeft = new Map();
         this._arcRight = new Map();
+        this._line2MinLength = 0;
+        this._alignOffset = 0;
     }
     _overlapping(labels) {
         return labels;
@@ -17000,6 +17000,7 @@ class ArcLabel extends LabelBase {
         return { x: 0, y: 0 };
     }
     _layout(texts) {
+        var _a;
         if (!texts || !texts.length) {
             return;
         }
@@ -17013,7 +17014,15 @@ class ArcLabel extends LabelBase {
             ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
         }
         const data = labels.map(label => label.attribute);
-        const arcs = this.layoutArcLabels(this.attribute.position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
+        const currentMarks = Array.from(this._idToGraphic.values());
+        this._line2MinLength = isFunction(this.attribute.line.line2MinLength)
+            ? this.attribute.line.line2MinLength(texts, currentMarks, this.attribute)
+            : this.attribute.line.line2MinLength;
+        this._alignOffset =
+            (_a = (isFunction(this.attribute.layout.alignOffset)
+                ? this.attribute.layout.alignOffset(texts, currentMarks, this.attribute)
+                : this.attribute.layout.alignOffset)) !== null && _a !== void 0 ? _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];
             const basedArc = arcs.find(arc => { var _a; return ((_a = arc.refDatum) === null || _a === void 0 ? void 0 : _a.id) === textData.id; });
@@ -17160,13 +17169,12 @@ class ArcLabel extends LabelBase {
         var _a, _b, _c;
         const center = { x: (_a = currentMarks[0].attribute.x) !== null && _a !== void 0 ? _a : 0, y: (_b = currentMarks[0].attribute.y) !== null && _b !== void 0 ? _b : 0 };
         const height = center.y * 2;
-        const line2MinLength = attribute.line.line2MinLength;
         const labelLayout = attribute.layout;
         const spaceWidth = attribute.spaceWidth;
         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
             };
         });
@@ -17179,11 +17187,11 @@ class ArcLabel extends LabelBase {
                 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);
@@ -17212,22 +17220,27 @@ class ArcLabel extends LabelBase {
         arcs.forEach(arc => {
             var _a, _b;
             if (arc.labelVisible &&
-                (isLess(arc.pointB.x, line2MinLength + spaceWidth) ||
-                    isGreater(arc.pointB.x, width - line2MinLength - spaceWidth))) {
+                (isLess(arc.pointB.x, this._line2MinLength + spaceWidth) ||
+                    isGreater(arc.pointB.x, width - this._line2MinLength - spaceWidth))) {
                 arc.labelVisible = false;
             }
             arc.angle = (_b = (_a = attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : 0;
             if (attribute.offsetAngle) {
                 arc.angle += attribute.offsetAngle;
             }
-            arc.labelLine = Object.assign({}, attribute.line);
+            arc.labelLine = Object.assign(Object.assign({}, attribute.line), { visible: arc.labelVisible });
         });
         return arcs;
     }
     _computeX(arc, attribute, currentMarks) {
         var _a;
         const center = arc.circleCenter;
-        const plotLayout = { width: center.x * 2, height: center.y * 2 };
+        const plotLayout = {
+            x1: 0,
+            x2: this.attribute.width,
+            y1: 0,
+            y2: this.attribute.height
+        };
         let maxRadius = 0;
         currentMarks.forEach((currentMark) => {
             if (currentMark.attribute.outerRadius > maxRadius) {
@@ -17236,7 +17249,6 @@ class ArcLabel extends LabelBase {
         });
         const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
         const line1MinLength = attribute.line.line1MinLength;
-        const line2MinLength = attribute.line.line2MinLength;
         const labelLayoutAlign = (_a = attribute.layout) === null || _a === void 0 ? void 0 : _a.align;
         const spaceWidth = attribute.spaceWidth;
         const { labelPosition, quadrant, pointB } = arc;
@@ -17248,11 +17260,10 @@ class ArcLabel extends LabelBase {
         const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
         const flag = isQuadrantLeft(quadrant) ? -1 : 1;
         let cx = 0;
-        const restWidth = flag > 0 ? plotLayout.width - pointB.x : pointB.x;
-        let limit = restWidth - line2MinLength - spaceWidth;
+        let limit = (flag > 0 ? plotLayout.x2 - pointB.x : pointB.x - plotLayout.x1) - this._line2MinLength - spaceWidth;
         if (labelLayoutAlign === 'labelLine') {
-            cx = (radius + line1MinLength + line2MinLength) * flag + center.x;
-            limit = (flag > 0 ? plotLayout.width - cx : cx) - spaceWidth;
+            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;
@@ -17261,24 +17272,25 @@ class ArcLabel extends LabelBase {
             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;
             case 'arc':
             default:
-                cx = pointB.x + flag * line2MinLength;
+                cx = pointB.x + flag * this._line2MinLength;
                 break;
         }
         labelWidth = Math.max(this._ellipsisWidth, labelWidth);
         arc.labelLimit = labelWidth;
         arc.pointC = { x: cx, y: labelPosition.y };
-        const targetCenterOffset = 0.5 * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
+        const align = this._computeAlign(arc, attribute);
+        const targetCenterOffset = getAlignOffset(align) * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
         if (labelLayoutAlign === 'edge') {
-            const alignOffset = 0;
-            labelPosition.x = (flag > 0 ? plotLayout.width + alignOffset : alignOffset) - flag * targetCenterOffset;
+            labelPosition.x =
+                (flag > 0 ? plotLayout.x2 : plotLayout.x1) - flag * targetCenterOffset + flag * this._alignOffset;
+            arc.pointC.x += flag * this._alignOffset;
         }
         else {
-            const alignOffset = 0;
-            labelPosition.x = cx + alignOffset + flag * (spaceWidth + targetCenterOffset);
+            labelPosition.x = cx + flag * (this._alignOffset + spaceWidth + targetCenterOffset);
         }
     }
     _computeAlign(arc, attribute) {
@@ -17736,6 +17748,10 @@ class DataLabel extends AbstractComponent {
             if (labelComponent) {
                 const { baseMarkGroupName, type } = dataLabel;
                 const id = (_a = dataLabel.id) !== null && _a !== void 0 ? _a : `${baseMarkGroupName}-${type}-${i}`;
+                if (dataLabel.type === 'arc') {
+                    dataLabel.width = size.width;
+                    dataLabel.height = size.height;
+                }
                 let component = this._componentMap.get(id);
                 if (component) {
                     component.setBitmapTool(tool);
@@ -18090,6 +18106,8 @@ var AXIS_ELEMENT_NAME;
     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) {
@@ -18104,6 +18122,7 @@ const DEFAULT_STATES$1 = {
     [AxisStateValue.hover]: {},
     [AxisStateValue.hoverReverse]: {}
 };
+const TopZIndex = 999;
 
 const DEFAULT_AXIS_THEME = {
     title: {
@@ -18159,6 +18178,12 @@ const DEFAULT_AXIS_THEME = {
         }
     }
 };
+const DEFAULT_AXIS_BREAK_SYMBOL_STYLE = {
+    size: 8,
+    stroke: '#000',
+    lineWidth: 1,
+    zIndex: 1
+};
 
 const clampRadian = (angle = 0) => {
     if (angle < 0) {
@@ -18216,6 +18241,13 @@ function getCircleLabelPosition(tickPosition, tickVector, text, style) {
     const y = baseY - dy;
     return { x, y };
 }
+function getAxisBreakSymbolAttrs(props = {}) {
+    var _a, _b;
+    const { style = {}, angle = Math.PI * 0.5 } = props;
+    const symbolStyle = merge({}, DEFAULT_AXIS_BREAK_SYMBOL_STYLE, style);
+    const symbolSize = (_a = symbolStyle.size) !== null && _a !== void 0 ? _a : DEFAULT_AXIS_BREAK_SYMBOL_STYLE.size;
+    return Object.assign(Object.assign({}, symbolStyle), { symbolType: (_b = symbolStyle.symbolType) !== null && _b !== void 0 ? _b : `M ${-symbolSize / 2} ${symbolSize * Math.sin(angle)} L ${symbolSize / 2} ${-symbolSize * Math.sin(angle)}`, symbolSize });
+}
 function getElMap(g) {
     const elMap = {};
     traverseGroup(g, (el) => {
@@ -18778,6 +18810,17 @@ function itemIntersect(item1, item2) {
             ? isRotateAABBIntersect(item1.rotatedBounds, item2.rotatedBounds, true)
             : true));
 }
+const DELTA_ANGLE = Math.sin(Math.PI / 10);
+function isAngleVertical(angle) {
+    const hasAngle = !isNil(angle) && angle !== 0;
+    const cos = hasAngle ? Math.cos(angle) : 1;
+    return hasAngle && Math.abs(cos) <= DELTA_ANGLE;
+}
+function isAngleHorizontal(angle) {
+    const hasAngle = !isNil(angle) && angle !== 0;
+    const sin = hasAngle ? Math.sin(angle) : 0;
+    return !hasAngle || Math.abs(sin) <= DELTA_ANGLE;
+}
 
 const methods$1 = {
     parity: function (items) {
@@ -18968,20 +19011,35 @@ function getYAxisLabelAlign(orient, angle = 0) {
     };
 }
 
+function normalizeOverflowLimitLength(overflowLimitLength) {
+    if (isValidNumber(overflowLimitLength)) {
+        return {
+            left: overflowLimitLength,
+            right: overflowLimitLength
+        };
+    }
+    else if (isObject(overflowLimitLength)) {
+        return {
+            left: overflowLimitLength.left || 0,
+            right: overflowLimitLength.right || 0
+        };
+    }
+    return { left: 0, right: 0 };
+}
 function autoLimit(labels, config) {
     const { limitLength, verticalLimitLength, ellipsis = '...', orient, axisLength } = config;
     if (isEmpty(labels) || !isValidNumber(limitLength)) {
         return;
     }
-    const DELTA = Math.sin(Math.PI / 10);
+    const overflowLimitLength = normalizeOverflowLimitLength(config.overflowLimitLength);
     labels.forEach(label => {
         var _a;
         const angle = label.attribute.angle;
         const hasAngle = !isNil(angle);
         const cos = hasAngle ? Math.cos(angle) : 1;
         const sin = hasAngle ? Math.sin(angle) : 0;
-        const isHorizontal = !hasAngle || Math.abs(sin) <= DELTA;
-        const isVertical = hasAngle && Math.abs(cos) <= DELTA;
+        const isHorizontal = isAngleHorizontal(angle);
+        const isVertical = isAngleVertical(angle);
         const isX = orient === 'top' || orient === 'bottom';
         if (isX) {
             if (isVertical && Math.floor(label.AABBBounds.height()) <= limitLength) {
@@ -19010,14 +19068,17 @@ function autoLimit(labels, config) {
             if (isX) {
                 const { x1, x2 } = label.AABBBounds;
                 const tan = sin / cos;
+                const verticalSizeLimit = Math.abs(limitLength / sin);
                 if (tan > 0 && x1 <= axisLength && limitLength / tan + x1 > axisLength) {
-                    limitLabelLength = (axisLength - x1) / Math.abs(cos);
+                    const lengthLimit = (axisLength - x1) / Math.abs(cos) + overflowLimitLength.right;
+                    limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
                 }
                 else if (tan < 0 && x2 >= 0 && limitLength / tan + x2 < 0) {
-                    limitLabelLength = x2 / Math.abs(cos);
+                    const lengthLimit = x2 / Math.abs(cos) + overflowLimitLength.left;
+                    limitLabelLength = Math.min(lengthLimit, verticalSizeLimit);
                 }
                 else {
-                    limitLabelLength = Math.abs(limitLength / sin);
+                    limitLabelLength = verticalSizeLimit;
                 }
             }
             else {
@@ -19042,6 +19103,65 @@ function autoLimit(labels, config) {
     });
 }
 
+function autoWrap(labels, config) {
+    const { limitLength, axisLength, ellipsis = '...', orient } = config;
+    if (isEmpty(labels) || !isValidNumber(limitLength)) {
+        return;
+    }
+    const verticalLimitLength = axisLength / labels.length;
+    labels.forEach(label => {
+        var _a;
+        const angle = label.attribute.angle;
+        const isHorizontal = isAngleHorizontal(angle);
+        const isVertical = isAngleVertical(angle);
+        const isX = orient === 'top' || orient === 'bottom';
+        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;
+        let heightLimit = null;
+        if (isX) {
+            if (isVertical) {
+                limitLabelLength = limitLength;
+                heightLimit = verticalLimitLength;
+            }
+            else {
+                limitLabelLength = verticalLimitLength;
+                heightLimit = limitLength;
+            }
+        }
+        else {
+            if (isVertical) {
+                limitLabelLength = verticalLimitLength;
+                heightLimit = limitLength;
+            }
+            else {
+                limitLabelLength = limitLength;
+                heightLimit = verticalLimitLength;
+            }
+        }
+        label.setAttributes({
+            maxLineWidth: limitLabelLength,
+            ellipsis: (_a = label.attribute.ellipsis) !== null && _a !== void 0 ? _a : ellipsis,
+            whiteSpace: 'normal',
+            heightLimit
+        });
+    });
+}
+
 function alignAxisLabels(labels, start, containerSize, orient, align) {
     if (orient === 'left' || orient === 'right') {
         if (align === 'left') {
@@ -19152,7 +19272,44 @@ class LineAxis extends AxisBase {
     }
     _renderInner(container) {
         var _a;
+        this._breaks = null;
+        if (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];
+                const { range, breakSymbol, rawRange } = aBreak;
+                transformedBreaks.push({
+                    startPoint: this.getTickCoord(range[0]),
+                    endPoint: this.getTickCoord(range[1]),
+                    range,
+                    breakSymbol,
+                    rawRange
+                });
+            }
+            this._breaks = transformedBreaks;
+        }
         super._renderInner(container);
+        if (this._breaks && this._breaks.length) {
+            this._breaks.forEach((b, index) => {
+                const { startPoint, endPoint, breakSymbol, rawRange } = b;
+                if ((breakSymbol === null || breakSymbol === void 0 ? void 0 : breakSymbol.visible) !== false) {
+                    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);
+                    const 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 } = this.attribute;
         if (panel && panel.visible) {
             const axisContainer = this.axisContainer;
@@ -19166,9 +19323,24 @@ class LineAxis extends AxisBase {
     }
     renderLine(container) {
         const { start, end, line } = this.attribute;
-        const _a = line, { startSymbol, endSymbol, style, breakRange, breakShape, breakShapeStyle, state } = _a, restLineAttrs = __rest(_a, ["startSymbol", "endSymbol", "style", "breakRange", "breakShape", "breakShapeStyle", "state"]);
-        const lineAttrs = Object.assign({ points: [start, end], startSymbol,
+        const _a = line, { startSymbol, endSymbol, style, state } = _a, restLineAttrs = __rest(_a, ["startSymbol", "endSymbol", "style", "state"]);
+        const lineAttrs = Object.assign({ startSymbol,
             endSymbol, lineStyle: style }, restLineAttrs);
+        if (this._breaks && this._breaks.length) {
+            const linePoints = [];
+            let lastStartPoint = start;
+            this._breaks.forEach(b => {
+                const { startPoint, endPoint } = b;
+                linePoints.push([lastStartPoint, startPoint]);
+                lastStartPoint = endPoint;
+            });
+            linePoints.push([lastStartPoint, end]);
+            lineAttrs.points = linePoints;
+            lineAttrs.multiSegment = true;
+        }
+        else {
+            lineAttrs.points = [start, end];
+        }
         if (!isEmpty(state)) {
             lineAttrs.state = {
                 line: merge({}, DEFAULT_STATES$1, state),
@@ -19441,7 +19613,7 @@ class LineAxis extends AxisBase {
         }
         const { verticalLimitSize, label, orient } = this.attribute;
         const limitLength = this._getAxisLabelLimitLength(verticalLimitSize, layerCount);
-        const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, lastVisible } = label;
+        const { layoutFunc, autoRotate: autoRotate$1, autoRotateAngle, autoLimit: autoLimit$1, limitEllipsis, autoHide: autoHide$1, autoHideMethod, autoHideSeparation, lastVisible, autoWrap: autoWrap$1, overflowLimitLength } = label;
         if (isFunction(layoutFunc)) {
             layoutFunc(labelShapes, labelData, layer, this);
         }
@@ -19452,7 +19624,14 @@ class LineAxis extends AxisBase {
                     orient
                 });
             }
-            if (autoLimit$1 && isValidNumber(limitLength) && limitLength > 0) {
+            else if (autoWrap$1) {
+                const isVertical = orient === 'left' || orient === 'right';
+                const axisLength = isVertical
+                    ? Math.abs(this.attribute.start.y - this.attribute.end.y)
+                    : Math.abs(this.attribute.start.x - this.attribute.end.x);
+                autoWrap(labelShapes, { orient, limitLength, axisLength, ellipsis: limitEllipsis });
+            }
+            if (!autoWrap$1 && autoLimit$1 && isValidNumber(limitLength) && limitLength > 0) {
                 const isVertical = orient === 'left' || orient === 'right';
                 const axisLength = isVertical
                     ? Math.abs(this.attribute.start.y - this.attribute.end.y)
@@ -19467,7 +19646,8 @@ class LineAxis extends AxisBase {
                     verticalLimitLength,
                     ellipsis: limitEllipsis,
                     orient,
-                    axisLength
+                    axisLength,
+                    overflowLimitLength
                 });
             }
             if (autoHide$1) {
@@ -19554,6 +19734,10 @@ class LineAxis extends AxisBase {
         }
         return limitLength;
     }
+    release() {
+        super.release();
+        this._breaks = null;
+    }
 }
 LineAxis.defaultAttributes = DEFAULT_AXIS_THEME;
 mixin(LineAxis, LineAxisMixin);
@@ -19923,8 +20107,32 @@ const isAxisHorizontal = (axisOrientType) => {
     return ['bottom', 'top', 'z'].includes(axisOrientType);
 };
 
+function getScaleTicks(op, scale, count, getTicks) {
+    let scaleTicks;
+    const { breakData } = op;
+    if (breakData && breakData()) {
+        const { breakDomains } = breakData();
+        const domain = scale.domain();
+        scaleTicks = [];
+        for (let i = 0; i < domain.length - 1; i++) {
+            const subDomain = [domain[i], domain[i + 1]];
+            const ticks = getTicks(count, subDomain);
+            ticks.forEach(tick => {
+                if (!breakDomains.some(breakDomain => tick >= breakDomain[0] && tick <= breakDomain[1])) {
+                    scaleTicks.push(tick);
+                }
+            });
+        }
+        scale.domain(domain);
+    }
+    else {
+        scaleTicks = getTicks(count);
+    }
+    return scaleTicks;
+}
 const DEFAULT_CONTINUOUS_TICK_COUNT = 5;
 const continuousTicks = (scale, op) => {
+    var _a, _b;
     if (!isContinuous(scale.type)) {
         return convertDomainToTickData(scale.domain());
     }
@@ -19933,22 +20141,37 @@ const continuousTicks = (scale, op) => {
     if (rangeSize < 2) {
         return convertDomainToTickData([scale.domain()[0]]);
     }
-    const { tickCount, forceTickCount, tickStep, noDecimals = false, labelStyle } = op;
+    const { tickCount, forceTickCount, tickStep, noDecimals = false, labelStyle, breakData } = op;
     let scaleTicks;
     if (isValid(tickStep)) {
         scaleTicks = scale.stepTicks(tickStep);
     }
     else if (isValid(forceTickCount)) {
-        scaleTicks = scale.forceTicks(forceTickCount);
+        scaleTicks = getScaleTicks(op, scale, forceTickCount, (count, subDomain) => {
+            if (subDomain && subDomain.length) {
+                return scale.domain(subDomain, true).forceTicks(count);
+            }
+            return scale.forceTicks(count);
+        });
     }
     else if (op.tickMode === 'd3') {
-        const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
-        scaleTicks = scale.d3Ticks(count !== null && count !== void 0 ? count : DEFAULT_CONTINUOUS_TICK_COUNT, { noDecimals });
+        const count = (_a = (isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount)) !== null && _a !== void 0 ? _a : DEFAULT_CONTINUOUS_TICK_COUNT;
+        scaleTicks = getScaleTicks(op, scale, count, (count, subDomain) => {
+            if (subDomain && subDomain.length) {
+                return scale.domain(subDomain, true).d3Ticks(count, { noDecimals });
+            }
+            return scale.d3Ticks(count, { noDecimals });
+        });
     }
     else {
-        const count = isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount;
+        const count = (_b = (isFunction(tickCount) ? tickCount({ axisLength: rangeSize, labelStyle }) : tickCount)) !== null && _b !== void 0 ? _b : DEFAULT_CONTINUOUS_TICK_COUNT;
         const customTicks = isFunction(op.tickMode) ? op.tickMode : undefined;
-        scaleTicks = scale.ticks(count !== null && count !== void 0 ? count : DEFAULT_CONTINUOUS_TICK_COUNT, { noDecimals, customTicks });
+        scaleTicks = getScaleTicks(op, scale, count, (count, subDomain) => {
+            if (subDomain && subDomain.length) {
+                return scale.domain(subDomain, true).ticks(count, { noDecimals, customTicks });
+            }
+            return scale.ticks(count, { noDecimals, customTicks });
+        });
     }
     if (op.sampling) {
         if (op.coordinateType === 'cartesian' || (op.coordinateType === 'polar' && op.axisOrientType === 'radius')) {
@@ -19957,8 +20180,9 @@ const continuousTicks = (scale, op) => {
                 AABBBounds: bounds,
                 value: scaleTicks[i]
             }));
+            const samplingMethod = breakData && breakData() ? methods.greedy : methods.parity;
             while (items.length >= 3 && hasOverlap(items, labelGap)) {
-                items = methods.parity(items);
+                items = samplingMethod(items, labelGap);
             }
             const ticks = items.map(item => item.value);
             if (ticks.length < 3 && labelFlush) {
@@ -25945,46 +26169,58 @@ class Title extends AbstractComponent {
         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, text, subtextType, textStyle = {}, subtext, subtextStyle = {}, width, height, minWidth, maxWidth, minHeight, maxHeight, align, verticalAlign, padding = 0 } = this.attribute;
         const parsedPadding = normalizePadding(padding);
         const group = this.createOrUpdateChild('title-container', { x: parsedPadding[3], y: parsedPadding[0], zIndex: 1 }, 'group');
         if (this.attribute.visible !== false && textStyle.visible !== false) {
+            const { width: mainTitleWidth, height: mainTitleHeight, maxHeight: mainTitleMaxHeight, maxWidth: mainTitleMaxWidth, x = 0, y = 0, ellipsis = true, wordBreak = 'break-word', maxWidth, lineClamp } = textStyle;
             if (textType === 'rich' || isValid(textStyle.character)) {
-                const attr = Object.assign({ x: (_a = textStyle.x) !== null && _a !== void 0 ? _a : 0, y: (_b = textStyle.y) !== null && _b !== void 0 ? _b : 0, width: (_d = (_c = textStyle.width) !== null && _c !== void 0 ? _c : width) !== null && _d !== void 0 ? _d : 0, height: (_f = (_e = textStyle.height) !== null && _e !== void 0 ? _e : height) !== null && _f !== void 0 ? _f : 0, ellipsis: (_g = textStyle.ellipsis) !== null && _g !== void 0 ? _g : true, wordBreak: (_h = textStyle.wordBreak) !== null && _h !== void 0 ? _h : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: (_j = textStyle.character) !== null && _j !== void 0 ? _j : text }, textStyle);
+                const attr = Object.assign({ x,
+                    y, width: (_a = mainTitleWidth !== null && mainTitleWidth !== void 0 ? mainTitleWidth : width) !== null && _a !== void 0 ? _a : 0, height: (_b = mainTitleHeight !== null && mainTitleHeight !== void 0 ? mainTitleHeight : height) !== null && _b !== void 0 ? _b : 0, ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true, wordBreak: wordBreak !== null && wordBreak !== void 0 ? wordBreak : 'break-word', maxHeight: mainTitleMaxHeight !== null && mainTitleMaxHeight !== void 0 ? mainTitleMaxHeight : maxHeight, maxWidth: mainTitleMaxWidth !== null && mainTitleMaxWidth !== void 0 ? mainTitleMaxWidth : maxWidth, textConfig: (_c = textStyle.character) !== null && _c !== void 0 ? _c : text }, textStyle);
                 this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
             }
             else if (textType === 'html') {
-                const attr = Object.assign({ html: Object.assign(Object.assign({ dom: text }, DEFAULT_HTML_TEXT_SPEC), textStyle), x: (_k = textStyle.x) !== null && _k !== void 0 ? _k : 0, y: (_l = textStyle.y) !== null && _l !== void 0 ? _l : 0, width: (_o = (_m = textStyle.width) !== null && _m !== void 0 ? _m : width) !== null && _o !== void 0 ? _o : 0, height: (_q = (_p = textStyle.height) !== null && _p !== void 0 ? _p : height) !== null && _q !== void 0 ? _q : 0, ellipsis: (_r = textStyle.ellipsis) !== null && _r !== void 0 ? _r : true, wordBreak: (_s = textStyle.wordBreak) !== null && _s !== void 0 ? _s : 'break-word', maxHeight: textStyle.maxHeight, maxWidth: textStyle.maxWidth, textConfig: [] }, textStyle);
+                const attr = Object.assign({ html: Object.assign(Object.assign({ dom: text }, DEFAULT_HTML_TEXT_SPEC), textStyle), x,
+                    y, width: (_d = mainTitleWidth !== null && mainTitleWidth !== void 0 ? mainTitleWidth : width) !== null && _d !== void 0 ? _d : 0, height: (_e = mainTitleHeight !== null && mainTitleHeight !== void 0 ? mainTitleHeight : height) !== null && _e !== void 0 ? _e : 0, ellipsis,
+                    wordBreak, maxHeight: mainTitleMaxHeight !== null && mainTitleMaxHeight !== void 0 ? mainTitleMaxHeight : maxHeight, maxWidth: mainTitleMaxWidth !== null && mainTitleMaxWidth !== void 0 ? mainTitleMaxWidth : maxWidth, textConfig: [] }, textStyle);
                 this._mainTitle = group.createOrUpdateChild('mainTitle', attr, 'richtext');
             }
             else if (isValid(text)) {
-                this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: isArray(text) ? text : [text], wrap: true }, textStyle), { maxLineWidth: (_t = textStyle.maxLineWidth) !== null && _t !== void 0 ? _t : width, heightLimit: textStyle.heightLimit, lineClamp: textStyle.lineClamp, ellipsis: (_u = textStyle.ellipsis) !== null && _u !== void 0 ? _u : true, x: 0, y: 0 }), 'text');
+                this._mainTitle = group.createOrUpdateChild('mainTitle', Object.assign(Object.assign({ text: isArray(text) ? text : [text], whiteSpace: 'normal' }, textStyle), { maxLineWidth: (_g = (_f = textStyle.maxLineWidth) !== null && _f !== void 0 ? _f : mainTitleWidth) !== null && _g !== void 0 ? _g : width, heightLimit: mainTitleHeight !== null && mainTitleHeight !== void 0 ? mainTitleHeight : maxHeight, lineClamp,
+                    ellipsis,
+                    x,
+                    y }), 'text');
             }
         }
         const maintextHeight = this._mainTitle ? this._mainTitle.AABBBounds.height() : 0;
         const maintextWidth = this._mainTitle ? this._mainTitle.AABBBounds.width() : 0;
         if (this.attribute.visible !== false && subtextStyle.visible !== false) {
+            const { width: subTitleWidth, height: subTitleHeight, maxWidth: subTitleMaxWidth, maxHeight: subTitleMaxHeight, x = 0, y = 0, ellipsis = true, wordBreak = 'break-word', lineClamp } = subtextStyle;
+            const maxSubTextHeight = Math.max(Number.MIN_VALUE, maxHeight - maintextHeight);
             if (subtextType === 'rich' || isValid(subtextStyle.character)) {
-                const attr = Object.assign({ x: (_v = subtextStyle.x) !== null && _v !== void 0 ? _v : 0, y: (_w = subtextStyle.y) !== null && _w !== void 0 ? _w : 0, width: (_y = (_x = subtextStyle.width) !== null && _x !== void 0 ? _x : width) !== null && _y !== void 0 ? _y : 0, height: (_0 = (_z = subtextStyle.height) !== null && _z !== void 0 ? _z : height) !== null && _0 !== void 0 ? _0 : 0, ellipsis: (_1 = subtextStyle.ellipsis) !== null && _1 !== void 0 ? _1 : true, wordBreak: (_2 = subtextStyle.wordBreak) !== null && _2 !== void 0 ? _2 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: (_3 = subtextStyle.character) !== null && _3 !== void 0 ? _3 : subtext }, subtextStyle);
+                const attr = Object.assign({ x,
+                    y, width: (_h = subTitleWidth !== null && subTitleWidth !== void 0 ? subTitleWidth : width) !== null && _h !== void 0 ? _h : 0, height: (_j = subTitleHeight !== null && subTitleHeight !== void 0 ? subTitleHeight : height) !== null && _j !== void 0 ? _j : 0, ellipsis,
+                    wordBreak, maxHeight: subTitleMaxHeight !== null && subTitleMaxHeight !== void 0 ? subTitleMaxHeight : maxSubTextHeight, maxWidth: subTitleMaxWidth !== null && subTitleMaxWidth !== void 0 ? subTitleMaxWidth : maxWidth, textConfig: (_k = subtextStyle.character) !== null && _k !== void 0 ? _k : subtext }, subtextStyle);
                 this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
             }
             else if (subtextType === 'html') {
-                const attr = Object.assign({ html: Object.assign(Object.assign({ dom: subtext }, DEFAULT_HTML_TEXT_SPEC), subtextStyle), x: (_4 = subtextStyle.x) !== null && _4 !== void 0 ? _4 : 0, y: (_5 = subtextStyle.y) !== null && _5 !== void 0 ? _5 : 0, width: (_7 = (_6 = subtextStyle.width) !== null && _6 !== void 0 ? _6 : width) !== null && _7 !== void 0 ? _7 : 0, height: (_9 = (_8 = subtextStyle.height) !== null && _8 !== void 0 ? _8 : height) !== null && _9 !== void 0 ? _9 : 0, ellipsis: (_10 = subtextStyle.ellipsis) !== null && _10 !== void 0 ? _10 : true, wordBreak: (_11 = subtextStyle.wordBreak) !== null && _11 !== void 0 ? _11 : 'break-word', maxHeight: subtextStyle.maxHeight, maxWidth: subtextStyle.maxWidth, textConfig: [] }, subtextStyle);
+                const attr = Object.assign({ html: Object.assign(Object.assign({ dom: subtext }, DEFAULT_HTML_TEXT_SPEC), subtextStyle), x,
+                    y, width: (_l = subTitleWidth !== null && subTitleWidth !== void 0 ? subTitleWidth : width) !== null && _l !== void 0 ? _l : 0, height: (_m = subTitleHeight !== null && subTitleHeight !== void 0 ? subTitleHeight : height) !== null && _m !== void 0 ? _m : 0, ellipsis,
+                    wordBreak, maxHeight: subTitleMaxHeight !== null && subTitleMaxHeight !== void 0 ? subTitleMaxHeight : maxSubTextHeight, maxWidth: subTitleMaxWidth !== null && subTitleMaxWidth !== void 0 ? subTitleMaxWidth : maxWidth, textConfig: [] }, subtextStyle);
                 this._subTitle = group.createOrUpdateChild('subTitle', attr, 'richtext');
             }
             else if (isValid(subtext)) {
-                this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: isArray(subtext) ? subtext : [subtext], wrap: true }, subtextStyle), { maxLineWidth: (_12 = subtextStyle.maxLineWidth) !== null && _12 !== void 0 ? _12 : width, heightLimit: subtextStyle.heightLimit, lineClamp: subtextStyle.lineClamp, ellipsis: (_13 = subtextStyle.ellipsis) !== null && _13 !== void 0 ? _13 : true, x: 0, y: maintextHeight }), 'text');
+                this._subTitle = group.createOrUpdateChild('subTitle', Object.assign(Object.assign({ text: isArray(subtext) ? subtext : [subtext], whiteSpace: 'normal' }, subtextStyle), { maxLineWidth: (_o = subtextStyle.maxLineWidth) !== null && _o !== void 0 ? _o : width, heightLimit: (_p = subtextStyle.heightLimit) !== null && _p !== void 0 ? _p : maxSubTextHeight, lineClamp,
+                    ellipsis, x: 0, y: maintextHeight }), 'text');
             }
         }
         const subtextHeight = this._subTitle ? this._subTitle.AABBBounds.height() : 0;
         const subtextWidth = this._subTitle ? this._subTitle.AABBBounds.width() : 0;
         let titleWidth = Math.max(maintextWidth, subtextWidth);
-        let titleHeight = maintextHeight + ((_14 = subtextStyle.height) !== null && _14 !== void 0 ? _14 : subtextHeight);
+        let titleHeight = maintextHeight + ((_q = subtextStyle.height) !== null && _q !== void 0 ? _q : subtextHeight);
         if (isValid(width)) {
             titleWidth = width;
-            this._mainTitle && this._mainTitle.setAttribute('maxLineWidth', width);
-            this._subTitle && this._subTitle.setAttribute('maxLineWidth', width);
         }
         if (isValid(height)) {
             titleHeight = height;
@@ -25993,10 +26229,6 @@ class Title extends AbstractComponent {
             titleWidth = minWidth;
         }
         if (isValid(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);
             if (titleWidth > maxWidth) {
                 titleWidth = maxWidth;
             }
@@ -26005,8 +26237,6 @@ class Title extends AbstractComponent {
             titleHeight = minHeight;
         }
         if (isValid(maxHeight)) {
-            this._mainTitle && this._mainTitle.setAttribute('maxHeight', maxHeight);
-            this._subTitle && this._subTitle.setAttribute('maxHeight', maxHeight - maintextHeight);
             if (titleHeight > maxHeight) {
                 titleHeight = maxHeight;
             }
@@ -26017,7 +26247,7 @@ class Title extends AbstractComponent {
         if (this._mainTitle) {
             if (isValid(align) || isValid(textStyle.align)) {
                 const mainTitleAlign = textStyle.align ? textStyle.align : align;
-                const mainTitleWidth = (_15 = textStyle.width) !== null && _15 !== void 0 ? _15 : maintextWidth;
+                const mainTitleWidth = (_r = textStyle.width) !== null && _r !== void 0 ? _r : maintextWidth;
                 if (mainTitleAlign === 'left') {
                     this._mainTitle.setAttribute('x', 0);
                     this._mainTitle.setAttribute('textAlign', 'left');
@@ -26051,7 +26281,7 @@ class Title extends AbstractComponent {
         if (this._subTitle) {
             if (isValid(align) || isValid(subtextStyle.align)) {
                 const subTitleAlign = subtextStyle.align ? subtextStyle.align : align;
-                const subTitleWidth = (_16 = subtextStyle.width) !== null && _16 !== void 0 ? _16 : subtextWidth;
+                const subTitleWidth = (_s = subtextStyle.width) !== null && _s !== void 0 ? _s : subtextWidth;
                 if (subTitleAlign === 'left') {
                     this._subTitle.setAttribute('x', 0);
                     this._subTitle.setAttribute('textAlign', 'left');
@@ -26068,7 +26298,7 @@ class Title extends AbstractComponent {
             if (isValid(verticalAlign) || isValid(textStyle.verticalAlign)) {
                 const subTitleVerticalAlign = subtextStyle.verticalAlign ? subtextStyle.verticalAlign : verticalAlign;
                 const subTitleYStart = maintextHeight;
-                const subTitleHeight = (_17 = subtextStyle.height) !== null && _17 !== void 0 ? _17 : 0;
+                const subTitleHeight = (_t = subtextStyle.height) !== null && _t !== void 0 ? _t : 0;
                 if (subTitleVerticalAlign === 'top') {
                     this._subTitle.setAttribute('y', subTitleYStart);
                     this._subTitle.setAttribute('textBaseline', 'top');
@@ -28589,6 +28819,6 @@ EmptyTip.defaultAttributes = {
     }
 };
 
-const version = "0.20.2";
+const version = "0.20.3";
 
-export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };
+export { AXIS_ELEMENT_NAME, AbstractComponent, ArcInfo, ArcLabel, ArcSegment, AxisStateValue, BasePlayer, Brush, CheckBox, CircleAxis, CircleAxisGrid, CircleCrosshair, ColorContinuousLegend, ContinuousPlayer, DEFAULT_ITEM_SPACE_COL, DEFAULT_ITEM_SPACE_ROW, DEFAULT_LABEL_SPACE, DEFAULT_PAGER_SPACE, DEFAULT_SHAPE_SIZE, DEFAULT_SHAPE_SPACE, DEFAULT_STATES$1 as DEFAULT_STATES, DEFAULT_TITLE_SPACE, DEFAULT_VALUE_SPACE, DataLabel, DataZoom, DataZoomActiveTag, DirectionEnum, DiscreteLegend, DiscretePlayer, EmptyTip, GroupTransition, IMarkAreaLabelPosition, IMarkCommonArcLabelPosition, IMarkLineLabelPosition, IMarkPointItemPosition, IOperateType, Indicator, LEGEND_ELEMENT_NAME, LabelBase, LegendEvent, LegendStateValue, LineAxis, LineAxisGrid, LineCrosshair, LineLabel, LinkPath, MarkArcArea, MarkArcLine, MarkArea, MarkLine, MarkPoint, Pager, PlayerEventEnum, PolygonCrosshair, PopTip, Radio, RectCrosshair, RectLabel, SLIDER_ELEMENT_NAME, ScrollBar, SectorCrosshair, Segment, SizeContinuousLegend, Slider, SymbolLabel, Tag, Timeline, Title, Tooltip, TopZIndex, VTag, alignTextInLine, angle, angleLabelOrientAttribute, angleTo, cartesianTicks, clampRadian, computeOffsetForlimit, continuousTicks, contrastAccessibilityChecker, convertDomainToTickData, createTextGraphicByType, deltaXYToAngle, fuzzyEqualNumber, getAxisBreakSymbolAttrs, getCircleLabelPosition, getCirclePoints, getCircleVerticalVector, getElMap, getHorizontalPath, getMarksByName, getNoneGroupMarksByName, getPolarAngleLabelPosition, getPolygonPath, getSizeHandlerPath, getTextAlignAttrOfVerticalDir, getTextType, getVerticalCoord, getVerticalPath, htmlAttributeTransform, initTextMeasure, isInRange, isPostiveXAxis, isRichText, isVisible, labelSmartInvert, length, limitShapeInBounds, linearDiscreteTicks, loadPoptip, measureTextSize, normalize, polarAngleAxisDiscreteTicks, polarTicks, reactAttributeTransform, registerArcDataLabel, registerLineDataLabel, registerMarkArcAreaAnimate, registerMarkArcLineAnimate, registerMarkAreaAnimate, registerMarkLineAnimate, registerMarkPointAnimate, registerRectDataLabel, registerSymbolDataLabel, removeRepeatPoint, richTextAttributeTransform, scale, setPoptipTheme, smartInvertStrategy, tan2AngleToAngle, ticks, traverseGroup, version };