@visactor/vchart 1.3.0-beta.4 → 1.3.0-beta.6

package/build/index.js

@@ -7514,11 +7514,12 @@
 	  }
 	  parse(data, options) {
 	    let emit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
+	    var _a;
 	    this.isRunning = !0, emit && this.target.emit("beforeParse", []);
 	    const cloneData = this.cloneParseData(data, options);
-	    if (options) {
+	    if (null == options ? void 0 : options.type) {
 	      this.parseOption = options, options = cloneDeep(options);
-	      const parserData = this.dataSet.getParser(options.type || "bytejson")(cloneData, options.options, this);
+	      const parserData = (null !== (_a = this.dataSet.getParser(options.type)) && void 0 !== _a ? _a : this.dataSet.getParser("bytejson"))(cloneData, options.options, this);
 	      this.rawData = cloneData, this.parserData = parserData, this.history && this.historyData.push(cloneData, parserData), this.latestData = parserData;
 	    } else this.parserData = cloneData, this.rawData = cloneData, this.history && this.historyData.push(cloneData), this.latestData = cloneData;
 	    return this.isRunning = !1, emit && this.target.emit("afterParse", []), this;
@@ -7599,8 +7600,8 @@
 	    this._diffRank = next;
 	  }
 	  cloneParseData(data, options) {
-	    let clone = !0;
-	    return (data instanceof DataView || !1 === (null == options ? void 0 : options.clone)) && (clone = !1), clone ? data : cloneDeep(data);
+	    let clone = !1;
+	    return data instanceof DataView || !0 !== (null == options ? void 0 : options.clone) || (clone = !0), clone ? cloneDeep(data) : data;
 	  }
 	  parseNewData(data, options) {
 	    this.parse(data, options || this.parseOption), this.reRunAllTransform();
@@ -26502,6 +26503,7 @@
 	    if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
 	      if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
 	        const str = lines[i];
+	        let needCut = !0;
 	        if (i === lineCountLimit - 1) {
 	          const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
 	          linesLayout.push({
@@ -26511,14 +26513,17 @@
 	          break;
 	        }
 	        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth);
-	        if ("" !== str && "" === clip.str) if (ellipsis) {
-	          const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
-	          clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
-	        } else clip.str = "", clip.width = 0;
+	        if ("" !== str && "" === clip.str) {
+	          if (ellipsis) {
+	            const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
+	            clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+	          } else clip.str = "", clip.width = 0;
+	          needCut = !1;
+	        }
 	        if (linesLayout.push({
 	          str: clip.str,
 	          width: clip.width
-	        }), clip.str.length === str.length) ;else {
+	        }), clip.str.length === str.length) ;else if (needCut) {
 	          const newStr = str.substring(clip.str.length);
 	          lines.splice(i + 1, 0, newStr);
 	        }
@@ -46208,13 +46213,31 @@
 	}(IMarkPointItemPosition || (IMarkPointItemPosition = {}));
 
 	class Marker extends AbstractComponent {
+	  _initContainer() {
+	    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+	    const groupClip = createGroup(Object.assign(Object.assign({}, null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.clipRange), {
+	      clip: null !== (_c = isValid(null === (_b = this.attribute) || void 0 === _b ? void 0 : _b.clipRange)) && void 0 !== _c && _c
+	    }));
+	    groupClip.name = "marker-container";
+	    const group = createGroup({
+	      x: -(null !== (_f = null === (_e = null === (_d = this.attribute) || void 0 === _d ? void 0 : _d.clipRange) || void 0 === _e ? void 0 : _e.x) && void 0 !== _f ? _f : 0),
+	      y: -(null !== (_j = null === (_h = null === (_g = this.attribute) || void 0 === _g ? void 0 : _g.clipRange) || void 0 === _h ? void 0 : _h.y) && void 0 !== _j ? _j : 0)
+	    });
+	    groupClip.add(group), this._containerClip = groupClip, this.add(groupClip), this._container = group;
+	  }
+	  _updateContainer() {
+	    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+	    this._containerClip.setAttributes(Object.assign(Object.assign({}, null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.clipRange), {
+	      clip: null !== (_c = isValid(null === (_b = this.attribute) || void 0 === _b ? void 0 : _b.clipRange)) && void 0 !== _c && _c
+	    })), this._container.setAttributes({
+	      x: -(null !== (_f = null === (_e = null === (_d = this.attribute) || void 0 === _d ? void 0 : _d.clipRange) || void 0 === _e ? void 0 : _e.x) && void 0 !== _f ? _f : 0),
+	      y: -(null !== (_j = null === (_h = null === (_g = this.attribute) || void 0 === _g ? void 0 : _g.clipRange) || void 0 === _h ? void 0 : _h.y) && void 0 !== _j ? _j : 0)
+	    });
+	  }
 	  render() {
 	    var _a, _b;
 	    const markerVisible = null === (_a = this.attribute.visible) || void 0 === _a || _a;
-	    if (null !== (_b = this.attribute.interactive) && void 0 !== _b && _b || (this.setAttribute("pickable", !1), this.setAttribute("childrenPickable", !1)), markerVisible) if (this._container) this.updateMarker();else {
-	      const group = createGroup({});
-	      group.name = "marker-container", this.add(group), this._container = group, this.initMarker(group);
-	    }
+	    null !== (_b = this.attribute.interactive) && void 0 !== _b && _b || (this.setAttribute("pickable", !1), this.setAttribute("childrenPickable", !1)), markerVisible && (this._containerClip ? (this._updateContainer(), this.updateMarker()) : (this._initContainer(), this.initMarker(this._container)));
 	  }
 	}
 
@@ -46891,7 +46914,7 @@
 	}(LegendStateValue || (LegendStateValue = {}));
 	var LegendEvent;
 	!function (LegendEvent) {
-	  LegendEvent.legendItemHover = "legendItemHover", LegendEvent.legendItemUnHover = "legendItemUnHover", LegendEvent.legendItemClick = "legendItemClick";
+	  LegendEvent.legendItemHover = "legendItemHover", LegendEvent.legendItemUnHover = "legendItemUnHover", LegendEvent.legendItemClick = "legendItemClick", LegendEvent.legendItemAttributeUpdate = "legendItemAttributeUpdate";
 	}(LegendEvent || (LegendEvent = {}));
 	var LEGEND_ELEMENT_NAME;
 	!function (LEGEND_ELEMENT_NAME) {
@@ -46990,11 +47013,12 @@
 	      const target = e.target;
 	      if (null === (_a = null == target ? void 0 : target.name) || void 0 === _a ? void 0 : _a.startsWith(LEGEND_ELEMENT_NAME.item)) {
 	        const legendItem = target.delegate;
-	        legendItem.removeState(LegendStateValue.unSelectedHover), legendItem.removeState(LegendStateValue.selectedHover), legendItem.getChildren()[0].getChildren().forEach(child => {
-	          child.removeState(LegendStateValue.unSelectedHover), child.removeState(LegendStateValue.selectedHover);
+	        let attributeUpdate = !1;
+	        (legendItem.hasState(LegendStateValue.unSelectedHover) || legendItem.hasState(LegendStateValue.selectedHover)) && (attributeUpdate = !0), legendItem.removeState(LegendStateValue.unSelectedHover), legendItem.removeState(LegendStateValue.selectedHover), legendItem.getChildren()[0].getChildren().forEach(child => {
+	          attributeUpdate || !child.hasState(LegendStateValue.unSelectedHover) && !child.hasState(LegendStateValue.selectedHover) || (attributeUpdate = !0), child.removeState(LegendStateValue.unSelectedHover), child.removeState(LegendStateValue.selectedHover);
 	        });
 	        const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
-	        focusButton && focusButton.setAttribute("visible", !1), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem);
+	        focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem);
 	      }
 	    }, this._onClick = e => {
 	      var _a, _b, _c, _d, _e;
@@ -47290,18 +47314,20 @@
 	  }
 	  _setLegendItemState(legendItem, stateName) {
 	    let keepCurrentStates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
-	    legendItem.addState(stateName, keepCurrentStates), legendItem.getChildren()[0].getChildren().forEach(child => {
-	      child.name !== LEGEND_ELEMENT_NAME.focus && child.addState(stateName, keepCurrentStates);
-	    });
+	    let attributeUpdate = !1;
+	    legendItem.hasState(stateName) || (attributeUpdate = !0), legendItem.addState(stateName, keepCurrentStates), legendItem.getChildren()[0].getChildren().forEach(child => {
+	      child.name !== LEGEND_ELEMENT_NAME.focus && (attributeUpdate || child.hasState(stateName) || (attributeUpdate = !0), child.addState(stateName, keepCurrentStates));
+	    }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem);
 	  }
 	  _removeLegendItemState(legendItem, stateNames) {
+	    let attributeUpdate = !1;
 	    stateNames.forEach(name => {
-	      legendItem.removeState(name);
+	      !attributeUpdate && legendItem.hasState(name) && (attributeUpdate = !0), legendItem.removeState(name);
 	    }), legendItem.getChildren()[0].getChildren().forEach(child => {
 	      child.name !== LEGEND_ELEMENT_NAME.focus && stateNames.forEach(name => {
-	        child.removeState(name);
+	        !attributeUpdate && child.hasState(name) && (attributeUpdate = !0), child.removeState(name);
 	      });
-	    });
+	    }), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem);
 	  }
 	  _getSelectedLegends() {
 	    var _a;
@@ -56689,11 +56715,13 @@
 	    return viewData;
 	}
 	function dataToDataView(data, dataSet, sourceDataViews = [], ctx = {}) {
-	    var _a, _b, _c;
+	    var _a, _b, _c, _d;
 	    if (data instanceof DataView) {
 	        return data;
 	    }
-	    const { id, values = [], fromDataIndex, fromDataId, transforms = [], fields, parser } = data;
+	    const { id, values = [], fromDataIndex, fromDataId, transforms = [], fields } = data;
+	    const parser = ((_a = data.parser) !== null && _a !== void 0 ? _a : { clone: true });
+	    parser.clone = !(parser.clone === false);
 	    let dataView;
 	    const existDataView = sourceDataViews.find(dv => dv.name === id);
 	    if (existDataView) {
@@ -56708,7 +56736,7 @@
 	        if (typeof fromDataId === 'string') {
 	            const fromDataView = sourceDataViews.find(dv => dv.name === fromDataId);
 	            if (!fromDataView) {
-	                ((_a = ctx.onError) !== null && _a !== void 0 ? _a : error$1)(`no data matches fromDataId ${fromDataId}`);
+	                ((_b = ctx.onError) !== null && _b !== void 0 ? _b : error$1)(`no data matches fromDataId ${fromDataId}`);
 	                return null;
 	            }
 	            dataView.parse([fromDataView], {
@@ -56721,7 +56749,7 @@
 	        else if (typeof fromDataIndex === 'number') {
 	            const fromDataView = sourceDataViews[fromDataIndex];
 	            if (!fromDataView) {
-	                ((_b = ctx.onError) !== null && _b !== void 0 ? _b : error$1)(`no data matches fromDataIndex ${fromDataIndex}`);
+	                ((_c = ctx.onError) !== null && _c !== void 0 ? _c : error$1)(`no data matches fromDataIndex ${fromDataIndex}`);
 	                return null;
 	            }
 	            dataView.parse([fromDataView], {
@@ -56732,10 +56760,10 @@
 	            });
 	        }
 	        else if (Array.isArray(values)) {
-	            dataView.parse((parser === null || parser === void 0 ? void 0 : parser.clone) === false ? values : cloneDeep(values));
+	            dataView.parse(values, parser);
 	        }
 	        else if (isString(values) && (!parser || ['csv', 'dsv', 'tsv'].includes(parser.type))) {
-	            dataView.parse(values, (_c = parser) !== null && _c !== void 0 ? _c : { type: 'csv' });
+	            dataView.parse(values, (_d = parser) !== null && _d !== void 0 ? _d : { type: 'csv' });
 	        }
 	        else {
 	            dataView.parse([]);
@@ -56952,6 +56980,10 @@
 	        this._view.resize(width, height);
 	        return this.reRenderAsync({ morph: false });
 	    }
+	    setBackground(color) {
+	        var _a;
+	        (_a = this._view) === null || _a === void 0 ? void 0 : _a.background(color);
+	    }
 	    reRenderAsync(morphConfig) {
 	        if (this.isInited) {
 	            if (this._rafId) {
@@ -57250,11 +57282,10 @@
 	        this._currentThemeName = ThemeManager.getCurrentThemeName();
 	        this._setSpec(spec);
 	        this._updateCurrentTheme();
-	        const specBackground = typeof spec.background === 'string' ? spec.background : null;
 	        this._compiler = new Compiler({
 	            dom: (_a = this._container) !== null && _a !== void 0 ? _a : 'none',
 	            canvas: renderCanvas
-	        }, Object.assign(Object.assign({ mode: this._option.mode, stage, pluginList: poptip !== false ? ['poptipForText'] : [] }, restOptions), { background: specBackground || this._currentTheme.background || this._option.background, onError: this._onError }));
+	        }, Object.assign(Object.assign({ mode: this._option.mode, stage, pluginList: poptip !== false ? ['poptipForText'] : [] }, restOptions), { background: this._getBackground(), onError: this._onError }));
 	        this._eventDispatcher = new EventDispatcher(this, this._compiler);
 	        this._event = new Event$1(this._eventDispatcher, mode);
 	        this._compiler.initView();
@@ -57409,10 +57440,8 @@
 	            (_a = this._compiler) === null || _a === void 0 ? void 0 : _a.releaseGrammar();
 	        }
 	        else {
-	            if (updateResult.reCompile) {
-	                this.getComponents().forEach(c => c.clear());
-	                (_b = this._compiler) === null || _b === void 0 ? void 0 : _b.compile({ chart: this._chart, vChart: this }, {});
-	            }
+	            this.getComponents().forEach(c => c.clear());
+	            (_b = this._compiler) === null || _b === void 0 ? void 0 : _b.compile({ chart: this._chart, vChart: this }, {});
 	        }
 	    }
 	    renderSync(morphConfig) {
@@ -57566,6 +57595,58 @@
 	        }
 	        return this;
 	    }
+	    updateFullDataSync(data, reRender = true) {
+	        if (this._chart) {
+	            this._chart.updateFullData(data);
+	            if (reRender) {
+	                this._compiler.renderSync();
+	            }
+	            return this;
+	        }
+	        const list = array(data);
+	        list.forEach(d => {
+	            const { id, values, parser, fields } = d;
+	            const preDV = this._spec.data.find(dv => dv.name === id);
+	            if (preDV) {
+	                preDV.setFields(fields);
+	                preDV.parse(values, parser);
+	            }
+	            else {
+	                const dataView = dataToDataView(d, this._dataSet, this._spec.data, {
+	                    onError: this._option.onError
+	                });
+	                this._spec.data.push(dataView);
+	            }
+	        });
+	        return this;
+	    }
+	    updateFullData(data, reRender = true) {
+	        return __awaiter$i(this, void 0, void 0, function* () {
+	            if (this._chart) {
+	                this._chart.updateFullData(data);
+	                if (reRender) {
+	                    yield this._compiler.renderAsync();
+	                }
+	                return this;
+	            }
+	            const list = array(data);
+	            list.forEach(d => {
+	                const { id, values, parser, fields } = d;
+	                const preDV = this._spec.data.find(dv => dv.name === id);
+	                if (preDV) {
+	                    preDV.setFields(fields);
+	                    preDV.parse(values, parser);
+	                }
+	                else {
+	                    const dataView = dataToDataView(d, this._dataSet, this._spec.data, {
+	                        onError: this._option.onError
+	                    });
+	                    this._spec.data.push(dataView);
+	                }
+	            });
+	            return this;
+	        });
+	    }
 	    updateSpec(spec, forceMerge = false, morphConfig) {
 	        return __awaiter$i(this, void 0, void 0, function* () {
 	            if (!spec) {
@@ -57666,7 +57747,7 @@
 	        this._chart.setHovered(datum, filter, region);
 	    }
 	    _updateCurrentTheme() {
-	        var _a, _b, _c, _d;
+	        var _a, _b, _c, _d, _e;
 	        if (isString((_a = this._spec) === null || _a === void 0 ? void 0 : _a.theme)) {
 	            this._currentTheme = merge$2({}, ThemeManager.getTheme(this._spec.theme));
 	            this._currentThemeName = this._spec.theme;
@@ -57675,6 +57756,11 @@
 	            this._currentTheme = merge$2({}, ThemeManager.getTheme(this._currentThemeName), (_c = (_b = this._spec) === null || _b === void 0 ? void 0 : _b.theme) !== null && _c !== void 0 ? _c : {});
 	        }
 	        setPoptipTheme(merge$2({}, (_d = this._currentTheme.component) === null || _d === void 0 ? void 0 : _d.poptip));
+	        (_e = this._compiler) === null || _e === void 0 ? void 0 : _e.setBackground(this._getBackground());
+	    }
+	    _getBackground() {
+	        const specBackground = typeof this._spec.background === 'string' ? this._spec.background : null;
+	        return specBackground || this._currentTheme.background || this._option.background;
 	    }
 	    getCurrentTheme() {
 	        return this._currentTheme;
@@ -60720,7 +60806,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.3.0-beta.4";
+	const version = "1.3.0-beta.6";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -61624,6 +61710,24 @@
 	        }
 	        this.getAllModels().forEach(model => model.onDataUpdate());
 	    }
+	    updateFullData(data, updateGlobalScale = true) {
+	        const dvs = [];
+	        array(data).forEach(d => {
+	            const dv = this._dataSet.getDataView(d.id);
+	            if (dv) {
+	                dvs.push({ d, dv });
+	                dv.markRunning();
+	            }
+	        });
+	        dvs.forEach(({ d, dv }) => {
+	            dv.setFields(d.fields);
+	            dv.parseNewData(d.values, d.parser);
+	        });
+	        if (updateGlobalScale) {
+	            this.updateGlobalScaleDomain();
+	        }
+	        this.getAllModels().forEach(model => model.onDataUpdate());
+	    }
 	    onRender(option) {
 	    }
 	    getCanvasRect() {
@@ -63253,6 +63357,7 @@
 	                },
 	                content: [
 	                    {
+	                        seriesId: this.series.id,
 	                        key: this.contentKeyCallback,
 	                        value: this.contentValueCallback,
 	                        hasShape: true,
@@ -63592,7 +63697,8 @@
 	                    seriesValue = this.getSeriesKeys()[0];
 	                }
 	                return (_a = this._option.globalScale.getScale('color')) === null || _a === void 0 ? void 0 : _a.scale(seriesValue);
-	            }
+	            },
+	            getRegion: () => this._region
 	        };
 	    }
 	    setAttrFromSpec() {
@@ -66649,6 +66755,32 @@
 	        }
 	        return lineMark;
 	    }
+	    _getEventElement(params, reverse = false) {
+	        let data = [];
+	        params.dimensionInfo.some(df => {
+	            df.data.some(dd => {
+	                if (dd.series === this) {
+	                    data = dd.datum;
+	                    return true;
+	                }
+	                return false;
+	            });
+	            return !data.length;
+	        });
+	        return data;
+	    }
+	    _dimensionTrigger(params) {
+	        const elements = this._getEventElement(params);
+	        switch (params.action) {
+	            case 'enter':
+	                this._symbolActiveMark.getDataView().parse(elements);
+	                this._symbolActiveMark.getData().updateData(false);
+	                break;
+	            case 'leave':
+	                this._symbolActiveMark.getDataView().parse([]);
+	                this._symbolActiveMark.getData().updateData(false);
+	        }
+	    }
 	    initSymbolMark(progressive, isSeriesMark) {
 	        this._symbolMark = this._createMark(lineLikeSeriesMarkMap.point, {
 	            morph: shouldDoMorph(this._spec.animation, this._spec.morph, userAnimationConfig('point', this._spec)),
@@ -66658,35 +66790,66 @@
 	            progressive,
 	            isSeriesMark: !!isSeriesMark
 	        });
+	        if (this._spec.activePoint === true) {
+	            const activeData = new DataView(this._option.dataSet, { name: `${PREFIX}_series_${this.id}_active_point` });
+	            activeData.parse([]);
+	            this._symbolActiveMark = this._createMark({ name: `active_point`, type: MarkTypeEnum.symbol }, {
+	                morph: false,
+	                groupKey: this._seriesField,
+	                label: null,
+	                isSeriesMark: false,
+	                dataView: activeData
+	            });
+	            this._symbolActiveMark.setVisible(false);
+	        }
 	        return this._symbolMark;
 	    }
 	    initSymbolMarkStyle() {
 	        var _a;
 	        const symbolMark = this._symbolMark;
-	        if (symbolMark) {
+	        if (!symbolMark) {
+	            return symbolMark;
+	        }
+	        this.setMarkStyle(symbolMark, {
+	            fill: this.getColorAttribute()
+	        }, 'normal', AttributeLevel.Series);
+	        if (this._invalidType) {
 	            this.setMarkStyle(symbolMark, {
-	                fill: this.getColorAttribute()
-	            }, 'normal', AttributeLevel.Series);
-	            if (this._invalidType) {
-	                this.setMarkStyle(symbolMark, {
-	                    visible: (datum) => {
-	                        if (this._invalidType === 'break') {
-	                            return couldBeValidNumber(datum[this.getStackValueField()]);
-	                        }
-	                        else if (this._invalidType === 'link') {
-	                            return couldBeValidNumber(datum[this.getStackValueField()]);
-	                        }
-	                        return true;
+	                visible: (datum) => {
+	                    if (this._invalidType === 'break') {
+	                        return couldBeValidNumber(datum[this.getStackValueField()]);
 	                    }
-	                }, 'normal', AttributeLevel.Series);
-	            }
-	            this.setMarkStyle(symbolMark, {
-	                x: this.dataToPositionX.bind(this),
-	                y: this.dataToPositionY.bind(this),
-	                z: this.dataToPositionZ.bind(this)
+	                    else if (this._invalidType === 'link') {
+	                        return couldBeValidNumber(datum[this.getStackValueField()]);
+	                    }
+	                    return true;
+	                }
 	            }, 'normal', AttributeLevel.Series);
-	            this._trigger.registerMark(symbolMark);
-	            (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(symbolMark);
+	        }
+	        this.setMarkStyle(symbolMark, {
+	            x: this.dataToPositionX.bind(this),
+	            y: this.dataToPositionY.bind(this),
+	            z: this.dataToPositionZ.bind(this)
+	        }, 'normal', AttributeLevel.Series);
+	        this._trigger.registerMark(symbolMark);
+	        (_a = this._tooltipHelper) === null || _a === void 0 ? void 0 : _a.activeTriggerSet.mark.add(symbolMark);
+	        if (this._symbolActiveMark && this._symbolMark.stateStyle.dimension_hover) {
+	            this._symbolActiveMark.setVisible(true);
+	            this.event.on(DimensionEventEnum.dimensionHover, this._dimensionTrigger.bind(this));
+	            for (const state in this._symbolMark.stateStyle) {
+	                this._symbolActiveMark.stateStyle[state] = {};
+	                for (const key in this._symbolMark.stateStyle[state]) {
+	                    this._symbolActiveMark.stateStyle[state][key] = {
+	                        style: null,
+	                        level: AttributeLevel.Series,
+	                        referer: symbolMark
+	                    };
+	                }
+	            }
+	            this._symbolActiveMark.state.changeStateInfo({
+	                stateValue: STATE_VALUE_ENUM.STATE_DIMENSION_HOVER,
+	                filter: () => true
+	            });
 	        }
 	        return symbolMark;
 	    }
@@ -68169,6 +68332,9 @@
 	    _buildMarkAttributeContext() {
 	        super._buildMarkAttributeContext();
 	        this._markAttributeContext.valueToPosition = this.valueToPosition.bind(this);
+	        this._markAttributeContext.getCenter = () => {
+	            return this.angleAxisHelper.center();
+	        };
 	    }
 	    valueToPosition(angleValue, radiusValue) {
 	        if (isNil(angleValue) || isNil(radiusValue) || !this.angleAxisHelper || !this.radiusAxisHelper) {
@@ -78468,7 +78634,7 @@
 	    }
 	    _getDefaultSeriesSpec(spec) {
 	        var _a;
-	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { invalidType: spec.invalidType || 'break', point: spec.point, line: spec.line, area: spec.area, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area' });
+	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { invalidType: spec.invalidType || 'break', point: spec.point, line: spec.line, area: spec.area, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area', activePoint: spec.activePoint });
 	    }
 	    transformSpec(spec) {
 	        super.transformSpec(spec);
@@ -78967,7 +79133,7 @@
 	    }
 	    _getDefaultSeriesSpec(spec) {
 	        var _a;
-	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { invalidType: spec.invalidType || 'break', point: spec.point, line: spec.line, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'line' });
+	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { invalidType: spec.invalidType || 'break', point: spec.point, line: spec.line, seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'line', activePoint: spec.activePoint });
 	    }
 	    transformSpec(spec) {
 	        super.transformSpec(spec);
@@ -79239,7 +79405,7 @@
 	        var _a;
 	        return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { seriesField: spec.seriesField, invalidType: spec.invalidType || 'break', line: spec.line, point: spec.point, stack: spec.stack, percent: spec.percent, area: merge$2({
 	                visible: false
-	            }, spec.area), seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area' });
+	            }, spec.area), seriesMark: (_a = spec.seriesMark) !== null && _a !== void 0 ? _a : 'area', activePoint: spec.activePoint });
 	    }
 	    transformSpec(spec) {
 	        var _a;
@@ -85633,7 +85799,7 @@
 	    }
 	    _getTitleAttrs() {
 	        var _a, _b, _c, _d, _e, _f, _g;
-	        const realWidth = (_a = this._spec.width) !== null && _a !== void 0 ? _a : this.getLayoutRect().width;
+	        const realWidth = Math.max(0, (_a = this._spec.width) !== null && _a !== void 0 ? _a : this.getLayoutRect().width);
 	        return {
 	            text: (_b = this._spec.text) !== null && _b !== void 0 ? _b : '',
 	            subtext: (_c = this._spec.subtext) !== null && _c !== void 0 ? _c : '',
@@ -88254,15 +88420,13 @@
 	        };
 	    }
 	    else {
-	        tooltipContent.title.hasShape = patternTitle.hasShape;
-	        if (isValid(patternTitle.value)) {
-	            tooltipContent.title = {
-	                hasShape: patternTitle.hasShape,
-	                shapeHollow: patternTitle.shapeHollow
-	            };
-	            const datum = getFirstDatumFromTooltipData(data);
-	            tooltipContent.title.value = getTooltipContentValue(patternTitle === null || patternTitle === void 0 ? void 0 : patternTitle.value, datum, params);
-	        }
+	        const datum = getFirstDatumFromTooltipData(data);
+	        tooltipContent.title = {
+	            value: getTooltipContentValue(patternTitle === null || patternTitle === void 0 ? void 0 : patternTitle.value, datum, params),
+	            valueStyle: getTooltipContentValue(patternTitle === null || patternTitle === void 0 ? void 0 : patternTitle.valueStyle, datum, params),
+	            hasShape: patternTitle.hasShape,
+	            shapeHollow: patternTitle.shapeHollow
+	        };
 	    }
 	    if (pattern.activeType === 'mark') {
 	        for (const content of patternContent !== null && patternContent !== void 0 ? patternContent : []) {
@@ -88340,6 +88504,8 @@
 	    const isKeyAdaptive = getTooltipContentValue(config.isKeyAdaptive, datum, params);
 	    const shapeType = getTooltipContentValue(config.shapeType, datum, params);
 	    const shapeColor = getTooltipContentValue(config.shapeColor, datum, params);
+	    const keyStyle = getTooltipContentValue(config.keyStyle, datum, params);
+	    const valueStyle = getTooltipContentValue(config.valueStyle, datum, params);
 	    return {
 	        key,
 	        value,
@@ -88348,7 +88514,9 @@
 	        hasShape: config.hasShape,
 	        shapeType: shapeType,
 	        shapeHollow: config.shapeHollow,
-	        shapeColor
+	        shapeColor,
+	        keyStyle,
+	        valueStyle
 	    };
 	};
 
@@ -88358,10 +88526,8 @@
 	};
 
 	const getTooltipSpecForShow = (activeType, globalSpec, series, dimensionInfo) => {
-	    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+	    var _a, _b, _c, _d, _e, _f, _g;
 	    const finalSpec = Object.assign(Object.assign({}, globalSpec), { activeType });
-	    let defaultPattern = {};
-	    let userPattern = {};
 	    if (activeType === 'mark' && series) {
 	        const seriesSpec = ((_b = (_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec) !== null && _b !== void 0 ? _b : {});
 	        if (isValid(seriesSpec.visible) || isValid(seriesSpec.activeType)) {
@@ -88377,11 +88543,9 @@
 	        if ((_e = finalSpec.handler) === null || _e === void 0 ? void 0 : _e.showTooltip) {
 	            return finalSpec;
 	        }
-	        defaultPattern = (_f = makeDefaultPattern(series, 'mark')) !== null && _f !== void 0 ? _f : {};
-	        userPattern = merge$2({}, cloneDeep(globalSpec.mark), cloneDeep(seriesSpec.mark));
 	    }
 	    else if (activeType === 'dimension' && (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length)) {
-	        const seriesList = dimensionInfo.reduce((list, cur) => list.concat(cur.data.map(data => data.series).filter(isValid)), []);
+	        const seriesList = getSeriesListFromDimensionInfo(dimensionInfo);
 	        if (seriesList.every(series => { var _a; return !getTooltipActualActiveType((_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec).includes('dimension'); })) {
 	            finalSpec.visible = false;
 	        }
@@ -88391,10 +88555,67 @@
 	        else {
 	            finalSpec.visible = true;
 	        }
-	        finalSpec.handler = (_g = globalSpec.handler) !== null && _g !== void 0 ? _g : undefined;
-	        if ((_h = finalSpec.handler) === null || _h === void 0 ? void 0 : _h.showTooltip) {
+	        finalSpec.handler = (_f = globalSpec.handler) !== null && _f !== void 0 ? _f : undefined;
+	        if ((_g = finalSpec.handler) === null || _g === void 0 ? void 0 : _g.showTooltip) {
 	            return finalSpec;
 	        }
+	    }
+	    const defaultPattern = getDefaultTooltipPattern(activeType, series, dimensionInfo);
+	    const seriesPattern = getSeriesTooltipPattern(activeType, series, dimensionInfo);
+	    const userPattern = merge$2({}, cloneDeep(globalSpec[activeType]), seriesPattern);
+	    const defaultPatternTitle = defaultPattern.title;
+	    const titleShape = getShapePattern(undefined, userPattern, undefined, defaultPatternTitle);
+	    if (isValid(userPattern.title)) {
+	        if (!isFunction(userPattern.title)) {
+	            userPattern.title = Object.assign(Object.assign(Object.assign({}, defaultPattern.title), titleShape), userPattern.title);
+	        }
+	        else {
+	            const userPatternTitle = userPattern.title;
+	            userPattern.title = (data, params) => {
+	                var _a;
+	                const userResult = (_a = userPatternTitle(data, params)) !== null && _a !== void 0 ? _a : {};
+	                return Object.assign(Object.assign({}, titleShape), userResult);
+	            };
+	        }
+	    }
+	    else {
+	        userPattern.title = Object.assign(Object.assign({}, defaultPattern.title), titleShape);
+	    }
+	    const defaultPatternContent = array(defaultPattern.content);
+	    if (isValid(userPattern.content)) {
+	        const shapePatternMap = getShapePatternMapOfEachSeries(defaultPatternContent);
+	        if (!isFunction(userPattern.content)) {
+	            const newPatternContent = [];
+	            array(userPattern.content).forEach(userLine => {
+	                newPatternContent.push(Object.assign(Object.assign({}, getShapePattern(userLine, userPattern, shapePatternMap)), userLine));
+	            });
+	            userPattern.content = newPatternContent;
+	        }
+	        else {
+	            const userPatternContent = userPattern.content;
+	            userPattern.content = (data, params) => {
+	                var _a;
+	                const newPatternContent = [];
+	                array((_a = userPatternContent(data, params)) !== null && _a !== void 0 ? _a : []).forEach(userLine => {
+	                    newPatternContent.push(Object.assign(Object.assign({}, getShapePattern(userLine, userPattern, shapePatternMap)), userLine));
+	                });
+	                return newPatternContent;
+	            };
+	        }
+	    }
+	    else {
+	        userPattern.content = defaultPatternContent.map(line => (Object.assign(Object.assign({}, line), getShapePattern(undefined, userPattern, undefined, line))));
+	    }
+	    finalSpec[activeType] = Object.assign(Object.assign(Object.assign({}, defaultPattern), userPattern), { activeType });
+	    return finalSpec;
+	};
+	const getDefaultTooltipPattern = (activeType, series, dimensionInfo) => {
+	    var _a;
+	    let defaultPattern = {};
+	    if (activeType === 'mark' && series) {
+	        defaultPattern = (_a = makeDefaultPattern(series, 'mark')) !== null && _a !== void 0 ? _a : {};
+	    }
+	    else if (activeType === 'dimension' && (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length)) {
 	        const patternList = [];
 	        dimensionInfo[0].data.forEach(data => {
 	            const { series } = data;
@@ -88416,17 +88637,25 @@
 	            }
 	        });
 	        defaultPattern = Object.assign(Object.assign({}, patternList[0]), { content: defaultPatternContent });
-	        let seriesDimensionPattern = {};
+	    }
+	    return defaultPattern;
+	};
+	const getSeriesTooltipPattern = (activeType, series, dimensionInfo) => {
+	    var _a, _b;
+	    let seriesPattern = {};
+	    if (activeType === 'mark' && series) {
+	        const seriesSpec = ((_b = (_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec) !== null && _b !== void 0 ? _b : {});
+	        seriesPattern = seriesSpec.mark ? cloneDeep(seriesSpec.mark) : {};
+	    }
+	    else if (activeType === 'dimension' && (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length)) {
+	        const seriesList = getSeriesListFromDimensionInfo(dimensionInfo);
 	        const seriesPatternList = seriesList
 	            .filter(series => {
 	            var _a;
 	            const spec = (_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec;
 	            return isValid(spec === null || spec === void 0 ? void 0 : spec.dimension) && getTooltipActualActiveType(spec).includes('dimension');
 	        })
-	            .map(series => {
-	            const pattern = series.tooltipHelper.spec.dimension;
-	            return pattern;
-	        });
+	            .map(series => series.tooltipHelper.spec.dimension);
 	        if (seriesPatternList.length) {
 	            let seriesPatternContent = [];
 	            if (seriesPatternList.every(({ content }) => isNil(content))) {
@@ -88445,65 +88674,38 @@
 	                    }
 	                });
 	            }
-	            seriesDimensionPattern = Object.assign(Object.assign({}, seriesPatternList[0]), { content: seriesPatternContent });
+	            seriesPattern = Object.assign(Object.assign({}, seriesPatternList[0]), { content: seriesPatternContent });
 	        }
-	        userPattern = merge$2({}, cloneDeep(globalSpec.dimension), seriesDimensionPattern);
 	    }
-	    const defaultPatternTitle = defaultPattern.title;
-	    const titleShape = {
-	        hasShape: (_j = userPattern.hasShape) !== null && _j !== void 0 ? _j : defaultPatternTitle === null || defaultPatternTitle === void 0 ? void 0 : defaultPatternTitle.hasShape,
-	        shapeType: (_k = userPattern.shapeType) !== null && _k !== void 0 ? _k : defaultPatternTitle === null || defaultPatternTitle === void 0 ? void 0 : defaultPatternTitle.shapeType,
-	        shapeColor: (_l = userPattern.shapeColor) !== null && _l !== void 0 ? _l : defaultPatternTitle === null || defaultPatternTitle === void 0 ? void 0 : defaultPatternTitle.shapeColor
-	    };
-	    if (isValid(userPattern.title)) {
-	        if (!isFunction(userPattern.title)) {
-	            userPattern.title = Object.assign(Object.assign(Object.assign({}, defaultPattern.title), titleShape), userPattern.title);
-	        }
-	        else {
-	            const userPatternTitle = userPattern.title;
-	            userPattern.title = (data, params) => {
-	                var _a;
-	                const userResult = (_a = userPatternTitle(data, params)) !== null && _a !== void 0 ? _a : {};
-	                return Object.assign(Object.assign({}, titleShape), userResult);
-	            };
+	    return seriesPattern;
+	};
+	const getSeriesListFromDimensionInfo = memoize((dimensionInfo) => {
+	    return dimensionInfo.reduce((list, cur) => list.concat(cur.data.map(data => data.series).filter(isValid)), []);
+	});
+	const getShapePatternMapOfEachSeries = (content) => {
+	    const shapePatternMap = {};
+	    content.forEach(line => {
+	        var _a;
+	        const key = (_a = line.seriesId) !== null && _a !== void 0 ? _a : 0;
+	        if (!shapePatternMap[key]) {
+	            shapePatternMap[key] = line;
 	        }
-	    }
-	    else {
-	        userPattern.title = Object.assign(Object.assign({}, defaultPattern.title), titleShape);
-	    }
-	    const getContentShape = (defaultContentLine) => {
+	    });
+	    return shapePatternMap;
+	};
+	const getShapePattern = (userLinePattern, userPattern, shapePatternMap, defaultShapePattern) => {
+	    var _a, _b;
+	    const shapePatternFromMap = (_b = shapePatternMap === null || shapePatternMap === void 0 ? void 0 : shapePatternMap[(_a = userLinePattern === null || userLinePattern === void 0 ? void 0 : userLinePattern.seriesId) !== null && _a !== void 0 ? _a : 0]) !== null && _b !== void 0 ? _b : shapePatternMap === null || shapePatternMap === void 0 ? void 0 : shapePatternMap[0];
+	    const shapeKeys = ['hasShape', 'shapeType', 'shapeColor'];
+	    const shapePattern = {};
+	    shapeKeys.forEach(key => {
 	        var _a, _b, _c;
-	        return ({
-	            hasShape: (_a = userPattern.hasShape) !== null && _a !== void 0 ? _a : defaultContentLine === null || defaultContentLine === void 0 ? void 0 : defaultContentLine.hasShape,
-	            shapeType: (_b = userPattern.shapeType) !== null && _b !== void 0 ? _b : defaultContentLine === null || defaultContentLine === void 0 ? void 0 : defaultContentLine.shapeType,
-	            shapeColor: (_c = userPattern.shapeColor) !== null && _c !== void 0 ? _c : defaultContentLine === null || defaultContentLine === void 0 ? void 0 : defaultContentLine.shapeColor
-	        });
-	    };
-	    const defaultPatternContent = array(defaultPattern.content);
-	    if (isValid(userPattern.content)) {
-	        if (!isFunction(userPattern.content)) {
-	            const userPatternContent = array(userPattern.content);
-	            userPatternContent.forEach((line, i) => {
-	                userPatternContent[i] = Object.assign(Object.assign({}, getContentShape(defaultPatternContent[0])), line);
-	            });
+	        const value = (_c = (_b = (_a = userLinePattern === null || userLinePattern === void 0 ? void 0 : userLinePattern[key]) !== null && _a !== void 0 ? _a : userPattern === null || userPattern === void 0 ? void 0 : userPattern[key]) !== null && _b !== void 0 ? _b : shapePatternFromMap === null || shapePatternFromMap === void 0 ? void 0 : shapePatternFromMap[key]) !== null && _c !== void 0 ? _c : defaultShapePattern === null || defaultShapePattern === void 0 ? void 0 : defaultShapePattern[key];
+	        if (value !== undefined) {
+	            shapePattern[key] = value;
 	        }
-	        else {
-	            const userPatternContent = userPattern.content;
-	            userPattern.content = (data, params) => {
-	                var _a;
-	                const userResult = array((_a = userPatternContent(data, params)) !== null && _a !== void 0 ? _a : []);
-	                userResult.forEach((line, i) => {
-	                    userResult[i] = Object.assign(Object.assign({}, getContentShape(defaultPatternContent[0])), line);
-	                });
-	                return userResult;
-	            };
-	        }
-	    }
-	    else {
-	        userPattern.content = defaultPatternContent.map(line => (Object.assign(Object.assign({}, line), getContentShape(line))));
-	    }
-	    finalSpec[activeType] = Object.assign(Object.assign(Object.assign({}, defaultPattern), userPattern), { activeType });
-	    return finalSpec;
+	    });
+	    return shapePattern;
 	};
 
 	const getActualTooltipPositionValue = (position, event) => {
@@ -88522,6 +88724,18 @@
 	    return result;
 	};
 
+	const defaultTextAttributes = {
+	    fontFamily: DEFAULT_TEXT_FONT_FAMILY$1,
+	    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 });
+	    return attrs;
+	}
+
 	const getTooltipAttributes = (actualTooltip, style) => {
 	    const { spaceRow, padding, title: titleStyle, shape: shapeStyle, key: keyStyle, value: valueStyle } = style;
 	    const attribute = Object.assign(Object.assign({}, style), { title: {}, content: [], titleStyle: {
@@ -88540,17 +88754,13 @@
 	    let maxWidth = 0;
 	    let containerHeight = padding.top + padding.bottom;
 	    let titleMaxHeight = 0;
-	    const { visible: titleVisible = true, value: titleValue = '', hasShape: titleHasShape, shapeType: titleShapeType = '', shapeHollow: titleShapeHollow, shapeColor: titleShapeColor } = title;
+	    const { visible: titleVisible = true, value: titleValue = '', valueStyle: titleValueStyle, hasShape: titleHasShape, shapeType: titleShapeType = '', shapeHollow: titleShapeHollow, shapeColor: titleShapeColor } = title;
 	    attribute.title.visible = titleVisible;
 	    if (titleVisible) {
-	        const { text, width, height } = measureTooltipText(titleValue, titleStyle);
-	        attribute.title.value = {
-	            width,
-	            height,
-	            text,
-	            multiLine: titleStyle.multiLine,
-	            wordBreak: titleStyle.wordBreak
-	        };
+	        const lineTitleStyle = merge$2({}, 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]) {
@@ -88588,14 +88798,10 @@
 	                let itemHeight = 0;
 	                const { hasShape, key, shapeColor, shapeHollow, shapeType = '', value, isKeyAdaptive } = item;
 	                if (isValid(key)) {
-	                    const { width, height, text } = measureTooltipText(key, keyStyle);
-	                    itemAttrs.key = {
-	                        width,
-	                        height,
-	                        text,
-	                        multiLine: keyStyle.multiLine,
-	                        wordBreak: titleStyle.wordBreak
-	                    };
+	                    const lineKeyStyle = merge$2({}, 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);
 	                    }
@@ -88605,14 +88811,10 @@
 	                    itemHeight = Math.max(itemHeight, height);
 	                }
 	                if (isValid(value)) {
-	                    const { width, height, text } = measureTooltipText(value, valueStyle);
-	                    itemAttrs.value = {
-	                        width,
-	                        height,
-	                        text,
-	                        multiLine: valueStyle.multiLine,
-	                        wordBreak: titleStyle.wordBreak
-	                    };
+	                    const lineValueStyle = merge$2({}, 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);
 	                }
@@ -88693,24 +88895,6 @@
 	    };
 	};
 
-	function getTextAttributes(style = {}, globalTheme) {
-	    var _a, _b, _c, _d, _e;
-	    const attrs = {
-	        fill: style.fontColor,
-	        textAlign: style.textAlign,
-	        textBaseline: style.textBaseline,
-	        fontFamily: (_b = (_a = style.fontFamily) !== null && _a !== void 0 ? _a : globalTheme === null || globalTheme === void 0 ? void 0 : globalTheme.fontFamily) !== null && _b !== void 0 ? _b : DEFAULT_TEXT_FONT_FAMILY$1,
-	        fontSize: style.fontSize,
-	        fontWeight: style.fontWeight,
-	        lineHeight: style.lineHeight,
-	        spacing: (_c = style.spacing) !== null && _c !== void 0 ? _c : 10,
-	        multiLine: (_d = style.multiLine) !== null && _d !== void 0 ? _d : false,
-	        maxWidth: style.maxWidth,
-	        wordBreak: (_e = style.wordBreak) !== null && _e !== void 0 ? _e : 'break-word'
-	    };
-	    return attrs;
-	}
-
 	var TooltipResult;
 	(function (TooltipResult) {
 	    TooltipResult[TooltipResult["success"] = 0] = "success";
@@ -89091,9 +89275,12 @@
 	    return defaultStr !== null && defaultStr !== void 0 ? defaultStr : 'initial';
 	};
 	function getDomStyles(style, attributeCache) {
-	    var _a, _b, _c, _d, _e, _f, _g;
+	    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 	    const { panel: { fill: fillColor, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, shadowSpread, cornerRadius, stroke: strokeColor, lineWidth = 0 }, padding, key, value, title, shape, enterable, spaceRow, transitionDuration } = style;
 	    const backgroundColor = fillColor;
+	    const shapeStyle = getShapeStyle(shape);
+	    const keyStyle = getLabelStyle(key);
+	    const valueStyle = getLabelStyle(value);
 	    const styles = {
 	        panel: {
 	            width: getPixelPropertyStr(((_b = (_a = attributeCache === null || attributeCache === void 0 ? void 0 : attributeCache.panel) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0) + lineWidth * 2),
@@ -89114,28 +89301,31 @@
 	            transitionProperty: transitionDuration ? 'transform' : 'initial',
 	            transitionTimingFunction: transitionDuration ? 'ease-out' : 'initial'
 	        },
-	        title: getLabelStyle(title),
+	        title: getLabelStyle(merge$2({}, title, (_e = attributeCache === null || attributeCache === void 0 ? void 0 : attributeCache.title) === null || _e === void 0 ? void 0 : _e.value)),
 	        content: {},
 	        shapeColumn: {
-	            item: getShapeStyle(shape),
+	            common: shapeStyle,
+	            items: [],
 	            width: getPixelPropertyStr(shape.size),
-	            marginRight: getPixelPropertyStr((_e = shape.spacing) !== null && _e !== void 0 ? _e : DEFAULT_SHAPE_SPACING)
+	            marginRight: getPixelPropertyStr((_f = shape.spacing) !== null && _f !== void 0 ? _f : DEFAULT_SHAPE_SPACING)
 	        },
 	        keyColumn: {
-	            item: getLabelStyle(key),
+	            common: keyStyle,
+	            items: (_g = attributeCache === null || attributeCache === void 0 ? void 0 : attributeCache.content) === null || _g === void 0 ? void 0 : _g.map(({ key }) => (Object.assign(Object.assign(Object.assign({}, keyStyle), getLabelStyle(key)), ((key === null || key === void 0 ? void 0 : key.multiLine) ? { width: getPixelPropertyStr(Math.ceil(key.width)) } : undefined)))),
 	            width: getPixelPropertyStr(attributeCache === null || attributeCache === void 0 ? void 0 : attributeCache.keyWidth),
-	            marginRight: getPixelPropertyStr((_f = key.spacing) !== null && _f !== void 0 ? _f : DEFAULT_KEY_SPACING)
+	            marginRight: getPixelPropertyStr((_h = key.spacing) !== null && _h !== void 0 ? _h : DEFAULT_KEY_SPACING)
 	        },
 	        valueColumn: {
-	            item: getLabelStyle(value),
+	            common: valueStyle,
+	            items: (_j = attributeCache === null || attributeCache === void 0 ? void 0 : attributeCache.content) === null || _j === void 0 ? void 0 : _j.map(({ value }) => (Object.assign(Object.assign(Object.assign({}, valueStyle), getLabelStyle(value)), ((value === null || value === void 0 ? void 0 : value.multiLine) ? { width: getPixelPropertyStr(Math.ceil(value.width)) } : undefined)))),
 	            width: getPixelPropertyStr(attributeCache === null || attributeCache === void 0 ? void 0 : attributeCache.valueWidth),
-	            marginRight: getPixelPropertyStr((_g = value.spacing) !== null && _g !== void 0 ? _g : DEFAULT_VALUE_SPACING)
+	            marginRight: getPixelPropertyStr((_k = value.spacing) !== null && _k !== void 0 ? _k : DEFAULT_VALUE_SPACING)
 	        },
 	        spaceRow: getPixelPropertyStr(spaceRow)
 	    };
 	    if (isValid(spaceRow)) {
 	        const gapUnit = spaceRow / 2;
-	        [styles.shapeColumn.item, styles.keyColumn.item, styles.valueColumn.item].forEach(obj => {
+	        [styles.shapeColumn.common, styles.keyColumn.common, styles.valueColumn.common].forEach(obj => {
 	            obj.marginTop = getPixelPropertyStr(gapUnit);
 	            obj.marginBottom = obj.marginTop;
 	        });
@@ -89143,7 +89333,7 @@
 	        styles.content.marginBottom = styles.content.marginTop;
 	    }
 	    else {
-	        [styles.content, styles.shapeColumn.item, styles.keyColumn.item, styles.valueColumn.item].forEach(obj => {
+	        [styles.content, styles.shapeColumn.common, styles.keyColumn.common, styles.valueColumn.common].forEach(obj => {
 	            obj.marginTop = 'initial';
 	            obj.marginBottom = 'initial';
 	        });
@@ -89468,12 +89658,12 @@
 	        const renderContent = (_b = (_a = this._option.getTooltipActual()) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : [];
 	        const contentAttributes = (_d = (_c = this._option.getTooltipAttributes()) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : [];
 	        renderContent.forEach((line, i) => {
-	            var _a, _b;
+	            var _a, _b, _c, _d, _e;
 	            let childStyle = {};
 	            if (this.className === 'key-box') {
 	                const { key, isKeyAdaptive } = line;
-	                childStyle = merge$2({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.keyColumn.item));
-	                const hasContent = (isString(key) && ((_a = key === null || key === void 0 ? void 0 : key.trim) === null || _a === void 0 ? void 0 : _a.call(key)) !== '') || isNumber(key);
+	                childStyle = merge$2({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
+	                const hasContent = (isString(key) && ((_b = key === null || key === void 0 ? void 0 : key.trim) === null || _b === void 0 ? void 0 : _b.call(key)) !== '') || isNumber(key);
 	                if (!hasContent && !childStyle.visibility) {
 	                    childStyle.visibility = 'hidden';
 	                }
@@ -89483,12 +89673,12 @@
 	                this.children[i].setStyle(childStyle);
 	            }
 	            else if (this.className === 'value-box') {
-	                childStyle = merge$2({}, defaultValueStyle, Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.valueColumn.item));
+	                childStyle = merge$2({}, defaultValueStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
 	                this.children[i].setStyle(childStyle);
 	            }
 	            else if (this.className === 'shape-box') {
-	                childStyle = merge$2({}, defaultShapeStyle, Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.shapeColumn.item));
-	                (_b = this.children[i]) === null || _b === void 0 ? void 0 : _b.setStyle(childStyle, this._getShapeSvgOption(line));
+	                childStyle = merge$2({}, defaultShapeStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.shapeColumn.common), (_d = tooltipStyle.shapeColumn.items) === null || _d === void 0 ? void 0 : _d[i]));
+	                (_e = this.children[i]) === null || _e === void 0 ? void 0 : _e.setStyle(childStyle, this._getShapeSvgOption(line, i));
 	            }
 	        });
 	    }
@@ -89507,7 +89697,7 @@
 	                else {
 	                    childContent = TOOLTIP_EMPTY_STRING;
 	                }
-	                (_b = this.children[i]) === null || _b === void 0 ? void 0 : _b.setContent(childContent, (_c = contentAttributes[i].value) === null || _c === void 0 ? void 0 : _c.multiLine);
+	                (_b = this.children[i]) === null || _b === void 0 ? void 0 : _b.setContent(childContent, (_c = contentAttributes[i].key) === null || _c === void 0 ? void 0 : _c.multiLine);
 	            }
 	            else if (this.className === 'value-box') {
 	                const valueContent = line.value;
@@ -89520,7 +89710,7 @@
 	                (_e = this.children[i]) === null || _e === void 0 ? void 0 : _e.setContent(childContent, (_f = contentAttributes[i].value) === null || _f === void 0 ? void 0 : _f.multiLine);
 	            }
 	            else if (this.className === 'shape-box') {
-	                childContent = this._getShapeSvgOption(line);
+	                childContent = this._getShapeSvgOption(line, i);
 	                (_g = this.children[i]) === null || _g === void 0 ? void 0 : _g.setContent(childContent);
 	            }
 	        });
@@ -89540,16 +89730,18 @@
 	                return tooltipStyle.valueColumn;
 	        }
 	    }
-	    _getShapeSvgOption(line) {
-	        var _a, _b, _c, _d, _e, _f, _g;
+	    _getShapeSvgOption(line, index) {
+	        var _a, _b, _c, _d, _e;
 	        const tooltipStyle = this._option.getTooltipStyle();
+	        const shapeColumn = Object.assign(Object.assign({}, tooltipStyle.shapeColumn), (_a = tooltipStyle.shapeColumn.items) === null || _a === void 0 ? void 0 : _a[index]);
+	        const keyColumn = Object.assign(Object.assign({}, tooltipStyle.keyColumn), (_b = tooltipStyle.keyColumn.items) === null || _b === void 0 ? void 0 : _b[index]);
 	        return {
 	            hasShape: line.hasShape,
 	            shapeType: line.shapeType,
-	            size: (_a = tooltipStyle.shapeColumn.item) === null || _a === void 0 ? void 0 : _a.width,
+	            size: shapeColumn.width,
 	            color: line.shapeColor,
 	            hollow: line.shapeHollow,
-	            marginTop: `calc((${(_e = (_c = (_b = tooltipStyle.keyColumn.item) === null || _b === void 0 ? void 0 : _b.lineHeight) !== null && _c !== void 0 ? _c : (_d = tooltipStyle.keyColumn.item) === null || _d === void 0 ? void 0 : _d.fontSize) !== null && _e !== void 0 ? _e : '18px'} - ${(_g = (_f = tooltipStyle.shapeColumn.item) === null || _f === void 0 ? void 0 : _f.width) !== null && _g !== void 0 ? _g : '8px'}) / 2)`
+	            marginTop: `calc((${(_d = (_c = keyColumn.lineHeight) !== null && _c !== void 0 ? _c : keyColumn.fontSize) !== null && _d !== void 0 ? _d : '18px'} - ${(_e = shapeColumn.width) !== null && _e !== void 0 ? _e : '8px'}) / 2)`
 	        };
 	    }
 	}
@@ -89652,11 +89844,11 @@
 	        const { title } = tooltipActual;
 	        super.setStyle(merge$2({}, defaultH2Style, tooltipStyle.title, style));
 	        (_a = this.shape) === null || _a === void 0 ? void 0 : _a.setStyle({
-	            paddingRight: (_b = tooltipStyle.shapeColumn.item) === null || _b === void 0 ? void 0 : _b.marginRight
+	            paddingRight: (_b = tooltipStyle.shapeColumn.common) === null || _b === void 0 ? void 0 : _b.marginRight
 	        }, {
 	            hasShape: title === null || title === void 0 ? void 0 : title.hasShape,
 	            shapeType: title === null || title === void 0 ? void 0 : title.shapeType,
-	            size: (_c = tooltipStyle.shapeColumn.item) === null || _c === void 0 ? void 0 : _c.width,
+	            size: (_c = tooltipStyle.shapeColumn.common) === null || _c === void 0 ? void 0 : _c.width,
 	            color: title === null || title === void 0 ? void 0 : title.shapeColor,
 	            hollow: title === null || title === void 0 ? void 0 : title.shapeHollow
 	        });
@@ -89671,7 +89863,7 @@
 	        (_a = this.shape) === null || _a === void 0 ? void 0 : _a.setStyle(undefined, {
 	            hasShape: title === null || title === void 0 ? void 0 : title.hasShape,
 	            shapeType: title === null || title === void 0 ? void 0 : title.shapeType,
-	            size: (_b = tooltipStyle.shapeColumn.item) === null || _b === void 0 ? void 0 : _b.width,
+	            size: (_b = tooltipStyle.shapeColumn.common) === null || _b === void 0 ? void 0 : _b.width,
 	            color: title === null || title === void 0 ? void 0 : title.shapeColor,
 	            hollow: title === null || title === void 0 ? void 0 : title.shapeHollow
 	        });