@visactor/vrender-components 0.14.9-alpha.1 → 0.14.9-alpha.4

package/dist/index.js

@@ -36,7 +36,7 @@
             });
         }
         setAttribute(key, value, forceUpdateTag) {
-            if (vutils.isPlainObject(this.attribute[key])) {
+            if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(value)) {
                 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])) {
+                if (vutils.isPlainObject(this.attribute[key]) && !vutils.isFunction(this.attribute[key]) && !vutils.isFunction(params[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, _b;
+        var _a;
         if (!text) {
             return { width: 0, height: 0 };
         }
         const bounds = vrender.getTextBounds({
             text,
-            fontFamily: (_a = textSpec.fontFamily) !== null && _a !== void 0 ? _a : '',
+            fontFamily: textSpec.fontFamily,
             fontSize: textSpec.fontSize || 12,
             fontWeight: textSpec.fontWeight,
-            textAlign: (_b = textSpec.textAlign) !== null && _b !== void 0 ? _b : 'center',
+            textAlign: (_a = textSpec.textAlign) !== null && _a !== void 0 ? _a : 'center',
             textBaseline: textSpec.textBaseline,
             ellipsis: !!textSpec.ellipsis,
             maxLineWidth: textSpec.maxLineWidth || Infinity,
@@ -1103,16 +1103,21 @@
         injectable()
     ], 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);
+    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);
+        }
     });
-    function loadPoptip(defaultPoptipTheme) {
-        vutils.merge(theme.poptip, defaultPoptipTheme);
+    function loadPoptip() {
         vrender.container.load(popTipModule);
     }
     function setPoptipTheme(defaultPoptipTheme) {
@@ -1706,8 +1711,14 @@
         }
         _prepare() {
             var _a;
-            const baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
             const currentBaseMarks = [];
+            let baseMarks;
+            if (vutils.isFunction(this.attribute.getBaseMarks)) {
+                baseMarks = this.attribute.getBaseMarks();
+            }
+            else {
+                baseMarks = getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName);
+            }
             baseMarks.forEach(mark => {
                 if (mark.releaseStatus !== 'willRelease') {
                     currentBaseMarks.push(mark);
@@ -3069,13 +3080,14 @@
             }
         }
         _labelLine(text) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
             const labelLine = ((_a = text.attribute) === null || _a === void 0 ? void 0 : _a.points)
                 ? vrender.createLine({
                     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
+                    stroke: (_l = (_k = (_j = (_h = text.attribute) === null || _h === void 0 ? void 0 : _h.line) === null || _j === void 0 ? void 0 : _j.style) === null || _k === void 0 ? void 0 : _k.stroke) !== null && _l !== void 0 ? _l : (_m = text.attribute) === null || _m === void 0 ? void 0 : _m.fill,
+                    lineWidth: (_r = (_q = (_p = (_o = text.attribute) === null || _o === void 0 ? void 0 : _o.line) === null || _p === void 0 ? void 0 : _p.style) === null || _q === void 0 ? void 0 : _q.lineWidth) !== null && _r !== void 0 ? _r : 1,
+                    points: (_s = text.attribute) === null || _s === void 0 ? void 0 : _s.points,
+                    curveType: ((_u = (_t = text.attribute) === null || _t === void 0 ? void 0 : _t.line) === null || _u === void 0 ? void 0 : _u.smooth) ? 'basis' : null
                 })
                 : undefined;
             return labelLine;
@@ -3198,156 +3210,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));
@@ -3565,23 +3427,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]
-            }
         }
     };
 
@@ -3678,7 +3523,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');
@@ -3707,9 +3552,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);
@@ -3826,13 +3668,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 {
@@ -4003,13 +3838,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 = {
@@ -4308,15 +4136,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);
@@ -4354,28 +4198,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"]);
@@ -4460,7 +4282,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') {
@@ -4508,129 +4330,35 @@
             }
             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];
+        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 (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);
+            else if (vector[1] > 0) {
+                base = 'top';
             }
-            return gridPoints;
+            else if (vector[1] < 0) {
+                base = 'bottom';
+            }
+            return base;
         }
-        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);
-                }
+        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),
@@ -4639,7 +4367,7 @@
         }
         beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
             const { flush = false } = this.attribute.label || {};
-            if (flush) {
+            if (flush && labelShapes.length) {
                 const { orient, start, end } = this.attribute;
                 const isX = orient === 'bottom' || orient === 'top';
                 const first = labelShapes[0];
@@ -4835,29 +4563,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) {
@@ -4880,6 +4588,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;
@@ -4932,40 +4664,541 @@
             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 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: {}
                         });
+                        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 subTickLineItems;
+            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;
@@ -4973,8 +5206,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) {
@@ -5002,9 +5235,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 = [];
@@ -5048,192 +5281,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) {
@@ -6626,7 +6677,8 @@
                     const changeEvent = new vrender.CustomEvent('toPrev', {
                         current: this._current,
                         total: this._total,
-                        direction: 'pre'
+                        direction: 'pre',
+                        event: e
                     });
                     changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
                     this.dispatchEvent(changeEvent);
@@ -6645,7 +6697,8 @@
                     const changeEvent = new vrender.CustomEvent('toNext', {
                         current: this._current,
                         total: this._total,
-                        direction: 'next'
+                        direction: 'next',
+                        event: e
                     });
                     changeEvent.manager = (_b = this.stage) === null || _b === void 0 ? void 0 : _b.eventSystem.manager;
                     this.dispatchEvent(changeEvent);
@@ -6871,16 +6924,16 @@
                     const legendItem = target.delegate;
                     const selected = legendItem.hasState(exports.LegendStateValue.selected);
                     if (selected) {
-                        this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover);
+                        this._setLegendItemState(legendItem, exports.LegendStateValue.selectedHover, e);
                     }
                     else {
-                        this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover);
+                        this._setLegendItemState(legendItem, exports.LegendStateValue.unSelectedHover, e);
                     }
                     const focusButton = legendItem.getChildren()[0].find(node => node.name === exports.LEGEND_ELEMENT_NAME.focus, false);
                     if (focusButton) {
                         focusButton.setAttribute('visible', true);
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemHover, legendItem, e);
                 }
             };
             this._onUnHover = (e) => {
@@ -6911,9 +6964,9 @@
                         focusButton.setAttribute('visible', false);
                     }
                     if (attributeUpdate) {
-                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                        this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemUnHover, legendItem, e);
                 }
             };
             this._onClick = (e) => {
@@ -6926,25 +6979,17 @@
                         legendItem.toggleState(exports.LegendStateValue.focus);
                         if (isFocusSelected) {
                             (_b = this._itemsContainer) === null || _b === void 0 ? void 0 : _b.getChildren().forEach(item => {
-                                this._removeLegendItemState(item, [
-                                    exports.LegendStateValue.unSelected,
-                                    exports.LegendStateValue.unSelectedHover,
-                                    exports.LegendStateValue.focus
-                                ]);
-                                this._setLegendItemState(item, exports.LegendStateValue.selected);
+                                this._removeLegendItemState(item, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover, exports.LegendStateValue.focus], e);
+                                this._setLegendItemState(item, exports.LegendStateValue.selected, e);
                             });
                         }
                         else {
-                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             (_c = this._itemsContainer) === null || _c === void 0 ? void 0 : _c.getChildren().forEach(item => {
                                 if (legendItem !== item) {
-                                    this._removeLegendItemState(item, [
-                                        exports.LegendStateValue.selected,
-                                        exports.LegendStateValue.selectedHover,
-                                        exports.LegendStateValue.focus
-                                    ]);
-                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected);
+                                    this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover, exports.LegendStateValue.focus], e);
+                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
                                 }
                             });
                         }
@@ -6958,33 +7003,30 @@
                         const currentSelectedItems = this._getSelectedLegends();
                         if (selectMode === 'multiple') {
                             if (allowAllCanceled === false && isSelected && currentSelectedItems.length === 1) {
-                                this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem);
+                                this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                                 return;
                             }
                             if (isSelected) {
-                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover]);
-                                this._setLegendItemState(legendItem, exports.LegendStateValue.unSelected);
+                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover], e);
+                                this._setLegendItemState(legendItem, exports.LegendStateValue.unSelected, e);
                             }
                             else {
-                                this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                                this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                                this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             }
                         }
                         else {
-                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected);
-                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover]);
+                            this._setLegendItemState(legendItem, exports.LegendStateValue.selected, e);
+                            this._removeLegendItemState(legendItem, [exports.LegendStateValue.unSelected, exports.LegendStateValue.unSelectedHover], e);
                             (_e = this._itemsContainer) === null || _e === void 0 ? void 0 : _e.getChildren().forEach(item => {
                                 if (legendItem !== item) {
-                                    this._removeLegendItemState(item, [
-                                        exports.LegendStateValue.selected,
-                                        exports.LegendStateValue.selectedHover
-                                    ]);
-                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected);
+                                    this._removeLegendItemState(item, [exports.LegendStateValue.selected, exports.LegendStateValue.selectedHover], e);
+                                    this._setLegendItemState(item, exports.LegendStateValue.unSelected, e);
                                 }
                             });
                         }
                     }
-                    this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem);
+                    this._dispatchEvent(exports.LegendEvent.legendItemClick, legendItem, e);
                 }
             };
         }
@@ -7355,7 +7397,8 @@
             this._pager.addEventListener('toNext', onPaging);
             return true;
         }
-        _setLegendItemState(legendItem, stateName, keepCurrentStates = true) {
+        _setLegendItemState(legendItem, stateName, e) {
+            const keepCurrentStates = true;
             let attributeUpdate = false;
             if (!legendItem.hasState(stateName)) {
                 attributeUpdate = true;
@@ -7373,10 +7416,10 @@
                 }
             });
             if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
             }
         }
-        _removeLegendItemState(legendItem, stateNames) {
+        _removeLegendItemState(legendItem, stateNames, e) {
             let attributeUpdate = false;
             stateNames.forEach(name => {
                 if (!attributeUpdate && legendItem.hasState(name)) {
@@ -7398,7 +7441,7 @@
                 }
             });
             if (attributeUpdate) {
-                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem);
+                this._dispatchEvent(exports.LegendEvent.legendItemAttributeUpdate, legendItem, e);
             }
         }
         _getSelectedLegends() {
@@ -7417,7 +7460,7 @@
             shape.delegate = delegateShape;
             shape.states = vutils.merge({}, DEFAULT_STATES, states);
         }
-        _dispatchEvent(eventName, legendItem) {
+        _dispatchEvent(eventName, legendItem, event) {
             var _a;
             const currentSelectedItems = this._getSelectedLegends();
             currentSelectedItems.sort((pre, next) => pre.index - next.index);
@@ -7427,7 +7470,8 @@
                 data: legendItem.data,
                 selected: legendItem.hasState(exports.LegendStateValue.selected),
                 currentSelectedItems,
-                currentSelected
+                currentSelected,
+                event
             });
             changeEvent.manager = (_a = this.stage) === null || _a === void 0 ? void 0 : _a.eventSystem.manager;
             this.dispatchEvent(changeEvent);
@@ -10310,7 +10354,11 @@
     }
     Tooltip.defaultAttributes = defaultAttributes;
 
-    const version = "0.14.9-alpha.1";
+    function VTag(params) {
+        return new Tag(params ? params.attribute : {});
+    }
+
+    const version = "0.14.9-alpha.4";
 
     exports.AbstractComponent = AbstractComponent;
     exports.ArcInfo = ArcInfo;
@@ -10318,6 +10366,7 @@
     exports.BasePlayer = BasePlayer;
     exports.Brush = Brush;
     exports.CircleAxis = CircleAxis;
+    exports.CircleAxisGrid = CircleAxisGrid;
     exports.CircleCrosshair = CircleCrosshair;
     exports.ColorContinuousLegend = ColorContinuousLegend;
     exports.ContinuousPlayer = ContinuousPlayer;
@@ -10334,13 +10383,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;
@@ -10361,6 +10410,7 @@
     exports.Tag = Tag;
     exports.Title = Title;
     exports.Tooltip = Tooltip;
+    exports.VTag = VTag;
     exports.getHorizontalPath = getHorizontalPath;
     exports.getSizeHandlerPath = getSizeHandlerPath;
     exports.getVerticalPath = getVerticalPath;