@visactor/vrender-components 0.14.0-alpha.8 → 0.14.0

package/dist/index.js

@@ -1331,6 +1331,9 @@
                 _clear(index >>> DIV, ~(1 << (index & MOD)));
             },
             getRange: ({ x1, y1, x2, y2 }) => {
+                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
+                    return true;
+                }
                 let r = y2;
                 let start;
                 let end;
@@ -1363,6 +1366,9 @@
                 return false;
             },
             setRange: ({ x1, y1, x2, y2 }) => {
+                if (x2 < 0 || y2 < 0 || x1 > w || y1 > h) {
+                    return;
+                }
                 let start;
                 let end;
                 let indexStart;
@@ -1612,6 +1618,10 @@
         _lastHover;
         _lastSelect;
         _enableAnimation;
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
+            const arcs = [];
+            return arcs;
+        }
         render() {
             this._prepare();
             const { overlap, smartInvert, dataFilter, customLayoutFunc, customOverlapFunc } = this.attribute;
@@ -1747,15 +1757,18 @@
         layout(data = []) {
             const { textStyle = {}, position, offset } = this.attribute;
             const labels = [];
+            const textBoundsArray = [];
             for (let i = 0; i < data.length; i++) {
                 const textData = data[i];
                 const baseMark = this._idToGraphic.get(textData.id);
                 const labelAttribute = {
+                    fill: baseMark.attribute.fill,
                     ...textStyle,
                     ...textData
                 };
                 const text = this._createLabelText(labelAttribute);
                 const textBounds = this.getGraphicBounds(text);
+                textBoundsArray.push(textBounds);
                 const graphicBounds = this.getGraphicBounds(baseMark, { x: textData.x, y: textData.y });
                 const textLocation = this.labeling(textBounds, graphicBounds, vutils.isFunction(position) ? position(textData) : position, offset);
                 if (!textLocation) {
@@ -1766,6 +1779,20 @@
                 text.setAttributes(textLocation);
                 labels.push(text);
             }
+            if (this.attribute.type === 'arc') {
+                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray);
+                for (let i = 0; i < data.length; i++) {
+                    const textData = data[i];
+                    const basedArc = arcs.find(arc => arc.labelText === textData.text);
+                    const labelAttribute = {
+                        x: basedArc.labelPosition.x,
+                        y: basedArc.labelPosition.y,
+                        angle: this.attribute.angle ?? basedArc.angle,
+                        labelLinePath: basedArc.labelLinePath
+                    };
+                    labels[i].setAttributes(labelAttribute);
+                }
+            }
             return labels;
         }
         _overlapping(labels) {
@@ -1822,6 +1849,20 @@
                         continue;
                     }
                 }
+                if (clampForce) {
+                    const { dx = 0, dy = 0 } = clampText(text, bmpTool.width, bmpTool.height);
+                    if (!(dx === 0 && dy === 0) &&
+                        canPlace(bmpTool, bitmap, {
+                            x1: text.AABBBounds.x1 + dx,
+                            x2: text.AABBBounds.x2 + dx,
+                            y1: text.AABBBounds.y1 + dy,
+                            y2: text.AABBBounds.y2 + dy
+                        })) {
+                        text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
+                        result.push(text);
+                        continue;
+                    }
+                }
                 let hasPlace = false;
                 for (let j = 0; j < strategy.length; j++) {
                     hasPlace = place(bmpTool, bitmap, strategy[j], this.attribute, text, this.getGraphicBounds(baseMark, labels[i]), this.labeling);
@@ -1880,6 +1921,14 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
+                const labelLine = text.attribute?.labelLinePath
+                    ? vrender.createPath({
+                        visible: text.attribute?.visible ?? true,
+                        stroke: text.attribute?.line?.stroke ?? text.attribute?.fill,
+                        lineWidth: 1,
+                        path: text.attribute?.labelLinePath
+                    })
+                    : undefined;
                 const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = prevTextMap?.get(relatedGraphic) ? 'update' : 'enter';
                 if (state === 'enter') {
@@ -1888,6 +1937,9 @@
                     if (!disableAnimation && relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
                         relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
                             const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
@@ -1902,6 +1954,9 @@
                     }
                     else {
                         this.add(text);
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
                     }
                 }
                 if (state === 'update') {
@@ -1995,7 +2050,15 @@
                     continue;
                 }
                 const baseMark = this._idToGraphic.get(label.attribute.id);
-                const isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
+                let isInside = canPlaceInside(label.AABBBounds, baseMark?.AABBBounds);
+                if (this.attribute.type === 'arc') {
+                    if (this.attribute.position === 'inside') {
+                        isInside = true;
+                    }
+                    else {
+                        isInside = false;
+                    }
+                }
                 if (label.attribute.stroke && label.attribute.lineWidth > 0) {
                     label.setAttributes({
                         fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
@@ -2222,9 +2285,785 @@
         }
     }
 
+    function polarToCartesian(point) {
+        if (!point.radius) {
+            return { x: 0, y: 0 };
+        }
+        return {
+            x: Math.cos(point.angle) * point.radius,
+            y: Math.sin(point.angle) * point.radius
+        };
+    }
+    function circlePoint(x0, y0, radius, radian) {
+        const offset = polarToCartesian({
+            radius,
+            angle: radian
+        });
+        return {
+            x: x0 + offset.x,
+            y: y0 + offset.y
+        };
+    }
+    function computeQuadrant(angle) {
+        angle = normalizeAngle(angle);
+        if (angle > 0 && angle <= Math.PI / 2) {
+            return 2;
+        }
+        else if (angle > Math.PI / 2 && angle <= Math.PI) {
+            return 3;
+        }
+        else if (angle > Math.PI && angle <= (3 * Math.PI) / 2) {
+            return 4;
+        }
+        return 1;
+    }
+    function normalizeAngle(angle) {
+        while (angle < 0) {
+            angle += Math.PI * 2;
+        }
+        while (angle >= Math.PI * 2) {
+            angle -= Math.PI * 2;
+        }
+        return angle;
+    }
+    function isQuadrantLeft(quadrant) {
+        return quadrant === 3 || quadrant === 4;
+    }
+    function isQuadrantRight(quadrant) {
+        return quadrant === 1 || quadrant === 2;
+    }
+    function lineCirclePoints(a, b, c, x0, y0, r) {
+        if ((a === 0 && b === 0) || r <= 0) {
+            return [];
+        }
+        if (a === 0) {
+            const y1 = -c / b;
+            const fy = (y1 - y0) ** 2;
+            const fd = r ** 2 - fy;
+            if (fd < 0) {
+                return [];
+            }
+            else if (fd === 0) {
+                return [{ x: x0, y: y1 }];
+            }
+            const x1 = Math.sqrt(fd) + x0;
+            const x2 = -Math.sqrt(fd) + x0;
+            return [
+                { x: x1, y: y1 },
+                { x: x2, y: y1 }
+            ];
+        }
+        else if (b === 0) {
+            const x1 = -c / a;
+            const fx = (x1 - x0) ** 2;
+            const fd = r ** 2 - fx;
+            if (fd < 0) {
+                return [];
+            }
+            else if (fd === 0) {
+                return [{ x: x1, y: y0 }];
+            }
+            const y1 = Math.sqrt(fd) + y0;
+            const y2 = -Math.sqrt(fd) + y0;
+            return [
+                { x: x1, y: y1 },
+                { x: x1, y: y2 }
+            ];
+        }
+        const fa = (b / a) ** 2 + 1;
+        const fb = 2 * ((c / a + x0) * (b / a) - y0);
+        const fc = (c / a + x0) ** 2 + y0 ** 2 - r ** 2;
+        const fd = fb ** 2 - 4 * fa * fc;
+        if (fd < 0) {
+            return [];
+        }
+        const y1 = (-fb + Math.sqrt(fd)) / (2 * fa);
+        const y2 = (-fb - Math.sqrt(fd)) / (2 * fa);
+        const x1 = -(b * y1 + c) / a;
+        const x2 = -(b * y2 + c) / a;
+        if (fd === 0) {
+            return [{ x: x1, y: y1 }];
+        }
+        return [
+            { x: x1, y: y1 },
+            { x: x2, y: y2 }
+        ];
+    }
+    function connectLineRadian(radius, length) {
+        if (length > radius * 2) {
+            return NaN;
+        }
+        return Math.asin(length / 2 / radius) * 2;
+    }
+    function checkBoundsOverlap(boundsA, boundsB) {
+        const { x1: ax1, y1: ay1, x2: ax2, y2: ay2 } = boundsA;
+        const { x1: bx1, y1: by1, x2: bx2, y2: by2 } = boundsB;
+        return !((ax1 <= bx1 && ax2 <= bx1) ||
+            (ax1 >= bx2 && ax2 >= bx2) ||
+            (ay1 <= by1 && ay2 <= by1) ||
+            (ay1 >= by2 && ay2 >= by2));
+    }
+
+    class ArcInfo {
+        key;
+        refDatum;
+        center;
+        outerCenter;
+        labelSize;
+        labelPosition;
+        labelLimit;
+        labelVisible;
+        lastLabelY;
+        labelYRange;
+        labelText;
+        pointA;
+        pointB;
+        pointC;
+        labelLinePath;
+        quadrant;
+        radian;
+        middleAngle;
+        k;
+        textAlign;
+        textBaseline;
+        angle;
+        constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle) {
+            this.refDatum = refDatum;
+            this.center = center;
+            this.outerCenter = outerCenter;
+            this.quadrant = quadrant;
+            this.radian = radian;
+            this.middleAngle = middleAngle;
+            this.labelVisible = true;
+            this.labelLimit = 0;
+        }
+        getLabelBounds() {
+            if (!this.labelPosition || !this.labelSize) {
+                return { x1: 0, x2: 0, y1: 0, y2: 0 };
+            }
+            return {
+                x1: this.labelPosition.x - this.labelSize.width / 2,
+                y1: this.labelPosition.y - this.labelSize.height / 2,
+                x2: this.labelPosition.x + this.labelSize.width / 2,
+                y2: this.labelPosition.y + this.labelSize.height / 2
+            };
+        }
+    }
+    class ArcLabel extends LabelBase {
+        name = 'arc-label';
+        static defaultAttributes = {
+            coverEnable: false,
+            spaceWidth: 5,
+            layoutArcGap: 6,
+            textStyle: {
+                visible: true,
+                fontSize: 14,
+                fontWeight: 'normal',
+                fillOpacity: 1,
+                textAlign: 'center',
+                textBaseline: 'middle'
+            },
+            position: 'outside',
+            offset: 0,
+            line: {
+                visible: true,
+                line1MinLength: 20,
+                line2MinLength: 10
+            },
+            layout: {
+                align: 'arc',
+                strategy: 'priority',
+                tangentConstraint: true
+            }
+        };
+        _ellipsisWidth = 0;
+        _arcLeft = new Map();
+        _arcRight = new Map();
+        constructor(attributes) {
+            super(vutils.merge({}, ArcLabel.defaultAttributes, attributes));
+        }
+        _overlapping(labels) {
+            return labels;
+        }
+        labeling(textBounds, graphicBounds, position = 'outside', offset = 0) {
+            if (!textBounds || !graphicBounds) {
+                return;
+            }
+            return { x: 0, y: 0 };
+        }
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray) {
+            this._arcLeft.clear();
+            this._arcRight.clear();
+            const { width, height } = attribute;
+            currentMarks.forEach((currentMark, index) => {
+                const graphicAttribute = currentMark.attribute;
+                const radiusRatio = this.computeLayoutOuterRadius(graphicAttribute.outerRadius, width, height);
+                const radius = this.computeRadius(radiusRatio, width, height);
+                const center = { x: graphicAttribute?.x ?? 0, y: graphicAttribute?.y ?? 0 };
+                const item = data[index];
+                const textBounds = textBoundsArray[index];
+                const arcMiddleAngle = (graphicAttribute.startAngle + graphicAttribute.endAngle) / 2;
+                const intervalAngle = graphicAttribute.endAngle - graphicAttribute.startAngle;
+                const arcQuadrant = computeQuadrant(graphicAttribute.endAngle - intervalAngle / 2);
+                const arcMiddle = circlePoint(center.x, center.y, graphicAttribute.outerRadius, arcMiddleAngle);
+                const outerArcMiddle = circlePoint(center.x, center.y, radius + attribute.line.line1MinLength, arcMiddleAngle);
+                const arc = new ArcInfo(item, arcMiddle, outerArcMiddle, arcQuadrant, intervalAngle, arcMiddleAngle);
+                arc.pointA = circlePoint(center.x, center.y, this.computeDatumRadius(center.x * 2, center.y * 2, graphicAttribute.outerRadius), arc.middleAngle);
+                arc.labelSize = {
+                    width: textBounds.x2 - textBounds.x1,
+                    height: textBounds.y2 - textBounds.y1
+                };
+                if (isQuadrantRight(arc.quadrant)) {
+                    this._arcRight.set(arc.refDatum, arc);
+                }
+                else if (isQuadrantLeft(arc.quadrant)) {
+                    this._arcLeft.set(arc.refDatum, arc);
+                }
+            });
+            const leftArcs = Array.from(this._arcLeft.values());
+            const rightArcs = Array.from(this._arcRight.values());
+            const arcs = [];
+            if (position === 'inside') {
+                arcs.push(...this._layoutInsideLabels(rightArcs, attribute, currentMarks));
+                arcs.push(...this._layoutInsideLabels(leftArcs, attribute, currentMarks));
+            }
+            else {
+                arcs.push(...this._layoutOutsideLabels(rightArcs, attribute, currentMarks));
+                arcs.push(...this._layoutOutsideLabels(leftArcs, attribute, currentMarks));
+            }
+            return arcs;
+        }
+        _layoutInsideLabels(arcs, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const innerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.innerRadius, attribute.width, attribute.height);
+            const outerRadiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const labelConfig = attribute;
+            const spaceWidth = labelConfig.spaceWidth;
+            arcs.forEach((arc) => {
+                const { labelSize, radian } = arc;
+                const innerRadius = this.computeRadius(innerRadiusRatio, attribute.width, attribute.height, 1);
+                const outerRadius = this.computeRadius(outerRadiusRatio, attribute.width, attribute.height, 1);
+                const minRadian = connectLineRadian(outerRadius, labelSize.height);
+                let limit;
+                if (radian < minRadian) {
+                    limit = 0;
+                }
+                else {
+                    let minRadius;
+                    if (radian >= Math.PI) {
+                        minRadius = innerRadius;
+                    }
+                    else {
+                        minRadius = Math.max(innerRadius, labelSize.height / 2 / Math.tan(radian / 2));
+                    }
+                    limit = outerRadius - minRadius - spaceWidth;
+                }
+                if (labelConfig?.rotate !== true) {
+                    limit = outerRadius - spaceWidth;
+                }
+                const text = this._getFormatLabelText(arc.refDatum, limit);
+                arc.labelText = text;
+                const labelWidth = Math.min(limit, arc.labelSize.width);
+                const align = this._computeAlign(arc, attribute);
+                const alignOffset = align === 'left' ? labelWidth : align === 'right' ? 0 : labelWidth / 2;
+                const labelRadius = outerRadius - spaceWidth - alignOffset;
+                arc.labelPosition = circlePoint(center.x, center.y, labelRadius, arc.middleAngle);
+                arc.labelLimit = labelWidth;
+                if (!vutils.isGreater(labelWidth, 0)) {
+                    arc.labelVisible = false;
+                }
+                arc.angle = arc.middleAngle;
+            });
+            return arcs;
+        }
+        _layoutOutsideLabels(arcs, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 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),
+                    y: arc.outerCenter.y
+                };
+            });
+            arcs.sort((a, b) => {
+                return a.labelPosition.y - b.labelPosition.y;
+            });
+            if (attribute.coverEnable !== false || labelLayout.strategy === 'none') {
+                for (const arc of arcs) {
+                    const { labelPosition, labelSize } = arc;
+                    arc.labelLimit = labelSize.width;
+                    arc.pointB = isQuadrantLeft(arc.quadrant)
+                        ? {
+                            x: labelPosition.x + labelSize.width / 2 + line2MinLength + spaceWidth,
+                            y: labelPosition.y
+                        }
+                        : {
+                            x: labelPosition.x - labelSize.width / 2 - line2MinLength - spaceWidth,
+                            y: labelPosition.y
+                        };
+                    this._computeX(arc, attribute, currentMarks);
+                }
+                if (attribute.coverEnable === false && labelLayout.strategy === 'none') {
+                    this._coverLabels(arcs);
+                }
+            }
+            else {
+                const maxLabels = height / (attribute.textStyle?.fontSize || 16);
+                this._adjustY(arcs, maxLabels, attribute, currentMarks);
+                const { minY, maxY } = arcs.reduce((yInfo, arc) => {
+                    const { y1, y2 } = arc.getLabelBounds();
+                    yInfo.minY = Math.max(0, Math.min(y1, yInfo.minY));
+                    yInfo.maxY = Math.min(height, Math.max(y2, yInfo.maxY));
+                    return yInfo;
+                }, { minY: Infinity, maxY: -Infinity });
+                const halfY = Math.max(Math.abs(height / 2 - minY), Math.abs(maxY - height / 2));
+                const r = this._computeLayoutRadius(halfY, attribute, currentMarks);
+                for (const arc of arcs) {
+                    this._computePointB(arc, r, attribute, currentMarks);
+                    this._computeX(arc, attribute, currentMarks);
+                }
+            }
+            const width = center.x * 2;
+            arcs.forEach(arc => {
+                if (arc.labelVisible &&
+                    (vutils.isLess(arc.pointB.x, line2MinLength + spaceWidth) ||
+                        vutils.isGreater(arc.pointB.x, width - line2MinLength - spaceWidth))) {
+                    arc.labelVisible = false;
+                }
+                arc.angle = 0;
+                arc.labelPosition.x = isQuadrantLeft(arc.quadrant)
+                    ? arc.labelPosition.x
+                    : arc.labelPosition.x + 0.5 * arc.labelSize.width;
+                arc.labelLinePath =
+                    `M${Math.round(arc.pointA.x)},${Math.round(arc.pointA.y)}` +
+                        ` L${Math.round(arc.pointB.x)},${Math.round(arc.pointB.y)}` +
+                        ` L${Math.round(arc.pointC.x)},${Math.round(arc.pointC.y)}`;
+            });
+            return arcs;
+        }
+        _computeX(arc, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const plotLayout = { width: center.x * 2, height: center.y * 2 };
+            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const line1MinLength = attribute.line.line1MinLength;
+            const line2MinLength = attribute.line.line2MinLength;
+            const labelLayoutAlign = attribute.layout?.align;
+            const spaceWidth = attribute.spaceWidth;
+            const align = this._computeAlign(arc, attribute);
+            const { labelPosition, quadrant, pointB } = arc;
+            if (!vutils.isValidNumber(pointB.x * pointB.y)) {
+                arc.pointC = { x: NaN, y: NaN };
+                labelPosition.x = NaN;
+                arc.labelLimit = 0;
+            }
+            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;
+            if (labelLayoutAlign === 'labelLine') {
+                cx = (radius + line1MinLength + line2MinLength) * flag + center.x;
+                limit = (flag > 0 ? plotLayout.width - cx : cx) - spaceWidth;
+            }
+            const text = this._getFormatLabelText(arc.refDatum, limit);
+            arc.labelText = text;
+            let labelWidth = Math.min(limit, arc.labelSize.width);
+            switch (labelLayoutAlign) {
+                case 'labelLine':
+                    break;
+                case 'edge':
+                    cx = flag > 0 ? plotLayout.width - labelWidth - spaceWidth : labelWidth + spaceWidth;
+                    break;
+                case 'arc':
+                default:
+                    cx = pointB.x + flag * line2MinLength;
+                    break;
+            }
+            labelWidth = Math.max(this._ellipsisWidth, labelWidth);
+            arc.pointC = { x: cx, y: labelPosition.y };
+            if (labelLayoutAlign === 'edge') {
+                const alignOffset = this._computeAlignOffset(align, labelWidth, -flag);
+                labelPosition.x = flag > 0 ? plotLayout.width + alignOffset : alignOffset;
+            }
+            else {
+                const alignOffset = this._computeAlignOffset(align, labelWidth, flag);
+                labelPosition.x = cx + alignOffset + flag * spaceWidth;
+            }
+            arc.labelLimit = labelWidth;
+        }
+        _computeAlignOffset(align, labelWidth, alignFlag) {
+            switch (align) {
+                case 'left':
+                    return alignFlag < 0 ? -labelWidth : 0;
+                case 'right':
+                    return alignFlag < 0 ? 0 : labelWidth;
+                case 'center':
+                default:
+                    return (labelWidth / 2) * alignFlag;
+            }
+        }
+        _computeAlign(arc, attribute) {
+            const labelConfig = attribute;
+            const textAlign = labelConfig.textStyle?.textAlign ?? labelConfig.textStyle?.align;
+            const layoutAlign = labelConfig.layout?.textAlign ?? labelConfig.layout?.align;
+            if (labelConfig.position !== 'inside') {
+                if (vutils.isNil(textAlign) || textAlign === 'auto') {
+                    if (layoutAlign === 'edge') {
+                        return isQuadrantLeft(arc.quadrant) ? 'left' : 'right';
+                    }
+                    return isQuadrantLeft(arc.quadrant) ? 'right' : 'left';
+                }
+                return textAlign;
+            }
+            return vutils.isNil(textAlign) || textAlign === 'auto' ? 'center' : textAlign;
+        }
+        _getFormatLabelText(value, limit) {
+            return value.text;
+        }
+        _adjustY(arcs, maxLabels, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const plotRect = { width: center.x * 2, height: center.y * 2 };
+            const labelLayout = attribute.layout;
+            if (labelLayout.strategy === 'vertical') {
+                let lastY = 0;
+                let delta;
+                const len = arcs.length;
+                if (len <= 0) {
+                    return;
+                }
+                for (let i = 0; i < len; i++) {
+                    const { y1 } = arcs[i].getLabelBounds();
+                    delta = y1 - lastY;
+                    if (vutils.isLess(delta, 0)) {
+                        const index = this._shiftY(arcs, i, len - 1, -delta);
+                        this._shiftY(arcs, index, 0, delta / 2);
+                    }
+                    const { y2 } = arcs[i].getLabelBounds();
+                    lastY = y2;
+                }
+                const { y1: firstY1 } = arcs[0].getLabelBounds();
+                delta = firstY1 - 0;
+                if (vutils.isLess(delta, 0)) {
+                    this._shiftY(arcs, 0, len - 1, -delta);
+                }
+                for (let i = arcs.length - 1; i >= 0; i--) {
+                    if (arcs[i].getLabelBounds().y2 > plotRect.height) {
+                        arcs[i].labelVisible = false;
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            else if (labelLayout.strategy !== 'none') {
+                const priorityArcs = arcs.map((arc, i) => {
+                    return {
+                        arc,
+                        originIndex: i,
+                        priorityIndex: 0
+                    };
+                });
+                priorityArcs.sort((a, b) => {
+                    return b.arc.radian - a.arc.radian;
+                });
+                priorityArcs.forEach((priorityArc, i) => {
+                    priorityArc.priorityIndex = i;
+                    priorityArc.arc.labelVisible = false;
+                });
+                let topLabelIndex = Infinity;
+                let bottomLabelIndex = -Infinity;
+                for (let i = 0; i < maxLabels && i < arcs.length; i++) {
+                    this._storeY(arcs);
+                    const arc = priorityArcs[i].arc;
+                    this._computeYRange(arc, attribute, currentMarks);
+                    arc.labelVisible = true;
+                    const curY = arc.labelPosition.y;
+                    const { lastIndex, nextIndex } = this._findNeighborIndex(arcs, priorityArcs[i]);
+                    const lastArc = arcs[lastIndex];
+                    const nextArc = arcs[nextIndex];
+                    if (lastIndex === -1 && nextIndex !== -1) {
+                        const nextY = nextArc.labelPosition.y;
+                        if (curY > nextY) {
+                            arc.labelPosition.y = nextY - nextArc.labelSize.height / 2 - arc.labelSize.height / 2;
+                        }
+                        else {
+                            this._twoWayShift(arcs, arc, nextArc, nextIndex);
+                        }
+                    }
+                    else if (lastIndex !== -1 && nextIndex === -1) {
+                        const lastY = lastArc.labelPosition.y;
+                        if (curY < lastY) {
+                            arc.labelPosition.y = lastY + lastArc.labelSize.height / 2 + arc.labelSize.height / 2;
+                        }
+                        else {
+                            this._twoWayShift(arcs, lastArc, arc, priorityArcs[i].originIndex);
+                        }
+                    }
+                    else if (lastIndex !== -1 && nextIndex !== -1) {
+                        const lastY = lastArc.labelPosition.y;
+                        const nextY = nextArc.labelPosition.y;
+                        if (curY > nextY) {
+                            arc.labelPosition.y = nextY - nextArc.labelSize.height / 2 - arc.labelSize.height / 2;
+                            this._twoWayShift(arcs, lastArc, arc, priorityArcs[i].originIndex);
+                        }
+                        else if (curY < lastY) {
+                            arc.labelPosition.y = lastY + lastArc.labelSize.height / 2 + arc.labelSize.height / 2;
+                            this._twoWayShift(arcs, arc, nextArc, nextIndex);
+                        }
+                        else {
+                            this._twoWayShift(arcs, lastArc, arc, priorityArcs[i].originIndex);
+                            this._twoWayShift(arcs, arc, nextArc, nextIndex);
+                        }
+                    }
+                    const nextTopIndex = Math.min(topLabelIndex, priorityArcs[i].originIndex);
+                    const nextBottomIndex = Math.max(bottomLabelIndex, priorityArcs[i].originIndex);
+                    let delta;
+                    delta = arcs[nextBottomIndex].getLabelBounds().y2 - plotRect.height;
+                    if (vutils.isGreater(delta, 0)) {
+                        this._shiftY(arcs, nextBottomIndex, 0, -delta);
+                    }
+                    delta = arcs[nextTopIndex].getLabelBounds().y1 - 0;
+                    if (vutils.isLess(delta, 0)) {
+                        this._shiftY(arcs, nextTopIndex, arcs.length - 1, -delta);
+                    }
+                    delta = arcs[nextBottomIndex].getLabelBounds().y2 - plotRect.height;
+                    if (vutils.isGreater(delta, 0)) {
+                        arc.labelVisible = false;
+                        this._restoreY(arcs);
+                        break;
+                    }
+                    else if (labelLayout.tangentConstraint && !this._checkYRange(arcs)) {
+                        arc.labelVisible = false;
+                        this._restoreY(arcs);
+                    }
+                    else {
+                        topLabelIndex = nextTopIndex;
+                        bottomLabelIndex = nextBottomIndex;
+                    }
+                }
+            }
+        }
+        _shiftY(arcs, start, end, delta) {
+            const direction = start < end ? 1 : -1;
+            let index = start;
+            while (index !== -1) {
+                arcs[index].labelPosition.y += delta;
+                const nextIndex = this._findNextVisibleIndex(arcs, index, end, direction);
+                if (nextIndex >= 0 && nextIndex < arcs.length) {
+                    const { y1: curY1, y2: curY2 } = arcs[index].getLabelBounds();
+                    const { y1: nextY1, y2: nextY2 } = arcs[nextIndex].getLabelBounds();
+                    if ((direction > 0 && curY2 < nextY1) || (direction < 0 && curY1 > nextY2)) {
+                        return index;
+                    }
+                }
+                index = nextIndex;
+            }
+            return end;
+        }
+        _findNextVisibleIndex(arcs, start, end, direction) {
+            const diff = (end - start) * direction;
+            for (let i = 1; i <= diff; i++) {
+                const index = start + i * direction;
+                if (arcs[index].labelVisible) {
+                    return index;
+                }
+            }
+            return -1;
+        }
+        _computePointB(arc, r, attribute, currentMarks) {
+            const labelConfig = attribute;
+            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const line1MinLength = labelConfig.line.line1MinLength;
+            const labelLayout = labelConfig.layout;
+            if (labelLayout.strategy === 'none') {
+                arc.pointB = {
+                    x: arc.outerCenter.x,
+                    y: arc.outerCenter.y
+                };
+            }
+            else {
+                const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+                const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+                const { labelPosition, quadrant } = arc;
+                const outerR = Math.max(radius + line1MinLength, currentMarks[0].attribute.outerRadius);
+                const rd = r - outerR;
+                const x = Math.sqrt(r ** 2 - Math.abs(center.y - labelPosition.y) ** 2) - rd;
+                if (vutils.isValidNumber(x)) {
+                    arc.pointB = {
+                        x: center.x + x * (isQuadrantLeft(quadrant) ? -1 : 1),
+                        y: labelPosition.y
+                    };
+                }
+                else {
+                    arc.pointB = { x: NaN, y: NaN };
+                }
+            }
+        }
+        _storeY(arcs) {
+            for (const arc of arcs) {
+                if (arc.labelVisible) {
+                    arc.lastLabelY = arc.labelPosition.y;
+                }
+            }
+        }
+        _computeYRange(arc, attribute, currentMarks) {
+            const center = { x: currentMarks[0].attribute?.x ?? 0, y: currentMarks[0].attribute?.y ?? 0 };
+            const plotRect = { width: center.x * 2, height: center.y * 2 };
+            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const line1MinLength = attribute.line.line1MinLength;
+            const { width, height } = plotRect;
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+            const r = this._computeLayoutRadius(height / 2, attribute, currentMarks);
+            const cx = Math.abs(arc.center.x - width / 2);
+            const cy = arc.center.y - height / 2;
+            let a;
+            let b;
+            let c;
+            if (vutils.isNumberClose(width / 2, cx)) {
+                a = 0;
+                b = 1;
+                c = -cy;
+            }
+            else if (vutils.isNumberClose(height / 2, cy)) {
+                a = 1;
+                b = 0;
+                c = -cx;
+            }
+            else {
+                const k = -1 / (cy / cx);
+                a = k;
+                b = -1;
+                c = cy - k * cx;
+            }
+            const points = lineCirclePoints(a, b, c, line1MinLength + radius - r, 0, r);
+            if (points.length < 2) {
+                return;
+            }
+            let min;
+            let max;
+            if (points[0].x > points[1].x) {
+                points.reverse();
+            }
+            if (points[0].x < 0) {
+                if (vutils.isNumberClose(points[0].y, points[1].y)) {
+                    if (Math.abs(arc.middleAngle) < Math.PI / 2) {
+                        min = 0;
+                        max = points[1].y + height / 2;
+                    }
+                    else {
+                        min = points[1].y + height / 2;
+                        max = height;
+                    }
+                }
+                else if (points[0].y < points[1].y) {
+                    min = 0;
+                    max = points[1].y + height / 2;
+                }
+                else {
+                    min = points[1].y + height / 2;
+                    max = plotRect.height;
+                }
+            }
+            else {
+                min = Math.min(points[0].y, points[1].y) + height / 2;
+                max = Math.max(points[0].y, points[1].y) + height / 2;
+            }
+            arc.labelYRange = [min, max];
+        }
+        _computeLayoutRadius(halfYLength, attribute, currentMarks) {
+            const labelConfig = attribute;
+            const layoutArcGap = labelConfig.layoutArcGap;
+            const line1MinLength = labelConfig.line.line1MinLength;
+            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height);
+            const outerR = radius + line1MinLength;
+            const a = outerR - layoutArcGap;
+            return Math.max((a ** 2 + halfYLength ** 2) / (2 * a), outerR);
+        }
+        _findNeighborIndex(arcs, priorityArc) {
+            const index = priorityArc.originIndex;
+            let lastIndex = -1;
+            let nextIndex = -1;
+            for (let i = index - 1; i >= 0; i--) {
+                if (arcs[i].labelVisible) {
+                    lastIndex = i;
+                    break;
+                }
+            }
+            for (let i = index + 1; i < arcs.length; i++) {
+                if (arcs[i].labelVisible) {
+                    nextIndex = i;
+                    break;
+                }
+            }
+            return {
+                lastIndex,
+                nextIndex
+            };
+        }
+        _twoWayShift(arcs, lastArc, nextArc, nextIndex) {
+            const delta = nextArc.getLabelBounds().y1 - lastArc.getLabelBounds().y2;
+            if (vutils.isLess(delta, 0)) {
+                const i = this._shiftY(arcs, nextIndex, arcs.length - 1, -delta);
+                this._shiftY(arcs, i, 0, delta / 2);
+            }
+        }
+        _restoreY(arcs) {
+            for (const arc of arcs) {
+                if (arc.labelVisible) {
+                    arc.labelPosition.y = arc.lastLabelY;
+                }
+            }
+        }
+        _checkYRange(arcs) {
+            for (const arc of arcs) {
+                const { labelYRange, labelPosition } = arc;
+                if (arc.labelVisible &&
+                    labelYRange &&
+                    (vutils.isLess(labelPosition.y, labelYRange[0]) || vutils.isGreater(labelPosition.y, labelYRange[1]))) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        _coverLabels(arcs) {
+            if (arcs.length <= 1) {
+                return;
+            }
+            let lastBounds = arcs[0].getLabelBounds();
+            for (let i = 1; i < arcs.length; i++) {
+                const bounds = arcs[i].getLabelBounds();
+                if (!checkBoundsOverlap(lastBounds, bounds)) {
+                    lastBounds = bounds;
+                }
+                else {
+                    arcs[i].labelVisible = false;
+                }
+            }
+        }
+        computeRadius(r, width, height, k) {
+            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k);
+        }
+        computeLayoutRadius(width, height) {
+            return Math.min(width / 2, height / 2);
+        }
+        computeLayoutOuterRadius(r, width, height) {
+            return r / (Math.min(width, height) / 2);
+        }
+        computeDatumRadius(width, height, outerRadius) {
+            const outerRadiusRatio = this.computeLayoutOuterRadius(outerRadius, width, height);
+            return this.computeLayoutRadius(width ? width : 0, height ? height : 0) * outerRadiusRatio;
+        }
+    }
+
     const labelComponentMap = {
         rect: RectLabel,
-        symbol: SymbolLabel
+        symbol: SymbolLabel,
+        arc: ArcLabel
     };
     class DataLabel extends AbstractComponent {
         name = 'data-label';
@@ -2619,6 +3458,7 @@
         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";
     })(exports.AXIS_ELEMENT_NAME || (exports.AXIS_ELEMENT_NAME = {}));
     exports.AxisStateValue = void 0;
     (function (AxisStateValue) {
@@ -2801,7 +3641,7 @@
             }
         };
         _renderInner(container) {
-            const { title, label, tick, line, grid, items, panel } = this.attribute;
+            const { title, label, tick, line, grid, items } = this.attribute;
             const axisContainer = vrender.createGroup({ x: 0, y: 0, zIndex: 1 });
             axisContainer.name = exports.AXIS_ELEMENT_NAME.axisContainer;
             axisContainer.id = this._getNodeId('container');
@@ -2825,7 +3665,9 @@
                     items.forEach((axisItems, layer) => {
                         const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer);
                         const labels = layerLabelGroup.getChildren();
-                        this.handleLabelsOverlap(labels, axisItems, layer, items.length);
+                        this.beforeLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                        this.handleLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+                        this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
                     });
                 }
                 if (grid?.visible) {
@@ -2835,22 +3677,6 @@
             if (title?.visible) {
                 this.renderTitle(axisContainer);
             }
-            if (panel && panel.visible) {
-                const axisContainerBounds = axisContainer.AABBBounds;
-                const bgRect = vrender.createRect({
-                    x: axisContainerBounds.x1,
-                    y: axisContainerBounds.y1,
-                    width: axisContainerBounds.width(),
-                    height: axisContainerBounds.height(),
-                    ...panel.style
-                });
-                bgRect.name = exports.AXIS_ELEMENT_NAME.background;
-                bgRect.id = this._getNodeId('background');
-                if (!vutils.isEmpty(panel.state)) {
-                    bgRect.states = vutils.merge({}, DEFAULT_STATES$2, panel.state);
-                }
-                axisContainer.insertBefore(bgRect, axisContainer.firstChild);
-            }
         }
         renderTicks(container) {
             const tickLineItems = this.getTickLineItems();
@@ -2865,7 +3691,7 @@
                 line.name = exports.AXIS_ELEMENT_NAME.tick;
                 line.id = this._getNodeId(item.id);
                 if (vutils.isEmpty(this.attribute.tick?.state)) {
-                    line.states = null;
+                    line.states = DEFAULT_STATES$2;
                 }
                 else {
                     const data = this.data[index];
@@ -2891,7 +3717,7 @@
                         line.name = exports.AXIS_ELEMENT_NAME.subTick;
                         line.id = this._getNodeId(`${index}`);
                         if (vutils.isEmpty(subTick.state)) {
-                            line.states = null;
+                            line.states = DEFAULT_STATES$2;
                         }
                         else {
                             const subTickLineState = vutils.merge({}, DEFAULT_STATES$2, subTick.state);
@@ -2928,7 +3754,7 @@
                 text.name = exports.AXIS_ELEMENT_NAME.label;
                 text.id = this._getNodeId(`layer${layer}-label-${item.id}`);
                 if (vutils.isEmpty(this.attribute.label?.state)) {
-                    text.states = null;
+                    text.states = DEFAULT_STATES$2;
                 }
                 else {
                     const labelState = vutils.merge({}, DEFAULT_STATES$2, this.attribute.label.state);
@@ -2984,7 +3810,17 @@
         getTextAlign(vector) {
             let align = 'center';
             if (vutils.isNumberClose(vector[0], 0)) {
-                align = 'center';
+                if (vutils.isNumberClose(vector[1], 0)) {
+                    if (Object.is(vector[1], -0)) {
+                        align = 'start';
+                    }
+                    else if (Object.is(vector[0], -0)) {
+                        align = 'end';
+                    }
+                }
+                else {
+                    align = 'center';
+                }
             }
             else if (vector[0] > 0) {
                 align = 'start';
@@ -3112,7 +3948,7 @@
             }
             const point = this.getVerticalCoord(tickDatum.point, offset, inside);
             const vector = this.getVerticalVector(offset, inside, point);
-            const text = formatMethod ? formatMethod(tickDatum.label, tickDatum, index, tickData, layer) : tickDatum.label;
+            const text = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
             let { style: textStyle } = tagAttributes;
             textStyle = vutils.isFunction(textStyle)
                 ? vutils.merge({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer))
@@ -3373,18 +4209,90 @@
             return;
         }
         labels.forEach(label => {
-            const limitLabelLength = label.attribute.angle === 0 || vutils.isNil(label.attribute.angle)
+            if ((orient === 'top' || orient === 'bottom') && Math.floor(label.AABBBounds.height()) <= limitLength) {
+                return;
+            }
+            if ((orient === 'left' || orient === 'right') && Math.floor(label.AABBBounds.width()) <= limitLength) {
+                return;
+            }
+            let limitLabelLength = label.attribute.angle === 0 || vutils.isNil(label.attribute.angle)
                 ? orient === 'top' || orient === 'bottom'
                     ? null
                     : limitLength
                 : Math.abs(limitLength / Math.sin(label.attribute.angle));
+            if (vutils.isValidNumber(label.attribute.maxLineWidth)) {
+                limitLabelLength = vutils.isValidNumber(limitLabelLength)
+                    ? Math.min(label.attribute.maxLineWidth, limitLabelLength)
+                    : label.attribute.maxLineWidth;
+            }
             label.setAttributes({
                 maxLineWidth: limitLabelLength,
-                ellipsis
+                ellipsis: label.attribute.ellipsis || ellipsis
             });
         });
     }
 
+    function alignAxisLabels(labels, start, containerSize, orient, align) {
+        if (orient === 'right' || orient === 'left') {
+            if (align === 'left') {
+                const flag = orient === 'right' ? 0 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        x: start + containerSize * flag,
+                        textAlign: 'left'
+                    });
+                });
+            }
+            else if (align === 'right') {
+                const flag = orient === 'right' ? 1 : 0;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        x: start + containerSize * flag,
+                        textAlign: 'right'
+                    });
+                });
+            }
+            else if (align === 'center') {
+                const flag = orient === 'right' ? 1 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        x: start + containerSize * 0.5 * flag,
+                        textAlign: 'center'
+                    });
+                });
+            }
+        }
+        else if (orient === 'bottom' || orient === 'top') {
+            if (align === 'top') {
+                const flag = orient === 'bottom' ? 0 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        y: start + containerSize * flag,
+                        textBaseline: 'top'
+                    });
+                });
+            }
+            else if (align === 'bottom') {
+                const flag = orient === 'bottom' ? 1 : 0;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        y: start + containerSize * flag,
+                        textBaseline: 'bottom'
+                    });
+                });
+            }
+            else if (align === 'middle') {
+                const flag = orient === 'bottom' ? 1 : -1;
+                labels.forEach(label => {
+                    label.setAttributes({
+                        y: start + containerSize * 0.5 * flag,
+                        textBaseline: 'middle'
+                    });
+                });
+            }
+        }
+    }
+
     function getCirclePoints(center, count, radius, startAngle, endAngle) {
         const points = [];
         const range = endAngle - startAngle;
@@ -3402,6 +4310,25 @@
                 this.setMode(mode);
             }
         }
+        _renderInner(container) {
+            super._renderInner(container);
+            const { panel } = this.attribute;
+            if (panel && panel.visible) {
+                const axisContainer = this.axisContainer;
+                const axisContainerBounds = axisContainer.AABBBounds;
+                const bgRect = vrender.createRect({
+                    x: axisContainerBounds.x1,
+                    y: axisContainerBounds.y1,
+                    width: axisContainerBounds.width(),
+                    height: axisContainerBounds.height(),
+                    ...panel.style
+                });
+                bgRect.name = exports.AXIS_ELEMENT_NAME.background;
+                bgRect.id = this._getNodeId('background');
+                bgRect.states = vutils.merge({}, DEFAULT_STATES$1, panel.state ?? {});
+                axisContainer.insertBefore(bgRect, axisContainer.firstChild);
+            }
+        }
         renderLine(container) {
             const { start, end, line } = this.attribute;
             const { startSymbol, endSymbol, style, breakRange, breakShape, breakShapeStyle, state, ...restLineAttrs } = line;
@@ -3566,13 +4493,11 @@
                     textBaseline,
                     ...textStyle
                 },
-                state: vutils.isEmpty(state)
-                    ? null
-                    : {
-                        text: state.text,
-                        shape: state.shape,
-                        panel: state.background
-                    }
+                state: {
+                    text: vutils.merge({}, DEFAULT_STATES$1, state?.text),
+                    shape: vutils.merge({}, DEFAULT_STATES$1, state?.shape),
+                    panel: vutils.merge({}, DEFAULT_STATES$1, state?.background)
+                }
             };
             attrs.angle = angle;
             if (shape && shape.visible) {
@@ -3694,7 +4619,7 @@
             const { verticalFactor = 1 } = this.attribute;
             const factor = (inside ? 1 : -1) * verticalFactor;
             if (vutils.isNumberClose(vector[1], 0)) {
-                if (vutils.isNumberClose(vector[0], 0)) {
+                if (vutils.isNumberClose(vector[0], 0) && !Object.is(vector[0], -0) && !Object.is(vector[1], -0)) {
                     base = factor === 1 ? 'bottom' : 'top';
                 }
                 else {
@@ -3709,24 +4634,21 @@
             }
             return base;
         }
-        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
-            if (vutils.isEmpty(labelShapes)) {
-                return;
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            const orient = this.attribute.orient;
+            if (orient === 'left' || orient === 'right') {
+                rotateYAxis(orient, labelShapes);
             }
-            const { verticalLimitSize, label, title, line, tick, orient } = this.attribute;
-            const labelSpace = label.space ?? 4;
-            let limitLength = verticalLimitSize;
-            let titleHeight = 0;
-            let titleSpacing = 0;
-            const axisLineWidth = line?.visible ? line.style.lineWidth ?? 1 : 0;
-            const tickLength = tick?.visible ? tick.length ?? 4 : 0;
-            if (title?.visible) {
-                titleHeight = measureTextSize(title.text, title.textStyle).height;
-                titleSpacing = title.space;
+            else if (orient === 'bottom' || orient === 'top') {
+                rotateXAxis(orient, labelShapes);
             }
-            if (limitLength) {
-                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+        }
+        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            if (vutils.isEmpty(labelShapes)) {
+                return;
             }
+            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 } = label;
             if (vutils.isFunction(layoutFunc)) {
                 layoutFunc(labelShapes, labelData, layer, this);
@@ -3754,6 +4676,79 @@
                 }
             }
         }
+        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            const { verticalLimitSize, orient } = this.attribute;
+            const isHorizontal = orient === 'bottom' || orient === 'top';
+            const axisLabelContainerBounds = labelContainer.AABBBounds;
+            let axisLabelContainerSize = isHorizontal ? axisLabelContainerBounds.height() : axisLabelContainerBounds.width();
+            const { verticalMinSize } = this.attribute;
+            if (vutils.isValidNumber(verticalMinSize) && (!vutils.isValidNumber(verticalLimitSize) || verticalMinSize <= verticalLimitSize)) {
+                const minSize = this._getAxisLabelLimitLength(verticalMinSize, layerCount);
+                axisLabelContainerSize = Math.max(axisLabelContainerSize, minSize);
+                let x;
+                let y;
+                if (orient === 'left') {
+                    x = axisLabelContainerBounds.x2 - axisLabelContainerSize;
+                    y = axisLabelContainerBounds.y1;
+                }
+                else if (orient === 'right') {
+                    x = axisLabelContainerBounds.x1;
+                    y = axisLabelContainerBounds.y1;
+                }
+                else if (orient === 'top') {
+                    x = axisLabelContainerBounds.x1;
+                    y = axisLabelContainerBounds.y2 - axisLabelContainerSize;
+                }
+                else if (orient === 'bottom') {
+                    x = axisLabelContainerBounds.x1;
+                    y = axisLabelContainerBounds.y1;
+                }
+                const bgRect = vrender.createRect({
+                    x,
+                    y,
+                    width: isHorizontal ? axisLabelContainerBounds.width() : axisLabelContainerSize,
+                    height: isHorizontal ? axisLabelContainerSize : axisLabelContainerBounds.height(),
+                    pickable: false
+                });
+                bgRect.name = exports.AXIS_ELEMENT_NAME.axisLabelBackground;
+                bgRect.id = this._getNodeId('axis-label-background');
+                labelContainer.insertBefore(bgRect, labelContainer.firstChild);
+            }
+            if (vutils.isValid(this.attribute.label.containerAlign)) {
+                let start;
+                if (orient === 'left') {
+                    start = axisLabelContainerBounds.x2;
+                }
+                else if (orient === 'right') {
+                    start = axisLabelContainerBounds.x1;
+                }
+                else if (orient === 'top') {
+                    start = axisLabelContainerBounds.y2;
+                }
+                else if (orient === 'bottom') {
+                    start = axisLabelContainerBounds.y1;
+                }
+                alignAxisLabels(labelShapes, start, axisLabelContainerSize, orient, this.attribute.label.containerAlign);
+            }
+        }
+        _getAxisLabelLimitLength(limitSize, layerCount) {
+            const { label, title, line, tick } = this.attribute;
+            const labelSpace = label.space ?? 4;
+            let limitLength = limitSize;
+            let titleHeight = 0;
+            let titleSpacing = 0;
+            const axisLineWidth = line?.visible ? line.style.lineWidth ?? 1 : 0;
+            const tickLength = tick?.visible ? tick.length ?? 4 : 0;
+            if (title?.visible) {
+                titleHeight = measureTextSize(title.text, title.textStyle).height;
+                const padding = vutils.normalizePadding(title.padding);
+                titleSpacing = title.space + padding[0] + padding[2];
+            }
+            if (limitLength) {
+                limitLength = (limitLength - labelSpace - titleSpacing - titleHeight - axisLineWidth - tickLength) / layerCount;
+            }
+            return limitLength;
+        }
     }
 
     class CircleAxis extends AxisBase {
@@ -3850,13 +4845,11 @@
                     textAlign: 'center',
                     ...textStyle
                 },
-                state: vutils.isEmpty(state)
-                    ? null
-                    : {
-                        text: state.text,
-                        shape: state.shape,
-                        panel: state.background
-                    }
+                state: {
+                    text: vutils.merge({}, DEFAULT_STATES$1, state?.text),
+                    shape: vutils.merge({}, DEFAULT_STATES$1, state?.shape),
+                    panel: vutils.merge({}, DEFAULT_STATES$1, state?.background)
+                }
             };
             const { angle } = restAttrs;
             attrs.angle = angle;
@@ -4008,7 +5001,13 @@
             }
             return base;
         }
-        handleLabelsOverlap(labelShapes, labelData, layer, layerCount) {
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             return;
         }
     }
@@ -8915,6 +9914,17 @@
         }
     }
 
+    exports.IOperateType = void 0;
+    (function (IOperateType) {
+        IOperateType["drawStart"] = "drawStart";
+        IOperateType["drawEnd"] = "drawEnd";
+        IOperateType["drawing"] = "drawing";
+        IOperateType["moving"] = "moving";
+        IOperateType["moveStart"] = "moveStart";
+        IOperateType["moveEnd"] = "moveEnd";
+        IOperateType["brushClear"] = "brushClear";
+    })(exports.IOperateType || (exports.IOperateType = {}));
+
     const DEFAULT_BRUSH_ATTRIBUTES = {
         brushMode: 'single',
         brushType: 'rect',
@@ -8935,6 +9945,7 @@
             x2: Infinity
         }
     };
+    const DEFAULT_SIZE_THRESHOLD = 5;
 
     const delayMap = {
         debounce: vutils.debounce,
@@ -8946,6 +9957,7 @@
         _container;
         _activeDrawState = false;
         _cacheDrawPoints = [];
+        _isDrawedBeforeEnd = false;
         _activeMoveState = false;
         _operatingMaskMoveDx = 0;
         _operatingMaskMoveDy = 0;
@@ -9001,36 +10013,41 @@
             this._activeMoveState && this._moving(e);
         };
         _onBrushEnd = (e) => {
-            if (this._outOfInteractiveRange(e)) {
-                return;
+            const { removeOnClick = true } = this.attribute;
+            if (this._activeDrawState && !this._isDrawedBeforeEnd && removeOnClick) {
+                this._container.incrementalClearChild();
+                this._updateDragMaskCallback &&
+                    this._updateDragMaskCallback({
+                        operateType: exports.IOperateType.brushClear,
+                        operateMask: this._operatingMask,
+                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+                    });
+            }
+            else if (!this._outOfInteractiveRange(e)) {
+                this._updateDragMaskCallback &&
+                    this._updateDragMaskCallback({
+                        operateType: this._activeDrawState ? exports.IOperateType.drawEnd : exports.IOperateType.moveEnd,
+                        operateMask: this._operatingMask,
+                        operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
+                    });
             }
-            this._updateDragMaskCallback &&
-                this._updateDragMaskCallback({
-                    operateType: this._activeDrawState ? 'brushEnd' : 'brushMaskUp',
-                    operateMask: this._operatingMask,
-                    operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
-                });
             this._activeDrawState = false;
             this._activeMoveState = false;
-            this._operatingMask.setAttribute('pickable', false);
+            this._isDrawedBeforeEnd = false;
+            this._operatingMask?.setAttribute('pickable', false);
         };
         _initDraw(e) {
-            const { brushMode, removeOnClick } = this.attribute;
+            const { brushMode } = this.attribute;
             const pos = this.eventPosToStagePos(e);
             this._cacheDrawPoints = [pos];
-            if (!this._operatingMask) {
-                this._addBrushMask();
-            }
-            if (brushMode === 'single' && removeOnClick) {
+            this._isDrawedBeforeEnd = false;
+            if (brushMode === 'single') {
                 this._container.incrementalClearChild();
-                this._addBrushMask();
-            }
-            else if (brushMode === 'multiple') {
-                this._addBrushMask();
             }
+            this._addBrushMask();
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushStart',
+                    operateType: exports.IOperateType.drawStart,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9051,13 +10068,16 @@
             this._operatingMask.setAttribute('pickable', true);
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushMaskDown',
+                    operateType: exports.IOperateType.moveStart,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
         }
         _drawing(e) {
             const pos = this.eventPosToStagePos(e);
+            const { x1 = 0, x2 = 0, y1 = 0, y2 = 0 } = this._operatingMask?._AABBBounds;
+            const { sizeThreshold = DEFAULT_SIZE_THRESHOLD } = this.attribute;
+            this._isDrawedBeforeEnd = !!(Math.abs(x2 - x1) > sizeThreshold || Math.abs(y1 - y2) > sizeThreshold);
             if (this._cacheDrawPoints.length > 0) {
                 const lastPos = this._cacheDrawPoints[this._cacheDrawPoints.length - 1];
                 if (pos.x === lastPos?.x && pos.y === lastPos?.y) {
@@ -9070,7 +10090,7 @@
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushing',
+                    operateType: exports.IOperateType.drawing,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9094,7 +10114,7 @@
             this._brushMaskAABBBoundsDict[this._operatingMask.name] = this._operatingMask.AABBBounds;
             this._updateDragMaskCallback &&
                 this._updateDragMaskCallback({
-                    operateType: 'brushMaskMove',
+                    operateType: exports.IOperateType.moving,
                     operateMask: this._operatingMask,
                     operatedMaskAABBBounds: this._brushMaskAABBBoundsDict
                 });
@@ -9621,9 +10641,11 @@
         }
     }
 
-    const version = "0.14.0-alpha.8";
+    const version = "0.14.0";
 
     exports.AbstractComponent = AbstractComponent;
+    exports.ArcInfo = ArcInfo;
+    exports.ArcLabel = ArcLabel;
     exports.BasePlayer = BasePlayer;
     exports.Brush = Brush;
     exports.CircleAxis = CircleAxis;