@visactor/vrender-components 0.14.6 → 0.15.0-alpha.5

package/dist/index.js

@@ -495,20 +495,6 @@
         const { r, g, b } = c.color;
         return '#' + vutils.ColorUtil.rgbToHex(r, g, b);
     }
-    function smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor) {
-        let result;
-        switch (fillStrategy) {
-            case 'base':
-                result = baseColor;
-                break;
-            case 'invertBase':
-                result = invertColor;
-                break;
-            case 'similarBase':
-                result = similarColor;
-        }
-        return result;
-    }
 
     function scale(vector, scale) {
         return [vector[0] * scale, vector[1] * scale];
@@ -1409,29 +1395,26 @@
         };
     }
 
-    function canPlace($, bitmap, bound, checkBound = true, pad = 0) {
-        let range = bound;
-        if (pad > 0) {
-            range = {
-                x1: bound.x1 - pad,
-                x2: bound.x2 + pad,
-                y1: bound.y1 - pad,
-                y2: bound.y2 + pad
-            };
-        }
-        range = boundToRange($, range);
+    function canPlace($, bitmap, bound, checkBound = true) {
+        const range = boundToRange($, bound);
         const outOfBounds = checkBound && bitmap.outOfBounds(range);
         if (outOfBounds) {
             return false;
         }
         return !bitmap.getRange(range);
     }
-    function placeToCandidates($, bitmap, text, candidates = [], clampForce = true, pad = 0) {
+    function canPlaceInside(textBound, shapeBound) {
+        if (!textBound || !shapeBound) {
+            return false;
+        }
+        return shapeBound.encloses(textBound);
+    }
+    function placeToCandidates($, bitmap, text, candidates = [], clampForce = true) {
         for (let i = 0; i < candidates.length; i++) {
             const tempText = text.clone();
             tempText.setAttributes(candidates[i]);
             tempText.update();
-            if (canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce, pad)) {
+            if (canPlace($, bitmap, boundToRange($, tempText.AABBBounds), clampForce)) {
                 bitmap.setRange(boundToRange($, tempText.AABBBounds, true));
                 return candidates[i];
             }
@@ -1439,15 +1422,13 @@
         return false;
     }
     function place($, bitmap, s, attrs, text, bounds, labeling) {
-        var _a, _b;
-        const clampForce = (_a = attrs.overlap) === null || _a === void 0 ? void 0 : _a.clampForce;
-        const overlapPadding = (_b = attrs.overlap) === null || _b === void 0 ? void 0 : _b.overlapPadding;
+        var _a, _b, _c;
         if (s.type === 'bound' || s.type === 'position') {
             if (vutils.isFunction(labeling)) {
                 const userPosition = vutils.isFunction(s.position) ? s.position(text.attribute) : s.position;
                 const positions = (userPosition || defaultLabelPosition(attrs.type));
                 const candidates = positions.map(p => labeling(text.AABBBounds, bounds, p, attrs.offset));
-                return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
+                return placeToCandidates($, bitmap, text, candidates, (_a = attrs.overlap) === null || _a === void 0 ? void 0 : _a.clampForce);
             }
             return false;
         }
@@ -1456,14 +1437,14 @@
             const candidates = offset.map(dy => {
                 return { x: text.attribute.x, y: text.attribute.y + dy };
             });
-            return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
+            return placeToCandidates($, bitmap, text, candidates, (_b = attrs.overlap) === null || _b === void 0 ? void 0 : _b.clampForce);
         }
         if (s.type === 'moveX') {
             const offset = s.offset ? (vutils.isFunction(s.offset) ? s.offset(text.attribute) : s.offset) : [];
             const candidates = offset.map(dx => {
                 return { x: text.attribute.x + dx, y: text.attribute.y };
             });
-            return placeToCandidates($, bitmap, text, candidates, clampForce, overlapPadding);
+            return placeToCandidates($, bitmap, text, candidates, (_c = attrs.overlap) === null || _c === void 0 ? void 0 : _c.clampForce);
         }
         return false;
     }
@@ -1551,14 +1532,8 @@
     };
 
     class LabelBase extends AbstractComponent {
-        setBitmap(bitmap) {
-            this._bitmap = bitmap;
-        }
-        setBitmapTool(bmpTool) {
-            this._bmpTool = bmpTool;
-        }
-        constructor(attributes) {
-            super(vutils.merge({}, LabelBase.defaultAttributes, attributes));
+        constructor() {
+            super(...arguments);
             this.name = 'label';
             this._onHover = (e) => {
                 const target = e.target;
@@ -1606,11 +1581,15 @@
                 }
             };
         }
-        labeling(textBounds, graphicBounds, position, offset) {
-            return;
+        setBitmap(bitmap) {
+            this._bitmap = bitmap;
         }
-        _labelLine(text) {
-            return;
+        setBitmapTool(bmpTool) {
+            this._bmpTool = bmpTool;
+        }
+        layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
+            const arcs = [];
+            return arcs;
         }
         render() {
             this._prepare();
@@ -1624,14 +1603,14 @@
                 labels = customLayoutFunc(data, (d) => this._idToGraphic.get(d.id));
             }
             else {
-                labels = this._layout(data);
-            }
-            if (vutils.isFunction(customOverlapFunc)) {
-                labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
-            }
-            else {
-                if (overlap !== false) {
-                    labels = this._overlapping(labels);
+                labels = this.layout(data);
+                if (vutils.isFunction(customOverlapFunc)) {
+                    labels = customOverlapFunc(labels, (d) => this._idToGraphic.get(d.id));
+                }
+                else {
+                    if (overlap !== false) {
+                        labels = this._overlapping(labels);
+                    }
                 }
             }
             if (smartInvert !== false) {
@@ -1700,24 +1679,49 @@
                 }
             }
         }
-        _layout(data = []) {
+        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 = Object.assign(Object.assign({ 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) {
-                    labelAttribute.x = textLocation.x;
-                    labelAttribute.y = textLocation.y;
-                    text.setAttributes(textLocation);
+                if (!textLocation) {
+                    continue;
                 }
+                labelAttribute.x = textLocation.x;
+                labelAttribute.y = textLocation.y;
+                text.setAttributes(textLocation);
                 labels.push(text);
             }
+            if (this.attribute.type === 'arc') {
+                const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '...' });
+                const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
+                const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
+                const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
+                const arcs = this.layoutArcLabels(position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
+                for (let i = 0; i < data.length; i++) {
+                    const textData = data[i];
+                    const basedArc = arcs.find(arc => arc.refDatum.id === textData.id);
+                    const labelAttribute = {
+                        visible: basedArc.labelVisible,
+                        x: basedArc.labelPosition.x,
+                        y: basedArc.labelPosition.y,
+                        angle: basedArc.angle,
+                        maxLineWidth: basedArc.labelLimit,
+                        points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
+                            ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
+                            : undefined
+                    };
+                    labels[i].setAttributes(labelAttribute);
+                }
+            }
             return labels;
         }
         _overlapping(labels) {
@@ -1735,7 +1739,7 @@
             if (size.width === 0 || size.height === 0) {
                 return labels;
             }
-            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [], overlapPadding } = option;
+            const { avoidBaseMark, strategy = [], hideOnHit = true, clampForce = true, avoidMarks = [] } = option;
             const bmpTool = this._bmpTool || bitmapTool(size.width, size.height);
             const bitmap = this._bitmap || bmpTool.bitmap();
             const checkBounds = strategy.some(s => s.type === 'bound');
@@ -1763,16 +1767,13 @@
                 const text = labels[i];
                 const baseMark = this._idToGraphic.get(text.attribute.id);
                 text.update();
-                if (!vutils.isRectIntersect(baseMark.AABBBounds, { x1: 0, x2: bmpTool.width, y1: 0, y2: bmpTool.height }, true)) {
-                    continue;
-                }
-                if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce, overlapPadding)) {
+                if (canPlace(bmpTool, bitmap, text.AABBBounds, clampForce)) {
                     if (!checkBounds) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
                         continue;
                     }
-                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && this._canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
+                    if (checkBounds && (baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds) && canPlaceInside(text.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds)) {
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
                         continue;
@@ -1795,7 +1796,7 @@
                             x2: text.AABBBounds.x2 + dx,
                             y1: text.AABBBounds.y1 + dy,
                             y2: text.AABBBounds.y2 + dy
-                        }, undefined, overlapPadding)) {
+                        })) {
                         text.setAttributes({ x: text.attribute.x + dx, y: text.attribute.y + dy });
                         bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, true));
                         result.push(text);
@@ -1826,17 +1827,9 @@
                 });
         }
         _renderLabels(labels) {
-            const disableAnimation = this._enableAnimation === false || this.attribute.animation === false;
-            if (disableAnimation) {
-                this._renderWithOutAnimation(labels);
-            }
-            else {
-                this._renderWithAnimation(labels);
-            }
-        }
-        _renderWithAnimation(labels) {
             var _a, _b, _c, _d, _e;
             const animationConfig = ((_a = this.attribute.animation) !== null && _a !== void 0 ? _a : {});
+            const disableAnimation = this._enableAnimation === false || animationConfig === false;
             const mode = (_b = animationConfig.mode) !== null && _b !== void 0 ? _b : DefaultLabelAnimation.mode;
             const duration = (_c = animationConfig.duration) !== null && _c !== void 0 ? _c : DefaultLabelAnimation.duration;
             const easing = (_d = animationConfig.easing) !== null && _d !== void 0 ? _d : DefaultLabelAnimation.easing;
@@ -1845,18 +1838,27 @@
             const prevTextMap = this._graphicToText || new Map();
             const texts = [];
             labels.forEach((text, index) => {
-                var _a;
-                const labelLine = this._labelLine(text);
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
+                    ? vrender.createLine({
+                        visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
+                        stroke: (_f = (_e = (_d = text.attribute) === null || _d === void 0 ? void 0 : _d.line) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.fill,
+                        lineWidth: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.lineWidth) !== null && _k !== void 0 ? _k : 1,
+                        points: (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.points
+                    })
+                    : undefined;
                 const relatedGraphic = this._idToGraphic.get(text.attribute.id);
                 const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
                 if (state === 'enter') {
                     texts.push(text);
                     currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
-                    if (relatedGraphic) {
+                    if (!disableAnimation && relatedGraphic) {
                         const { from, to } = getAnimationAttributes(text.attribute, 'fadeIn');
                         this.add(text);
-                        labelLine && this.add(labelLine);
-                        relatedGraphic.once('animate-bind', () => {
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
+                        relatedGraphic.onAnimateBind = () => {
                             text.setAttributes(from);
                             const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
                                 mode,
@@ -1866,69 +1868,58 @@
                                 delay
                             });
                             relatedGraphic.on('afterAttributeUpdate', listener);
-                        });
+                        };
+                    }
+                    else {
+                        this.add(text);
+                        if (labelLine) {
+                            this.add(labelLine);
+                        }
                     }
                 }
-                else if (state === 'update') {
+                if (state === 'update') {
                     const prevLabel = prevTextMap.get(relatedGraphic);
                     prevTextMap.delete(relatedGraphic);
                     currentTextMap.set(relatedGraphic, prevLabel);
-                    const prevText = prevLabel.text;
-                    prevText.animate().to(text.attribute, duration, easing);
-                    if (prevLabel.labelLine) {
-                        prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
-                            points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points
-                        }), duration, easing);
+                    if (!disableAnimation) {
+                        const prevText = prevLabel.text;
+                        prevText.animate().to(text.attribute, duration, easing);
+                        if (prevLabel.labelLine) {
+                            prevLabel.labelLine.animate().to(vutils.merge({}, prevLabel.labelLine.attribute, {
+                                points: (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.points
+                            }), duration, easing);
+                        }
+                        if (animationConfig.increaseEffect !== false &&
+                            prevText.attribute.text !== text.attribute.text &&
+                            vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
+                            prevText
+                                .animate()
+                                .play(new vrender.IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
+                        }
                     }
-                    if (animationConfig.increaseEffect !== false &&
-                        prevText.attribute.text !== text.attribute.text &&
-                        vutils.isValidNumber(Number(prevText.attribute.text) * Number(text.attribute.text))) {
-                        prevText
-                            .animate()
-                            .play(new vrender.IncreaseCount({ text: prevText.attribute.text }, { text: text.attribute.text }, duration, easing));
+                    else {
+                        prevLabel.text.setAttributes(text.attribute);
+                        if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
+                            prevLabel.labelLine.setAttributes({ points: (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.points });
+                        }
                     }
                 }
             });
             prevTextMap.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(() => {
+                if (disableAnimation) {
                     this.removeChild(label.text);
                     if (label === null || label === void 0 ? void 0 : label.labelLine) {
                         this.removeChild(label.labelLine);
                     }
-                });
-            });
-            this._graphicToText = currentTextMap;
-        }
-        _renderWithOutAnimation(labels) {
-            const currentTextMap = new Map();
-            const prevTextMap = this._graphicToText || new Map();
-            labels.forEach(text => {
-                var _a;
-                const labelLine = this._labelLine(text);
-                const relatedGraphic = this._idToGraphic.get(text.attribute.id);
-                const state = (prevTextMap === null || prevTextMap === void 0 ? void 0 : prevTextMap.get(relatedGraphic)) ? 'update' : 'enter';
-                if (state === 'enter') {
-                    currentTextMap.set(relatedGraphic, labelLine ? { text, labelLine } : { text });
-                    this.add(text);
-                    if (labelLine) {
-                        this.add(labelLine);
-                    }
                 }
-                else if (state === 'update') {
-                    const prevLabel = prevTextMap.get(relatedGraphic);
-                    prevTextMap.delete(relatedGraphic);
-                    currentTextMap.set(relatedGraphic, prevLabel);
-                    prevLabel.text.setAttributes(text.attribute);
-                    if (prevLabel === null || prevLabel === void 0 ? void 0 : prevLabel.labelLine) {
-                        prevLabel.labelLine.setAttributes({ points: (_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points });
-                    }
-                }
-            });
-            prevTextMap.forEach(label => {
-                this.removeChild(label.text);
-                if (label === null || label === void 0 ? void 0 : label.labelLine) {
-                    this.removeChild(label.labelLine);
+                else {
+                    (_a = label.text) === null || _a === void 0 ? void 0 : _a.animate().to(getAnimationAttributes(label.text.attribute, 'fadeOut').to, duration, easing).onEnd(() => {
+                        this.removeChild(label.text);
+                        if (label === null || label === void 0 ? void 0 : label.labelLine) {
+                            this.removeChild(label.labelLine);
+                        }
+                    });
                 }
             });
             this._graphicToText = currentTextMap;
@@ -1999,20 +1990,21 @@
                     continue;
                 }
                 const baseMark = this._idToGraphic.get(label.attribute.id);
-                const isInside = this._canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
+                let isInside = canPlaceInside(label.AABBBounds, baseMark === null || baseMark === void 0 ? void 0 : baseMark.AABBBounds);
+                if (this.attribute.type === 'arc') {
+                    isInside = this.attribute.position === 'inside';
+                }
                 const backgroundColor = baseMark.attribute.fill;
                 const foregroundColor = label.attribute.fill;
                 const baseColor = backgroundColor;
                 const invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
-                const similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
+                const simialrColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
                 if (isInside) {
-                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
-                    fill && label.setAttributes({ fill });
+                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
                     if (label.attribute.lineWidth === 0) {
                         continue;
                     }
-                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
-                    stroke && label.setAttributes({ stroke });
+                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
                 }
                 else {
                     if (label.attribute.lineWidth === 0) {
@@ -2024,18 +2016,47 @@
                         });
                         continue;
                     }
-                    const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
-                    fill && label.setAttributes({ fill });
-                    const stroke = smartInvertStrategy(strokeStrategy, baseColor, invertColor, similarColor);
-                    stroke && label.setAttributes({ stroke });
+                    this.setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor);
+                    this.setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor);
                 }
             }
         }
-        _canPlaceInside(textBound, shapeBound) {
-            if (!textBound || !shapeBound) {
-                return false;
+        setFillStrategy(fillStrategy, label, baseColor, invertColor, simialrColor) {
+            switch (fillStrategy) {
+                case 'base':
+                    label.setAttributes({
+                        fill: baseColor
+                    });
+                    break;
+                case 'invertBase':
+                    label.setAttributes({
+                        fill: invertColor
+                    });
+                    break;
+                case 'similarBase':
+                    label.setAttributes({
+                        fill: simialrColor
+                    });
+            }
+        }
+        setStrokeStrategy(strokeStrategy, label, baseColor, invertColor, simialrColor) {
+            switch (strokeStrategy) {
+                case 'base':
+                    label.setAttributes({
+                        stroke: baseColor
+                    });
+                    break;
+                case 'invertBase':
+                    label.setAttributes({
+                        stroke: invertColor
+                    });
+                    break;
+                case 'similarBase':
+                    label.setAttributes({
+                        stroke: simialrColor
+                    });
+                    break;
             }
-            return shapeBound.encloses(textBound);
         }
         setLocation(point) {
             this.translateTo(point.x, point.y);
@@ -2047,16 +2068,6 @@
             this._enableAnimation = true;
         }
     }
-    LabelBase.defaultAttributes = {
-        textStyle: {
-            fontSize: 12,
-            textAlign: 'center',
-            textBaseline: 'middle',
-            boundsPadding: [-1, 0, -1, 0]
-        },
-        offset: 0,
-        pickable: false
-    };
 
     class SymbolLabel extends LabelBase {
         constructor(attributes) {
@@ -2411,31 +2422,6 @@
             }
             return { x: 0, y: 0 };
         }
-        _layout(data = []) {
-            const labels = super._layout(data);
-            const textBoundsArray = labels.map(label => this.getGraphicBounds(label));
-            const ellipsisLabelAttribute = Object.assign(Object.assign({}, this.attribute.textStyle), { text: '...' });
-            const ellipsisText = this._createLabelText(ellipsisLabelAttribute);
-            const ellipsisTextBounds = this.getGraphicBounds(ellipsisText);
-            const ellipsisWidth = ellipsisTextBounds.x2 - ellipsisTextBounds.x1;
-            const arcs = this.layoutArcLabels(this.attribute.position, this.attribute, Array.from(this._idToGraphic.values()), data, textBoundsArray, ellipsisWidth);
-            for (let i = 0; i < data.length; i++) {
-                const textData = data[i];
-                const basedArc = arcs.find(arc => arc.refDatum.id === textData.id);
-                const labelAttribute = {
-                    visible: basedArc.labelVisible,
-                    x: basedArc.labelPosition.x,
-                    y: basedArc.labelPosition.y,
-                    angle: basedArc.angle,
-                    maxLineWidth: basedArc.labelLimit,
-                    points: (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointA) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointB) && (basedArc === null || basedArc === void 0 ? void 0 : basedArc.pointC)
-                        ? [basedArc.pointA, basedArc.pointB, basedArc.pointC]
-                        : undefined
-                };
-                labels[i].setAttributes(labelAttribute);
-            }
-            return labels;
-        }
         layoutArcLabels(position, attribute, currentMarks, data, textBoundsArray, ellipsisWidth) {
             var _a;
             this._arcLeft.clear();
@@ -3002,18 +2988,6 @@
                 }
             }
         }
-        _labelLine(text) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
-                ? vrender.createLine({
-                    visible: (_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.visible) !== null && _c !== void 0 ? _c : true,
-                    stroke: (_f = (_e = (_d = text.attribute) === null || _d === void 0 ? void 0 : _d.line) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : (_g = text.attribute) === null || _g === void 0 ? void 0 : _g.fill,
-                    lineWidth: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.lineWidth) !== null && _k !== void 0 ? _k : 1,
-                    points: (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.points
-                })
-                : undefined;
-            return labelLine;
-        }
         computeRadius(r, width, height, centerOffset, k) {
             var _a;
             return ((_a = this.computeLayoutRadius(width ? width : 0, height ? height : 0) * r * (vutils.isNil(k) ? 1 : k) + centerOffset) !== null && _a !== void 0 ? _a : 0);
@@ -3021,9 +2995,6 @@
         computeLayoutRadius(width, height) {
             return Math.min(width / 2, height / 2);
         }
-        _canPlaceInside(textBound, shapeBound) {
-            return this.attribute.position === 'inside';
-        }
         computeLayoutOuterRadius(r, width, height) {
             return r / (Math.min(width, height) / 2);
         }
@@ -3088,8 +3059,7 @@
             const prevComponentMap = this._componentMap;
             for (let i = 0; i < dataLabels.length; i++) {
                 const dataLabel = dataLabels[i];
-                const labelComponent = labelComponentMap[dataLabel.type] || LabelBase;
-                if (labelComponent) {
+                if (labelComponentMap[dataLabel.type]) {
                     const { baseMarkGroupName } = dataLabel;
                     let component = this._componentMap.get(baseMarkGroupName);
                     if (component) {
@@ -3099,7 +3069,7 @@
                         currentComponentMap.set(baseMarkGroupName, component);
                     }
                     else {
-                        component = new labelComponent(dataLabel);
+                        component = new labelComponentMap[dataLabel.type](dataLabel);
                         component.setBitmap(bitmap);
                         component.setBitmapTool(tool);
                         this.add(component);
@@ -3132,156 +3102,6 @@
         pickable: false
     };
 
-    function getLinePath(points, closed) {
-        let path = '';
-        if (points.length === 0) {
-            return path;
-        }
-        points.forEach((point, index) => {
-            if (index === 0) {
-                path = `M${point.x},${point.y}`;
-            }
-            else {
-                path += `L${point.x},${point.y}`;
-            }
-        });
-        if (closed) {
-            path += 'Z';
-        }
-        return path;
-    }
-    function getArcPath(center, points, reverse, closed) {
-        let path = '';
-        if (!center || points.length === 0) {
-            return path;
-        }
-        const firstPoint = points[0];
-        const radius = vutils.PointService.distancePP(center, firstPoint);
-        const sweepFlag = reverse ? 0 : 1;
-        if (closed) {
-            path += `M${center.x},${center.y - radius}A${radius},${radius},0,0,${sweepFlag},${center.x},${center.y + radius}A${radius},${radius},0,0,${sweepFlag},${center.x},${center.y - radius}Z`;
-        }
-        else {
-            points.forEach((point, index) => {
-                if (index === 0) {
-                    path = `M${point.x},${point.y}`;
-                }
-                else {
-                    path += `A${radius},${radius},0,0,${sweepFlag},${point.x},${point.y}`;
-                }
-            });
-        }
-        return path;
-    }
-    function getRegionPath(from, to, attribute) {
-        const { type, closed } = attribute;
-        const reversePoints = to.slice(0).reverse();
-        let regionPath = '';
-        let nextPath = '';
-        if (type === 'line' && attribute.smoothLink && attribute.center) {
-            const fromStart = from[0];
-            const toEnd = reversePoints[0];
-            const center = attribute.center;
-            regionPath = getLinePath(from, !!closed);
-            nextPath = getLinePath(reversePoints, !!closed);
-            const toEndRadius = vutils.PointService.distancePP(toEnd, center);
-            const fromStartRadius = vutils.PointService.distancePP(fromStart, center);
-            regionPath += `A${toEndRadius},${toEndRadius},0,0,1,${toEnd.x},${toEnd.y}L${toEnd.x},${toEnd.y}`;
-            nextPath += `A${fromStartRadius},${fromStartRadius},0,0,0,${fromStart.x},${fromStart.y}`;
-        }
-        else if (type === 'circle') {
-            const { center } = attribute;
-            regionPath = getArcPath(center, from, false, !!closed);
-            nextPath = getArcPath(center, reversePoints, true, !!closed);
-        }
-        else if (type === 'line' || type === 'polygon') {
-            regionPath = getLinePath(from, !!closed);
-            nextPath = getLinePath(reversePoints, !!closed);
-        }
-        if (closed) {
-            regionPath += nextPath;
-        }
-        else {
-            nextPath = 'L' + nextPath.substring(1);
-            regionPath += nextPath;
-            regionPath += 'Z';
-        }
-        return regionPath;
-    }
-    class Grid extends AbstractComponent {
-        constructor(attributes) {
-            super(vutils.merge({}, Grid.defaultAttributes, attributes));
-            this.name = 'grid';
-        }
-        render() {
-            this.removeAllChild();
-            const { type, items, style, closed, alternateColor, depth = 0 } = this.attribute;
-            if (vutils.isEmpty(items)) {
-                return;
-            }
-            items.forEach((item, index) => {
-                const { id, points } = item;
-                let path = '';
-                if (type === 'line' || type === 'polygon') {
-                    path = getLinePath(points, !!closed);
-                }
-                else if (type === 'circle') {
-                    const { center } = this.attribute;
-                    path = getArcPath(center, points, false, !!closed);
-                }
-                const shape = vrender.createPath(Object.assign({ path, z: depth }, (vutils.isFunction(style) ? vutils.merge({}, Grid.defaultAttributes.style, style(item, index)) : style)));
-                shape.name = `${this.name}-line`;
-                shape.id = this._getNodeId(`path-${id}`);
-                this.add(shape);
-            });
-            if (depth && type === 'line') {
-                items.forEach((item, index) => {
-                    const { id, points } = item;
-                    const nextPoints = [];
-                    nextPoints.push(points[0]);
-                    const dir = { x: points[1].x - points[0].x, y: points[1].y - points[0].y };
-                    const dirLen = Math.sqrt(dir.x * dir.x + dir.y * dir.y);
-                    const ratio = depth / dirLen;
-                    nextPoints.push({ x: points[0].x + dir.x * ratio, y: points[0].y + dir.y * ratio });
-                    const path = getLinePath(nextPoints, !!closed);
-                    const deltaX = vutils.abs(nextPoints[0].x - nextPoints[1].x);
-                    const deltaY = vutils.abs(nextPoints[0].y - nextPoints[1].y);
-                    const shape = vrender.createPath(Object.assign({ path, z: 0, alpha: deltaX > deltaY ? ((points[1].x - points[0].x > 0 ? -1 : 1) * vutils.pi) / 2 : 0, beta: deltaX < deltaY ? -vutils.pi / 2 : 0, anchor3d: deltaX > deltaY ? [nextPoints[0].x, 0] : [0, nextPoints[0].y] }, (vutils.isFunction(style) ? vutils.merge({}, Grid.defaultAttributes.style, style(item, index)) : style)));
-                    shape.name = `${this.name}-line`;
-                    shape.id = this._getNodeId(`path-${id}`);
-                    this.add(shape);
-                });
-            }
-            if (items.length > 1 && alternateColor) {
-                const colors = vutils.isArray(alternateColor)
-                    ? alternateColor
-                    : [alternateColor, 'transparent'];
-                const getColor = (index) => colors[index % colors.length];
-                for (let index = 0; index < items.length - 1; index++) {
-                    const [prev, curr] = [items[index].points, items[index + 1].points];
-                    const path = getRegionPath(prev, curr, this.attribute);
-                    const shape = vrender.createPath({
-                        path,
-                        fill: getColor(index)
-                    });
-                    shape.name = `${this.name}-region`;
-                    shape.id = this._getNodeId(`region-${index}`);
-                    this.add(shape);
-                }
-            }
-        }
-        _getNodeId(id) {
-            return `${this.id}-${id}`;
-        }
-    }
-    Grid.defaultAttributes = {
-        style: {
-            lineWidth: 1,
-            stroke: '#416180'
-        },
-        zIndex: 0
-    };
-
     class Segment extends AbstractComponent {
         constructor(attributes) {
             super(vutils.merge({}, Segment.defaultAttributes, attributes));
@@ -3499,23 +3319,6 @@
                 stroke: '#000',
                 strokeOpacity: 1
             }
-        },
-        grid: {
-            style: {
-                lineWidth: 1,
-                stroke: '#999',
-                strokeOpacity: 1,
-                lineDash: [4, 4]
-            }
-        },
-        subGrid: {
-            visible: false,
-            style: {
-                lineWidth: 1,
-                stroke: '#999',
-                strokeOpacity: 1,
-                lineDash: [4, 4]
-            }
         }
     };
 
@@ -3612,7 +3415,7 @@
             }
         }
         _renderInner(container) {
-            const { title, label, tick, line, grid, items } = this.attribute;
+            const { title, label, tick, line, 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');
@@ -3641,9 +3444,6 @@
                         this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
                     });
                 }
-                if (grid === null || grid === void 0 ? void 0 : grid.visible) {
-                    this.renderGrid(container);
-                }
             }
             if (title === null || title === void 0 ? void 0 : title.visible) {
                 this.renderTitle(axisContainer);
@@ -3760,13 +3560,6 @@
             axisTitle.id = this._getNodeId('title');
             container.add(axisTitle);
         }
-        renderGrid(container) {
-            const { visible } = this.attribute.subGrid || {};
-            if (visible) {
-                this._renderGridByType('subGrid', container);
-            }
-            this._renderGridByType('grid', container);
-        }
         getVerticalCoord(point, offset, inside) {
             const vector = this.getVerticalVector(offset, inside, point);
             return {
@@ -3937,13 +3730,6 @@
             });
             return data;
         }
-        _renderGridByType(type, container) {
-            const gridAttrs = this.getGridAttribute(type);
-            const gridGroup = new Grid(Object.assign(Object.assign({ pickable: false }, gridAttrs), { zIndex: 0 }));
-            gridGroup.name = type === 'subGrid' ? `${exports.AXIS_ELEMENT_NAME.grid}-sub` : `${exports.AXIS_ELEMENT_NAME.grid}`;
-            gridGroup.id = this._getNodeId(type);
-            container.add(gridGroup);
-        }
     }
 
     const methods = {
@@ -4099,14 +3885,12 @@
     }
     function rotateYAxis(orient, items) {
         items.forEach((item, i) => {
-            item.attribute.angle &&
-                item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+            item.setAttributes(Object.assign(Object.assign({}, getYAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
         });
     }
     function rotateXAxis(orient, items) {
         items.forEach(item => {
-            item.attribute.angle &&
-                item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
+            item.setAttributes(Object.assign(Object.assign({}, getXAxisLabelAlign(orient, item.attribute.angle)), { angle: clampAngle(item.attribute.angle) }));
         });
     }
     function getXAxisLabelAlign(orient, angle = 0) {
@@ -4242,15 +4026,31 @@
         }
     }
 
-    function getCirclePoints(center, count, radius, startAngle, endAngle) {
-        const points = [];
-        const range = endAngle - startAngle;
-        for (let i = 0; i < count; i++) {
-            const angle = startAngle + (i * range) / count;
-            points.push(vutils.polarToCartesian(center, radius, angle));
+    class LineAxisMixin {
+        isInValidValue(value) {
+            return value < 0 || value > 1;
+        }
+        getTickCoord(tickValue) {
+            const { start } = this.attribute;
+            const axisVector = this.getRelativeVector();
+            return {
+                x: start.x + axisVector[0] * tickValue,
+                y: start.y + axisVector[1] * tickValue
+            };
+        }
+        getRelativeVector(point) {
+            const { start, end } = this.attribute;
+            return [end.x - start.x, end.y - start.y];
+        }
+        getVerticalVector(offset, inside = false, point) {
+            const { verticalFactor = 1 } = this.attribute;
+            const axisVector = this.getRelativeVector();
+            const normalizedAxisVector = normalize(axisVector);
+            const verticalVector = [normalizedAxisVector[1], normalizedAxisVector[0] * -1];
+            return scale(verticalVector, offset * (inside ? 1 : -1) * verticalFactor);
         }
-        return points;
     }
+
     class LineAxis extends AxisBase {
         constructor(attributes, mode) {
             super(vutils.merge({}, LineAxis.defaultAttributes, attributes), mode);
@@ -4288,28 +4088,6 @@
             axisLineGroup.id = this._getNodeId('line');
             container.add(axisLineGroup);
         }
-        isInValidValue(value) {
-            return value < 0 || value > 1;
-        }
-        getTickCoord(tickValue) {
-            const { start } = this.attribute;
-            const axisVector = this.getRelativeVector();
-            return {
-                x: start.x + axisVector[0] * tickValue,
-                y: start.y + axisVector[1] * tickValue
-            };
-        }
-        getRelativeVector() {
-            const { start, end } = this.attribute;
-            return [end.x - start.x, end.y - start.y];
-        }
-        getVerticalVector(offset, inside = false) {
-            const { verticalFactor = 1 } = this.attribute;
-            const axisVector = this.getRelativeVector();
-            const normalizedAxisVector = normalize(axisVector);
-            const verticalVector = [normalizedAxisVector[1], normalizedAxisVector[0] * -1];
-            return scale(verticalVector, offset * (inside ? 1 : -1) * verticalFactor);
-        }
         getTitleAttribute() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const _j = this.attribute.title, { position = 'middle', space = 4, textStyle = {}, autoRotate = true, shape, background, state } = _j, restAttrs = __rest(_j, ["position", "space", "textStyle", "autoRotate", "shape", "background", "state"]);
@@ -4394,7 +4172,7 @@
             }
             const offset = tickLength + labelLength + space;
             const titlePoint = this.getVerticalCoord(point, offset, false);
-            const vector = this.getVerticalVector(offset, false);
+            const vector = this.getVerticalVector(offset, false, { x: 0, y: 0 });
             let { angle } = restAttrs;
             let textAlign;
             if (position === 'start') {
@@ -4442,100 +4220,6 @@
             }
             return attrs;
         }
-        _getGridPoint(gridType, point) {
-            let gridPoints;
-            if (gridType === 'line') {
-                const { length } = this.attribute.grid;
-                const endPoint = this.getVerticalCoord(point, length, true);
-                gridPoints = [point, endPoint];
-            }
-            else if (gridType === 'circle' || gridType === 'polygon') {
-                const { center, sides, startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE } = this.attribute.grid;
-                const distance = vutils.PointService.distancePP(center, point);
-                gridPoints = getCirclePoints(center, sides, distance, startAngle, endAngle);
-            }
-            return gridPoints;
-        }
-        getGridAttribute(type) {
-            const { type: gridType, alignWithLabel = true } = this.attribute.grid;
-            let tickSegment = 1;
-            const count = this.data.length;
-            if (count >= 2) {
-                tickSegment = this.data[1].value - this.data[0].value;
-            }
-            let gridAttribute;
-            let items = [];
-            if (type === 'grid') {
-                gridAttribute = this.attribute.grid;
-                const gridItems = [];
-                this.data.forEach(item => {
-                    let { point } = item;
-                    if (!alignWithLabel) {
-                        const value = item.value - tickSegment / 2;
-                        if (this.isInValidValue(value)) {
-                            return;
-                        }
-                        point = this.getTickCoord(value);
-                    }
-                    gridItems.push({
-                        id: item.label,
-                        datum: item,
-                        points: this._getGridPoint(gridType, point)
-                    });
-                });
-                items = gridItems;
-            }
-            else {
-                gridAttribute = vutils.merge({}, this.attribute.grid, this.attribute.subGrid);
-                const subGridItems = [];
-                const { count: subCount = 4 } = this.attribute.subTick || {};
-                const tickLineCount = this.data.length;
-                if (tickLineCount >= 2) {
-                    const points = [];
-                    this.data.forEach((item) => {
-                        let tickValue = item.value;
-                        if (!alignWithLabel) {
-                            const value = item.value - tickSegment / 2;
-                            if (this.isInValidValue(value)) {
-                                return;
-                            }
-                            tickValue = value;
-                        }
-                        points.push({
-                            value: tickValue
-                        });
-                    });
-                    for (let i = 0; i < points.length - 1; i++) {
-                        const pre = points[i];
-                        const next = points[i + 1];
-                        subGridItems.push({
-                            id: `sub-${i}-0`,
-                            points: this._getGridPoint(gridType, this.getTickCoord(pre.value)),
-                            datum: {}
-                        });
-                        for (let j = 0; j < subCount; j++) {
-                            const percent = (j + 1) / (subCount + 1);
-                            const value = (1 - percent) * pre.value + percent * next.value;
-                            const point = this.getTickCoord(value);
-                            subGridItems.push({
-                                id: `sub-${i}-${j + 1}`,
-                                points: this._getGridPoint(gridType, point),
-                                datum: {}
-                            });
-                        }
-                        if (i === points.length - 2) {
-                            subGridItems.push({
-                                id: `sub-${i}-${subCount + 1}`,
-                                points: this._getGridPoint(gridType, this.getTickCoord(next.value)),
-                                datum: {}
-                            });
-                        }
-                    }
-                    items = subGridItems;
-                }
-            }
-            return Object.assign(Object.assign({}, gridAttribute), { items });
-        }
         getTextBaseline(vector, inside) {
             let base = 'middle';
             const { verticalFactor = 1 } = this.attribute;
@@ -4572,92 +4256,6 @@
             };
         }
         beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            const { flush = false } = this.attribute.label || {};
-            if (flush) {
-                const { orient, start, end } = this.attribute;
-                const isX = orient === 'bottom' || orient === 'top';
-                const first = labelShapes[0];
-                const last = vutils.last(labelShapes);
-                const isInverse = isX ? first.attribute.x > last.attribute.x : first.attribute.y < last.attribute.y;
-                if (isX) {
-                    const width = Math.abs(start.x - end.x);
-                    if (isInverse) {
-                        const start = width;
-                        const end = 0;
-                        const startBound = first.AABBBounds.x2;
-                        const endBound = last.AABBBounds.x1;
-                        if (startBound > start) {
-                            first.setAttributes({
-                                x: start,
-                                textAlign: 'right'
-                            });
-                        }
-                        if (endBound < end) {
-                            last.setAttributes({
-                                x: end,
-                                textAlign: 'left'
-                            });
-                        }
-                    }
-                    else {
-                        const start = 0;
-                        const end = width;
-                        const startBound = first.AABBBounds.x1;
-                        const endBound = last.AABBBounds.x2;
-                        if (startBound < start) {
-                            first.setAttributes({
-                                x: start,
-                                textAlign: 'left'
-                            });
-                        }
-                        if (endBound > end) {
-                            last.setAttributes({
-                                x: end,
-                                textAlign: 'right'
-                            });
-                        }
-                    }
-                }
-                else {
-                    const height = Math.abs(start.y - end.y);
-                    if (isInverse) {
-                        const startBound = first.AABBBounds.y1;
-                        const endBound = last.AABBBounds.y2;
-                        const start = 0;
-                        const end = height;
-                        if (startBound < start) {
-                            first.setAttributes({
-                                y: start,
-                                textBaseline: 'top'
-                            });
-                        }
-                        if (endBound > end) {
-                            last.setAttributes({
-                                y: end,
-                                textBaseline: 'bottom'
-                            });
-                        }
-                    }
-                    else {
-                        const start = height;
-                        const end = 0;
-                        const startBound = first.AABBBounds.y2;
-                        const endBound = last.AABBBounds.y1;
-                        if (startBound > start) {
-                            first.setAttributes({
-                                y: start,
-                                textBaseline: 'bottom'
-                            });
-                        }
-                        if (endBound < end) {
-                            last.setAttributes({
-                                y: end,
-                                textBaseline: 'top'
-                            });
-                        }
-                    }
-                }
-            }
             return;
         }
         handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
@@ -4769,29 +4367,9 @@
         }
     }
     LineAxis.defaultAttributes = DEFAULT_AXIS_THEME;
+    vutils.mixin(LineAxis, LineAxisMixin);
 
-    class CircleAxis extends AxisBase {
-        constructor(attributes) {
-            super(vutils.merge({}, CircleAxis.defaultAttributes, attributes));
-        }
-        renderLine(container) {
-            const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, radius, center, innerRadius = 0, line, inside = false } = this.attribute;
-            let arcRadius = radius;
-            let arcInnerRadius = innerRadius;
-            if (inside && innerRadius > 0) {
-                arcRadius = innerRadius;
-                arcInnerRadius = 0;
-            }
-            const arcAttrs = Object.assign(Object.assign(Object.assign({}, center), { startAngle,
-                endAngle, radius: arcRadius, innerRadius: arcInnerRadius }), line === null || line === void 0 ? void 0 : line.style);
-            const axisLine = vrender.createCircle(arcAttrs);
-            axisLine.name = exports.AXIS_ELEMENT_NAME.line;
-            axisLine.id = this._getNodeId('line');
-            if (!vutils.isEmpty(line === null || line === void 0 ? void 0 : line.state)) {
-                axisLine.states = vutils.merge({}, DEFAULT_STATES$1, line.state);
-            }
-            container.add(axisLine);
-        }
+    class CircleAxisMixin {
         isInValidValue(value) {
             const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE } = this.attribute;
             if (Math.abs(endAngle - startAngle) % (Math.PI * 2) === 0) {
@@ -4814,6 +4392,30 @@
             const { center } = this.attribute;
             return [point.y - center.y, -1 * (point.x - center.x)];
         }
+    }
+
+    class CircleAxis extends AxisBase {
+        constructor(attributes) {
+            super(vutils.merge({}, CircleAxis.defaultAttributes, attributes));
+        }
+        renderLine(container) {
+            const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, radius, center, innerRadius = 0, line, inside = false } = this.attribute;
+            let arcRadius = radius;
+            let arcInnerRadius = innerRadius;
+            if (inside && innerRadius > 0) {
+                arcRadius = innerRadius;
+                arcInnerRadius = 0;
+            }
+            const arcAttrs = Object.assign(Object.assign(Object.assign({}, center), { startAngle,
+                endAngle, radius: arcRadius, innerRadius: arcInnerRadius }), line === null || line === void 0 ? void 0 : line.style);
+            const axisLine = vrender.createCircle(arcAttrs);
+            axisLine.name = exports.AXIS_ELEMENT_NAME.line;
+            axisLine.id = this._getNodeId('line');
+            if (!vutils.isEmpty(line === null || line === void 0 ? void 0 : line.state)) {
+                axisLine.states = vutils.merge({}, DEFAULT_STATES$1, line.state);
+            }
+            container.add(axisLine);
+        }
         getTitleAttribute() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const { center, radius, innerRadius = 0 } = this.attribute;
@@ -4894,12 +4496,513 @@
                     }
                 }
             }
-            return subTickLineItems;
+            return subTickLineItems;
+        }
+        getTextBaseline(vector) {
+            let base = 'middle';
+            if (vutils.isNumberClose(vector[1], 0)) {
+                base = 'middle';
+            }
+            else if (vector[1] > 0 && vector[1] > Math.abs(vector[0])) {
+                base = 'top';
+            }
+            else if (vector[1] < 0 && Math.abs(vector[1]) > Math.abs(vector[0])) {
+                base = 'bottom';
+            }
+            return base;
+        }
+        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+            return;
+        }
+        getLabelAlign(vector, inside, angle) {
+            return {
+                textAlign: this.getTextAlign(vector),
+                textBaseline: this.getTextBaseline(vector)
+            };
+        }
+    }
+    CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
+    vutils.mixin(CircleAxis, CircleAxisMixin);
+
+    function getElMap(g) {
+        const elMap = {};
+        traverseGroup(g, (el) => {
+            if (el.type !== 'group' && el.id) {
+                elMap[el.id] = el;
+            }
+        });
+        return elMap;
+    }
+    class GroupTransition extends vrender.ACustomAnimate {
+        constructor() {
+            super(...arguments);
+            this.mode = vrender.AnimateMode.NORMAL;
+        }
+        onBind() {
+            const currentInnerView = this.target.getInnerView();
+            const prevInnerView = this.target.getPrevInnerView();
+            if (!prevInnerView) {
+                return;
+            }
+            this._oldElementMap = getElMap(prevInnerView);
+            this._newElementAttrMap = {};
+            traverseGroup(currentInnerView, (el) => {
+                var _a, _b, _c, _d, _e, _f;
+                if (el.type !== 'group' && el.id) {
+                    const oldEl = this._oldElementMap[el.id];
+                    if (oldEl) {
+                        if (!vutils.isEqual(el.attribute, oldEl.attribute)) {
+                            const newProps = vutils.cloneDeep(el.attribute);
+                            this._newElementAttrMap[el.id] = {
+                                state: 'update',
+                                node: el,
+                                attrs: Object.assign(Object.assign({}, newProps), { opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1, fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1, strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1 })
+                            };
+                            el.setAttributes(oldEl.attribute);
+                        }
+                    }
+                    else {
+                        const finalOpacityAttrs = {
+                            opacity: (_d = el.attribute.opacity) !== null && _d !== void 0 ? _d : 1,
+                            fillOpacity: (_e = el.attribute.fillOpacity) !== null && _e !== void 0 ? _e : 1,
+                            strokeOpacity: (_f = el.attribute.strokeOpacity) !== null && _f !== void 0 ? _f : 1
+                        };
+                        this._newElementAttrMap[el.id] = {
+                            state: 'enter',
+                            node: el,
+                            attrs: finalOpacityAttrs
+                        };
+                        el.setAttributes({
+                            opacity: 0,
+                            fillOpacity: 0,
+                            strokeOpacity: 0
+                        });
+                    }
+                }
+            });
+        }
+        onStart() {
+            let duration = this.duration;
+            let easing = this.easing;
+            Object.keys(this._newElementAttrMap).forEach(id => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                const { node, attrs, state } = this._newElementAttrMap[id];
+                if (state === 'enter') {
+                    duration = vutils.isValidNumber((_b = (_a = this.params) === null || _a === void 0 ? void 0 : _a.enter) === null || _b === void 0 ? void 0 : _b.duration) ? (_c = this.params) === null || _c === void 0 ? void 0 : _c.enter.duration : duration;
+                    easing = ((_e = (_d = this.params) === null || _d === void 0 ? void 0 : _d.enter) === null || _e === void 0 ? void 0 : _e.easing) ? (_g = (_f = this.params) === null || _f === void 0 ? void 0 : _f.enter) === null || _g === void 0 ? void 0 : _g.easing : easing;
+                }
+                if (node.type === 'path') {
+                    node
+                        .animate({
+                        interpolate(key, ratio, from, to, nextAttributes) {
+                            if (key === 'path') {
+                                nextAttributes.path = vutils.interpolateString(from, to)(ratio);
+                                return true;
+                            }
+                            return false;
+                        }
+                    })
+                        .to(attrs, duration, easing);
+                }
+                else {
+                    node
+                        .animate()
+                        .to(attrs, duration, easing);
+                }
+            });
+        }
+        onUpdate(end, ratio, out) {
+        }
+    }
+
+    class GroupFadeIn extends vrender.ACustomAnimate {
+        constructor(from, to, duration, easing) {
+            super(null, null, duration, easing);
+        }
+        getEndProps() {
+            return {};
+        }
+        onBind() {
+            this.target.setTheme({
+                common: {
+                    opacity: 0
+                }
+            });
+            return;
+        }
+        onEnd() {
+            this.target.setTheme({
+                common: {
+                    opacity: 1
+                }
+            });
+            return;
+        }
+        onUpdate(end, ratio, out) {
+            this.target.setTheme({
+                common: {
+                    opacity: ratio
+                }
+            });
+        }
+    }
+    class GroupFadeOut extends vrender.ACustomAnimate {
+        constructor(from, to, duration, easing) {
+            super(null, null, duration, easing);
+        }
+        getEndProps() {
+            return {};
+        }
+        onBind() {
+            this.target.setTheme({
+                common: {
+                    opacity: 1
+                }
+            });
+            return;
+        }
+        onEnd() {
+            this.target.setTheme({
+                common: {
+                    opacity: 0
+                }
+            });
+            return;
+        }
+        onUpdate(end, ratio, out) {
+            this.target.setTheme({
+                common: {
+                    opacity: 1 - ratio
+                }
+            });
+        }
+    }
+
+    function getLinePath(points, closed) {
+        let path = '';
+        if (points.length === 0) {
+            return path;
+        }
+        points.forEach((point, index) => {
+            if (index === 0) {
+                path = `M${point.x},${point.y}`;
+            }
+            else {
+                path += `L${point.x},${point.y}`;
+            }
+        });
+        if (closed) {
+            path += 'Z';
+        }
+        return path;
+    }
+    function getArcPath(center, points, reverse, closed) {
+        let path = '';
+        if (!center || points.length === 0) {
+            return path;
+        }
+        const firstPoint = points[0];
+        const radius = vutils.PointService.distancePP(center, firstPoint);
+        const sweepFlag = reverse ? 0 : 1;
+        if (closed) {
+            path += `M${center.x},${center.y - radius}A${radius},${radius},0,0,${sweepFlag},${center.x},${center.y + radius}A${radius},${radius},0,0,${sweepFlag},${center.x},${center.y - radius}Z`;
+        }
+        else {
+            points.forEach((point, index) => {
+                if (index === 0) {
+                    path = `M${point.x},${point.y}`;
+                }
+                else {
+                    path += `A${radius},${radius},0,0,${sweepFlag},${point.x},${point.y}`;
+                }
+            });
+        }
+        return path;
+    }
+    function getRegionPath(from, to, attribute) {
+        const { type, closed } = attribute;
+        const reversePoints = to.slice(0).reverse();
+        let regionPath = '';
+        let nextPath = '';
+        if (type === 'line' && attribute.smoothLink && attribute.center) {
+            const fromStart = from[0];
+            const toEnd = reversePoints[0];
+            const center = attribute.center;
+            regionPath = getLinePath(from, !!closed);
+            nextPath = getLinePath(reversePoints, !!closed);
+            const toEndRadius = vutils.PointService.distancePP(toEnd, center);
+            const fromStartRadius = vutils.PointService.distancePP(fromStart, center);
+            regionPath += `A${toEndRadius},${toEndRadius},0,0,1,${toEnd.x},${toEnd.y}L${toEnd.x},${toEnd.y}`;
+            nextPath += `A${fromStartRadius},${fromStartRadius},0,0,0,${fromStart.x},${fromStart.y}`;
+        }
+        else if (type === 'circle') {
+            const { center } = attribute;
+            regionPath = getArcPath(center, from, false, !!closed);
+            nextPath = getArcPath(center, reversePoints, true, !!closed);
+        }
+        else if (type === 'line' || type === 'polygon') {
+            regionPath = getLinePath(from, !!closed);
+            nextPath = getLinePath(reversePoints, !!closed);
+        }
+        if (closed) {
+            regionPath += nextPath;
+        }
+        else {
+            nextPath = 'L' + nextPath.substring(1);
+            regionPath += nextPath;
+            regionPath += 'Z';
+        }
+        return regionPath;
+    }
+    class BaseGrid extends AbstractComponent {
+        constructor() {
+            super(...arguments);
+            this.name = 'axis-grid';
+            this.data = [];
+        }
+        getInnerView() {
+            return this._innerView;
+        }
+        getPrevInnerView() {
+            return this._prevInnerView;
+        }
+        render() {
+            this.removeAllChild();
+            this._prevInnerView = this._innerView;
+            this._innerView = vrender.createGroup({ x: 0, y: 0, pickable: false });
+            this.add(this._innerView);
+            const { items, visible } = this.attribute;
+            if (items && items.length && visible !== false) {
+                this.data = this._transformItems(items);
+                this._renderGrid(this._innerView);
+            }
+        }
+        getVerticalCoord(point, offset, inside) {
+            const vector = this.getVerticalVector(offset, inside, point);
+            return {
+                x: point.x + vector[0],
+                y: point.y + vector[1]
+            };
+        }
+        _transformItems(items) {
+            const data = [];
+            items.forEach((item) => {
+                var _a;
+                data.push(Object.assign(Object.assign({}, item), { point: this.getTickCoord(item.value), id: (_a = item.id) !== null && _a !== void 0 ? _a : item.label }));
+            });
+            return data;
+        }
+        _renderGrid(container) {
+            const { visible } = this.attribute.subGrid || {};
+            if (visible) {
+                this._renderGridByType(true, container);
+            }
+            this._renderGridByType(false, container);
+        }
+        _renderGridByType(isSubGrid, container) {
+            const gridAttrs = vutils.merge({}, this.attribute, this.getGridAttribute(isSubGrid));
+            const { type, items, style, closed, alternateColor, depth = 0 } = gridAttrs;
+            const name = isSubGrid ? `${exports.AXIS_ELEMENT_NAME.grid}-sub` : `${exports.AXIS_ELEMENT_NAME.grid}`;
+            items.forEach((item, index) => {
+                const { id, points } = item;
+                let path = '';
+                if (type === 'line' || type === 'polygon') {
+                    path = getLinePath(points, !!closed);
+                }
+                else if (type === 'circle') {
+                    const { center } = this.attribute;
+                    path = getArcPath(center, points, false, !!closed);
+                }
+                const shape = vrender.createPath(Object.assign({ path, z: depth }, (vutils.isFunction(style) ? vutils.merge({}, BaseGrid.defaultAttributes.style, style(item, index)) : style)));
+                shape.name = `${name}-line`;
+                shape.id = this._getNodeId(`${name}-path-${id}`);
+                container.add(shape);
+            });
+            if (depth && type === 'line') {
+                items.forEach((item, index) => {
+                    const { id, points } = item;
+                    const nextPoints = [];
+                    nextPoints.push(points[0]);
+                    const dir = { x: points[1].x - points[0].x, y: points[1].y - points[0].y };
+                    const dirLen = Math.sqrt(dir.x * dir.x + dir.y * dir.y);
+                    const ratio = depth / dirLen;
+                    nextPoints.push({ x: points[0].x + dir.x * ratio, y: points[0].y + dir.y * ratio });
+                    const path = getLinePath(nextPoints, !!closed);
+                    const deltaX = vutils.abs(nextPoints[0].x - nextPoints[1].x);
+                    const deltaY = vutils.abs(nextPoints[0].y - nextPoints[1].y);
+                    const shape = vrender.createPath(Object.assign({ path, z: 0, alpha: deltaX > deltaY ? ((points[1].x - points[0].x > 0 ? -1 : 1) * vutils.pi) / 2 : 0, beta: deltaX < deltaY ? -vutils.pi / 2 : 0, anchor3d: deltaX > deltaY ? [nextPoints[0].x, 0] : [0, nextPoints[0].y] }, (vutils.isFunction(style) ? vutils.merge({}, BaseGrid.defaultAttributes.style, style(item, index)) : style)));
+                    shape.name = `${name}-line`;
+                    shape.id = this._getNodeId(`${name}-path-${id}`);
+                    container.add(shape);
+                });
+            }
+            if (items.length > 1 && alternateColor) {
+                const colors = vutils.isArray(alternateColor)
+                    ? alternateColor
+                    : [alternateColor, 'transparent'];
+                const getColor = (index) => colors[index % colors.length];
+                for (let index = 0; index < items.length - 1; index++) {
+                    const [prev, curr] = [items[index].points, items[index + 1].points];
+                    const path = getRegionPath(prev, curr, gridAttrs);
+                    const shape = vrender.createPath({
+                        path,
+                        fill: getColor(index)
+                    });
+                    shape.name = `${name}-region`;
+                    shape.id = this._getNodeId(`${name}-region-${index}`);
+                    container.add(shape);
+                }
+            }
+        }
+        _getNodeId(id) {
+            return `${this.id}-${id}`;
+        }
+    }
+    BaseGrid.defaultAttributes = {
+        style: {
+            lineWidth: 1,
+            stroke: '#999',
+            strokeOpacity: 1,
+            lineDash: [4, 4]
+        },
+        subGrid: {
+            visible: false,
+            style: {
+                lineWidth: 1,
+                stroke: '#999',
+                strokeOpacity: 1,
+                lineDash: [4, 4]
+            }
+        }
+    };
+
+    function getCirclePoints(center, count, radius, startAngle, endAngle) {
+        const points = [];
+        const range = endAngle - startAngle;
+        for (let i = 0; i < count; i++) {
+            const angle = startAngle + (i * range) / count;
+            points.push(vutils.polarToCartesian(center, radius, angle));
+        }
+        return points;
+    }
+    class LineAxisGrid extends BaseGrid {
+        constructor(attributes, mode) {
+            super(vutils.merge({}, BaseGrid.defaultAttributes, attributes), mode);
+            if (mode === '3d') {
+                this.setMode(mode);
+            }
+        }
+        _getGridPoint(gridType, point) {
+            let gridPoints;
+            if (gridType === 'line') {
+                const { length } = this.attribute;
+                const endPoint = this.getVerticalCoord(point, length, true);
+                gridPoints = [point, endPoint];
+            }
+            else if (gridType === 'circle' || gridType === 'polygon') {
+                const { center, sides = 6, startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE } = this.attribute;
+                const distance = vutils.PointService.distancePP(center, point);
+                gridPoints = getCirclePoints(center, sides, distance, startAngle, endAngle);
+            }
+            return gridPoints;
+        }
+        getGridAttribute(isSubGrid) {
+            const { type: gridType, alignWithLabel = true } = this.attribute;
+            let tickSegment = 1;
+            const count = this.data.length;
+            if (count >= 2) {
+                tickSegment = this.data[1].value - this.data[0].value;
+            }
+            let gridAttribute;
+            let items = [];
+            if (!isSubGrid) {
+                gridAttribute = this.attribute;
+                const gridItems = [];
+                this.data.forEach(item => {
+                    let { point } = item;
+                    if (!alignWithLabel) {
+                        const value = item.value - tickSegment / 2;
+                        if (this.isInValidValue(value)) {
+                            return;
+                        }
+                        point = this.getTickCoord(value);
+                    }
+                    gridItems.push({
+                        id: item.label,
+                        datum: item,
+                        points: this._getGridPoint(gridType, point)
+                    });
+                });
+                items = gridItems;
+            }
+            else {
+                gridAttribute = vutils.merge({}, this.attribute, this.attribute.subGrid);
+                const subGridItems = [];
+                const { count: subCount = 4 } = this.attribute.subGrid || {};
+                const tickLineCount = this.data.length;
+                if (tickLineCount >= 2) {
+                    const points = [];
+                    this.data.forEach((item) => {
+                        let tickValue = item.value;
+                        if (!alignWithLabel) {
+                            const value = item.value - tickSegment / 2;
+                            if (this.isInValidValue(value)) {
+                                return;
+                            }
+                            tickValue = value;
+                        }
+                        points.push({
+                            value: tickValue
+                        });
+                    });
+                    for (let i = 0; i < points.length - 1; i++) {
+                        const pre = points[i];
+                        const next = points[i + 1];
+                        subGridItems.push({
+                            id: `sub-${i}-0`,
+                            points: this._getGridPoint(gridType, this.getTickCoord(pre.value)),
+                            datum: {}
+                        });
+                        for (let j = 0; j < subCount; j++) {
+                            const percent = (j + 1) / (subCount + 1);
+                            const value = (1 - percent) * pre.value + percent * next.value;
+                            const point = this.getTickCoord(value);
+                            subGridItems.push({
+                                id: `sub-${i}-${j + 1}`,
+                                points: this._getGridPoint(gridType, point),
+                                datum: {}
+                            });
+                        }
+                        if (i === points.length - 2) {
+                            subGridItems.push({
+                                id: `sub-${i}-${subCount + 1}`,
+                                points: this._getGridPoint(gridType, this.getTickCoord(next.value)),
+                                datum: {}
+                            });
+                        }
+                    }
+                    items = subGridItems;
+                }
+            }
+            return Object.assign(Object.assign({}, gridAttribute), { items });
+        }
+    }
+    vutils.mixin(LineAxisGrid, LineAxisMixin);
+
+    class CircleAxisGrid extends BaseGrid {
+        constructor(attributes) {
+            super(vutils.merge({}, BaseGrid.defaultAttributes, attributes));
         }
-        getGridAttribute(type) {
+        getGridAttribute(isSubGrid) {
             let gridAttribute;
             let items = [];
-            const { radius, innerRadius = 0, startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, grid } = this.attribute;
+            const _a = this.attribute, { radius, innerRadius = 0, startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, subGrid } = _a, grid = __rest(_a, ["radius", "innerRadius", "startAngle", "endAngle", "center", "subGrid"]);
             const { alignWithLabel = true } = grid || {};
             const length = radius - innerRadius;
             let tickSegment = 1;
@@ -4907,8 +5010,8 @@
             if (count >= 2) {
                 tickSegment = this.data[1].value - this.data[0].value;
             }
-            if (type === 'grid') {
-                gridAttribute = this.attribute.grid;
+            if (!isSubGrid) {
+                gridAttribute = grid;
                 const gridItems = [];
                 let data;
                 if (Math.abs(endAngle - startAngle) % (Math.PI * 2) === 0) {
@@ -4936,9 +5039,9 @@
                 items = gridItems;
             }
             else {
-                gridAttribute = vutils.merge({}, this.attribute.grid, this.attribute.subGrid);
+                gridAttribute = vutils.merge({}, grid, subGrid);
                 const subGridItems = [];
-                const { count: subCount = 4 } = this.attribute.subTick || {};
+                const { count: subCount = 4 } = subGrid || {};
                 const tickLineCount = this.data.length;
                 if (tickLineCount >= 2) {
                     const points = [];
@@ -4982,192 +5085,10 @@
                 }
             }
             return Object.assign(Object.assign({}, gridAttribute), { items,
-                center });
-        }
-        getTextBaseline(vector) {
-            let base = 'middle';
-            if (vutils.isNumberClose(vector[1], 0)) {
-                base = 'middle';
-            }
-            else if (vector[1] > 0 && vector[1] > Math.abs(vector[0])) {
-                base = 'top';
-            }
-            else if (vector[1] < 0 && Math.abs(vector[1]) > Math.abs(vector[0])) {
-                base = 'bottom';
-            }
-            return base;
-        }
-        beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            return;
-        }
-        handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            return;
-        }
-        afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
-            return;
-        }
-        getLabelAlign(vector, inside, angle) {
-            return {
-                textAlign: this.getTextAlign(vector),
-                textBaseline: this.getTextBaseline(vector)
-            };
-        }
-    }
-    CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME;
-
-    function getElMap(g) {
-        const elMap = {};
-        traverseGroup(g, (el) => {
-            if (el.type !== 'group' && el.id) {
-                elMap[el.id] = el;
-            }
-        });
-        return elMap;
-    }
-    class GroupTransition extends vrender.ACustomAnimate {
-        constructor() {
-            super(...arguments);
-            this.mode = vrender.AnimateMode.NORMAL;
-        }
-        onBind() {
-            const currentInnerView = this.target.getInnerView();
-            const prevInnerView = this.target.getPrevInnerView();
-            if (!prevInnerView) {
-                return;
-            }
-            this._oldElementMap = getElMap(prevInnerView);
-            this._newElementAttrMap = {};
-            traverseGroup(currentInnerView, (el) => {
-                var _a, _b, _c, _d, _e, _f;
-                if (el.type !== 'group' && el.id) {
-                    const oldEl = this._oldElementMap[el.id];
-                    if (oldEl) {
-                        if (!vutils.isEqual(el.attribute, oldEl.attribute)) {
-                            const newProps = vutils.cloneDeep(el.attribute);
-                            this._newElementAttrMap[el.id] = {
-                                state: 'update',
-                                node: el,
-                                attrs: Object.assign(Object.assign({}, newProps), { opacity: (_a = newProps.opacity) !== null && _a !== void 0 ? _a : 1, fillOpacity: (_b = newProps.fillOpacity) !== null && _b !== void 0 ? _b : 1, strokeOpacity: (_c = newProps.strokeOpacity) !== null && _c !== void 0 ? _c : 1 })
-                            };
-                            el.setAttributes(oldEl.attribute);
-                        }
-                    }
-                    else {
-                        const finalOpacityAttrs = {
-                            opacity: (_d = el.attribute.opacity) !== null && _d !== void 0 ? _d : 1,
-                            fillOpacity: (_e = el.attribute.fillOpacity) !== null && _e !== void 0 ? _e : 1,
-                            strokeOpacity: (_f = el.attribute.strokeOpacity) !== null && _f !== void 0 ? _f : 1
-                        };
-                        this._newElementAttrMap[el.id] = {
-                            state: 'enter',
-                            node: el,
-                            attrs: finalOpacityAttrs
-                        };
-                        el.setAttributes({
-                            opacity: 0,
-                            fillOpacity: 0,
-                            strokeOpacity: 0
-                        });
-                    }
-                }
-            });
-        }
-        onStart() {
-            let duration = this.duration;
-            let easing = this.easing;
-            Object.keys(this._newElementAttrMap).forEach(id => {
-                var _a, _b, _c;
-                const { node, attrs, state } = this._newElementAttrMap[id];
-                if (state === 'enter') {
-                    duration = vutils.isValidNumber((_a = this.params.enter) === null || _a === void 0 ? void 0 : _a.duration) ? this.params.enter.duration : duration;
-                    easing = ((_b = this.params.enter) === null || _b === void 0 ? void 0 : _b.easing) ? (_c = this.params.enter) === null || _c === void 0 ? void 0 : _c.easing : easing;
-                }
-                if (node.type === 'path') {
-                    node
-                        .animate({
-                        interpolate(key, ratio, from, to, nextAttributes) {
-                            if (key === 'path') {
-                                nextAttributes.path = vutils.interpolateString(from, to)(ratio);
-                                return true;
-                            }
-                            return false;
-                        }
-                    })
-                        .to(attrs, duration, easing);
-                }
-                else {
-                    node
-                        .animate()
-                        .to(attrs, duration, easing);
-                }
-            });
-        }
-        onUpdate(end, ratio, out) {
-        }
-    }
-
-    class GroupFadeIn extends vrender.ACustomAnimate {
-        constructor(from, to, duration, easing) {
-            super(null, null, duration, easing);
-        }
-        getEndProps() {
-            return {};
-        }
-        onBind() {
-            this.target.setTheme({
-                common: {
-                    opacity: 0
-                }
-            });
-            return;
-        }
-        onEnd() {
-            this.target.setTheme({
-                common: {
-                    opacity: 1
-                }
-            });
-            return;
-        }
-        onUpdate(end, ratio, out) {
-            this.target.setTheme({
-                common: {
-                    opacity: ratio
-                }
-            });
-        }
-    }
-    class GroupFadeOut extends vrender.ACustomAnimate {
-        constructor(from, to, duration, easing) {
-            super(null, null, duration, easing);
-        }
-        getEndProps() {
-            return {};
-        }
-        onBind() {
-            this.target.setTheme({
-                common: {
-                    opacity: 1
-                }
-            });
-            return;
-        }
-        onEnd() {
-            this.target.setTheme({
-                common: {
-                    opacity: 0
-                }
-            });
-            return;
-        }
-        onUpdate(end, ratio, out) {
-            this.target.setTheme({
-                common: {
-                    opacity: 1 - ratio
-                }
-            });
+                center, type: 'line' });
         }
     }
+    vutils.mixin(CircleAxisGrid, CircleAxisMixin);
 
     var DataZoomActiveTag;
     (function (DataZoomActiveTag) {
@@ -9852,13 +9773,6 @@
         setUpdateDragMaskCallback(callback) {
             vutils.isFunction(callback) && (this._updateDragMaskCallback = callback);
         }
-        releaseBrushEvents() {
-            const { delayType = 'throttle', delayTime = 0 } = this.attribute;
-            this.stage.removeEventListener('pointerdown', this._onBrushStart);
-            this.stage.removeEventListener('pointermove', delayMap[delayType](this._onBrushing, delayTime));
-            this.stage.removeEventListener('pointerup', this._onBrushEnd);
-            this.stage.removeEventListener('pointerupoutside', this._onBrushEnd);
-        }
     }
     Brush.defaultAttributes = DEFAULT_BRUSH_ATTRIBUTES;
 
@@ -10244,7 +10158,11 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    const version = "0.14.6";
+    function VTag(params) {
+        return new Tag(params ? params.attribute : {});
+    }
+
+    const version = "0.15.0-alpha.5";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;
@@ -10252,6 +10170,7 @@
     exports.BasePlayer = BasePlayer;
     exports.Brush = Brush;
     exports.CircleAxis = CircleAxis;
+    exports.CircleAxisGrid = CircleAxisGrid;
     exports.CircleCrosshair = CircleCrosshair;
     exports.ColorContinuousLegend = ColorContinuousLegend;
     exports.ContinuousPlayer = ContinuousPlayer;
@@ -10268,13 +10187,13 @@
     exports.DataZoom = DataZoom;
     exports.DiscreteLegend = DiscreteLegend;
     exports.DiscretePlayer = DiscretePlayer;
-    exports.Grid = Grid;
     exports.GroupFadeIn = GroupFadeIn;
     exports.GroupFadeOut = GroupFadeOut;
     exports.GroupTransition = GroupTransition;
     exports.Indicator = Indicator;
     exports.LabelBase = LabelBase;
     exports.LineAxis = LineAxis;
+    exports.LineAxisGrid = LineAxisGrid;
     exports.LineCrosshair = LineCrosshair;
     exports.LineLabel = LineLabel;
     exports.LinkPath = LinkPath;
@@ -10295,6 +10214,7 @@
     exports.Tag = Tag;
     exports.Title = Title;
     exports.Tooltip = Tooltip;
+    exports.VTag = VTag;
     exports.getHorizontalPath = getHorizontalPath;
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;