@visactor/vchart 1.4.2-beta.1 → 1.4.3

package/build/index.js

@@ -14723,10 +14723,10 @@
 	  lineEnd() {
 	    switch (this._point) {
 	      case 2:
-	        this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined2, this.lastPoint1);
+	        this.context.lineTo(this._x1, this._y1, !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
 	        break;
 	      case 3:
-	        point$2(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined2, this.lastPoint1);
+	        point$2(this, this._t0, slope2(this, this._t0), !1 !== this._lastDefined1 && !1 !== this._lastDefined2, this.lastPoint1);
 	    }
 	    (this._line || 0 !== this._line && 1 === this._point) && this.context.closePath(), this._line = 1 - this._line;
 	  }
@@ -57268,6 +57268,9 @@
 	        fontSize: THEME_CONSTANTS.defaultFontSize
 	    });
 	};
+	const measureText = (text, textSpec, option, useNaiveCanvas) => {
+	    return initTextMeasure(textSpec, option, useNaiveCanvas).measure(text);
+	};
 
 	function mergeFields(targetFields, mergeFields) {
 	    for (let i = 0; i < mergeFields.length; i++) {
@@ -59329,6 +59332,10 @@
 	    return resultA;
 	}
 
+	const VCHART_UTILS = {
+	    measureText
+	};
+
 	class VChart {
 	    static useChart(charts) {
 	        charts.forEach(c => Factory.registerChart(c.type, c));
@@ -60318,6 +60325,7 @@
 	VChart.globalConfig = {
 	    uniqueTooltip: true
 	};
+	VChart.Utils = VCHART_UTILS;
 
 	var STATE_VALUE_ENUM;
 	(function (STATE_VALUE_ENUM) {
@@ -61114,6 +61122,8 @@
 	    }
 	    onDataUpdate() {
 	    }
+	    beforeRelease() {
+	    }
 	    release() {
 	        var _a;
 	        this._releaseEvent();
@@ -63462,7 +63472,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.4.2-beta.1";
+	const version = "1.4.3";
 	Logger.getInstance(LoggerLevel.Error);
 
 	const WordCloud3dAnimation = (params) => {
@@ -66359,7 +66369,7 @@
 	        return [`${this.type}_${this.id}`];
 	    }
 	    getSeriesStyle(datum) {
-	        return (attribute) => { var _a, _b; return (_b = (_a = this._seriesMark) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute, datum)) !== null && _b !== void 0 ? _b : null; };
+	        return (attribute) => { var _a, _b; return (_b = (_a = this._seriesMark) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute, datum)) !== null && _b !== void 0 ? _b : undefined; };
 	    }
 	    _getSeriesInfo(field, keys) {
 	        const defaultShapeType = this.getDefaultShapeType();
@@ -67218,6 +67228,23 @@
 	    getDefaultShapeType() {
 	        return 'square';
 	    }
+	    getActiveMarks() {
+	        return [this._areaMark, this._symbolMark, this._lineMark];
+	    }
+	    getSeriesStyle(datum) {
+	        return (attribute) => {
+	            var _a, _b, _c, _d;
+	            let result = (_b = (_a = this._seriesMark) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute, datum)) !== null && _b !== void 0 ? _b : undefined;
+	            if (attribute === 'fill' && !result) {
+	                attribute = 'stroke';
+	                result = (_d = (_c = this._seriesMark) === null || _c === void 0 ? void 0 : _c.getAttribute(attribute, datum)) !== null && _d !== void 0 ? _d : undefined;
+	            }
+	            if (attribute === 'stroke' && isArray$4(result)) {
+	                return result[0];
+	            }
+	            return result;
+	        };
+	    }
 	}
 	AreaSeries.type = SeriesTypeEnum.area;
 	AreaSeries.mark = areaSeriesMark;
@@ -68423,6 +68450,9 @@
 	        (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterComponentCompile) === null || _d === void 0 ? void 0 : _d.call(_c);
 	    }
 	    release() {
+	        [...this._components, ...this._regions, ...this._series].forEach(m => {
+	            m.beforeRelease();
+	        });
 	        super.release();
 	        this.clear();
 	        [...this._components, ...this._regions, ...this._series].forEach(m => {
@@ -69153,6 +69183,9 @@
 	    getDefaultShapeType() {
 	        return 'square';
 	    }
+	    getActiveMarks() {
+	        return [this._rectMark];
+	    }
 	}
 	BarSeries.type = SeriesTypeEnum.bar;
 	BarSeries.mark = barSeriesMark;
@@ -69711,6 +69744,9 @@
 	    getDefaultShapeType() {
 	        return 'square';
 	    }
+	    getActiveMarks() {
+	        return [this._boxPlotMark];
+	    }
 	}
 	BoxPlotSeries.type = SeriesTypeEnum.boxPlot;
 	BoxPlotSeries.mark = boxPlotSeriesMark;
@@ -70937,6 +70973,9 @@
 	    _noAnimationDataKey(datum, index) {
 	        return undefined;
 	    }
+	    getActiveMarks() {
+	        return [this._circlePackingMark];
+	    }
 	}
 	CirclePackingSeries.type = SeriesTypeEnum.circlePacking;
 	CirclePackingSeries.mark = circlePackingSeriesMark;
@@ -71773,6 +71812,9 @@
 	    getDefaultShapeType() {
 	        return 'square';
 	    }
+	    getActiveMarks() {
+	        return [this._funnelMark];
+	    }
 	}
 	FunnelSeries.type = SeriesTypeEnum.funnel;
 	FunnelSeries.mark = funnelSeriesMark;
@@ -71963,9 +72005,8 @@
 	    _buildMarkAttributeContext() {
 	        super._buildMarkAttributeContext();
 	        this._markAttributeContext.valueToPosition = this.valueToPosition.bind(this);
-	        this._markAttributeContext.getCenter = () => {
-	            return this.angleAxisHelper.center();
-	        };
+	        this._markAttributeContext.getCenter = () => this.angleAxisHelper.center();
+	        this._markAttributeContext.getLayoutRadius = () => this._computeLayoutRadius();
 	    }
 	    valueToPosition(angleValue, radiusValue) {
 	        if (isNil$1(angleValue) || isNil$1(radiusValue) || !this.angleAxisHelper || !this.radiusAxisHelper) {
@@ -72454,6 +72495,9 @@
 	    getDefaultShapeType() {
 	        return 'circle';
 	    }
+	    getActiveMarks() {
+	        return [];
+	    }
 	}
 	GaugePointerSeries.type = SeriesTypeEnum.gaugePointer;
 	GaugePointerSeries.mark = gaugePointerSeriesMark;
@@ -72654,6 +72698,9 @@
 	    getDefaultShapeType() {
 	        return 'circle';
 	    }
+	    getActiveMarks() {
+	        return [];
+	    }
 	}
 	GaugeSeries.type = SeriesTypeEnum.gauge;
 	GaugeSeries.mark = gaugeSeriesMark;
@@ -73070,6 +73117,9 @@
 	    getMeasureField() {
 	        return this.getFieldValue();
 	    }
+	    getActiveMarks() {
+	        return [this._cellMark];
+	    }
 	}
 	HeatmapSeries.type = SeriesTypeEnum.heatmap;
 	HeatmapSeries.mark = heatmapSeriesMark;
@@ -73165,12 +73215,15 @@
 	            if (isLineAsSeriesMark) {
 	                attribute === 'fill' && (attribute = 'stroke');
 	            }
-	            return (_b = (_a = this._seriesMark) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute, datum)) !== null && _b !== void 0 ? _b : null;
+	            return (_b = (_a = this._seriesMark) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute, datum)) !== null && _b !== void 0 ? _b : undefined;
 	        };
 	    }
 	    getDefaultShapeType() {
 	        return 'circle';
 	    }
+	    getActiveMarks() {
+	        return [this._lineMark, this._symbolMark];
+	    }
 	}
 	LineSeries.type = SeriesTypeEnum.line;
 	LineSeries.mark = lineSeriesMark;
@@ -73527,6 +73580,9 @@
 	        (_a = this._mapViewData.getDataView()) === null || _a === void 0 ? void 0 : _a.reRunAllTransform();
 	        (_b = this._mapViewDataStatistics) === null || _b === void 0 ? void 0 : _b.reRunAllTransform();
 	    }
+	    getActiveMarks() {
+	        return [];
+	    }
 	}
 
 	const DEFAULT_MAP_LOOK_UP_KEY = `${PREFIX}_MAP_LOOK_UP_KEY`;
@@ -73797,6 +73853,9 @@
 	    _getDataIdKey() {
 	        return DEFAULT_DATA_INDEX;
 	    }
+	    getActiveMarks() {
+	        return [this._pathMark];
+	    }
 	}
 	MapSeries.type = SeriesTypeEnum.map;
 	MapSeries.mark = mapSeriesMark;
@@ -74300,6 +74359,9 @@
 	    _noAnimationDataKey(datum, index) {
 	        return index;
 	    }
+	    getActiveMarks() {
+	        return [this._pieMark];
+	    }
 	}
 	BasePieSeries.mark = pieSeriesMark;
 	class PieSeries extends BasePieSeries {
@@ -74556,6 +74618,9 @@
 	        }, appearPreset), userAnimationConfig(SeriesMarkNameEnum.progress, this._spec)));
 	        this._trackMark.setAnimationConfig(animationConfig(DEFAULT_MARK_ANIMATION.progressBackground(), userAnimationConfig(SeriesMarkNameEnum.track, this._spec)));
 	    }
+	    getActiveMarks() {
+	        return [this._progressMark];
+	    }
 	}
 	CircularProgressSeries.type = SeriesTypeEnum.circularProgress;
 	CircularProgressSeries.mark = circularProgressSeriesMark;
@@ -74775,6 +74840,9 @@
 	    initTooltip() {
 	        this._tooltipHelper = new LinearProgressSeriesTooltipHelper(this);
 	    }
+	    getActiveMarks() {
+	        return [this._progressMark];
+	    }
 	}
 	LinearProgressSeries.type = SeriesTypeEnum.linearProgress;
 	LinearProgressSeries.mark = linearProgressSeriesMark;
@@ -75033,6 +75101,23 @@
 	    getDefaultShapeType() {
 	        return 'square';
 	    }
+	    getActiveMarks() {
+	        return [this._areaMark, this._symbolMark, this._lineMark];
+	    }
+	    getSeriesStyle(datum) {
+	        return (attribute) => {
+	            var _a, _b, _c, _d;
+	            let result = (_b = (_a = this._seriesMark) === null || _a === void 0 ? void 0 : _a.getAttribute(attribute, datum)) !== null && _b !== void 0 ? _b : undefined;
+	            if (attribute === 'fill' && !result) {
+	                attribute = 'stroke';
+	                result = (_d = (_c = this._seriesMark) === null || _c === void 0 ? void 0 : _c.getAttribute(attribute, datum)) !== null && _d !== void 0 ? _d : undefined;
+	            }
+	            if (attribute === 'stroke' && isArray$4(result)) {
+	                return result[0];
+	            }
+	            return result;
+	        };
+	    }
 	}
 	RadarSeries.type = SeriesTypeEnum.radar;
 	RadarSeries.mark = radarSeriesMark;
@@ -75786,6 +75871,9 @@
 	    getDefaultShapeType() {
 	        return 'circle';
 	    }
+	    getActiveMarks() {
+	        return [this._roseMark];
+	    }
 	}
 	RoseSeries.type = SeriesTypeEnum.rose;
 	RoseSeries.mark = roseSeriesMark;
@@ -77590,6 +77678,9 @@
 	    _noAnimationDataKey(datum, index) {
 	        return undefined;
 	    }
+	    getActiveMarks() {
+	        return [this._nodeMark, this._linkMark];
+	    }
 	}
 	SankeySeries.type = SeriesTypeEnum.sankey;
 	SankeySeries.mark = sankeySeriesMark;
@@ -77864,6 +77955,9 @@
 	    getDefaultShapeType() {
 	        return 'circle';
 	    }
+	    getActiveMarks() {
+	        return [this._symbolMark];
+	    }
 	}
 	ScatterSeries.type = SeriesTypeEnum.scatter;
 	ScatterSeries.mark = scatterSeriesMark;
@@ -78205,6 +78299,9 @@
 	        var _a, _b;
 	        return (_b = ((_a = this._linkMark) !== null && _a !== void 0 ? _a : this._arrowMark)) === null || _b === void 0 ? void 0 : _b.getData();
 	    }
+	    getActiveMarks() {
+	        return [this._linkMark, this._arrowMark];
+	    }
 	}
 	LinkSeries.type = SeriesTypeEnum.link;
 	LinkSeries.mark = linkSeriesMark;
@@ -78643,6 +78740,9 @@
 	    getStackValueField() {
 	        return null;
 	    }
+	    getActiveMarks() {
+	        return [this._dotMark];
+	    }
 	}
 	DotSeries.type = SeriesTypeEnum.dot;
 	DotSeries.mark = dotSeriesMark;
@@ -79206,6 +79306,9 @@
 	    _noAnimationDataKey(datum, index) {
 	        return undefined;
 	    }
+	    getActiveMarks() {
+	        return [this._sunburstMark];
+	    }
 	}
 	SunburstSeries.type = SeriesTypeEnum.sunburst;
 	SunburstSeries.mark = sunburstSeriesMark;
@@ -79885,6 +79988,9 @@
 	    getDefaultShapeType() {
 	        return 'square';
 	    }
+	    getActiveMarks() {
+	        return [this._nonLeafMark, this._leafMark];
+	    }
 	}
 	TreemapSeries.type = SeriesTypeEnum.treemap;
 	TreemapSeries.mark = treemapSeriesMark;
@@ -82887,6 +82993,9 @@
 	        super.onLayoutEnd(ctx);
 	        this.compile();
 	    }
+	    getActiveMarks() {
+	        return [this._wordMark, this._fillingWordMark];
+	    }
 	}
 	BaseWordCloudSeries.mark = wordCloudSeriesMark;
 
@@ -84013,23 +84122,23 @@
 	        return undefined;
 	    }
 	    _autoUpdate(rect) {
-	        var _a, _b, _c, _d;
+	        var _a, _b, _c, _d, _e;
 	        if (!this._auto) {
 	            return true;
 	        }
 	        const axisSpec = (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.getSpec();
 	        const bandSizeResult = this._getAxisBandSize(axisSpec);
 	        const { bandSize, maxBandSize, minBandSize } = bandSizeResult !== null && bandSizeResult !== void 0 ? bandSizeResult : {};
-	        if ((rect === null || rect === void 0 ? void 0 : rect.height) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.height) &&
-	            (rect === null || rect === void 0 ? void 0 : rect.width) === ((_c = this._cacheRect) === null || _c === void 0 ? void 0 : _c.width) &&
-	            this._fixedBandSize === bandSize) {
-	            return this._cacheVisibility;
-	        }
-	        this._cacheRect = rect;
 	        let isShown = true;
 	        const scale = this._stateScale;
 	        scale.range(this._isHorizontal ? [0, rect.width] : axisSpec.inverse ? [0, rect.height] : [rect.height, 0]);
 	        if (isDiscrete(scale.type)) {
+	            if ((rect === null || rect === void 0 ? void 0 : rect.height) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.height) &&
+	                (rect === null || rect === void 0 ? void 0 : rect.width) === ((_c = this._cacheRect) === null || _c === void 0 ? void 0 : _c.width) &&
+	                this._fixedBandSize === bandSize) {
+	                return this._cacheVisibility;
+	            }
+	            this._cacheRect = rect;
 	            if (bandSizeResult) {
 	                if (this._start || this._end) {
 	                    scale.rangeFactor([this._start, this._end], true);
@@ -84064,6 +84173,17 @@
 	            this._start = start;
 	            this._end = end;
 	        }
+	        else {
+	            const [start, end] = (_e = scale.rangeFactor()) !== null && _e !== void 0 ? _e : [this._start, this._end];
+	            if (start === 0 && end === 1) {
+	                this.hide();
+	                isShown = false;
+	            }
+	            else {
+	                this.show();
+	                isShown = true;
+	            }
+	        }
 	        this.setStartAndEnd(this._start, this._end);
 	        this._cacheVisibility = isShown;
 	        return isShown;
@@ -84486,11 +84606,11 @@
 	        this.layoutLevel = LayoutLevel.CustomMark;
 	    }
 	    static createComponent(spec, options) {
-	        const titleSpec = spec.customMark;
-	        if (!titleSpec) {
+	        const customMarkSpec = spec.customMark;
+	        if (!customMarkSpec) {
 	            return null;
 	        }
-	        return [new CustomMark(spec.customMark, Object.assign(Object.assign({}, options), { specIndex: 0, specKey: 'customMark' }))];
+	        return [new CustomMark(customMarkSpec, Object.assign(Object.assign({}, options), { specIndex: 0, specKey: 'customMark' }))];
 	    }
 	    created() {
 	        super.created();
@@ -84555,6 +84675,8 @@
 	}
 	CustomMark.type = ComponentTypeEnum.customMark;
 
+	const IN_BRUSH_STATE = 'inBrush';
+	const OUT_BRUSH_STATE = 'outOfBrush';
 	class Brush extends BaseComponent {
 	    constructor() {
 	        super(...arguments);
@@ -84570,10 +84692,22 @@
 	        this._linkedInBrushElementsMap = {};
 	        this._linkedOutOfBrushElementsMap = {};
 	        this._needInitOutState = true;
-	        this._isFirstState = true;
 	        this._cacheInteractiveRangeAttrs = [];
 	        this._needEnablePickable = true;
 	    }
+	    init() {
+	        var _a, _b;
+	        const inBrushMarkAttr = this._transformBrushedMarkAttr((_a = this._spec) === null || _a === void 0 ? void 0 : _a.inBrush);
+	        const outOfBrushMarkAttr = this._transformBrushedMarkAttr((_b = this._spec) === null || _b === void 0 ? void 0 : _b.outOfBrush);
+	        this._option.getAllSeries().forEach((s) => {
+	            s.getActiveMarks().forEach((m) => {
+	                if (m) {
+	                    s.setMarkStyle(m, Object.assign({}, inBrushMarkAttr), IN_BRUSH_STATE, AttributeLevel.Series);
+	                    s.setMarkStyle(m, Object.assign({}, outOfBrushMarkAttr), OUT_BRUSH_STATE, AttributeLevel.Series);
+	                }
+	            });
+	        });
+	    }
 	    static createComponent(spec, options) {
 	        const brushSpec = spec.brush || options.defaultSpec;
 	        if (isNil$1(brushSpec) || brushSpec.visible === false) {
@@ -84638,11 +84772,19 @@
 	        this._brushComponents.push(brush);
 	        this._cacheInteractiveRangeAttrs.push(interactiveAttr);
 	        brush.setUpdateDragMaskCallback((operateParams) => {
+	            var _a, _b, _c;
 	            const { operateType, operateMask } = operateParams;
-	            if (this._isFirstState ||
-	                (this._needInitOutState && brushMode === 'single' && operateType === IOperateType.drawing)) {
-	                this._initMarkBrushState(componentIndex, 'outOfBrush');
-	            }
+	            let operateTypeCache = operateType;
+	            if (this._needInitOutState && brushMode === 'single' && operateType === IOperateType.drawing) {
+	                this._initMarkBrushState(componentIndex, OUT_BRUSH_STATE);
+	            }
+	            (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.getChart()) === null || _b === void 0 ? void 0 : _b.getEvent()) === null || _c === void 0 ? void 0 : _c.on('click', p => {
+	                if (!p.mark && operateTypeCache === IOperateType.brushClear) {
+	                    this._initMarkBrushState(componentIndex, '');
+	                    this._needInitOutState = true;
+	                    operateTypeCache = null;
+	                }
+	            });
 	            if (operateType === IOperateType.drawing) {
 	                this._needInitOutState = false;
 	                this._needEnablePickable = true;
@@ -84651,10 +84793,6 @@
 	                this._needInitOutState = true;
 	                this._needEnablePickable = false;
 	            }
-	            if (operateType === IOperateType.brushClear) {
-	                this._initMarkBrushState(componentIndex, '');
-	                this._needInitOutState = true;
-	            }
 	            this._reconfigItem(operateMask, region);
 	            this._reconfigLinkedItem(operateMask, region);
 	            let eventType = ChartEvent.brushChange;
@@ -84712,7 +84850,7 @@
 	                const graphicItem = el.getGraphicItem();
 	                const elementKey = mark.id + '_' + el.key;
 	                if (((_a = this._outOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) && this._isBrushContainItem(operateMask, graphicItem)) {
-	                    graphicItem.addState('inBrush');
+	                    el.addState(IN_BRUSH_STATE);
 	                    if (!this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) {
 	                        this._inBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name] = {};
 	                    }
@@ -84721,8 +84859,8 @@
 	                }
 	                else if (((_c = (_b = this._inBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) &&
 	                    !this._isBrushContainItem(operateMask, graphicItem)) {
-	                    graphicItem.removeState('inBrush');
-	                    graphicItem.addState('outOfBrush');
+	                    el.removeState(IN_BRUSH_STATE);
+	                    el.addState(OUT_BRUSH_STATE);
 	                    this._outOfBrushElementsMap[elementKey] = el;
 	                    delete this._inBrushElementsMap[operateMask.name][elementKey];
 	                }
@@ -84748,7 +84886,7 @@
 	                        const elementKey = mark.id + '_' + el.key;
 	                        if (((_a = this._linkedOutOfBrushElementsMap) === null || _a === void 0 ? void 0 : _a[elementKey]) &&
 	                            this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY })) {
-	                            graphicItem.addState('inBrush');
+	                            el.addState(IN_BRUSH_STATE);
 	                            if (!this._linkedInBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) {
 	                                this._linkedInBrushElementsMap[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name] = {};
 	                            }
@@ -84757,8 +84895,8 @@
 	                        }
 	                        else if (((_c = (_b = this._linkedInBrushElementsMap) === null || _b === void 0 ? void 0 : _b[operateMask === null || operateMask === void 0 ? void 0 : operateMask.name]) === null || _c === void 0 ? void 0 : _c[elementKey]) &&
 	                            !this._isBrushContainItem(operateMask, graphicItem, { dx: regionOffsetX, dy: regionOffsetY })) {
-	                            graphicItem.removeState('inBrush');
-	                            graphicItem.addState('outOfBrush');
+	                            el.removeState(IN_BRUSH_STATE);
+	                            el.addState(OUT_BRUSH_STATE);
 	                            this._linkedOutOfBrushElementsMap[elementKey] = el;
 	                        }
 	                        graphicItem.setAttribute('pickable', !this._needEnablePickable);
@@ -84866,7 +85004,6 @@
 	        });
 	    }
 	    _initMarkBrushState(componentIndex, stateName) {
-	        var _a, _b;
 	        this._brushComponents.forEach((brush, index) => {
 	            if (index !== componentIndex) {
 	                brush.children[0].removeAllChild();
@@ -84876,8 +85013,6 @@
 	        this._outOfBrushElementsMap = {};
 	        this._linkedInBrushElementsMap = {};
 	        this._linkedOutOfBrushElementsMap = {};
-	        const inBrushMarkAttr = this._transformBrushedMarkAttr((_a = this._spec) === null || _a === void 0 ? void 0 : _a.inBrush);
-	        const outOfBrushMarkAttr = this._transformBrushedMarkAttr((_b = this._spec) === null || _b === void 0 ? void 0 : _b.outOfBrush);
 	        this._option.getAllSeries().forEach((s) => {
 	            s.getMarksWithoutRoot().forEach((mark) => {
 	                const grammarMark = mark.getProduct();
@@ -84886,24 +85021,15 @@
 	                }
 	                const elements = grammarMark.elements;
 	                elements.forEach((el) => {
-	                    const graphicItem = el.getGraphicItem();
 	                    const elementKey = mark.id + '_' + el.key;
-	                    graphicItem.stateProxy = (stateName) => {
-	                        if (stateName === 'inBrush') {
-	                            return inBrushMarkAttr;
-	                        }
-	                        if (stateName === 'outOfBrush') {
-	                            return outOfBrushMarkAttr;
-	                        }
-	                        return;
-	                    };
-	                    graphicItem.addState(stateName);
+	                    el.removeState(IN_BRUSH_STATE);
+	                    el.removeState(OUT_BRUSH_STATE);
+	                    el.addState(stateName);
 	                    this._outOfBrushElementsMap[elementKey] = el;
 	                    this._linkedOutOfBrushElementsMap[elementKey] = el;
 	                });
 	            });
 	        });
-	        this._isFirstState = false;
 	    }
 	    initEvent() {
 	    }
@@ -84958,7 +85084,7 @@
 	    }
 	}
 	Brush.type = ComponentTypeEnum.brush;
-	Brush.speckey = 'inBrush';
+	Brush.speckey = 'brush';
 
 	function overlap(a, b, sep = 0) {
 	    return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
@@ -88261,33 +88387,29 @@
 	    }
 	    _getLegendItems() {
 	        const originData = (this._legendData.getLatestData() || []).map((datum) => {
-	            var _a;
-	            const fill = datum.style('fill') || datum.style('stroke');
-	            const stroke = datum.style('stroke');
-	            const lineWidth = datum.style('lineWidth');
-	            const symbolType = datum.style('symbolType');
+	            var _a, _b;
 	            const fillOpacity = datum.style('fillOpacity');
 	            const strokeOpacity = datum.style('strokeOpacity');
 	            const opacity = datum.style('opacity');
 	            const texture = datum.style('texture');
-	            const textureColor = datum.style('textureColor');
-	            const outerBorder = datum.style('outerBorder');
-	            const innerBorder = datum.style('innerBorder');
 	            return {
 	                label: datum.key,
 	                shape: {
-	                    fill,
-	                    symbolType: (_a = symbolType !== null && symbolType !== void 0 ? symbolType : datum.shapeType) !== null && _a !== void 0 ? _a : 'circle',
-	                    stroke: lineWidth === 0 || fill === stroke ? null : stroke,
+	                    symbolType: (_b = (_a = datum.style('symbolType')) !== null && _a !== void 0 ? _a : datum.shapeType) !== null && _b !== void 0 ? _b : 'circle',
 	                    fillOpacity: isValidNumber$1(fillOpacity) ? fillOpacity : 1,
 	                    strokeOpacity: isValidNumber$1(strokeOpacity) ? strokeOpacity : 1,
 	                    opacity: isValidNumber$1(opacity) ? opacity : 1,
-	                    texture: texture,
 	                    texturePadding: texture ? 1 : null,
 	                    textureSize: texture ? 4 : null,
-	                    textureColor,
-	                    innerBorder,
-	                    outerBorder
+	                    texture,
+	                    fill: datum.style('fill'),
+	                    stroke: datum.style('stroke'),
+	                    textureColor: datum.style('textureColor'),
+	                    innerBorder: datum.style('innerBorder'),
+	                    outerBorder: datum.style('outerBorder'),
+	                    lineDash: datum.style('lineDash'),
+	                    lineDashOffset: datum.style('lineDashOffset'),
+	                    lineWidth: datum.style('lineWidth')
 	                }
 	            };
 	        });
@@ -91116,7 +91238,7 @@
 	    }
 	    static createComponent(spec, options) {
 	        const markLineSpec = spec.markLine || options.defaultSpec;
-	        if (isNil$1(markLineSpec)) {
+	        if (isEmpty(markLineSpec)) {
 	            return undefined;
 	        }
 	        if (!isArray$4(markLineSpec) && markLineSpec.visible !== false) {
@@ -91181,8 +91303,12 @@
 	        else if (isPositionLayout) {
 	            points = spec.positions;
 	        }
-	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
 	        const seriesData = this._relativeSeries.getViewData().latestData;
+	        const dataPoints = data
+	            ? data.latestData[0].latestData
+	                ? data.latestData[0].latestData
+	                : data.latestData
+	            : seriesData;
 	        let limitRect;
 	        if (spec.clip || ((_b = spec.label) === null || _b === void 0 ? void 0 : _b.confine)) {
 	            const { minX, maxX, minY, maxY } = this._computeClipRange([
@@ -91328,7 +91454,7 @@
 	    }
 	    static createComponent(spec, options) {
 	        const markAreaSpec = spec.markArea || options.defaultSpec;
-	        if (isNil$1(markAreaSpec)) {
+	        if (isEmpty(markAreaSpec)) {
 	            return undefined;
 	        }
 	        if (!isArray$4(markAreaSpec) && markAreaSpec.visible !== false) {
@@ -91390,7 +91516,12 @@
 	        else if (isPositionLayout) {
 	            points = spec.positions;
 	        }
-	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
+	        const seriesData = this._relativeSeries.getViewData().latestData;
+	        const dataPoints = data
+	            ? data.latestData[0].latestData
+	                ? data.latestData[0].latestData
+	                : data.latestData
+	            : seriesData;
 	        let limitRect;
 	        if (spec.clip || ((_b = spec.label) === null || _b === void 0 ? void 0 : _b.confine)) {
 	            const { minX, maxX, minY, maxY } = this._computeClipRange([
@@ -91408,7 +91539,7 @@
 	        (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.setAttributes({
 	            points: points,
 	            label: Object.assign(Object.assign({}, (_e = (_d = this._markerComponent) === null || _d === void 0 ? void 0 : _d.attribute) === null || _e === void 0 ? void 0 : _e.label), { text: this._spec.label.formatMethod
-	                    ? this._spec.label.formatMethod(dataPoints, this._relativeSeries.getViewData().latestData)
+	                    ? this._spec.label.formatMethod(dataPoints, seriesData)
 	                    : (_h = (_g = (_f = this._markerComponent) === null || _f === void 0 ? void 0 : _f.attribute) === null || _g === void 0 ? void 0 : _g.label) === null || _h === void 0 ? void 0 : _h.text }),
 	            limitRect,
 	            dx: this.layoutOffsetX,
@@ -91462,7 +91593,7 @@
 	    }
 	    static createComponent(spec, options) {
 	        const markPointSpec = spec.markPoint || options.defaultSpec;
-	        if (isNil$1(markPointSpec)) {
+	        if (isEmpty(markPointSpec)) {
 	            return undefined;
 	        }
 	        if (!isArray$4(markPointSpec) && markPointSpec.visible !== false) {
@@ -91506,7 +91637,12 @@
 	        else if (isPositionLayout) {
 	            point = spec.position;
 	        }
-	        const dataPoints = data.latestData[0].latestData ? data.latestData[0].latestData : data.latestData;
+	        const seriesData = this._relativeSeries.getViewData().latestData;
+	        const dataPoints = data
+	            ? data.latestData[0].latestData
+	                ? data.latestData[0].latestData
+	                : data.latestData
+	            : seriesData;
 	        let limitRect;
 	        if (spec.clip) {
 	            const { minX, maxX, minY, maxY } = this._computeClipRange([relativeSeries.getRegion()]);
@@ -91520,7 +91656,7 @@
 	        (_b = this._markerComponent) === null || _b === void 0 ? void 0 : _b.setAttributes({
 	            position: point,
 	            itemContent: Object.assign(Object.assign({}, (_d = (_c = this._markerComponent) === null || _c === void 0 ? void 0 : _c.attribute) === null || _d === void 0 ? void 0 : _d.itemContent), { textStyle: Object.assign(Object.assign({}, (_g = (_f = (_e = this._markerComponent) === null || _e === void 0 ? void 0 : _e.attribute) === null || _f === void 0 ? void 0 : _f.itemContent) === null || _g === void 0 ? void 0 : _g.textStyle), { text: ((_h = this._spec.itemContent.text) === null || _h === void 0 ? void 0 : _h.formatMethod)
-	                        ? this._spec.itemContent.text.formatMethod(dataPoints, this._relativeSeries.getViewData().latestData)
+	                        ? this._spec.itemContent.text.formatMethod(dataPoints, seriesData)
 	                        : (_m = (_l = (_k = (_j = this._markerComponent) === null || _j === void 0 ? void 0 : _j.attribute) === null || _k === void 0 ? void 0 : _k.itemContent) === null || _l === void 0 ? void 0 : _l.textStyle) === null || _m === void 0 ? void 0 : _m.text }) }),
 	            limitRect,
 	            dx: this.layoutOffsetX,
@@ -91621,6 +91757,41 @@
 	    }
 	    return boundingClientRect.height / element.offsetHeight;
 	};
+	const measureTooltipText = (text, style) => {
+	    var _a;
+	    text = (text !== null && text !== void 0 ? text : '').toString();
+	    const measure = initTextMeasure(style);
+	    if (!style.multiLine) {
+	        const { width, height } = measure.fullMeasure(text);
+	        return {
+	            width,
+	            height,
+	            text
+	        };
+	    }
+	    let textLines = text.split('\n');
+	    textLines = textLines.map((line, i) => (i < textLines.length - 1 ? line + '\n' : line));
+	    const { width, height } = measure.fullMeasure(textLines);
+	    if (style.maxWidth && style.maxWidth <= width) {
+	        const bound = getRichTextBounds({
+	            wordBreak: (_a = style.wordBreak) !== null && _a !== void 0 ? _a : 'break-word',
+	            maxWidth: style.maxWidth,
+	            width: 0,
+	            height: 0,
+	            textConfig: textLines.map((line, i) => (Object.assign(Object.assign({}, style), { text: line })))
+	        });
+	        return {
+	            width: bound.width(),
+	            height: bound.height(),
+	            text: textLines
+	        };
+	    }
+	    return {
+	        width,
+	        height,
+	        text: textLines
+	    };
+	};
 
 	const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
 	const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
@@ -91996,182 +92167,208 @@
 	const getHorizontalPositionType = (position, defaultCase) => { var _a, _b; return (_b = (_a = positionType[position]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : defaultCase; };
 	const getVerticalPositionType = (position, defaultCase) => { var _a, _b; return (_b = (_a = positionType[position]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : defaultCase; };
 
-	const defaultTextAttributes = {
+	const DEFAULT_TEXT_ATTRIBUTES = {
 	    fontFamily: THEME_CONSTANTS.defaultFontFamily,
 	    spacing: 10,
-	    multiLine: false,
 	    wordBreak: 'break-word'
 	};
 	function getTextAttributes(style = {}, globalTheme, defaultAttributes) {
 	    var _a, _b;
-	    const attrs = Object.assign(Object.assign({}, (defaultAttributes !== null && defaultAttributes !== void 0 ? defaultAttributes : defaultTextAttributes)), { fill: ((_a = style.fill) !== null && _a !== void 0 ? _a : style.fontColor), textAlign: style.textAlign, textBaseline: style.textBaseline, fontFamily: (_b = style.fontFamily) !== null && _b !== void 0 ? _b : globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight, lineHeight: style.lineHeight, spacing: style.spacing, multiLine: style.multiLine, maxWidth: style.maxWidth, wordBreak: style.wordBreak });
+	    const attrs = Object.assign(Object.assign({}, (defaultAttributes !== null && defaultAttributes !== void 0 ? defaultAttributes : DEFAULT_TEXT_ATTRIBUTES)), { fill: ((_a = style.fill) !== null && _a !== void 0 ? _a : style.fontColor), textAlign: style.textAlign, textBaseline: style.textBaseline, fontFamily: (_b = style.fontFamily) !== null && _b !== void 0 ? _b : globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.fontFamily, fontSize: style.fontSize, fontWeight: style.fontWeight, lineHeight: style.lineHeight, spacing: style.spacing, multiLine: style.multiLine, maxWidth: style.maxWidth, wordBreak: style.wordBreak, autoWidth: style.autoWidth });
 	    return attrs;
 	}
-
-	const getTooltipAttributes = (actualTooltip, style) => {
-	    const { spaceRow: commonSpaceRow, padding, title: titleStyle, shape: shapeStyle, key: keyStyle, value: valueStyle } = style;
-	    const attribute = Object.assign(Object.assign({}, style), { title: {}, content: [], titleStyle: {
+	const getPanelAttributes = (style) => {
+	    var _a;
+	    const { backgroundColor, border, shadow } = style;
+	    const panelAttrs = {
+	        lineWidth: (_a = border === null || border === void 0 ? void 0 : border.width) !== null && _a !== void 0 ? _a : 0,
+	        shadow: !!shadow
+	    };
+	    if (border === null || border === void 0 ? void 0 : border.color) {
+	        panelAttrs.stroke = border.color;
+	    }
+	    if (backgroundColor) {
+	        panelAttrs.fill = backgroundColor;
+	    }
+	    if (shadow) {
+	        panelAttrs.shadowColor = shadow.color;
+	        panelAttrs.shadowBlur = shadow.blur;
+	        panelAttrs.shadowOffsetX = shadow.x;
+	        panelAttrs.shadowOffsetY = shadow.y;
+	        panelAttrs.shadowSpread = shadow.spread;
+	    }
+	    const { radius } = border !== null && border !== void 0 ? border : {};
+	    if (isValid$1(radius)) {
+	        panelAttrs.cornerRadius = [radius, radius, radius, radius];
+	    }
+	    return panelAttrs;
+	};
+	const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
+	    var _a, _b, _c, _d, _e;
+	    const { style = {}, enterable, transitionDuration } = spec;
+	    const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow: commonSpaceRow } = style;
+	    const padding = normalizePadding$1(panel.padding);
+	    const paddingSpec = normalizeLayoutPaddingSpec(panel.padding);
+	    const titleStyle = getTextAttributes(titleLabel, globalTheme);
+	    const keyStyle = getTextAttributes(keyLabel, globalTheme);
+	    const valueStyle = getTextAttributes(valueLabel, globalTheme);
+	    const shapeStyle = {
+	        fill: true,
+	        size: (_a = shape === null || shape === void 0 ? void 0 : shape.size) !== null && _a !== void 0 ? _a : 8,
+	        spacing: (_b = shape === null || shape === void 0 ? void 0 : shape.spacing) !== null && _b !== void 0 ? _b : 6
+	    };
+	    const attributes = {
+	        panel: getPanelAttributes(panel),
+	        padding,
+	        title: {},
+	        content: [],
+	        titleStyle: {
 	            value: titleStyle,
 	            spaceRow: commonSpaceRow
-	        }, contentStyle: {
+	        },
+	        contentStyle: {
 	            shape: shapeStyle,
 	            key: keyStyle,
 	            value: valueStyle,
 	            spaceRow: commonSpaceRow
-	        }, hasContentShape: false, keyWidth: 0, valueWidth: 0 });
-	    ['key', 'value', 'shape'].forEach(key => {
-	        delete attribute[key];
-	    });
+	        },
+	        hasContentShape: false,
+	        keyWidth: 0,
+	        valueWidth: 0,
+	        enterable,
+	        transitionDuration
+	    };
 	    const { title = {}, content = [] } = actualTooltip;
-	    let maxWidth = 0;
-	    let containerHeight = padding.top + padding.bottom;
-	    let titleMaxHeight = 0;
-	    const { visible: titleVisible = true, value: titleValue = '', valueStyle: titleValueStyle, hasShape: titleHasShape, shapeType: titleShapeType = '', shapeHollow: titleShapeHollow, shapeColor: titleShapeColor, spaceRow: titleSpaceRow } = title;
-	    attribute.title.visible = titleVisible;
-	    attribute.title.spaceRow = titleSpaceRow !== null && titleSpaceRow !== void 0 ? titleSpaceRow : commonSpaceRow;
-	    if (titleVisible) {
-	        const lineTitleStyle = mergeSpec({}, titleStyle, getTextAttributes(titleValueStyle, undefined, {}));
-	        const { text, width, height } = measureTooltipText(titleValue, lineTitleStyle);
-	        attribute.title.value = Object.assign(Object.assign({ width,
-	            height }, lineTitleStyle), { text });
-	        maxWidth = width;
-	        titleMaxHeight = height;
-	        if (titleHasShape && builtinSymbolsMap[titleShapeType]) {
-	            const titleShapeAttrs = {
-	                symbolType: titleShapeType
-	            };
-	            if (titleShapeHollow) {
-	                titleShapeAttrs.stroke = titleShapeColor;
-	            }
-	            else {
-	                titleShapeAttrs.fill = titleShapeColor;
-	            }
-	            attribute.title.shape = titleShapeAttrs;
-	            maxWidth += shapeStyle.size + shapeStyle.spacing;
-	            titleMaxHeight = Math.max(shapeStyle.size, titleMaxHeight);
-	        }
-	        attribute.title.width = maxWidth;
-	        attribute.title.height = titleMaxHeight;
-	        containerHeight += titleMaxHeight;
-	    }
-	    if (content.length) {
-	        const filteredContent = content.filter(item => {
-	            return (item.key || item.value) && item.visible !== false;
-	        });
-	        if (filteredContent.length) {
-	            if (titleVisible) {
-	                containerHeight += attribute.title.spaceRow;
-	            }
-	            const keyWidths = [];
-	            const adaptiveKeyWidths = [];
-	            const valueWidths = [];
-	            const shapeWidths = [];
-	            attribute.content = filteredContent.map((item, i) => {
-	                let itemHeight = 0;
-	                const { hasShape, key, shapeColor, shapeHollow, shapeType = '', shapeFill, shapeStroke, shapeLineWidth, shapeSize, value, isKeyAdaptive, spaceRow: lineSpaceRow } = item;
-	                const itemAttrs = { height: 0, spaceRow: lineSpaceRow !== null && lineSpaceRow !== void 0 ? lineSpaceRow : commonSpaceRow };
-	                if (isValid$1(key)) {
-	                    const lineKeyStyle = mergeSpec({}, keyStyle, getTextAttributes(item.keyStyle, undefined, {}));
-	                    const { width, height, text } = measureTooltipText(key, lineKeyStyle);
-	                    itemAttrs.key = Object.assign(Object.assign({ width,
-	                        height }, lineKeyStyle), { text });
-	                    if (!isKeyAdaptive) {
-	                        keyWidths.push(width);
-	                    }
-	                    else {
-	                        adaptiveKeyWidths.push(width);
-	                    }
-	                    itemHeight = Math.max(itemHeight, height);
+	    let containerWidth = paddingSpec.left + paddingSpec.right;
+	    let containerHeight = paddingSpec.top + paddingSpec.bottom;
+	    let contentMaxWidth = 0;
+	    const filteredContent = content.filter(item => {
+	        return (item.key || item.value) && item.visible !== false;
+	    });
+	    const hasContent = !!filteredContent.length;
+	    let maxKeyWidth = 0;
+	    let maxAdaptiveKeyWidth = 0;
+	    let maxValueWidth = 0;
+	    let maxShapeWidth = 0;
+	    if (hasContent) {
+	        const keyWidths = [];
+	        const adaptiveKeyWidths = [];
+	        const valueWidths = [];
+	        const shapeWidths = [];
+	        attributes.content = filteredContent.map((item, i) => {
+	            let itemHeight = 0;
+	            const { hasShape: actualHasShape, key: actualKey, shapeType: actualShapeType = '', shapeFill: actualShapeFill, shapeStroke: actualShapeStroke, shapeLineWidth: actualShapeLineWidth, shapeSize: actualShapeSize, value: actualValue, isKeyAdaptive: actualIsKeyAdaptive, spaceRow: actualSpaceRow, keyStyle: actualKeyStyle, valueStyle: actualValueStyle, shapeColor: actualShapeColor, shapeHollow: actualShapeHollow } = item;
+	            const itemAttrs = { height: 0, spaceRow: actualSpaceRow !== null && actualSpaceRow !== void 0 ? actualSpaceRow : commonSpaceRow };
+	            if (isValid$1(actualKey)) {
+	                const itemKeyStyle = mergeSpec({}, keyStyle, getTextAttributes(actualKeyStyle, undefined, {}));
+	                const { width, height, text } = measureTooltipText(actualKey, itemKeyStyle);
+	                itemAttrs.key = Object.assign(Object.assign({ width,
+	                    height }, itemKeyStyle), { text });
+	                if (!actualIsKeyAdaptive) {
+	                    keyWidths.push(width);
 	                }
-	                if (isValid$1(value)) {
-	                    const lineValueStyle = mergeSpec({}, valueStyle, getTextAttributes(item.valueStyle, undefined, {}));
-	                    const { width, height, text } = measureTooltipText(value, lineValueStyle);
-	                    itemAttrs.value = Object.assign(Object.assign({ width,
-	                        height }, lineValueStyle), { text });
-	                    valueWidths.push(width);
-	                    itemHeight = Math.max(itemHeight, height);
+	                else {
+	                    adaptiveKeyWidths.push(width);
 	                }
-	                if (hasShape) {
-	                    const shape = {
-	                        visible: true,
-	                        symbolType: shapeType
-	                    };
-	                    const adaptiveShapeFill = shapeFill !== null && shapeFill !== void 0 ? shapeFill : shapeColor;
-	                    if (shapeHollow) {
-	                        shape.stroke = adaptiveShapeFill;
-	                    }
-	                    else {
-	                        shape.fill = adaptiveShapeFill;
-	                    }
-	                    shape.stroke = shapeStroke !== null && shapeStroke !== void 0 ? shapeStroke : adaptiveShapeFill;
-	                    shape.lineWidth = shapeLineWidth;
-	                    itemAttrs.shape = shape;
-	                    const shapeWidth = shapeSize !== null && shapeSize !== void 0 ? shapeSize : shapeStyle.size;
-	                    itemHeight = Math.max(shapeWidth, itemHeight);
-	                    shapeWidths.push(shapeWidth);
+	                itemHeight = Math.max(itemHeight, height);
+	            }
+	            if (isValid$1(actualValue)) {
+	                const itemValueStyle = mergeSpec({}, valueStyle, getTextAttributes(actualValueStyle, undefined, {}));
+	                const { width, height, text } = measureTooltipText(actualValue, itemValueStyle);
+	                itemAttrs.value = Object.assign(Object.assign({ width,
+	                    height }, itemValueStyle), { text });
+	                valueWidths.push(width);
+	                itemHeight = Math.max(itemHeight, height);
+	            }
+	            if (actualHasShape) {
+	                const shape = {
+	                    visible: true,
+	                    symbolType: actualShapeType
+	                };
+	                const adaptiveShapeFill = actualShapeFill !== null && actualShapeFill !== void 0 ? actualShapeFill : actualShapeColor;
+	                if (actualShapeHollow) {
+	                    shape.stroke = adaptiveShapeFill;
 	                }
 	                else {
-	                    itemAttrs.shape = { visible: false };
-	                }
-	                itemAttrs.height = itemHeight;
-	                containerHeight += itemHeight;
-	                if (i < filteredContent.length - 1) {
-	                    containerHeight += itemAttrs.spaceRow;
+	                    shape.fill = adaptiveShapeFill;
 	                }
-	                return itemAttrs;
-	            });
-	            const maxKeyWidth = keyWidths.length ? Math.max(...keyWidths) : 0;
-	            const maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? Math.max(...adaptiveKeyWidths) : 0;
-	            const maxValueWidth = valueWidths.length ? Math.max(...valueWidths) : 0;
-	            const shapeWidth = shapeWidths.length ? Math.max(...shapeWidths) + shapeStyle.spacing : 0;
-	            maxWidth = Math.max(maxKeyWidth + maxValueWidth + keyStyle.spacing + valueStyle.spacing + shapeWidth, maxAdaptiveKeyWidth + shapeWidth, maxWidth);
-	            attribute.hasContentShape = !!shapeWidths.length;
-	            attribute.keyWidth = maxKeyWidth;
-	            attribute.valueWidth = maxValueWidth;
-	        }
-	    }
-	    const containerSize = {
-	        width: maxWidth + padding.left + padding.right,
-	        height: containerHeight
-	    };
-	    attribute.panel.width = containerSize.width;
-	    attribute.panel.height = containerSize.height;
-	    return attribute;
-	};
-	const measureTooltipText = (text, style) => {
-	    var _a;
-	    text = (text !== null && text !== void 0 ? text : '').toString();
-	    const measure = initTextMeasure(style);
-	    if (!style.multiLine) {
-	        const { width, height } = measure.fullMeasure(text);
-	        return {
-	            width,
-	            height,
-	            text
-	        };
+	                shape.stroke = actualShapeStroke !== null && actualShapeStroke !== void 0 ? actualShapeStroke : adaptiveShapeFill;
+	                shape.lineWidth = actualShapeLineWidth;
+	                itemAttrs.shape = shape;
+	                const shapeWidth = actualShapeSize !== null && actualShapeSize !== void 0 ? actualShapeSize : shapeStyle.size;
+	                itemHeight = Math.max(shapeWidth, itemHeight);
+	                shapeWidths.push(shapeWidth);
+	            }
+	            else {
+	                itemAttrs.shape = { visible: false };
+	            }
+	            itemAttrs.height = itemHeight;
+	            containerHeight += itemHeight;
+	            if (i < filteredContent.length - 1) {
+	                containerHeight += itemAttrs.spaceRow;
+	            }
+	            return itemAttrs;
+	        });
+	        maxKeyWidth = keyWidths.length ? Math.max(...keyWidths) : 0;
+	        maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? Math.max(...adaptiveKeyWidths) : 0;
+	        maxValueWidth = valueWidths.length ? Math.max(...valueWidths) : 0;
+	        maxShapeWidth = shapeWidths.length ? Math.max(...shapeWidths) + shapeStyle.spacing : 0;
+	        contentMaxWidth = Math.max(maxShapeWidth + maxKeyWidth + keyStyle.spacing + maxValueWidth + valueStyle.spacing, maxShapeWidth + maxAdaptiveKeyWidth, contentMaxWidth);
+	        attributes.hasContentShape = !!shapeWidths.length;
+	        attributes.keyWidth = maxKeyWidth;
+	        attributes.valueWidth = maxValueWidth;
+	    }
+	    let titleMaxWidth = 0;
+	    let titleMaxHeight = 0;
+	    const { visible: actualTitleVisible = true, value: actualTitleValue = '', valueStyle: actualTitleValueStyle, spaceRow: actualTitleSpaceRow } = title;
+	    attributes.title.visible = actualTitleVisible;
+	    attributes.title.spaceRow = actualTitleSpaceRow !== null && actualTitleSpaceRow !== void 0 ? actualTitleSpaceRow : commonSpaceRow;
+	    let titleValueStyle = {};
+	    const isAutoWidthMode = () => titleValueStyle.autoWidth && titleValueStyle.multiLine !== false;
+	    if (actualTitleVisible) {
+	        titleValueStyle = mergeSpec({}, titleStyle, getTextAttributes(actualTitleValueStyle, undefined, {}));
+	        if (isAutoWidthMode()) {
+	            titleValueStyle.multiLine = (_c = titleValueStyle.multiLine) !== null && _c !== void 0 ? _c : true;
+	            titleValueStyle.maxWidth = (_d = titleValueStyle.maxWidth) !== null && _d !== void 0 ? _d : (hasContent ? Math.ceil(contentMaxWidth) : undefined);
+	        }
+	        const { text, width, height } = measureTooltipText(actualTitleValue, titleValueStyle);
+	        attributes.title.value = Object.assign(Object.assign({ width: isAutoWidthMode() ? Math.min(width, (_e = titleValueStyle.maxWidth) !== null && _e !== void 0 ? _e : Number.MAX_VALUE) : width, height }, titleValueStyle), { text });
+	        titleMaxWidth = attributes.title.value.width;
+	        titleMaxHeight = attributes.title.value.height;
+	        containerHeight += titleMaxHeight + (hasContent ? attributes.title.spaceRow : 0);
+	    }
+	    attributes.title.width = titleMaxWidth;
+	    attributes.title.height = titleMaxHeight;
+	    if (isAutoWidthMode()) {
+	        containerWidth += contentMaxWidth ? contentMaxWidth : titleMaxWidth;
 	    }
-	    let textLines = text.split('\n');
-	    textLines = textLines.map((line, i) => (i < textLines.length - 1 ? line + '\n' : line));
-	    const { width, height } = measure.fullMeasure(textLines);
-	    if (style.maxWidth && style.maxWidth <= width) {
-	        const bound = getRichTextBounds({
-	            wordBreak: (_a = style.wordBreak) !== null && _a !== void 0 ? _a : 'break-word',
-	            maxWidth: style.maxWidth,
-	            width: 0,
-	            height: 0,
-	            textConfig: textLines.map((line, i) => (Object.assign(Object.assign({}, style), { text: line })))
+	    else {
+	        containerWidth += Math.max(titleMaxWidth, contentMaxWidth);
+	    }
+	    if (hasContent) {
+	        attributes.content.forEach(item => {
+	            var _a;
+	            const value = item.value;
+	            if (value && ((_a = value.autoWidth) !== null && _a !== void 0 ? _a : true)) {
+	                value.width =
+	                    containerWidth -
+	                        paddingSpec.left -
+	                        paddingSpec.right -
+	                        maxShapeWidth -
+	                        maxKeyWidth -
+	                        keyStyle.spacing -
+	                        valueStyle.spacing;
+	                value.multiLine = true;
+	                if (!value.maxWidth) {
+	                    value.maxWidth = Math.ceil(value.width);
+	                }
+	                attributes.valueWidth = Math.max(attributes.valueWidth, value.width);
+	            }
 	        });
-	        return {
-	            width: bound.width(),
-	            height: bound.height(),
-	            text: textLines
-	        };
 	    }
-	    return {
-	        width,
-	        height,
-	        text: textLines
-	    };
+	    attributes.panel.width = containerWidth;
+	    attributes.panel.height = containerHeight;
+	    return attributes;
 	};
 
 	var TooltipResult;
@@ -92190,7 +92387,8 @@
 	    constructor(tooltipId, component) {
 	        this._visible = true;
 	        this._id = '';
-	        this._attributeCache = null;
+	        this._attributes = null;
+	        this._isReleased = false;
 	        this.showTooltip = (activeType, data, params) => {
 	            var _a;
 	            let changePositionOnly = !!params.changePositionOnly;
@@ -92207,7 +92405,7 @@
 	        this._changeTooltip = (visible, params, changePositionOnly, activeType, data) => {
 	            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 	            const tooltipSpec = this._component.getSpec();
-	            if (!tooltipSpec) {
+	            if (this._isReleased || !tooltipSpec) {
 	                return TooltipResult.failed;
 	            }
 	            if (!visible) {
@@ -92257,6 +92455,9 @@
 	        };
 	        this._changeTooltipPosition = (changePositionOnly, actualTooltip, spec, activeType, data, params) => {
 	            var _a, _b, _c;
+	            if (this._isReleased) {
+	                return TooltipResult.failed;
+	            }
 	            const event = params.event;
 	            if (spec.handler) {
 	                return (_c = (_b = (_a = spec.handler).showTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, activeType, data, params)) !== null && _c !== void 0 ? _c : TooltipResult.success;
@@ -92581,6 +92782,7 @@
 	            return;
 	        }
 	        this._removeTooltip();
+	        this._isReleased = true;
 	    }
 	    _throttle(callback) {
 	        const tooltipSpec = this._component.getSpec();
@@ -92604,57 +92806,14 @@
 	        return Object.assign(Object.assign({}, DEFAULT_OPTIONS), { offsetX: (_a = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _a !== void 0 ? _a : DEFAULT_OPTIONS.offsetX, offsetY: (_b = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _b !== void 0 ? _b : DEFAULT_OPTIONS.offsetY });
 	    }
 	    _getTooltipBoxSize(actualTooltip, changePositionOnly) {
-	        var _a, _b, _c, _d;
-	        if (!changePositionOnly || isNil$1(this._attributeCache)) {
-	            this._attributeCache = getTooltipAttributes(actualTooltip, this._style);
-	        }
-	        return {
-	            width: (_b = (_a = this._attributeCache) === null || _a === void 0 ? void 0 : _a.panel) === null || _b === void 0 ? void 0 : _b.width,
-	            height: (_d = (_c = this._attributeCache) === null || _c === void 0 ? void 0 : _c.panel) === null || _d === void 0 ? void 0 : _d.height
-	        };
-	    }
-	    _getStyle() {
-	        var _a, _b, _c, _d, _e;
-	        const tooltipSpec = this._component.getSpec();
-	        const { style = {}, enterable, transitionDuration } = tooltipSpec;
-	        const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow } = style;
-	        const { backgroundColor, border, shadow, padding } = panel;
-	        const panelStyle = {
-	            lineWidth: (_a = border === null || border === void 0 ? void 0 : border.width) !== null && _a !== void 0 ? _a : 0,
-	            shadow: !!shadow
-	        };
-	        if (border === null || border === void 0 ? void 0 : border.color) {
-	            panelStyle.stroke = border.color;
-	        }
-	        if (backgroundColor) {
-	            panelStyle.fill = backgroundColor;
-	        }
-	        if (shadow) {
-	            panelStyle.shadowColor = shadow.color;
-	            panelStyle.shadowBlur = shadow.blur;
-	            panelStyle.shadowOffsetX = shadow.x;
-	            panelStyle.shadowOffsetY = shadow.y;
-	            panelStyle.shadowSpread = shadow.spread;
-	        }
-	        const { radius } = border !== null && border !== void 0 ? border : {};
-	        if (isValid$1(radius)) {
-	            panelStyle.cornerRadius = [radius, radius, radius, radius];
+	        var _a, _b, _c, _d, _e, _f;
+	        if (!changePositionOnly || isNil$1(this._attributes)) {
+	            const globalTheme = (_b = (_a = this._chartOption).getTheme) === null || _b === void 0 ? void 0 : _b.call(_a);
+	            this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), globalTheme);
 	        }
-	        const globalTheme = (_c = (_b = this._chartOption).getTheme) === null || _c === void 0 ? void 0 : _c.call(_b);
 	        return {
-	            panel: panelStyle,
-	            title: getTextAttributes(titleLabel, globalTheme),
-	            shape: {
-	                fill: true,
-	                size: (_d = shape === null || shape === void 0 ? void 0 : shape.size) !== null && _d !== void 0 ? _d : 8,
-	                spacing: (_e = shape === null || shape === void 0 ? void 0 : shape.spacing) !== null && _e !== void 0 ? _e : 6
-	            },
-	            key: getTextAttributes(keyLabel, globalTheme),
-	            value: getTextAttributes(valueLabel, globalTheme),
-	            padding,
-	            spaceRow,
-	            enterable,
-	            transitionDuration
+	            width: (_d = (_c = this._attributes) === null || _c === void 0 ? void 0 : _c.panel) === null || _d === void 0 ? void 0 : _d.width,
+	            height: (_f = (_e = this._attributes) === null || _e === void 0 ? void 0 : _e.panel) === null || _f === void 0 ? void 0 : _f.height
 	        };
 	    }
 	    _getParentElement(spec) {
@@ -92665,7 +92824,6 @@
 	    }
 	    _initFromSpec() {
 	        this._option = this._getDefaultOption();
-	        this._style = this._getStyle();
 	        this.changeTooltip = this._throttle(this._changeTooltip);
 	        this.changeTooltipPosition = this._throttle(this._changeTooltipPosition);
 	    }
@@ -92699,22 +92857,24 @@
 	    }
 	    return numArr;
 	};
-	function getDomStyles(style, attributeCache) {
-	    var _a, _b, _c, _d, _e, _f, _g;
-	    const { panel: { fill: fillColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0 }, padding, key, value, title, shape, enterable, transitionDuration } = style;
-	    const { panel: panelAttribute, title: titleAttribute, content: contentAttribute, keyWidth, valueWidth } = attributeCache !== null && attributeCache !== void 0 ? attributeCache : {};
-	    const backgroundColor = fillColor;
+	function getDomStyles(attributes) {
+	    var _a, _b, _c, _d, _e;
+	    const { panel = {}, title: titleAttribute, content: contentAttribute, titleStyle = {}, contentStyle = {}, padding, keyWidth, valueWidth, enterable, transitionDuration } = attributes !== null && attributes !== void 0 ? attributes : {};
+	    const { fill: backgroundColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0, width = 0, height = 0 } = panel;
+	    const { value: title = {} } = titleStyle;
+	    const { shape = {}, key = {}, value = {} } = contentStyle;
 	    const shapeStyle = getShapeStyle(shape);
 	    const keyStyle = getLabelStyle(key);
 	    const valueStyle = getLabelStyle(value);
+	    const { bottom, left, right, top } = normalizeLayoutPaddingSpec(padding);
 	    const styles = {
 	        panel: {
-	            width: getPixelPropertyStr(((_a = panelAttribute === null || panelAttribute === void 0 ? void 0 : panelAttribute.width) !== null && _a !== void 0 ? _a : 0) + lineWidth * 2),
-	            minHeight: getPixelPropertyStr(((_b = panelAttribute === null || panelAttribute === void 0 ? void 0 : panelAttribute.height) !== null && _b !== void 0 ? _b : 0) + lineWidth * 2),
-	            paddingBottom: getPixelPropertyStr(padding.bottom),
-	            paddingLeft: getPixelPropertyStr(padding.left),
-	            paddingRight: getPixelPropertyStr(padding.right),
-	            paddingTop: getPixelPropertyStr(padding.top),
+	            width: getPixelPropertyStr(width + lineWidth * 2),
+	            minHeight: getPixelPropertyStr(height + lineWidth * 2),
+	            paddingBottom: getPixelPropertyStr(bottom),
+	            paddingLeft: getPixelPropertyStr(left),
+	            paddingRight: getPixelPropertyStr(right),
+	            paddingTop: getPixelPropertyStr(top),
 	            borderColor: strokeColor,
 	            borderWidth: getPixelPropertyStr(lineWidth),
 	            borderRadius: getPixelPropertyStr(cornerRadius),
@@ -92733,20 +92893,20 @@
 	            common: shapeStyle,
 	            items: [],
 	            width: getPixelPropertyStr(shape.size),
-	            marginRight: getPixelPropertyStr((_c = shape.spacing) !== null && _c !== void 0 ? _c : DEFAULT_SHAPE_SPACING),
-	            marginBottom: getPixelPropertyStr(-((_e = (_d = contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute[(contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.length) - 1]) === null || _d === void 0 ? void 0 : _d.spaceRow) !== null && _e !== void 0 ? _e : 0))
+	            marginRight: getPixelPropertyStr((_a = shape.spacing) !== null && _a !== void 0 ? _a : DEFAULT_SHAPE_SPACING),
+	            marginBottom: getPixelPropertyStr(-((_c = (_b = contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute[(contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.length) - 1]) === null || _b === void 0 ? void 0 : _b.spaceRow) !== null && _c !== void 0 ? _c : 0))
 	        },
 	        keyColumn: {
 	            common: keyStyle,
 	            items: contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.map(({ key, spaceRow }, i) => (Object.assign(Object.assign(Object.assign({ marginTop: '0px', marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px' }, keyStyle), getLabelStyle(key)), ((key === null || key === void 0 ? void 0 : key.multiLine) ? { width: getPixelPropertyStr(Math.ceil(key.width)) } : undefined)))),
 	            width: getPixelPropertyStr(keyWidth),
-	            marginRight: getPixelPropertyStr((_f = key.spacing) !== null && _f !== void 0 ? _f : DEFAULT_KEY_SPACING)
+	            marginRight: getPixelPropertyStr((_d = key.spacing) !== null && _d !== void 0 ? _d : DEFAULT_KEY_SPACING)
 	        },
 	        valueColumn: {
 	            common: valueStyle,
 	            items: contentAttribute === null || contentAttribute === void 0 ? void 0 : contentAttribute.map(({ value, spaceRow }, i) => (Object.assign(Object.assign(Object.assign({ marginTop: '0px', marginBottom: i < contentAttribute.length - 1 ? getPixelPropertyStr(spaceRow) : '0px' }, valueStyle), getLabelStyle(value)), ((value === null || value === void 0 ? void 0 : value.multiLine) ? { width: getPixelPropertyStr(Math.ceil(value.width)) } : undefined)))),
 	            width: getPixelPropertyStr(valueWidth),
-	            marginRight: getPixelPropertyStr((_g = value.spacing) !== null && _g !== void 0 ? _g : DEFAULT_VALUE_SPACING)
+	            marginRight: getPixelPropertyStr((_e = value.spacing) !== null && _e !== void 0 ? _e : DEFAULT_VALUE_SPACING)
 	        }
 	    };
 	    return styles;
@@ -93451,7 +93611,7 @@
 	                valueToHtml: this._option.sanitize,
 	                getTooltipStyle: () => this._domStyle,
 	                getTooltipActual: () => this._tooltipActual,
-	                getTooltipAttributes: () => this._attributeCache
+	                getTooltipAttributes: () => this._attributes
 	            }, [tooltipSpec.className], this.id);
 	        }
 	    }
@@ -93482,7 +93642,7 @@
 	        }
 	    }
 	    _initStyle() {
-	        this._domStyle = getDomStyles(this._style, this._attributeCache);
+	        this._domStyle = getDomStyles(this._attributes);
 	    }
 	    _getParentElement(spec) {
 	        var _a;
@@ -93528,7 +93688,7 @@
 	        if (this._layer) {
 	            this._layer.removeAllChild();
 	        }
-	        this._attributeCache = null;
+	        this._attributes = null;
 	    }
 	    _updateTooltip(visible, params, actualTooltip) {
 	        this._visible = visible;
@@ -93550,7 +93710,7 @@
 	        }
 	        const pos = actualTooltip === null || actualTooltip === void 0 ? void 0 : actualTooltip.position;
 	        if (!params.changePositionOnly) {
-	            this._tooltipComponent.setAttributes(Object.assign(Object.assign({}, this._attributeCache), pos));
+	            this._tooltipComponent.setAttributes(Object.assign(Object.assign({}, this._attributes), pos));
 	        }
 	        else if (isValid$1(pos)) {
 	            this._tooltipComponent.setAttributes(pos);
@@ -93906,12 +94066,6 @@
 	    }
 	    release() {
 	        var _a, _b;
-	        this.event.emit(ChartEvent.tooltipHide, {
-	            tooltip: this
-	        });
-	        this.event.emit(ChartEvent.tooltipRelease, {
-	            tooltip: this
-	        });
 	        super.release();
 	        this._eventList.forEach(({ eventType, handler }) => {
 	            this.event.off(eventType, handler);
@@ -93920,6 +94074,14 @@
 	        (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.release) === null || _b === void 0 ? void 0 : _b.call(_a);
 	        this._isTooltipShown = false;
 	    }
+	    beforeRelease() {
+	        this.event.emit(ChartEvent.tooltipHide, {
+	            tooltip: this
+	        });
+	        this.event.emit(ChartEvent.tooltipRelease, {
+	            tooltip: this
+	        });
+	    }
 	    _initHandler() {
 	        var _a, _b, _c;
 	        const renderMode = (_a = this._spec.renderMode) !== null && _a !== void 0 ? _a : 'html';