@visactor/vrender-components 0.15.0-alpha.14 → 0.15.0-alpha.16

package/dist/index.js

@@ -36,7 +36,7 @@
             });
         }
         setAttribute(key, value, forceUpdateTag) {
-            if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(value)) {
+            if (vutils.isPlainObject(this.attribute[key])) {
                 vutils.merge(this.attribute[key], value);
             }
             else {
@@ -77,7 +77,7 @@
             }
             for (let i = 0; i < keys.length; i++) {
                 const key = keys[i];
-                if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(params[key])) {
+                if (vutils.isPlainObject(this.attribute[key])) {
                     vutils.merge(this.attribute[key], params[key]);
                 }
                 else {
@@ -575,16 +575,16 @@
             }, getTextBounds: useNaiveCanvas ? undefined : vrender.getTextBounds, specialCharSet: '-/: .,@%\'"~' + vutils.TextMeasure.ALPHABET_CHAR_SET + vutils.TextMeasure.ALPHABET_CHAR_SET.toUpperCase() }, (option !== null && option !== void 0 ? option : {})), textSpec);
     };
     function measureTextSize(text, textSpec) {
-        var _a;
+        var _a, _b;
         if (!text) {
             return { width: 0, height: 0 };
         }
         const bounds = vrender.getTextBounds({
             text,
-            fontFamily: textSpec.fontFamily,
+            fontFamily: (_a = textSpec.fontFamily) !== null && _a !== void 0 ? _a : '',
             fontSize: textSpec.fontSize || 12,
             fontWeight: textSpec.fontWeight,
-            textAlign: (_a = textSpec.textAlign) !== null && _a !== void 0 ? _a : 'center',
+            textAlign: (_b = textSpec.textAlign) !== null && _b !== void 0 ? _b : 'center',
             textBaseline: textSpec.textBaseline,
             ellipsis: !!textSpec.ellipsis,
             maxLineWidth: textSpec.maxLineWidth || Infinity,
@@ -1103,21 +1103,16 @@
         injectable()
     ], PopTipForClipedTextPlugin);
 
-    const popTipModule = new ContainerModule((bind, unbind, isBound, rebind) => {
-        if (!isBound(PopTipRenderContribution)) {
-            bind(PopTipRenderContribution).toSelf().inSingletonScope();
-            bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
-        }
-        if (!isBound(PopTipPlugin)) {
-            bind(PopTipPlugin).toSelf();
-            bind(vrender.AutoEnablePlugins).toService(PopTipPlugin);
-        }
-        if (!isBound(PopTipForClipedTextPlugin)) {
-            bind(PopTipForClipedTextPlugin).toSelf();
-            bind(vrender.AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
-        }
+    const popTipModule = new ContainerModule(bind => {
+        bind(PopTipRenderContribution).toSelf().inSingletonScope();
+        bind(vrender.InteractiveSubRenderContribution).toService(PopTipRenderContribution);
+        bind(PopTipPlugin).toSelf().inSingletonScope();
+        bind(vrender.AutoEnablePlugins).toService(PopTipPlugin);
+        bind(PopTipForClipedTextPlugin).toSelf().inSingletonScope();
+        bind(vrender.AutoEnablePlugins).toService(PopTipForClipedTextPlugin);
     });
-    function loadPoptip() {
+    function loadPoptip(defaultPoptipTheme) {
+        vutils.merge(theme.poptip, defaultPoptipTheme);
         vrender.container.load(popTipModule);
     }
     function setPoptipTheme(defaultPoptipTheme) {
@@ -2471,7 +2466,8 @@
                     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
+                        : undefined,
+                    line: basedArc === null || basedArc === void 0 ? void 0 : basedArc.labelLine
                 };
                 labels[i].setAttributes(labelAttribute);
             }
@@ -2633,6 +2629,7 @@
                     arc.labelVisible = false;
                 }
                 arc.angle = (_b = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.textStyle) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : 0;
+                arc.labelLine = Object.assign({}, attribute === null || attribute === void 0 ? void 0 : attribute.line);
             });
             return arcs;
         }
@@ -2641,7 +2638,13 @@
             const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
             const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
             const plotLayout = { width: center.x * 2, height: center.y * 2 };
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const line2MinLength = attribute.line.line2MinLength;
             const labelLayoutAlign = (_f = attribute.layout) === null || _f === void 0 ? void 0 : _f.align;
@@ -2872,7 +2875,13 @@
         _computePointB(arc, r, attribute, currentMarks) {
             var _a, _b, _c, _d, _e;
             const labelConfig = attribute;
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = labelConfig.line.line1MinLength;
             const labelLayout = labelConfig.layout;
             if (labelLayout.strategy === 'none') {
@@ -2911,7 +2920,13 @@
             var _a, _b, _c, _d, _e;
             const center = { x: (_b = (_a = currentMarks[0].attribute) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0, y: (_d = (_c = currentMarks[0].attribute) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0 };
             const plotRect = { width: center.x * 2, height: center.y * 2 };
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const line1MinLength = attribute.line.line1MinLength;
             const { width, height } = plotRect;
             const centerOffset = (_e = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _e !== void 0 ? _e : 0;
@@ -2978,7 +2993,13 @@
             const labelConfig = attribute;
             const layoutArcGap = labelConfig.layoutArcGap;
             const line1MinLength = labelConfig.line.line1MinLength;
-            const radiusRatio = this.computeLayoutOuterRadius(currentMarks[0].attribute.outerRadius, attribute.width, attribute.height);
+            let maxRadius = 0;
+            currentMarks.forEach((currentMark) => {
+                if (currentMark.attribute.outerRadius > maxRadius) {
+                    maxRadius = currentMark.attribute.outerRadius;
+                }
+            });
+            const radiusRatio = this.computeLayoutOuterRadius(maxRadius, attribute.width, attribute.height);
             const centerOffset = (_a = attribute === null || attribute === void 0 ? void 0 : attribute.centerOffset) !== null && _a !== void 0 ? _a : 0;
             const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height, centerOffset);
             const outerR = radius + line1MinLength;
@@ -3047,13 +3068,14 @@
             }
         }
         _labelLine(text) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             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
+                    visible: (_g = (_e = (((_c = (_b = text.attribute) === null || _b === void 0 ? void 0 : _b.line) === null || _c === void 0 ? void 0 : _c.visible) && ((_d = text.attribute) === null || _d === void 0 ? void 0 : _d.visible))) !== null && _e !== void 0 ? _e : (_f = text.attribute) === null || _f === void 0 ? void 0 : _f.visible) !== null && _g !== void 0 ? _g : true,
+                    stroke: (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.stroke) !== null && _k !== void 0 ? _k : (_l = text.attribute) === null || _l === void 0 ? void 0 : _l.fill,
+                    lineWidth: (_p = (_o = (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.line) === null || _o === void 0 ? void 0 : _o.lineWidth) !== null && _p !== void 0 ? _p : 1,
+                    points: (_q = text.attribute) === null || _q === void 0 ? void 0 : _q.points,
+                    curveType: ((_s = (_r = text.attribute) === null || _r === void 0 ? void 0 : _r.line) === null || _s === void 0 ? void 0 : _s.smooth) ? 'basis' : null
                 })
                 : undefined;
             return labelLine;
@@ -3176,6 +3198,156 @@
         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));
@@ -3393,6 +3565,23 @@
                 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]
+            }
         }
     };
 
@@ -3489,7 +3678,7 @@
             }
         }
         _renderInner(container) {
-            const { title, label, tick, line, items } = 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');
@@ -3518,6 +3707,9 @@
                         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);
@@ -3634,6 +3826,13 @@
             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 {
@@ -3804,6 +4003,13 @@
             });
             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 = {
@@ -4102,31 +4308,15 @@
         }
     }
 
-    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);
+    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 LineAxis extends AxisBase {
         constructor(attributes, mode) {
             super(vutils.merge({}, LineAxis.defaultAttributes, attributes), mode);
@@ -4164,6 +4354,28 @@
             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"]);
@@ -4248,7 +4460,7 @@
             }
             const offset = tickLength + labelLength + space;
             const titlePoint = this.getVerticalCoord(point, offset, false);
-            const vector = this.getVerticalVector(offset, false, { x: 0, y: 0 });
+            const vector = this.getVerticalVector(offset, false);
             let { angle } = restAttrs;
             let textAlign;
             if (position === 'start') {
@@ -4296,35 +4508,129 @@
             }
             return attrs;
         }
-        getTextBaseline(vector, inside) {
-            let base = 'middle';
-            const { verticalFactor = 1 } = this.attribute;
-            const factor = (inside ? 1 : -1) * verticalFactor;
-            if (vutils.isNumberClose(vector[1], 0)) {
-                if (vutils.isNumberClose(vector[0], 0) && !Object.is(vector[0], -0) && !Object.is(vector[1], -0)) {
-                    base = factor === 1 ? 'bottom' : 'top';
-                }
-                else {
-                    base = 'middle';
-                }
-            }
-            else if (vector[1] > 0) {
-                base = 'top';
+        _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 (vector[1] < 0) {
-                base = 'bottom';
+            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 base;
+            return gridPoints;
         }
-        getLabelAlign(vector, inside, angle) {
-            const orient = this.attribute.orient;
-            if (vutils.isValidNumber(angle)) {
-                if (orient === 'top' || orient === 'bottom') {
-                    return getXAxisLabelAlign(orient, angle);
-                }
-                if (orient === 'left' || orient === 'right') {
-                    return getYAxisLabelAlign(orient, angle);
-                }
+        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;
+            const factor = (inside ? 1 : -1) * verticalFactor;
+            if (vutils.isNumberClose(vector[1], 0)) {
+                if (vutils.isNumberClose(vector[0], 0) && !Object.is(vector[0], -0) && !Object.is(vector[1], -0)) {
+                    base = factor === 1 ? 'bottom' : 'top';
+                }
+                else {
+                    base = 'middle';
+                }
+            }
+            else if (vector[1] > 0) {
+                base = 'top';
+            }
+            else if (vector[1] < 0) {
+                base = 'bottom';
+            }
+            return base;
+        }
+        getLabelAlign(vector, inside, angle) {
+            const orient = this.attribute.orient;
+            if (vutils.isValidNumber(angle)) {
+                if (orient === 'top' || orient === 'bottom') {
+                    return getXAxisLabelAlign(orient, angle);
+                }
+                if (orient === 'left' || orient === 'right') {
+                    return getYAxisLabelAlign(orient, angle);
+                }
             }
             return {
                 textAlign: this.getTextAlign(vector),
@@ -4529,32 +4835,6 @@
         }
     }
     LineAxis.defaultAttributes = DEFAULT_AXIS_THEME;
-    vutils.mixin(LineAxis, LineAxisMixin);
-
-    class CircleAxisMixin {
-        isInValidValue(value) {
-            const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE } = this.attribute;
-            if (Math.abs(endAngle - startAngle) % (Math.PI * 2) === 0) {
-                return value > 1;
-            }
-            return value < 0 || value > 1;
-        }
-        getTickCoord(tickValue) {
-            const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, radius, inside = false, innerRadius = 0 } = this.attribute;
-            const angle = startAngle + (endAngle - startAngle) * tickValue;
-            return vutils.polarToCartesian(center, inside && innerRadius > 0 ? innerRadius : radius, angle);
-        }
-        getVerticalVector(offset, inside = false, point) {
-            const { inside: axisInside = false } = this.attribute;
-            const { center } = this.attribute;
-            const vector = [point.x - center.x, point.y - center.y];
-            return scale(vector, ((inside ? -1 : 1) * (axisInside ? -1 : 1) * offset) / length(vector));
-        }
-        getRelativeVector(point) {
-            const { center } = this.attribute;
-            return [point.y - center.y, -1 * (point.x - center.x)];
-        }
-    }
 
     class CircleAxis extends AxisBase {
         constructor(attributes) {
@@ -4578,6 +4858,28 @@
             }
             container.add(axisLine);
         }
+        isInValidValue(value) {
+            const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE } = this.attribute;
+            if (Math.abs(endAngle - startAngle) % (Math.PI * 2) === 0) {
+                return value > 1;
+            }
+            return value < 0 || value > 1;
+        }
+        getTickCoord(tickValue) {
+            const { startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, radius, inside = false, innerRadius = 0 } = this.attribute;
+            const angle = startAngle + (endAngle - startAngle) * tickValue;
+            return vutils.polarToCartesian(center, inside && innerRadius > 0 ? innerRadius : radius, angle);
+        }
+        getVerticalVector(offset, inside = false, point) {
+            const { inside: axisInside = false } = this.attribute;
+            const { center } = this.attribute;
+            const vector = [point.x - center.x, point.y - center.y];
+            return scale(vector, ((inside ? -1 : 1) * (axisInside ? -1 : 1) * offset) / length(vector));
+        }
+        getRelativeVector(point) {
+            const { center } = this.attribute;
+            return [point.y - center.y, -1 * (point.x - center.x)];
+        }
         getTitleAttribute() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const { center, radius, innerRadius = 0 } = this.attribute;
@@ -4630,541 +4932,40 @@
             if (background && background.visible) {
                 attrs.panel = Object.assign({ visible: true }, background.style);
             }
-            return attrs;
-        }
-        getSubTickLineItems() {
-            var _a, _b;
-            const { subTick } = this.attribute;
-            const subTickLineItems = [];
-            const { count: subCount = 4, inside = false, length = 2 } = subTick;
-            const tickLineItems = this.tickLineItems;
-            const tickLineCount = tickLineItems.length;
-            if (tickLineCount >= 2) {
-                const tickSegment = this.data[1].value - this.data[0].value;
-                const isAlignWithLable = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.tick) === null || _b === void 0 ? void 0 : _b.alignWithLabel;
-                for (let i = 0; i < tickLineCount; i++) {
-                    const pre = tickLineItems[i];
-                    const next = tickLineItems[i + 1];
-                    for (let j = 0; j < subCount; j++) {
-                        const percent = (j + 1) / (subCount + 1);
-                        const value = (1 - percent) * pre.value + percent * (next ? next.value : isAlignWithLable ? 1 : pre.value + tickSegment);
-                        const point = this.getTickCoord(value);
-                        const endPoint = this.getVerticalCoord(point, length, inside);
-                        subTickLineItems.push({
-                            start: point,
-                            end: endPoint,
-                            value
-                        });
-                    }
-                }
-            }
-            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: {}
+            return attrs;
+        }
+        getSubTickLineItems() {
+            var _a, _b;
+            const { subTick } = this.attribute;
+            const subTickLineItems = [];
+            const { count: subCount = 4, inside = false, length = 2 } = subTick;
+            const tickLineItems = this.tickLineItems;
+            const tickLineCount = tickLineItems.length;
+            if (tickLineCount >= 2) {
+                const tickSegment = this.data[1].value - this.data[0].value;
+                const isAlignWithLable = (_b = (_a = this.attribute) === null || _a === void 0 ? void 0 : _a.tick) === null || _b === void 0 ? void 0 : _b.alignWithLabel;
+                for (let i = 0; i < tickLineCount; i++) {
+                    const pre = tickLineItems[i];
+                    const next = tickLineItems[i + 1];
+                    for (let j = 0; j < subCount; j++) {
+                        const percent = (j + 1) / (subCount + 1);
+                        const value = (1 - percent) * pre.value + percent * (next ? next.value : isAlignWithLable ? 1 : pre.value + tickSegment);
+                        const point = this.getTickCoord(value);
+                        const endPoint = this.getVerticalCoord(point, length, inside);
+                        subTickLineItems.push({
+                            start: point,
+                            end: endPoint,
+                            value
                         });
-                        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));
+            return subTickLineItems;
         }
-        getGridAttribute(isSubGrid) {
+        getGridAttribute(type) {
             let gridAttribute;
             let items = [];
-            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 { radius, innerRadius = 0, startAngle = POLAR_START_ANGLE, endAngle = POLAR_END_ANGLE, center, grid } = this.attribute;
             const { alignWithLabel = true } = grid || {};
             const length = radius - innerRadius;
             let tickSegment = 1;
@@ -5172,8 +4973,8 @@
             if (count >= 2) {
                 tickSegment = this.data[1].value - this.data[0].value;
             }
-            if (!isSubGrid) {
-                gridAttribute = grid;
+            if (type === 'grid') {
+                gridAttribute = this.attribute.grid;
                 const gridItems = [];
                 let data;
                 if (Math.abs(endAngle - startAngle) % (Math.PI * 2) === 0) {
@@ -5201,9 +5002,9 @@
                 items = gridItems;
             }
             else {
-                gridAttribute = vutils.merge({}, grid, subGrid);
+                gridAttribute = vutils.merge({}, this.attribute.grid, this.attribute.subGrid);
                 const subGridItems = [];
-                const { count: subCount = 4 } = subGrid || {};
+                const { count: subCount = 4 } = this.attribute.subTick || {};
                 const tickLineCount = this.data.length;
                 if (tickLineCount >= 2) {
                     const points = [];
@@ -5247,10 +5048,192 @@
                 }
             }
             return Object.assign(Object.assign({}, gridAttribute), { items,
-                center, type: 'line' });
+                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
+                }
+            });
         }
     }
-    vutils.mixin(CircleAxisGrid, CircleAxisMixin);
 
     var DataZoomActiveTag;
     (function (DataZoomActiveTag) {
@@ -10327,11 +10310,7 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    function VTag(params) {
-        return new Tag(params ? params.attribute : {});
-    }
-
-    const version = "0.15.0-alpha.14";
+    const version = "0.15.0-alpha.16";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;
@@ -10339,7 +10318,6 @@
     exports.BasePlayer = BasePlayer;
     exports.Brush = Brush;
     exports.CircleAxis = CircleAxis;
-    exports.CircleAxisGrid = CircleAxisGrid;
     exports.CircleCrosshair = CircleCrosshair;
     exports.ColorContinuousLegend = ColorContinuousLegend;
     exports.ContinuousPlayer = ContinuousPlayer;
@@ -10356,13 +10334,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;
@@ -10383,7 +10361,6 @@
     exports.Tag = Tag;
     exports.Title = Title;
     exports.Tooltip = Tooltip;
-    exports.VTag = VTag;
     exports.getHorizontalPath = getHorizontalPath;
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;