@visactor/vchart 1.11.0-alpha.1 → 1.11.0-alpha.2

package/build/index.js

@@ -59541,8 +59541,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._chartPluginApply('releaseAll');
             this._chartPlugin = null;
             this._chartSpecTransformer = null;
-            (_b = this._eventDispatcher) === null || _b === void 0 ? void 0 : _b.release();
-            (_c = this._chart) === null || _c === void 0 ? void 0 : _c.release();
+            (_b = this._chart) === null || _b === void 0 ? void 0 : _b.release();
+            (_c = this._eventDispatcher) === null || _c === void 0 ? void 0 : _c.release();
             (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.release();
             this._unBindResizeEvent();
             this._releaseData();
@@ -61103,20 +61103,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     AxisSyncPlugin.pluginType = 'component';
     AxisSyncPlugin.type = 'AxisSyncPlugin';
 
-    function getComponentThemeFromOption(type, chartTheme) {
-        return get$1(chartTheme, `component.${type}`);
-    }
-    function getFormatFunction(formatMethod, formatter, text, datum) {
-        if (formatMethod) {
-            return { formatFunc: formatMethod, args: [text, datum] };
-        }
-        const formatterImpl = Factory.getFormatter();
-        if (formatter && formatterImpl) {
-            return { formatFunc: formatterImpl, args: [text, datum, formatter] };
-        }
-        return {};
-    }
-
     function escapeHTML(value) {
         return String(value)
             .replace(/&/g, '&')
@@ -61125,61 +61111,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             .replace(/\(/g, '(')
             .replace(/  /g, '  ');
     }
-    const getTooltipContentValue = (field, datum, params, formatter) => {
-        let value;
-        if (isFunction$1(field)) {
-            value = field(datum, params);
-        }
-        else {
-            value = field;
-        }
-        if (formatter) {
-            const { formatFunc, args } = getFormatFunction(undefined, formatter, field, datum);
-            if (formatFunc && args) {
-                value = formatFunc(...args);
-            }
-        }
-        return value;
-    };
-    const getTooltipPatternValue = (field, data, params) => {
-        if (isNil$3(field)) {
-            return field;
-        }
-        if (isFunction$1(field)) {
-            return field(data, params);
-        }
-        return field;
-    };
-    const getTooltipContentPattern = (field, data, params) => {
-        if (isNil$3(field)) {
-            return field;
-        }
-        let result = [];
-        array(field).forEach(patternItem => {
-            if (isFunction$1(patternItem)) {
-                result = result.concat(array(patternItem(data, params)));
-            }
-            else {
-                result.push(patternItem);
-            }
-        });
-        return result;
-    };
-    function getFirstDatumFromTooltipData(data) {
-        var _a;
-        const dimInfoList = ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.series)
-            ? [{ data: data, value: '' }]
-            : data;
-        for (const { data: dataList } of dimInfoList) {
-            for (const { datum: datumList } of dataList) {
-                for (const datumItem of datumList !== null && datumList !== void 0 ? datumList : []) {
-                    if (datumItem) {
-                        return datumItem;
-                    }
-                }
-            }
-        }
-    }
     const getScale = (element, boundingClientRect) => {
         if (!element) {
             return 1;
@@ -61226,18 +61157,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
-    const TOOLTIP_MAX_LINE_COUNT = 20;
     const TOOLTIP_EMPTY_STRING = '';
-    const TOOLTIP_OTHERS_LINE = {
-        key: '其他',
-        value: '...'
-    };
     const DEFAULT_OPTIONS = {
         offsetX: 10,
         offsetY: 10,
         sanitize: escapeHTML
     };
 
+    function getComponentThemeFromOption(type, chartTheme) {
+        return get$1(chartTheme, `component.${type}`);
+    }
+    function getFormatFunction(formatMethod, formatter, text, datum) {
+        if (formatMethod) {
+            return { formatFunc: formatMethod, args: [text, datum] };
+        }
+        const formatterImpl = Factory.getFormatter();
+        if (formatter && formatterImpl) {
+            return { formatFunc: formatterImpl, args: [text, datum, formatter] };
+        }
+        return {};
+    }
+
     const DEFAULT_TITLE_STYLE = {
         left: {
             textAlign: 'center',
@@ -61774,6 +61714,218 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             (isValid$3(obj.x) || isValid$3(obj.y)));
     };
 
+    const DEFAULT_TEXT_ATTRIBUTES = {
+        fontFamily: token.fontFamily,
+        spacing: 10,
+        wordBreak: 'break-word'
+    };
+    function getTextAttributes(style = {}, globalTheme, defaultAttributes) {
+        var _a, _b;
+        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 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$3(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, maxContentHeight } = 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: {
+                shape: shapeStyle,
+                key: keyStyle,
+                value: valueStyle,
+                spaceRow: commonSpaceRow
+            },
+            hasContentShape: false,
+            keyWidth: 0,
+            valueWidth: 0,
+            maxContentHeight,
+            enterable,
+            transitionDuration
+        };
+        const { title = {}, content = [] } = actualTooltip;
+        let panelWidth = paddingSpec.left + paddingSpec.right;
+        let panelHeight = paddingSpec.top + paddingSpec.bottom;
+        let panelDomHeight = 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 = [];
+            let contentHeight = 0;
+            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, shapeHollow: actualShapeHollow, shapeColor: actualShapeColor } = item;
+                const itemAttrs = { height: 0, spaceRow: actualSpaceRow !== null && actualSpaceRow !== void 0 ? actualSpaceRow : commonSpaceRow };
+                if (isValid$3(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);
+                    }
+                    else {
+                        adaptiveKeyWidths.push(width);
+                    }
+                    itemHeight = Math.max(itemHeight, height);
+                }
+                if (isValid$3(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 {
+                        shape.fill = adaptiveShapeFill;
+                    }
+                    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;
+                contentHeight += itemHeight;
+                if (i < filteredContent.length - 1) {
+                    contentHeight += itemAttrs.spaceRow;
+                }
+                return itemAttrs;
+            });
+            panelHeight += contentHeight;
+            panelDomHeight += Math.min(contentHeight, maxContentHeight !== null && maxContentHeight !== void 0 ? maxContentHeight : Infinity);
+            maxKeyWidth = keyWidths.length ? maxInArray(keyWidths) : 0;
+            maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? maxInArray(adaptiveKeyWidths) : 0;
+            maxValueWidth = valueWidths.length ? maxInArray(valueWidths) : 0;
+            maxShapeWidth = shapeWidths.length ? maxInArray(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;
+        let titleHeightWithSpace = 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;
+            titleHeightWithSpace = titleMaxHeight + (hasContent ? attributes.title.spaceRow : 0);
+        }
+        panelHeight += titleHeightWithSpace;
+        panelDomHeight += titleHeightWithSpace;
+        attributes.title.width = titleMaxWidth;
+        attributes.title.height = titleMaxHeight;
+        if (isAutoWidthMode()) {
+            panelWidth += contentMaxWidth ? contentMaxWidth : titleMaxWidth;
+        }
+        else {
+            panelWidth += 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 =
+                        panelWidth -
+                            paddingSpec.left -
+                            paddingSpec.right -
+                            maxShapeWidth -
+                            maxKeyWidth -
+                            keyStyle.spacing -
+                            valueStyle.spacing;
+                    if (!value.maxWidth) {
+                        value.maxWidth = Math.ceil(value.width);
+                    }
+                    attributes.valueWidth = Math.max(attributes.valueWidth, value.width);
+                }
+            });
+        }
+        attributes.panel.width = panelWidth;
+        attributes.panel.height = panelHeight;
+        attributes.panelDomHeight = panelDomHeight;
+        return attributes;
+    };
+
     const getDataArrayFromFieldArray = (fields, datum) => isValid$3(datum) ? fields.map(f => datum[f]) : undefined;
     const datumContainsArray = (fields, data) => (datum) => fields.every((key, i) => datum[key] === (data === null || data === void 0 ? void 0 : data[i]));
     const hasData = (data) => {
@@ -62116,13 +62268,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     const getTooltipActualActiveType = (spec) => {
-        var _a, _b;
+        var _a, _b, _c;
         if ((spec === null || spec === void 0 ? void 0 : spec.visible) === false) {
             return [];
         }
         const activeTypeMap = {
             mark: ((_a = spec === null || spec === void 0 ? void 0 : spec.mark) === null || _a === void 0 ? void 0 : _a.visible) !== false,
-            dimension: ((_b = spec === null || spec === void 0 ? void 0 : spec.dimension) === null || _b === void 0 ? void 0 : _b.visible) !== false
+            dimension: ((_b = spec === null || spec === void 0 ? void 0 : spec.dimension) === null || _b === void 0 ? void 0 : _b.visible) !== false,
+            group: ((_c = spec === null || spec === void 0 ? void 0 : spec.group) === null || _c === void 0 ? void 0 : _c.visible) !== false
         };
         if (isValid$3(spec === null || spec === void 0 ? void 0 : spec.activeType)) {
             Object.keys(activeTypeMap).forEach(t => {
@@ -62136,150 +62289,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return isNil$3(params.mark) && isNil$3(params.model) && isNil$3(params.datum);
     }
 
-    const getTimeString = (value, timeFormat, timeFormatMode) => {
-        if (!timeFormat && !timeFormatMode) {
-            if (typeof value !== 'object') {
-                return value === null || value === void 0 ? void 0 : value.toString();
-            }
-            return value;
-        }
-        const timeUtil = TimeUtil.getInstance();
-        timeFormat = timeFormat || '%Y%m%d';
-        timeFormatMode = timeFormatMode || 'local';
-        const timeFormatter = timeFormatMode === 'local' ? timeUtil.timeFormat : timeUtil.timeUTCFormat;
-        return timeFormatter(timeFormat, value);
-    };
-    const getShowContent = (pattern, data, params) => {
-        var _a, _b, _c, _d;
-        if (!data ||
-            ((_a = params === null || params === void 0 ? void 0 : params.event) === null || _a === void 0 ? void 0 : _a.type) === 'mouseout') {
-            return null;
-        }
-        const tooltipActualTitleContent = {
-            title: {},
-            content: []
-        };
-        const patternTitle = getTooltipPatternValue(pattern.title, data, params);
-        const { visible, value, valueTimeFormat, valueTimeFormatMode, valueStyle, hasShape, valueFormatter } = patternTitle !== null && patternTitle !== void 0 ? patternTitle : {};
-        const patternTitleVisible = getTooltipContentValue(visible, data, params) !== false;
-        if (!patternTitle || !patternTitleVisible) {
-            tooltipActualTitleContent.title = {
-                hasShape: false,
-                visible: false
-            };
-        }
-        else {
-            const datum = getFirstDatumFromTooltipData(data);
-            tooltipActualTitleContent.title = {
-                value: getTimeString(getTooltipContentValue(value, datum, params, valueFormatter), valueTimeFormat, valueTimeFormatMode),
-                valueStyle: getTooltipContentValue(valueStyle, datum, params),
-                hasShape
-            };
-        }
-        const patternContent = getTooltipContentPattern(pattern.content, data, params);
-        const { maxLineCount = TOOLTIP_MAX_LINE_COUNT } = pattern;
-        if (pattern.activeType === 'mark') {
-            for (const content of patternContent !== null && patternContent !== void 0 ? patternContent : []) {
-                const oneLineData = getOneLineData((_b = data[0]) === null || _b === void 0 ? void 0 : _b.datum[0], content, params);
-                if (oneLineData.visible !== false) {
-                    if (tooltipActualTitleContent.content.length === maxLineCount - 1) {
-                        tooltipActualTitleContent.content.push(Object.assign(Object.assign({}, oneLineData), TOOLTIP_OTHERS_LINE));
-                        break;
-                    }
-                    else if (tooltipActualTitleContent.content.length < maxLineCount) {
-                        tooltipActualTitleContent.content.push(oneLineData);
-                    }
-                    else {
-                        break;
-                    }
-                }
-            }
-        }
-        else if (pattern.activeType === 'dimension') {
-            for (const { data: d } of data) {
-                for (const { datum, series } of d) {
-                    if (!getTooltipActualActiveType((_c = series.tooltipHelper) === null || _c === void 0 ? void 0 : _c.spec).includes('dimension')) {
-                        continue;
-                    }
-                    const contentPatterns = (_d = patternContent === null || patternContent === void 0 ? void 0 : patternContent.filter(c => isNil$3(c.seriesId) || c.seriesId === series.id)) !== null && _d !== void 0 ? _d : [];
-                    for (const datumItem of datum) {
-                        for (const linePattern of contentPatterns) {
-                            const oneLineData = getOneLineData(datumItem, linePattern, params);
-                            if (oneLineData.visible === false) {
-                                continue;
-                            }
-                            if (tooltipActualTitleContent.content.length === maxLineCount - 1) {
-                                tooltipActualTitleContent.content.push(Object.assign(Object.assign({}, oneLineData), TOOLTIP_OTHERS_LINE));
-                                break;
-                            }
-                            else if (tooltipActualTitleContent.content.length < maxLineCount) {
-                                tooltipActualTitleContent.content.push(oneLineData);
-                            }
-                            else {
-                                break;
-                            }
-                        }
-                        if (tooltipActualTitleContent.content.length >= maxLineCount) {
-                            break;
-                        }
-                    }
-                    if (tooltipActualTitleContent.content.length >= maxLineCount) {
-                        break;
-                    }
-                }
-                if (tooltipActualTitleContent.content.length >= maxLineCount) {
-                    break;
-                }
-            }
-        }
-        if (tooltipActualTitleContent.title) {
-            if (tooltipActualTitleContent.content.length > 0 && tooltipActualTitleContent.content[0].shapeType) {
-                if (isNil$3(tooltipActualTitleContent.title.shapeType)) {
-                    tooltipActualTitleContent.title.shapeType = tooltipActualTitleContent.content[0].shapeType;
-                }
-                if (isNil$3(tooltipActualTitleContent.title.shapeColor)) {
-                    tooltipActualTitleContent.title.shapeColor = tooltipActualTitleContent.content[0].shapeColor;
-                }
-            }
-            else {
-                tooltipActualTitleContent.title.hasShape = false;
-            }
-        }
-        return tooltipActualTitleContent;
-    };
-    const getOneLineData = (datum, config, params) => {
-        const key = getTimeString(getTooltipContentValue(config.key, datum, params, config.keyFormatter), config.keyTimeFormat, config.keyTimeFormatMode);
-        const value = getTimeString(getTooltipContentValue(config.value, datum, params, config.valueFormatter), config.valueTimeFormat, config.valueTimeFormatMode);
-        const visible = getTooltipContentValue(config.visible, datum, params) !== false && (isValid$3(key) || isValid$3(value));
-        const isKeyAdaptive = getTooltipContentValue(config.isKeyAdaptive, datum, params);
-        const spaceRow = getTooltipContentValue(config.spaceRow, datum, params);
-        const shapeType = getTooltipContentValue(config.shapeType, datum, params);
-        const shapeColor = getTooltipContentValue(config.shapeColor, datum, params);
-        const shapeFill = getTooltipContentValue(config.shapeFill, datum, params);
-        const shapeStroke = getTooltipContentValue(config.shapeStroke, datum, params);
-        const shapeLineWidth = getTooltipContentValue(config.shapeLineWidth, datum, params);
-        const shapeHollow = getTooltipContentValue(config.shapeHollow, datum, params);
-        const keyStyle = getTooltipContentValue(config.keyStyle, datum, params);
-        const valueStyle = getTooltipContentValue(config.valueStyle, datum, params);
-        return {
-            key,
-            value,
-            visible,
-            isKeyAdaptive,
-            hasShape: config.hasShape,
-            shapeType,
-            shapeFill,
-            shapeStroke,
-            shapeLineWidth,
-            shapeHollow,
-            shapeColor,
-            keyStyle,
-            valueStyle,
-            spaceRow,
-            datum
-        };
-    };
-
     const makeDefaultPattern = (series, activeType, dimensionInfo) => {
         var _a, _b;
         return (_b = (_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.getDefaultTooltipPattern(activeType, dimensionInfo)) !== null && _b !== void 0 ? _b : null;
@@ -62289,11 +62298,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         constructor() {
             this.activeTriggerSet = {
                 mark: new Set(),
-                dimension: new Set()
+                dimension: new Set(),
+                group: new Set()
             };
             this.ignoreTriggerSet = {
                 mark: new Set(),
-                dimension: new Set()
+                dimension: new Set(),
+                group: new Set()
             };
         }
     }
@@ -62321,6 +62332,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const { measureFields } = this._seriesCacheInfo;
                 return measureFields[0] && (datum === null || datum === void 0 ? void 0 : datum[measureFields[0]]);
             };
+            this._getSeriesFieldData = (datum) => {
+                const { dimensionFields, seriesFields } = this._seriesCacheInfo;
+                if (isValid$3(seriesFields[0]) && (datum === null || datum === void 0 ? void 0 : datum[seriesFields[0]])) {
+                    return datum === null || datum === void 0 ? void 0 : datum[seriesFields[0]];
+                }
+                const subDimensionField = dimensionFields[dimensionFields.length - 1];
+                if (dimensionFields.length > 1 && (seriesFields.length === 0 || this.series.getSeriesKeys().length <= 1)) {
+                    return datum === null || datum === void 0 ? void 0 : datum[subDimensionField];
+                }
+                return datum === null || datum === void 0 ? void 0 : datum[subDimensionField];
+            };
             this._getSeriesStyle = (datum, styleKey, defaultValue) => {
                 var _a;
                 for (const key of array(styleKey)) {
@@ -62332,15 +62354,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return defaultValue;
             };
             this.contentKeyCallback = (datum, params) => {
-                const { dimensionFields, seriesFields } = this._seriesCacheInfo;
-                const subDimensionField = dimensionFields[dimensionFields.length - 1];
-                if (isValid$3(seriesFields[0]) && (datum === null || datum === void 0 ? void 0 : datum[seriesFields[0]])) {
-                    return datum === null || datum === void 0 ? void 0 : datum[seriesFields[0]];
-                }
-                if (dimensionFields.length > 1 && (seriesFields.length === 0 || this.series.getSeriesKeys().length <= 1)) {
-                    return datum === null || datum === void 0 ? void 0 : datum[subDimensionField];
-                }
-                return datum === null || datum === void 0 ? void 0 : datum[subDimensionField];
+                return this._getSeriesFieldData(datum);
             };
             this.contentValueCallback = (datum, params) => {
                 return this._getMeasureData(datum);
@@ -62363,7 +62377,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const seriesTooltipSpec = (_b = (_a = this.series.getSpec()) === null || _a === void 0 ? void 0 : _a.tooltip) !== null && _b !== void 0 ? _b : {};
             const chartTooltipSpec = (_d = (_c = this.series.getChart().getSpec()) === null || _c === void 0 ? void 0 : _c.tooltip) !== null && _d !== void 0 ? _d : {};
             const spec = Object.assign(Object.assign({}, chartTooltipSpec), seriesTooltipSpec);
-            ['mark', 'dimension'].forEach(activeType => {
+            ['mark', 'dimension', 'group'].forEach(activeType => {
                 const pattern = spec[activeType];
                 if (isValid$3(pattern)) {
                     spec[activeType] = Object.assign(Object.assign({}, pattern), { title: addExtraInfoToTooltipTitlePattern(pattern.title, {
@@ -62378,54 +62392,79 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._seriesCacheInfo = this._getSeriesCacheInfo();
         }
         getDefaultTooltipPattern(activeType, dimensionInfo) {
-            if (activeType === 'mark') {
-                return {
-                    visible: true,
-                    activeType,
-                    title: {
-                        key: undefined,
-                        value: this.titleValueCallback,
-                        hasShape: false
-                    },
-                    content: [
-                        {
-                            seriesId: this.series.id,
-                            key: this.contentKeyCallback,
-                            value: this.contentValueCallback,
-                            hasShape: true,
-                            shapeType: this.contentShapeTypeCallback,
-                            shapeColor: this.contentShapeColorCallback,
-                            shapeStroke: this.contentShapeColorCallback,
-                            shapeHollow: false
-                        }
-                    ]
-                };
-            }
-            else if (activeType === 'dimension' && dimensionInfo) {
-                const title = {
-                    key: undefined,
-                    value: this._getDimensionData,
-                    hasShape: false
-                };
-                const content = [];
-                dimensionInfo.forEach(({ data }) => data.forEach(({ series }) => {
-                    content.push({
-                        seriesId: series.id,
-                        key: this.contentKeyCallback,
-                        value: this.contentValueCallback,
-                        hasShape: true,
-                        shapeType: this.contentShapeTypeCallback,
-                        shapeColor: this.contentShapeColorCallback,
-                        shapeStroke: this.contentShapeColorCallback,
-                        shapeHollow: false
-                    });
-                }));
-                return {
-                    visible: true,
-                    activeType,
-                    title,
-                    content
-                };
+            switch (activeType) {
+                case 'mark':
+                    return {
+                        visible: true,
+                        activeType,
+                        title: {
+                            key: undefined,
+                            value: this.titleValueCallback,
+                            hasShape: false
+                        },
+                        content: [
+                            {
+                                seriesId: this.series.id,
+                                key: this.contentKeyCallback,
+                                value: this.contentValueCallback,
+                                hasShape: true,
+                                shapeType: this.contentShapeTypeCallback,
+                                shapeColor: this.contentShapeColorCallback,
+                                shapeStroke: this.contentShapeColorCallback,
+                                shapeHollow: false
+                            }
+                        ]
+                    };
+                case 'group':
+                    return {
+                        visible: true,
+                        activeType,
+                        title: {
+                            key: undefined,
+                            value: this.contentKeyCallback,
+                            hasShape: false
+                        },
+                        content: [
+                            {
+                                seriesId: this.series.id,
+                                key: this.titleValueCallback,
+                                value: this.contentValueCallback,
+                                hasShape: true,
+                                shapeType: this.contentShapeTypeCallback,
+                                shapeColor: this.contentShapeColorCallback,
+                                shapeStroke: this.contentShapeColorCallback,
+                                shapeHollow: false
+                            }
+                        ]
+                    };
+                case 'dimension':
+                    if (dimensionInfo) {
+                        const title = {
+                            key: undefined,
+                            value: this._getDimensionData,
+                            hasShape: false
+                        };
+                        const content = [];
+                        dimensionInfo.forEach(({ data }) => data.forEach(({ series }) => {
+                            content.push({
+                                seriesId: series.id,
+                                key: this.contentKeyCallback,
+                                value: this.contentValueCallback,
+                                hasShape: true,
+                                shapeType: this.contentShapeTypeCallback,
+                                shapeColor: this.contentShapeColorCallback,
+                                shapeStroke: this.contentShapeColorCallback,
+                                shapeHollow: false
+                            });
+                        }));
+                        return {
+                            visible: true,
+                            activeType,
+                            title,
+                            content
+                        };
+                    }
+                    break;
             }
             return null;
         }
@@ -62455,37 +62494,44 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         var _a, _b, _c, _d, _e, _f, _g;
         const finalSpec = Object.assign(Object.assign({}, globalSpec), { activeType });
         const { style = {} } = globalSpec;
-        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$3(seriesSpec.visible) || isValid$3(seriesSpec.activeType)) {
-                finalSpec.visible = getTooltipActualActiveType(seriesSpec).includes('mark');
-            }
-            else if (isValid$3(globalSpec.visible) || isValid$3(globalSpec.activeType)) {
-                finalSpec.visible = getTooltipActualActiveType(globalSpec).includes('mark');
-            }
-            else {
-                finalSpec.visible = true;
-            }
-            finalSpec.handler = (_d = (_c = seriesSpec.handler) !== null && _c !== void 0 ? _c : globalSpec.handler) !== null && _d !== void 0 ? _d : undefined;
-            if ((_e = finalSpec.handler) === null || _e === void 0 ? void 0 : _e.showTooltip) {
-                return finalSpec;
-            }
-        }
-        else if (activeType === 'dimension' && (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length)) {
-            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;
-            }
-            else if (isValid$3(globalSpec.visible) || isValid$3(globalSpec.activeType)) {
-                finalSpec.visible = getTooltipActualActiveType(globalSpec).includes('dimension');
-            }
-            else {
-                finalSpec.visible = true;
-            }
-            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;
-            }
+        switch (activeType) {
+            case 'mark':
+            case 'group':
+                if (series) {
+                    const seriesSpec = ((_b = (_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec) !== null && _b !== void 0 ? _b : {});
+                    if (isValid$3(seriesSpec.visible) || isValid$3(seriesSpec.activeType)) {
+                        finalSpec.visible = getTooltipActualActiveType(seriesSpec).includes(activeType);
+                    }
+                    else if (isValid$3(globalSpec.visible) || isValid$3(globalSpec.activeType)) {
+                        finalSpec.visible = getTooltipActualActiveType(globalSpec).includes(activeType);
+                    }
+                    else {
+                        finalSpec.visible = true;
+                    }
+                    finalSpec.handler = (_d = (_c = seriesSpec.handler) !== null && _c !== void 0 ? _c : globalSpec.handler) !== null && _d !== void 0 ? _d : undefined;
+                    if ((_e = finalSpec.handler) === null || _e === void 0 ? void 0 : _e.showTooltip) {
+                        return finalSpec;
+                    }
+                }
+                break;
+            case 'dimension':
+                if (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length) {
+                    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;
+                    }
+                    else if (isValid$3(globalSpec.visible) || isValid$3(globalSpec.activeType)) {
+                        finalSpec.visible = getTooltipActualActiveType(globalSpec).includes('dimension');
+                    }
+                    else {
+                        finalSpec.visible = true;
+                    }
+                    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;
+                    }
+                }
+                break;
         }
         const defaultPattern = getDefaultTooltipPattern(activeType, series, dimensionInfo);
         const seriesPattern = getSeriesTooltipPattern(activeType, series, dimensionInfo);
@@ -62512,70 +62558,84 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     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.forEach(({ data }) => data.forEach(data => {
-                const { series } = data;
-                const mockDimensionInfo = [
-                    Object.assign(Object.assign({}, dimensionInfo[0]), { data: [data] })
-                ];
-                const pattern = makeDefaultPattern(series, 'dimension', mockDimensionInfo);
-                if (pattern) {
-                    patternList.push(pattern);
-                }
-            }));
-            const defaultPatternContent = [];
-            patternList.forEach(({ content }) => {
-                if (isFunction$1(content)) {
-                    defaultPatternContent.push(content);
+        switch (activeType) {
+            case 'mark':
+            case 'group':
+                if (series) {
+                    defaultPattern = (_a = makeDefaultPattern(series, activeType)) !== null && _a !== void 0 ? _a : {};
                 }
-                else {
-                    defaultPatternContent.push(...array(content));
+                break;
+            case 'dimension':
+                if (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length) {
+                    const patternList = [];
+                    dimensionInfo.forEach(({ data }) => data.forEach(data => {
+                        const { series } = data;
+                        const mockDimensionInfo = [
+                            Object.assign(Object.assign({}, dimensionInfo[0]), { data: [data] })
+                        ];
+                        const pattern = makeDefaultPattern(series, 'dimension', mockDimensionInfo);
+                        if (pattern) {
+                            patternList.push(pattern);
+                        }
+                    }));
+                    const defaultPatternContent = [];
+                    patternList.forEach(({ content }) => {
+                        if (isFunction$1(content)) {
+                            defaultPatternContent.push(content);
+                        }
+                        else {
+                            defaultPatternContent.push(...array(content));
+                        }
+                    });
+                    defaultPattern = Object.assign(Object.assign({}, patternList[0]), { content: defaultPatternContent });
                 }
-            });
-            defaultPattern = Object.assign(Object.assign({}, patternList[0]), { content: defaultPatternContent });
+                break;
         }
         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$3(spec === null || spec === void 0 ? void 0 : spec.dimension) && getTooltipActualActiveType(spec).includes('dimension');
-            })
-                .map(series => series.tooltipHelper.spec.dimension);
-            if (seriesPatternList.length) {
-                let seriesPatternContent = [];
-                if (seriesPatternList.every(({ content }) => isNil$3(content))) {
-                    seriesPatternContent = undefined;
+        switch (activeType) {
+            case 'mark':
+            case 'group':
+                if (series) {
+                    const seriesSpec = ((_b = (_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec) !== null && _b !== void 0 ? _b : {});
+                    seriesPattern = seriesSpec[activeType] ? cloneDeep(seriesSpec[activeType]) : {};
                 }
-                else {
-                    seriesPatternList.forEach(({ content }) => {
-                        if (isNil$3(content)) {
-                            return;
-                        }
-                        if (isFunction$1(content)) {
-                            seriesPatternContent === null || seriesPatternContent === void 0 ? void 0 : seriesPatternContent.push(content);
+                break;
+            case 'dimension':
+                if (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$3(spec === null || spec === void 0 ? void 0 : spec.dimension) && getTooltipActualActiveType(spec).includes('dimension');
+                    })
+                        .map(series => series.tooltipHelper.spec.dimension);
+                    if (seriesPatternList.length) {
+                        let seriesPatternContent = [];
+                        if (seriesPatternList.every(({ content }) => isNil$3(content))) {
+                            seriesPatternContent = undefined;
                         }
                         else {
-                            seriesPatternContent === null || seriesPatternContent === void 0 ? void 0 : seriesPatternContent.push(...array(content));
+                            seriesPatternList.forEach(({ content }) => {
+                                if (isNil$3(content)) {
+                                    return;
+                                }
+                                if (isFunction$1(content)) {
+                                    seriesPatternContent === null || seriesPatternContent === void 0 ? void 0 : seriesPatternContent.push(content);
+                                }
+                                else {
+                                    seriesPatternContent === null || seriesPatternContent === void 0 ? void 0 : seriesPatternContent.push(...array(content));
+                                }
+                            });
                         }
-                    });
+                        seriesPattern = Object.assign(Object.assign({}, seriesPatternList[0]), { content: seriesPatternContent });
+                    }
                 }
-                seriesPattern = Object.assign(Object.assign({}, seriesPatternList[0]), { content: seriesPatternContent });
-            }
+                break;
         }
         return seriesPattern;
     };
@@ -62617,216 +62677,228 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return shapePattern;
     };
 
-    const DEFAULT_TEXT_ATTRIBUTES = {
-        fontFamily: token.fontFamily,
-        spacing: 10,
-        wordBreak: 'break-word'
-    };
-    function getTextAttributes(style = {}, globalTheme, defaultAttributes) {
-        var _a, _b;
-        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 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;
+    const getTooltipContentValue = (field, datum, params, formatter) => {
+        let value;
+        if (isFunction$1(field)) {
+            value = field(datum, params);
         }
-        if (backgroundColor) {
-            panelAttrs.fill = backgroundColor;
+        else {
+            value = field;
         }
-        if (shadow) {
-            panelAttrs.shadowColor = shadow.color;
-            panelAttrs.shadowBlur = shadow.blur;
-            panelAttrs.shadowOffsetX = shadow.x;
-            panelAttrs.shadowOffsetY = shadow.y;
-            panelAttrs.shadowSpread = shadow.spread;
+        if (formatter) {
+            const { formatFunc, args } = getFormatFunction(undefined, formatter, field, datum);
+            if (formatFunc && args) {
+                value = formatFunc(...args);
+            }
         }
-        const { radius } = border !== null && border !== void 0 ? border : {};
-        if (isValid$3(radius)) {
-            panelAttrs.cornerRadius = [radius, radius, radius, radius];
+        return value;
+    };
+    const getTooltipPatternValue = (field, data, params) => {
+        if (isNil$3(field)) {
+            return field;
         }
-        return panelAttrs;
+        if (isFunction$1(field)) {
+            return field(data, params);
+        }
+        return field;
     };
-    const getTooltipAttributes = (actualTooltip, spec, globalTheme) => {
-        var _a, _b, _c, _d, _e;
-        const { style = {}, enterable, transitionDuration } = spec;
-        const { panel = {}, titleLabel, shape, keyLabel, valueLabel, spaceRow: commonSpaceRow, maxContentHeight } = 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: {
-                shape: shapeStyle,
-                key: keyStyle,
-                value: valueStyle,
-                spaceRow: commonSpaceRow
-            },
-            hasContentShape: false,
-            keyWidth: 0,
-            valueWidth: 0,
-            maxContentHeight,
-            enterable,
-            transitionDuration
-        };
-        const { title = {}, content = [] } = actualTooltip;
-        let panelWidth = paddingSpec.left + paddingSpec.right;
-        let panelHeight = paddingSpec.top + paddingSpec.bottom;
-        let panelDomHeight = paddingSpec.top + paddingSpec.bottom;
-        let contentMaxWidth = 0;
-        const filteredContent = content.filter(item => {
-            return (item.key || item.value) && item.visible !== false;
+    const getTooltipContentPattern = (field, data, params) => {
+        if (isNil$3(field)) {
+            return field;
+        }
+        let result = [];
+        array(field).forEach(patternItem => {
+            if (isFunction$1(patternItem)) {
+                result = result.concat(array(patternItem(data, params)));
+            }
+            else {
+                result.push(patternItem);
+            }
         });
-        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 = [];
-            let contentHeight = 0;
-            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, shapeHollow: actualShapeHollow, shapeColor: actualShapeColor } = item;
-                const itemAttrs = { height: 0, spaceRow: actualSpaceRow !== null && actualSpaceRow !== void 0 ? actualSpaceRow : commonSpaceRow };
-                if (isValid$3(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);
-                    }
-                    else {
-                        adaptiveKeyWidths.push(width);
-                    }
-                    itemHeight = Math.max(itemHeight, height);
-                }
-                if (isValid$3(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 {
-                        shape.fill = adaptiveShapeFill;
+        return result;
+    };
+    function getFirstDatumFromTooltipData(data) {
+        var _a;
+        const dimInfoList = ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.series)
+            ? [{ data: data, value: '' }]
+            : data;
+        for (const { data: dataList } of dimInfoList) {
+            for (const { datum: datumList } of dataList) {
+                for (const datumItem of datumList !== null && datumList !== void 0 ? datumList : []) {
+                    if (datumItem) {
+                        return datumItem;
                     }
-                    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;
-                contentHeight += itemHeight;
-                if (i < filteredContent.length - 1) {
-                    contentHeight += itemAttrs.spaceRow;
-                }
-                return itemAttrs;
-            });
-            panelHeight += contentHeight;
-            panelDomHeight += Math.min(contentHeight, maxContentHeight !== null && maxContentHeight !== void 0 ? maxContentHeight : Infinity);
-            maxKeyWidth = keyWidths.length ? maxInArray(keyWidths) : 0;
-            maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? maxInArray(adaptiveKeyWidths) : 0;
-            maxValueWidth = valueWidths.length ? maxInArray(valueWidths) : 0;
-            maxShapeWidth = shapeWidths.length ? maxInArray(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;
-        let titleHeightWithSpace = 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);
+        return undefined;
+    }
+
+    class TooltipHandlerType {
+    }
+    TooltipHandlerType.dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
+    TooltipHandlerType.canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
+    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
+    const TOOLTIP_MAX_LINE_COUNT = 20;
+    const TOOLTIP_OTHERS_LINE = {
+        key: '其他',
+        value: '...'
+    };
+
+    const getTimeString = (value, timeFormat, timeFormatMode) => {
+        if (!timeFormat && !timeFormatMode) {
+            if (typeof value !== 'object') {
+                return value === null || value === void 0 ? void 0 : value.toString();
             }
-            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;
-            titleHeightWithSpace = titleMaxHeight + (hasContent ? attributes.title.spaceRow : 0);
+            return value;
         }
-        panelHeight += titleHeightWithSpace;
-        panelDomHeight += titleHeightWithSpace;
-        attributes.title.width = titleMaxWidth;
-        attributes.title.height = titleMaxHeight;
-        if (isAutoWidthMode()) {
-            panelWidth += contentMaxWidth ? contentMaxWidth : titleMaxWidth;
+        const timeUtil = TimeUtil.getInstance();
+        timeFormat = timeFormat || '%Y%m%d';
+        timeFormatMode = timeFormatMode || 'local';
+        const timeFormatter = timeFormatMode === 'local' ? timeUtil.timeFormat : timeUtil.timeUTCFormat;
+        return timeFormatter(timeFormat, value);
+    };
+    const getShowContent = (pattern, data, params) => {
+        var _a, _b, _c, _d;
+        if (!data ||
+            ((_a = params === null || params === void 0 ? void 0 : params.event) === null || _a === void 0 ? void 0 : _a.type) === 'mouseout') {
+            return null;
+        }
+        const tooltipActualTitleContent = {
+            title: {},
+            content: []
+        };
+        const patternTitle = getTooltipPatternValue(pattern.title, data, params);
+        const { visible, value, valueTimeFormat, valueTimeFormatMode, valueStyle, hasShape, valueFormatter } = patternTitle !== null && patternTitle !== void 0 ? patternTitle : {};
+        const patternTitleVisible = getTooltipContentValue(visible, data, params) !== false;
+        if (!patternTitle || !patternTitleVisible) {
+            tooltipActualTitleContent.title = {
+                hasShape: false,
+                visible: false
+            };
         }
         else {
-            panelWidth += Math.max(titleMaxWidth, contentMaxWidth);
+            const datum = getFirstDatumFromTooltipData(data);
+            tooltipActualTitleContent.title = {
+                value: getTimeString(getTooltipContentValue(value, datum, params, valueFormatter), valueTimeFormat, valueTimeFormatMode),
+                valueStyle: getTooltipContentValue(valueStyle, datum, params),
+                hasShape
+            };
         }
-        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 =
-                        panelWidth -
-                            paddingSpec.left -
-                            paddingSpec.right -
-                            maxShapeWidth -
-                            maxKeyWidth -
-                            keyStyle.spacing -
-                            valueStyle.spacing;
-                    if (!value.maxWidth) {
-                        value.maxWidth = Math.ceil(value.width);
+        const patternContent = getTooltipContentPattern(pattern.content, data, params);
+        const { maxLineCount = TOOLTIP_MAX_LINE_COUNT } = pattern;
+        const getTooltipContentFromDatumList = (datumList) => {
+            if (datumList === null || datumList === void 0 ? void 0 : datumList.length) {
+                for (const datum of datumList) {
+                    for (const content of patternContent !== null && patternContent !== void 0 ? patternContent : []) {
+                        const oneLineData = getOneLineData(datum, content, params);
+                        if (oneLineData.visible !== false) {
+                            if (tooltipActualTitleContent.content.length === maxLineCount - 1) {
+                                tooltipActualTitleContent.content.push(Object.assign(Object.assign({}, oneLineData), TOOLTIP_OTHERS_LINE));
+                                break;
+                            }
+                            else if (tooltipActualTitleContent.content.length < maxLineCount) {
+                                tooltipActualTitleContent.content.push(oneLineData);
+                            }
+                            else {
+                                break;
+                            }
+                        }
                     }
-                    attributes.valueWidth = Math.max(attributes.valueWidth, value.width);
                 }
-            });
+            }
+        };
+        switch (pattern.activeType) {
+            case 'mark':
+                getTooltipContentFromDatumList((_b = data[0]) === null || _b === void 0 ? void 0 : _b.datum);
+                break;
+            case 'group':
+                getTooltipContentFromDatumList(params.groupDatum);
+                break;
+            case 'dimension':
+                for (const { data: d } of data) {
+                    for (const { datum: datumList, series } of d) {
+                        if (!getTooltipActualActiveType((_c = series.tooltipHelper) === null || _c === void 0 ? void 0 : _c.spec).includes('dimension')) {
+                            continue;
+                        }
+                        const contentPatterns = (_d = patternContent === null || patternContent === void 0 ? void 0 : patternContent.filter(c => isNil$3(c.seriesId) || c.seriesId === series.id)) !== null && _d !== void 0 ? _d : [];
+                        for (const datum of datumList) {
+                            for (const linePattern of contentPatterns) {
+                                const oneLineData = getOneLineData(datum, linePattern, params);
+                                if (oneLineData.visible === false) {
+                                    continue;
+                                }
+                                if (tooltipActualTitleContent.content.length === maxLineCount - 1) {
+                                    tooltipActualTitleContent.content.push(Object.assign(Object.assign({}, oneLineData), TOOLTIP_OTHERS_LINE));
+                                    break;
+                                }
+                                else if (tooltipActualTitleContent.content.length < maxLineCount) {
+                                    tooltipActualTitleContent.content.push(oneLineData);
+                                }
+                                else {
+                                    break;
+                                }
+                            }
+                            if (tooltipActualTitleContent.content.length >= maxLineCount) {
+                                break;
+                            }
+                        }
+                        if (tooltipActualTitleContent.content.length >= maxLineCount) {
+                            break;
+                        }
+                    }
+                    if (tooltipActualTitleContent.content.length >= maxLineCount) {
+                        break;
+                    }
+                }
+                break;
         }
-        attributes.panel.width = panelWidth;
-        attributes.panel.height = panelHeight;
-        attributes.panelDomHeight = panelDomHeight;
-        return attributes;
+        if (tooltipActualTitleContent.title) {
+            if (tooltipActualTitleContent.content.length > 0 && tooltipActualTitleContent.content[0].shapeType) {
+                if (isNil$3(tooltipActualTitleContent.title.shapeType)) {
+                    tooltipActualTitleContent.title.shapeType = tooltipActualTitleContent.content[0].shapeType;
+                }
+                if (isNil$3(tooltipActualTitleContent.title.shapeColor)) {
+                    tooltipActualTitleContent.title.shapeColor = tooltipActualTitleContent.content[0].shapeColor;
+                }
+            }
+            else {
+                tooltipActualTitleContent.title.hasShape = false;
+            }
+        }
+        return tooltipActualTitleContent;
+    };
+    const getOneLineData = (datum, config, params) => {
+        const key = getTimeString(getTooltipContentValue(config.key, datum, params, config.keyFormatter), config.keyTimeFormat, config.keyTimeFormatMode);
+        const value = getTimeString(getTooltipContentValue(config.value, datum, params, config.valueFormatter), config.valueTimeFormat, config.valueTimeFormatMode);
+        const visible = getTooltipContentValue(config.visible, datum, params) !== false && (isValid$3(key) || isValid$3(value));
+        const isKeyAdaptive = getTooltipContentValue(config.isKeyAdaptive, datum, params);
+        const spaceRow = getTooltipContentValue(config.spaceRow, datum, params);
+        const shapeType = getTooltipContentValue(config.shapeType, datum, params);
+        const shapeColor = getTooltipContentValue(config.shapeColor, datum, params);
+        const shapeFill = getTooltipContentValue(config.shapeFill, datum, params);
+        const shapeStroke = getTooltipContentValue(config.shapeStroke, datum, params);
+        const shapeLineWidth = getTooltipContentValue(config.shapeLineWidth, datum, params);
+        const shapeHollow = getTooltipContentValue(config.shapeHollow, datum, params);
+        const keyStyle = getTooltipContentValue(config.keyStyle, datum, params);
+        const valueStyle = getTooltipContentValue(config.valueStyle, datum, params);
+        return {
+            key,
+            value,
+            visible,
+            isKeyAdaptive,
+            hasShape: config.hasShape,
+            shapeType,
+            shapeFill,
+            shapeStroke,
+            shapeLineWidth,
+            shapeHollow,
+            shapeColor,
+            keyStyle,
+            valueStyle,
+            spaceRow,
+            datum
+        };
     };
 
     class BaseTooltipHandler extends BasePlugin {
@@ -62836,79 +62908,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._attributes = null;
             this._isReleased = false;
             this.showTooltip = (activeType, data, params) => {
-                var _a;
-                let changePositionOnly = !!params.changePositionOnly;
-                if (!params.changePositionOnly || ((_a = this._cacheActualTooltip) === null || _a === void 0 ? void 0 : _a.activeType) !== activeType) {
-                    changePositionOnly = false;
-                    this._clearCacheOfContent();
+                const { changePositionOnly } = params;
+                if (changePositionOnly) {
+                    return this.changeTooltipPosition(params, data);
                 }
-                if (changePositionOnly && this._cacheViewSpec && this._cacheActualTooltip) {
-                    return this.changeTooltipPosition(changePositionOnly, data, params);
-                }
-                return this.changeTooltip(true, params, changePositionOnly, activeType, data);
+                return this.changeTooltip(true, params, data);
             };
-            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 (this._isReleased || !tooltipSpec) {
+            this._changeTooltip = (visible, params, data) => {
+                if (this._isReleased) {
                     return 1;
                 }
                 if (!visible) {
                     this._clearAllCache();
-                    if (tooltipSpec.handler) {
-                        return (_c = (_b = (_a = tooltipSpec.handler).hideTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, params)) !== null && _c !== void 0 ? _c : 0;
-                    }
                     this._updateTooltip(false, params);
                     return 0;
                 }
-                if (isNil$3(activeType) || isNil$3(data)) {
-                    return 1;
-                }
-                let spec;
-                if (changePositionOnly && this._cacheViewSpec) {
-                    spec = this._cacheViewSpec;
-                }
-                else {
-                    spec = getTooltipSpecForShow(activeType, tooltipSpec, params.model, params.dimensionInfo);
-                    this._cacheViewSpec = spec;
-                }
-                if (spec.visible === false) {
-                    return 1;
-                }
-                if (spec.handler) {
-                    return (_f = (_e = (_d = spec.handler).showTooltip) === null || _e === void 0 ? void 0 : _e.call(_d, activeType, data, params)) !== null && _f !== void 0 ? _f : 0;
-                }
-                const pattern = spec[activeType];
-                if (!pattern) {
-                    return 1;
-                }
-                let actualTooltip;
-                if (changePositionOnly && this._cacheActualTooltip) {
-                    actualTooltip = this._cacheActualTooltip;
-                }
-                else {
-                    actualTooltip = this._getActualTooltipContent(pattern, data, params);
-                    actualTooltip.title = (_h = (_g = pattern.updateTitle) === null || _g === void 0 ? void 0 : _g.call(pattern, actualTooltip.title, data, params)) !== null && _h !== void 0 ? _h : actualTooltip.title;
-                    actualTooltip.content = (_k = (_j = pattern.updateContent) === null || _j === void 0 ? void 0 : _j.call(pattern, actualTooltip.content, data, params)) !== null && _k !== void 0 ? _k : actualTooltip.content;
-                }
-                if (isNil$3((_l = actualTooltip.title) === null || _l === void 0 ? void 0 : _l.key) && isNil$3((_m = actualTooltip.title) === null || _m === void 0 ? void 0 : _m.value) && !((_o = actualTooltip.content) === null || _o === void 0 ? void 0 : _o.length)) {
-                    return 1;
-                }
-                this._cacheActualTooltip = actualTooltip;
-                return this._changeTooltipPosition(!!changePositionOnly, data, params);
+                return this._changeTooltipPosition(params, data);
             };
-            this._changeTooltipPosition = (changePositionOnly, data, params) => {
+            this._changeTooltipPosition = (params, data) => {
                 var _a, _b, _c;
                 if (this._isReleased) {
                     return 1;
                 }
                 const event = params.event;
-                const spec = this._cacheViewSpec;
-                const actualTooltip = this._cacheActualTooltip;
-                if (!spec || !actualTooltip) {
-                    return 1;
-                }
-                if (spec.enterable) {
+                const { tooltipSpec, tooltipActual, changePositionOnly } = params;
+                if (tooltipSpec.enterable) {
                     if (!this._isPointerEscaped && this._isPointerMovingToTooltip(params)) {
                         if (!this._isTooltipPaused) {
                             this._isTooltipPaused = true;
@@ -62923,46 +62947,39 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     clearTimeout(this._cachePointerTimer);
                     this._cachePointerPosition = this._getPointerPositionRelativeToTooltipParent(params);
                 }
-                const activeType = actualTooltip.activeType;
-                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 : 0;
+                const activeType = tooltipActual.activeType;
+                if (tooltipSpec.handler) {
+                    return (_c = (_b = (_a = tooltipSpec.handler).showTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, activeType, data, params)) !== null && _c !== void 0 ? _c : 0;
                 }
-                const pattern = spec[activeType];
+                const pattern = tooltipSpec[activeType];
                 if (!pattern) {
                     return 1;
                 }
-                const position = this._getActualTooltipPosition(actualTooltip, params, this._getTooltipBoxSize(actualTooltip, changePositionOnly));
-                actualTooltip.position = position;
+                const position = this._getActualTooltipPosition(tooltipActual, params, this._getTooltipBoxSize(tooltipActual, changePositionOnly));
+                tooltipActual.position = position;
                 if (pattern.updatePosition) {
-                    actualTooltip.position = pattern.updatePosition(actualTooltip.position, data, params);
+                    tooltipActual.position = pattern.updatePosition(tooltipActual.position, data, params);
                 }
                 let tooltipVisible = (pattern === null || pattern === void 0 ? void 0 : pattern.visible) !== false;
                 if (!data ||
                     event.type === 'pointerout' ||
-                    !actualTooltip.visible ||
-                    (!actualTooltip.title && !actualTooltip.content)) {
+                    !tooltipActual.visible ||
+                    (!tooltipActual.title && !tooltipActual.content)) {
                     tooltipVisible = false;
                 }
-                this._updateTooltip(tooltipVisible, Object.assign(Object.assign({}, params), { changePositionOnly }), actualTooltip);
+                this._updateTooltip(tooltipVisible, Object.assign(Object.assign({}, params), { changePositionOnly }));
                 return 0;
             };
-            this._getActualTooltipContent = (pattern, data, params) => {
-                const patternVisible = getTooltipPatternValue(pattern.visible, data, params);
-                let tooltipContent = null;
-                tooltipContent = getShowContent(pattern, data, params);
-                const actualTooltip = Object.assign(Object.assign({}, tooltipContent), { visible: isValid$3(tooltipContent) ? patternVisible !== false : false, activeType: pattern.activeType, data });
-                return actualTooltip;
-            };
             this._getActualTooltipPosition = (actualTooltip, params, tooltipBoxSize) => {
                 var _a, _b, _c, _d, _e, _f, _g;
                 const event = params.event;
+                const { tooltipSpec } = params;
                 const firstDimensionInfo = (_a = params.dimensionInfo) === null || _a === void 0 ? void 0 : _a[0];
                 const invalidPosition = {
                     x: Infinity,
                     y: Infinity
                 };
                 let { offsetX, offsetY } = this._option;
-                const tooltipSpec = this._cacheViewSpec;
                 if (!tooltipSpec) {
                     this._cacheTooltipPosition = undefined;
                     return invalidPosition;
@@ -63352,14 +63369,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._isReleased = true;
         }
         _clearAllCache() {
-            this._clearCacheOfContent();
-            this._clearCacheOfPosition();
-        }
-        _clearCacheOfContent() {
-            this._cacheViewSpec = undefined;
-            this._cacheActualTooltip = undefined;
-        }
-        _clearCacheOfPosition() {
             this._isTooltipPaused = false;
             this._isPointerEscaped = false;
             clearTimeout(this._cachePointerTimer);
@@ -63404,11 +63413,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getPointerPositionRelativeToTooltipParent(params) {
             var _a, _b;
             let { canvasX: x, canvasY: y } = params.event;
+            const { tooltipSpec } = params;
             const invalidPosition = {
                 x: Infinity,
                 y: Infinity
             };
-            const tooltipSpec = this._cacheViewSpec;
             const isCanvas = tooltipSpec.renderMode === 'canvas';
             const tooltipParentElement = this._getParentElement(tooltipSpec);
             let relativePosOffset = { x: 0, y: 0 };
@@ -64304,12 +64313,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         Factory.registerComponentPlugin(plugin.type, plugin);
     };
 
-    class TooltipHandlerType {
-    }
-    TooltipHandlerType.dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
-    TooltipHandlerType.canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
-    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
-
     class DomTooltipHandler extends BaseTooltipHandler {
         getVisibility() {
             var _a;
@@ -64362,15 +64365,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             (_a = this.model) === null || _a === void 0 ? void 0 : _a.release();
             this._container = null;
         }
-        _updateTooltip(visible, params, actualTooltip) {
-            var _a, _b, _c;
+        _updateTooltip(visible, params) {
+            var _a, _b;
+            const { tooltipActual, tooltipSpec } = params;
             if (!visible || !this.model) {
                 this.setVisibility(visible);
                 this._cacheCustomTooltipPosition = undefined;
             }
             else {
                 if (!params.changePositionOnly) {
-                    this._tooltipActual = actualTooltip;
+                    this._tooltipActual = tooltipActual;
                     this._initStyle();
                     const firstInit = !this.model.product;
                     this.model.initAll();
@@ -64383,11 +64387,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.setVisibility(visible);
                 const el = this.model.product;
                 if (el) {
-                    const { x = 0, y = 0 } = (_a = actualTooltip.position) !== null && _a !== void 0 ? _a : {};
-                    if ((_b = this._cacheViewSpec) === null || _b === void 0 ? void 0 : _b.updateElement) {
-                        this._updatePosition((_c = this._cacheCustomTooltipPosition) !== null && _c !== void 0 ? _c : { x, y });
-                        this._cacheViewSpec.updateElement(el, actualTooltip, params);
-                        const position = this._getActualTooltipPosition(actualTooltip, params, {
+                    const { x = 0, y = 0 } = (_a = tooltipActual.position) !== null && _a !== void 0 ? _a : {};
+                    if (tooltipSpec.updateElement) {
+                        this._updatePosition((_b = this._cacheCustomTooltipPosition) !== null && _b !== void 0 ? _b : { x, y });
+                        tooltipSpec.updateElement(el, tooltipActual, params);
+                        const position = this._getActualTooltipPosition(tooltipActual, params, {
                             width: el.offsetWidth,
                             height: el.offsetHeight
                         });
@@ -64422,7 +64426,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _initEvent(el) {
             el.addEventListener('pointerleave', event => {
-                const { renderMode, enterable } = this._cacheViewSpec;
+                const { renderMode, enterable } = this._component.getSpec();
                 const relatedTarget = event.relatedTarget;
                 if (renderMode === 'html' && enterable) {
                     if (isNil$3(relatedTarget) ||
@@ -64475,7 +64479,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._attributes = null;
         }
-        _updateTooltip(visible, params, actualTooltip) {
+        _updateTooltip(visible, params) {
             this._visible = visible;
             const stage = this._compiler.getStage();
             if (!stage) {
@@ -64493,7 +64497,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._tooltipComponent) {
                 this._initTooltipComponent(stage);
             }
-            const pos = actualTooltip === null || actualTooltip === void 0 ? void 0 : actualTooltip.position;
+            const { tooltipActual } = params;
+            const pos = tooltipActual.position;
             if (!params.changePositionOnly) {
                 this._tooltipComponent.setAttributes(Object.assign(Object.assign({}, this._attributes), pos));
             }
@@ -64522,7 +64527,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerComponentPlugin(CanvasTooltipHandler);
     };
 
-    const version = "1.11.0-alpha.1";
+    const version = "1.11.0-alpha.2";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -65066,6 +65071,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getRootMark() {
             return this._rootMark;
         }
+        getSeriesMark() {
+            return this._seriesMark;
+        }
         getRawData() {
             return this._rawData;
         }
@@ -66972,8 +66980,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             super.initTooltip();
-            this._lineMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._lineMark);
-            this._symbolMark && this._tooltipHelper.activeTriggerSet.mark.add(this._symbolMark);
+            const { dimension, group, mark } = this._tooltipHelper.activeTriggerSet;
+            if (this._lineMark) {
+                dimension.add(this._lineMark);
+                group.add(this._lineMark);
+            }
+            if (this._symbolMark) {
+                mark.add(this._symbolMark);
+                group.add(this._symbolMark);
+            }
         }
         initMarkStyle() {
             this.initLineMarkStyle(this._direction);
@@ -68967,9 +68982,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new AreaSeriesTooltipHelper(this);
-            this._areaMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._areaMark);
-            this._lineMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._lineMark);
-            this._symbolMark && this._tooltipHelper.activeTriggerSet.mark.add(this._symbolMark);
+            const { dimension, group, mark } = this._tooltipHelper.activeTriggerSet;
+            if (this._areaMark) {
+                dimension.add(this._areaMark);
+                group.add(this._areaMark);
+            }
+            if (this._lineMark) {
+                dimension.add(this._lineMark);
+                group.add(this._lineMark);
+            }
+            if (this._symbolMark) {
+                mark.add(this._symbolMark);
+                group.add(this._symbolMark);
+            }
         }
         viewDataStatisticsUpdate(d) {
             super.viewDataStatisticsUpdate(d);
@@ -69308,7 +69333,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             super.initTooltip();
-            this._barMark && this._tooltipHelper.activeTriggerSet.mark.add(this._barMark);
+            const { mark, group } = this._tooltipHelper.activeTriggerSet;
+            if (this._barMark) {
+                mark.add(this._barMark);
+                group.add(this._barMark);
+            }
         }
         _statisticViewData() {
             var _a, _b;
@@ -73315,59 +73344,63 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class RangeAreaSeriesTooltipHelper extends BaseSeriesTooltipHelper {
         getDefaultTooltipPattern(activeType, dimensionInfo) {
-            if (activeType === 'mark') {
-                return {
-                    visible: true,
-                    activeType,
-                    title: {
-                        key: undefined,
-                        value: this.titleValueCallback,
-                        hasShape: false
-                    },
-                    content: [
-                        {
-                            key: this.contentKeyCallback,
-                            value: this.contentValueCallback,
-                            hasShape: true,
-                            shapeType: this.contentShapeTypeCallback,
-                            shapeColor: this.contentShapeColorCallback,
-                            shapeStroke: this.contentShapeColorCallback,
-                            shapeHollow: false
-                        }
-                    ]
-                };
-            }
-            else if (activeType === 'dimension' && dimensionInfo) {
-                const title = {
-                    key: undefined,
-                    value: this._getDimensionData,
-                    hasShape: false
-                };
-                const content = [];
-                dimensionInfo.forEach(({ data }) => data.forEach(({ series }) => {
-                    if (series.type === 'rangeArea') {
-                        content.push({
-                            seriesId: series.id,
-                            key: this.contentKeyCallback,
-                            value: (datum) => {
-                                return this.series.getSpec().direction === "horizontal"
-                                    ? datum[this.series.getSpec().xField[0]] + '-' + datum[this.series.getSpec().xField[1]]
-                                    : datum[this.series.getSpec().yField[0]] + '-' + datum[this.series.getSpec().yField[1]];
-                            },
-                            hasShape: true,
-                            shapeType: this.contentShapeTypeCallback,
-                            shapeColor: this.contentShapeColorCallback,
-                            shapeStroke: this.contentShapeColorCallback,
-                            shapeHollow: false
-                        });
+            switch (activeType) {
+                case 'mark':
+                case 'group':
+                    return {
+                        visible: true,
+                        activeType,
+                        title: {
+                            key: undefined,
+                            value: this.titleValueCallback,
+                            hasShape: false
+                        },
+                        content: [
+                            {
+                                key: this.contentKeyCallback,
+                                value: this.contentValueCallback,
+                                hasShape: true,
+                                shapeType: this.contentShapeTypeCallback,
+                                shapeColor: this.contentShapeColorCallback,
+                                shapeStroke: this.contentShapeColorCallback,
+                                shapeHollow: false
+                            }
+                        ]
+                    };
+                case 'dimension':
+                    if (dimensionInfo) {
+                        const title = {
+                            key: undefined,
+                            value: this._getDimensionData,
+                            hasShape: false
+                        };
+                        const content = [];
+                        dimensionInfo.forEach(({ data }) => data.forEach(({ series }) => {
+                            if (series.type === 'rangeArea') {
+                                content.push({
+                                    seriesId: series.id,
+                                    key: this.contentKeyCallback,
+                                    value: (datum) => {
+                                        return this.series.getSpec().direction === "horizontal"
+                                            ? datum[this.series.getSpec().xField[0]] + '-' + datum[this.series.getSpec().xField[1]]
+                                            : datum[this.series.getSpec().yField[0]] + '-' + datum[this.series.getSpec().yField[1]];
+                                    },
+                                    hasShape: true,
+                                    shapeType: this.contentShapeTypeCallback,
+                                    shapeColor: this.contentShapeColorCallback,
+                                    shapeStroke: this.contentShapeColorCallback,
+                                    shapeHollow: false
+                                });
+                            }
+                        }));
+                        return {
+                            visible: true,
+                            activeType,
+                            title,
+                            content
+                        };
                     }
-                }));
-                return {
-                    visible: true,
-                    activeType,
-                    title,
-                    content
-                };
+                    break;
             }
             return null;
         }
@@ -74873,9 +74906,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             super.initTooltip();
-            this._lineMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._lineMark);
-            this._symbolMark && this._tooltipHelper.activeTriggerSet.mark.add(this._symbolMark);
-            this._areaMark && this._tooltipHelper.activeTriggerSet.dimension.add(this._areaMark);
+            const { dimension, group, mark } = this._tooltipHelper.activeTriggerSet;
+            if (this._lineMark) {
+                dimension.add(this._lineMark);
+                group.add(this._lineMark);
+            }
+            if (this._areaMark) {
+                dimension.add(this._areaMark);
+                group.add(this._areaMark);
+            }
+            if (this._symbolMark) {
+                mark.add(this._symbolMark);
+                group.add(this._symbolMark);
+            }
         }
         initAnimation() {
             var _a, _b, _c, _d;
@@ -76178,12 +76221,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class LinearProgressSeriesTooltipHelper extends BaseSeriesTooltipHelper {
         getDefaultTooltipPattern(activeType, dimensionInfo) {
             const result = super.getDefaultTooltipPattern(activeType, dimensionInfo);
-            if (activeType === 'mark') {
-                return result;
-            }
-            if (activeType === 'dimension') {
-                result.visible = false;
-                return result;
+            switch (activeType) {
+                case 'mark':
+                case 'group':
+                    return result;
+                case 'dimension':
+                    result.visible = false;
+                    return result;
             }
             return null;
         }
@@ -81864,64 +81908,67 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class SankeySeriesTooltipHelper extends BaseSeriesTooltipHelper {
         getDefaultTooltipPattern(activeType, dimensionInfo) {
-            if (activeType === 'mark') {
-                return {
-                    visible: true,
-                    activeType,
-                    title: {
-                        key: undefined,
-                        value: (datum) => {
-                            if (datum.source) {
-                                if (isNumber$3(datum.source)) {
-                                    const seriesKeys = this.series.getSeriesKeys();
-                                    return seriesKeys[datum.source] + ' => ' + seriesKeys[datum.target];
-                                }
-                                return datum.source + ' => ' + datum.target;
-                            }
-                            return datum.datum[this.series.getSpec().categoryField];
-                        },
-                        hasShape: false
-                    },
-                    content: [
-                        {
-                            key: this.contentKeyCallback,
+            switch (activeType) {
+                case 'mark':
+                    return {
+                        visible: true,
+                        activeType,
+                        title: {
+                            key: undefined,
                             value: (datum) => {
-                                return datum.value;
+                                if (datum.source) {
+                                    if (isNumber$3(datum.source)) {
+                                        const seriesKeys = this.series.getSeriesKeys();
+                                        return seriesKeys[datum.source] + ' => ' + seriesKeys[datum.target];
+                                    }
+                                    return datum.source + ' => ' + datum.target;
+                                }
+                                return datum.datum[this.series.getSpec().categoryField];
                             },
-                            hasShape: true,
-                            shapeType: this.contentShapeTypeCallback,
-                            shapeColor: this.contentShapeColorCallback,
-                            shapeStroke: this.contentShapeColorCallback,
-                            shapeHollow: false
-                        }
-                    ]
-                };
-            }
-            else if (activeType === 'dimension' && dimensionInfo) {
-                const title = {
-                    key: undefined,
-                    value: this._getDimensionData,
-                    hasShape: false
-                };
-                const content = [];
-                dimensionInfo.forEach(({ data }) => data.forEach(({ series }) => {
-                    content.push({
-                        seriesId: series.id,
-                        key: this.contentKeyCallback,
-                        value: this.contentValueCallback,
-                        hasShape: true,
-                        shapeType: this.contentShapeTypeCallback,
-                        shapeColor: this.contentShapeColorCallback,
-                        shapeStroke: this.contentShapeColorCallback,
-                        shapeHollow: false
-                    });
-                }));
-                return {
-                    visible: true,
-                    activeType,
-                    title,
-                    content
-                };
+                            hasShape: false
+                        },
+                        content: [
+                            {
+                                key: this.contentKeyCallback,
+                                value: (datum) => {
+                                    return datum.value;
+                                },
+                                hasShape: true,
+                                shapeType: this.contentShapeTypeCallback,
+                                shapeColor: this.contentShapeColorCallback,
+                                shapeStroke: this.contentShapeColorCallback,
+                                shapeHollow: false
+                            }
+                        ]
+                    };
+                case 'dimension':
+                    if (dimensionInfo) {
+                        const title = {
+                            key: undefined,
+                            value: this._getDimensionData,
+                            hasShape: false
+                        };
+                        const content = [];
+                        dimensionInfo.forEach(({ data }) => data.forEach(({ series }) => {
+                            content.push({
+                                seriesId: series.id,
+                                key: this.contentKeyCallback,
+                                value: this.contentValueCallback,
+                                hasShape: true,
+                                shapeType: this.contentShapeTypeCallback,
+                                shapeColor: this.contentShapeColorCallback,
+                                shapeStroke: this.contentShapeColorCallback,
+                                shapeHollow: false
+                            });
+                        }));
+                        return {
+                            visible: true,
+                            activeType,
+                            title,
+                            content
+                        };
+                    }
+                    break;
             }
             return null;
         }
@@ -84569,372 +84616,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerCorrelationAnimation();
     };
 
-    const Appear_Wave = {
-        duration: 2000,
-        loop: true,
-        channel: {
-            wave: { from: 0, to: 1 }
-        }
-    };
-    const Appear_Grow = (params) => {
-        return {
-            duration: 2000,
-            channel: {
-                wave: { from: 0, to: 1 },
-                height: params.height,
-                y: params.y
-            }
-        };
-    };
-    const Appear_WaveGrow = (params) => {
-        return {
-            duration: 2000,
-            channel: {
-                wave: { from: 0, to: 1 },
-                height: params.height,
-                y: params.y
-            }
-        };
-    };
-    function liquidPresetAnimation(params, preset) {
-        switch (preset) {
-            case 'wave':
-                return Appear_Wave;
-            case 'grow':
-                return Appear_Grow(params);
-            case 'waveGrow':
-                return Appear_WaveGrow(params);
-            default:
-                return Appear_Wave;
-        }
-    }
-    const registerLiquidAnimation = () => {
-        Factory.registerAnimation('liquid', (params, preset) => {
-            return {
-                appear: liquidPresetAnimation(params, preset),
-                enter: liquidPresetAnimation(params, preset),
-                exit: liquidPresetAnimation(params, preset)
-            };
-        });
-    };
-
-    const WAVE_GLYPH_TYPE = 'wave';
-    class LiquidMark extends BaseMark {
-        constructor() {
-            super(...arguments);
-            this.type = LiquidMark.type;
-        }
-        _getDefaultStyle() {
-            const defaultStyle = Object.assign(Object.assign({}, super._getDefaultStyle()), { wave: 0 });
-            return defaultStyle;
-        }
-        _initProduct(group) {
-            const view = this.getVGrammarView();
-            const id = this.getProductId();
-            this._product = view.glyph(WAVE_GLYPH_TYPE, group !== null && group !== void 0 ? group : view.rootMark).id(id);
-            this._compiledProductId = id;
-        }
-    }
-    LiquidMark.type = "liquid";
-    const registerLiquidMark = () => {
-        Factory.registerMark(LiquidMark.type, LiquidMark);
-        registerWaveGlyph();
-    };
-
-    const getShapes = (shapesType, size) => {
-        if (shapesType === 'drop') {
-            return pin(0, 0, size / 2);
-        }
-        return shapesType;
-    };
-    function pin(x, y, radius) {
-        const w = (radius * 4) / 3;
-        const h = Math.max(w, radius * 2);
-        const r = w / 2;
-        const cx = x;
-        const cy = r + y - h / 2;
-        const theta = Math.asin(r / ((h - r) * 0.85));
-        const dy = Math.sin(theta) * r;
-        const dx = Math.cos(theta) * r;
-        const x0 = cx - dx;
-        const y0 = cy + dy;
-        const cpX = x;
-        const cpY = cy + r / Math.sin(theta);
-        return `
-      M ${x0} ${y0}
-      A ${r} ${r} 0 1 1 ${x0 + dx * 2} ${y0}
-      Q ${cpX} ${cpY} ${x} ${y + h / 2}
-      Q ${cpX} ${cpY} ${x0} ${y0}
-      Z 
-    `;
-    }
-
-    class LiquidSeriesTooltipHelper extends BaseSeriesTooltipHelper {
-        constructor() {
-            super(...arguments);
-            this.getContentKey = () => (datum) => {
-                return this.series.getValueField();
-            };
-            this.getContentValue = () => (datum) => {
-                const valueField = this.series.getValueField();
-                return datum[valueField];
-            };
-            this.getLiquidFillColor = (datum) => {
-                return this.series.getMarkInName('liquid').getAttribute('fill', datum);
-            };
-        }
-        getDefaultTooltipPattern(activeType) {
-            return {
-                visible: true,
-                activeType,
-                title: {
-                    key: undefined,
-                    value: this.titleValueCallback,
-                    hasShape: false
-                },
-                content: [
-                    {
-                        key: this.getContentKey(),
-                        value: this.getContentValue(),
-                        hasShape: true,
-                        shapeType: this.contentShapeTypeCallback,
-                        shapeColor: this.getLiquidFillColor,
-                        shapeStroke: this.getLiquidFillColor,
-                        shapeHollow: false
-                    }
-                ]
-            };
-        }
-    }
-
-    class LiquidSeries extends BaseSeries {
-        constructor() {
-            super(...arguments);
-            this.type = exports.SeriesTypeEnum.liquid;
-            this.transformerConstructor = LineLikeSeriesSpecTransformer;
-            this._liquidBackgroundMark = null;
-            this._liquidOutlineMark = null;
-        }
-        setValueField(field) {
-            if (isValid$3(field)) {
-                this._valueField = field;
-            }
-        }
-        getValueField() {
-            return this._valueField;
-        }
-        setAttrFromSpec() {
-            super.setAttrFromSpec();
-            this._marginSpec = normalizeLayoutPaddingSpec(this._spec.outlineMargin);
-            this._paddingSpec = normalizeLayoutPaddingSpec(this._spec.outlinePadding);
-            this.setValueField(this._spec.valueField);
-        }
-        rawDataUpdate(d) {
-            super.rawDataUpdate(d);
-            this._heightRatio = max$1(...this._data.getLatestData().map((d) => d[this._valueField]));
-        }
-        initMark() {
-            this._initLiquidOutlineMark();
-            this._initLiquidBackgroundMark();
-            this._initLiquidMark();
-        }
-        initMarkStyle() {
-            this._initLiquidOutlineMarkStyle();
-            this._initLiquidBackgroundMarkStyle();
-            this._initLiquidMarkStyle();
-        }
-        _initLiquidOutlineMark() {
-            this._liquidOutlineMark = this._createMark(LiquidSeries.mark.liquidOutline, {
-                isSeriesMark: true,
-                skipBeforeLayouted: false
-            });
-            return this._liquidOutlineMark;
-        }
-        _initLiquidBackgroundMark() {
-            this._liquidBackgroundMark = this._createMark(LiquidSeries.mark.liquidBackground, {
-                isSeriesMark: true,
-                skipBeforeLayouted: false
-            });
-            return this._liquidBackgroundMark;
-        }
-        _initLiquidMark() {
-            this._liquidMark = this._createMark(LiquidSeries.mark.liquid, {
-                parent: this._liquidBackgroundMark,
-                isSeriesMark: true,
-                skipBeforeLayouted: false
-            });
-            return this._liquidMark;
-        }
-        _getPosAndSizeFormRegion(isOutline = false) {
-            const { top: marginTop = 0, bottom: marginBottom = 0, left: marginLeft = 0, right: marginRight = 0 } = this._marginSpec;
-            const { top: paddingTop = 0, bottom: paddingBottom = 0, left: paddingLeft = 0, right: paddingRight = 0 } = this._paddingSpec;
-            const { width: regionWidth, height: regionHeight } = this._region.getLayoutRect();
-            if (!isOutline) {
-                return {
-                    x: regionWidth / 2 + (marginLeft + paddingRight - (marginRight + paddingRight)) / 2,
-                    y: regionHeight / 2 + (marginTop + paddingTop - (marginBottom + paddingBottom)) / 2,
-                    size: Math.min(regionWidth - (marginLeft + marginRight + paddingLeft + paddingRight), regionHeight - (marginTop + marginBottom + paddingTop + paddingBottom))
-                };
-            }
-            return {
-                x: regionWidth / 2 + (marginLeft - marginRight) / 2,
-                y: regionHeight / 2 + (marginTop - marginBottom) / 2,
-                size: Math.min(regionWidth - (marginLeft + marginRight), regionHeight - (marginTop + marginBottom))
-            };
-        }
-        _initLiquidOutlineMarkStyle() {
-            const liquidOutlineMark = this._liquidOutlineMark;
-            liquidOutlineMark.setZIndex(this.layoutZIndex);
-            liquidOutlineMark.created();
-            this.setMarkStyle(liquidOutlineMark, {
-                stroke: this.getColorAttribute(),
-                x: () => this._getPosAndSizeFormRegion(true).x,
-                y: () => this._getPosAndSizeFormRegion(true).y,
-                size: () => this._getPosAndSizeFormRegion(true).size,
-                symbolType: () => { var _a; return getShapes((_a = this._spec.maskShape) !== null && _a !== void 0 ? _a : 'circle', this._getPosAndSizeFormRegion(true).size); }
-            }, 'normal', exports.AttributeLevel.Series);
-            this._liquidOutlineMark.setInteractive(false);
-        }
-        _initLiquidBackgroundMarkStyle() {
-            const liquidBackgroundMark = this._liquidBackgroundMark;
-            liquidBackgroundMark.setZIndex(this.layoutZIndex);
-            liquidBackgroundMark.created();
-            this.setMarkStyle(liquidBackgroundMark, {
-                clip: true,
-                width: () => this._region.getLayoutRect().width,
-                height: () => this._region.getLayoutRect().height,
-                path: () => {
-                    var _a;
-                    const { x, y, size } = this._getPosAndSizeFormRegion();
-                    const symbolPath = createSymbol({
-                        x,
-                        y,
-                        size,
-                        symbolType: getShapes((_a = this._spec.maskShape) !== null && _a !== void 0 ? _a : 'circle', size),
-                        fill: true
-                    });
-                    return [symbolPath];
-                }
-            }, 'normal', exports.AttributeLevel.Series);
-            this._liquidBackgroundMark.setInteractive(false);
-        }
-        _initLiquidMarkStyle() {
-            const liquidMark = this._liquidMark;
-            if (liquidMark) {
-                this.setMarkStyle(liquidMark, {
-                    dx: () => {
-                        return this._region.getLayoutStartPoint().x + this._region.getLayoutRect().width / 2;
-                    },
-                    y: () => {
-                        const { y: liquidBackY, size: liquidBackSize } = this._getPosAndSizeFormRegion();
-                        return liquidBackY - liquidBackSize / 2 + liquidBackSize - liquidBackSize * this._heightRatio;
-                    },
-                    height: () => {
-                        const { size: liquidBackSize } = this._getPosAndSizeFormRegion();
-                        return liquidBackSize * this._heightRatio;
-                    },
-                    fill: this.getColorAttribute(),
-                    wave: 0
-                }, 'normal', exports.AttributeLevel.Series);
-            }
-        }
-        initTooltip() {
-            this._tooltipHelper = new LiquidSeriesTooltipHelper(this);
-            this._liquidMark && this._tooltipHelper.activeTriggerSet.mark.add(this._liquidMark);
-        }
-        initInteraction() {
-            this._parseInteractionConfig(this._liquidMark ? [this._liquidMark] : []);
-        }
-        initAnimation() {
-            var _a, _b, _c;
-            const animationParams = {
-                y: {
-                    from: () => {
-                        const { y: liquidBackY, size: liquidBackSize } = this._getPosAndSizeFormRegion();
-                        return liquidBackY - liquidBackSize / 2 + liquidBackSize;
-                    },
-                    to: () => {
-                        const { y: liquidBackY, size: liquidBackSize } = this._getPosAndSizeFormRegion();
-                        return liquidBackY - liquidBackSize / 2 + liquidBackSize - liquidBackSize * this._heightRatio;
-                    }
-                },
-                height: {
-                    from: 0,
-                    to: () => {
-                        const { size: liquidBackSize } = this._getPosAndSizeFormRegion();
-                        return liquidBackSize * this._heightRatio;
-                    }
-                }
-            };
-            const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
-            this._liquidMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('liquid')) === null || _c === void 0 ? void 0 : _c(animationParams, appearPreset), userAnimationConfig("liquid", this._spec, this._markAttributeContext)));
-        }
-        initEvent() {
-            super.initEvent();
-            if (!this._spec.indicatorSmartInvert || !this._option.getChart().getComponentsByKey('indicator')) {
-                return;
-            }
-            this.event.on(exports.ChartEvent.renderFinished, () => {
-                this._option
-                    .getChart()
-                    .getComponentsByKey('indicator')
-                    .forEach((indicatorComponent) => {
-                    var _a, _b;
-                    const grammarMark = this._liquidMark.getProduct();
-                    const waveItem = grammarMark.elements[0].glyphGraphicItems.wave1;
-                    let { y1: waveY1, y2: waveY2 } = waveItem.globalAABBBounds;
-                    waveY1 += this._region.getLayoutStartPoint().y;
-                    waveY2 += this._region.getLayoutStartPoint().y;
-                    (_b = (_a = indicatorComponent === null || indicatorComponent === void 0 ? void 0 : indicatorComponent.getIndicatorComponent()) === null || _a === void 0 ? void 0 : _a.getChildren()[0]) === null || _b === void 0 ? void 0 : _b.getChildren().forEach((text) => {
-                        const { y1: textY1, y2: textY2 } = text.globalAABBBounds;
-                        if (waveY1 < textY1 && waveY2 > textY2) {
-                            const foregroundColor = text.attribute.fill;
-                            const backgroundColor = waveItem.attribute.fill;
-                            const invertColor = labelSmartInvert(foregroundColor, backgroundColor);
-                            text.setAttribute('fill', invertColor);
-                        }
-                    });
-                });
-            });
-        }
-        dataToPosition(data) {
-            return null;
-        }
-        dataToPositionX(data) {
-            return null;
-        }
-        dataToPositionY(data) {
-            return null;
-        }
-        valueToPosition(value1, value2) {
-            return null;
-        }
-        getStatisticFields() {
-            return [];
-        }
-        getGroupFields() {
-            return [];
-        }
-        getStackGroupFields() {
-            return [];
-        }
-        getStackValueField() {
-            return '';
-        }
-        getActiveMarks() {
-            return [this._liquidMark];
-        }
-    }
-    LiquidSeries.type = exports.SeriesTypeEnum.liquid;
-    LiquidSeries.mark = LiquidSeriesMark;
-    LiquidSeries.transformerConstructor = LineLikeSeriesSpecTransformer;
-    const registerLiquidSeries = () => {
-        registerLiquidMark();
-        registerGroupMark();
-        registerLiquidAnimation();
-        Factory.registerSeries(LiquidSeries.type, LiquidSeries);
-    };
-
     class MapChartSpecTransformer extends BaseChartSpecTransformer {
         _isValidSeries(type) {
             return type === exports.SeriesTypeEnum.map;
@@ -89667,10 +89348,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class BaseTooltipProcessor {
         constructor(component) {
             this._showTooltipByHandler = (data, params) => {
-                var _a, _b;
+                var _a, _b, _c;
+                if (isNil$3(data)) {
+                    return 1;
+                }
+                if (!params.changePositionOnly) {
+                    this.clearCache();
+                }
+                this._updateViewSpec(params);
+                const spec = this._cacheViewSpec;
+                if (isNil$3(spec === null || spec === void 0 ? void 0 : spec[this.activeType]) || spec.visible === false) {
+                    return 1;
+                }
+                params.tooltipSpec = spec;
+                this._updateActualTooltip(data, params);
+                params.tooltipActual = this._cacheActualTooltip;
                 this.component.event.emit(exports.ChartEvent.tooltipShow, Object.assign(Object.assign({}, params), { tooltipData: data, activeType: this.activeType, tooltip: this.component }));
-                if (((_a = this.component.tooltipHandler) === null || _a === void 0 ? void 0 : _a.showTooltip) && isValid$3(data)) {
-                    return (_b = this.component.tooltipHandler.showTooltip(this.activeType, data, params)) !== null && _b !== void 0 ? _b : 0;
+                const { title, content } = this._cacheActualTooltip;
+                if (isNil$3(title === null || title === void 0 ? void 0 : title.key) && isNil$3(title === null || title === void 0 ? void 0 : title.value) && !(content === null || content === void 0 ? void 0 : content.length)) {
+                    return 1;
+                }
+                let showTooltip;
+                if ((_a = spec.handler) === null || _a === void 0 ? void 0 : _a.showTooltip) {
+                    showTooltip = spec.handler.showTooltip.bind(spec.handler);
+                }
+                else if ((_b = this.component.tooltipHandler) === null || _b === void 0 ? void 0 : _b.showTooltip) {
+                    showTooltip = this.component.tooltipHandler.showTooltip.bind(this.component.tooltipHandler);
+                }
+                if (showTooltip) {
+                    return (_c = showTooltip(this.activeType, data, params)) !== null && _c !== void 0 ? _c : 0;
                 }
                 return 1;
             };
@@ -89746,6 +89452,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return targetDimensionInfo;
         }
+        _updateViewSpec(params) {
+            const { changePositionOnly, model, dimensionInfo } = params;
+            if (!changePositionOnly || !this._cacheViewSpec) {
+                this._cacheViewSpec = getTooltipSpecForShow(this.activeType, this.component.getSpec(), model, dimensionInfo);
+            }
+        }
+        _updateActualTooltip(data, params) {
+            var _a, _b, _c, _d;
+            const pattern = this._cacheViewSpec[this.activeType];
+            const { changePositionOnly } = params;
+            if (!changePositionOnly || !this._cacheActualTooltip) {
+                const tooltipContent = getShowContent(pattern, data, params);
+                const visible = isValid$3(tooltipContent) ? getTooltipPatternValue(pattern.visible, data, params) !== false : false;
+                this._cacheActualTooltip = Object.assign(Object.assign({}, tooltipContent), { visible, activeType: pattern.activeType, data });
+                const { title, content } = this._cacheActualTooltip;
+                this._cacheActualTooltip.title = (_b = (_a = pattern.updateTitle) === null || _a === void 0 ? void 0 : _a.call(pattern, title, data, params)) !== null && _b !== void 0 ? _b : title;
+                this._cacheActualTooltip.content = (_d = (_c = pattern.updateContent) === null || _c === void 0 ? void 0 : _c.call(pattern, content, data, params)) !== null && _d !== void 0 ? _d : content;
+            }
+        }
+        clearCache() {
+            this._cacheViewSpec = undefined;
+            this._cacheActualTooltip = undefined;
+        }
     }
 
     class DimensionTooltipProcessor extends BaseTooltipProcessor {
@@ -89783,9 +89512,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
-    const isMarkInfo = (info) => isValid$3(info) && !isArray$3(info);
-    const isDimensionInfo = (info) => isValid$3(info) && isArray$3(info);
-
     class MarkTooltipProcessor extends BaseTooltipProcessor {
         constructor() {
             super(...arguments);
@@ -89809,7 +89535,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return true;
         }
-        getMouseEventData(params) {
+        getMouseEventData(params, dimensionInfo) {
             var _a;
             let info;
             let ignore;
@@ -89823,7 +89549,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         mark: params.mark,
                         datum: params.datum,
                         series,
-                        dimensionInfo: this._getDimensionInfo(params)
+                        dimensionInfo
                     };
                 }
                 else if ((ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.model)) || (ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.mark))) {
@@ -89837,6 +89563,78 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
+    class GroupTooltipProcessor extends BaseTooltipProcessor {
+        constructor() {
+            super(...arguments);
+            this.activeType = 'group';
+        }
+        showTooltip(info, params, changePositionOnly) {
+            const { datum, series, dimensionInfo } = info;
+            const tooltipData = [{ datum: array(datum), series }];
+            const newParams = Object.assign(Object.assign({}, params), { groupDatum: this._getGroupDatum(params), dimensionInfo: this._preprocessDimensionInfo(dimensionInfo), changePositionOnly, tooltip: this.component });
+            return this._showTooltipByHandler(tooltipData, newParams);
+        }
+        shouldHandleTooltip(params, mouseEventData) {
+            var _a;
+            const { tooltipInfo: info } = mouseEventData;
+            if (isNil$3(info)) {
+                return false;
+            }
+            const helper = (_a = params.model) === null || _a === void 0 ? void 0 : _a.tooltipHelper;
+            if (!(helper === null || helper === void 0 ? void 0 : helper.activeType.includes('group'))) {
+                return false;
+            }
+            return true;
+        }
+        getMouseEventData(params, dimensionInfo) {
+            var _a, _b;
+            let info;
+            let ignore;
+            if (((_a = params.model) === null || _a === void 0 ? void 0 : _a.modelType) === 'series') {
+                const series = params.model;
+                const helper = series.tooltipHelper;
+                const activeTriggers = helper === null || helper === void 0 ? void 0 : helper.activeTriggerSet.group;
+                const ignoreTriggers = helper === null || helper === void 0 ? void 0 : helper.ignoreTriggerSet.group;
+                if ((activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.model)) || (activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.mark))) {
+                    const patternSpec = this.component.getSpec()[this.activeType];
+                    const triggerMark = (patternSpec === null || patternSpec === void 0 ? void 0 : patternSpec.triggerMark) ? array(patternSpec.triggerMark) : [];
+                    if (triggerMark.includes((_b = params.mark) === null || _b === void 0 ? void 0 : _b.name)) {
+                        info = {
+                            mark: params.mark,
+                            datum: params.datum,
+                            series,
+                            dimensionInfo
+                        };
+                    }
+                }
+                else if ((ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.model)) || (ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.mark))) {
+                    ignore = true;
+                }
+            }
+            return {
+                tooltipInfo: info,
+                ignore
+            };
+        }
+        _getGroupDatum(params) {
+            const { model, mark, datum } = params;
+            const series = model;
+            if (['line', 'area'].includes(mark.type)) {
+                return array(datum);
+            }
+            const datumList = series.getViewData().latestData;
+            const seriesField = series.getSeriesField();
+            if (!seriesField) {
+                return datumList;
+            }
+            const seriesFieldValue = array(datum)[0][seriesField];
+            return datumList.filter((d) => d[seriesField] === seriesFieldValue);
+        }
+    }
+
+    const isMarkInfo = (info) => isValid$3(info) && !isArray$3(info);
+    const isDimensionInfo = (info) => isValid$3(info) && isArray$3(info);
+
     class TooltipSpecTransformer extends BaseComponentSpecTransformer {
         _shouldMergeThemeToSpec() {
             return false;
@@ -89922,6 +89720,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._hideTooltipByHandler(Object.assign(Object.assign({}, params), { tooltip: this }));
                     this._cacheInfo = undefined;
                     this._cacheParams = undefined;
+                    this._cacheActiveType = undefined;
                 }
             };
             this._getMouseMoveHandler = (isClick) => (params) => {
@@ -89942,24 +89741,30 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 const mouseEventData = this._getMouseEventData(params);
                 const { tooltipInfo: { dimension: dimensionInfo }, ignore: { mark: ignoreMark, dimension: ignoreDimension } } = mouseEventData;
-                let markTooltipSuccess = false;
-                let dimensionTooltipSuccess = false;
-                markTooltipSuccess = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick);
-                if (!markTooltipSuccess) {
-                    dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
+                const success = {
+                    mark: false,
+                    dimension: false,
+                    group: false
+                };
+                success.group = this._showTooltipByMouseEvent('group', mouseEventData, params, isClick);
+                if (!success.group) {
+                    success.mark = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick);
                 }
-                if (!markTooltipSuccess && !dimensionTooltipSuccess && !isEmptyPos(params)) {
+                if (!success.mark && !success.group) {
+                    success.dimension = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
+                }
+                if (Object.values(success).every(val => !val) && !isEmptyPos(params)) {
                     if (ignoreMark && isMarkInfo(this._cacheInfo)) {
-                        markTooltipSuccess = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick, true);
+                        success.mark = this._showTooltipByMouseEvent('mark', mouseEventData, params, isClick, true);
                     }
                     else if (ignoreDimension && isDimensionInfo(this._cacheInfo)) {
-                        dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick, true);
+                        success.dimension = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick, true);
                     }
                     else if (isValid$3(dimensionInfo)) {
-                        dimensionTooltipSuccess = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
+                        success.dimension = this._showTooltipByMouseEvent('dimension', mouseEventData, params, isClick);
                     }
                 }
-                if (!markTooltipSuccess && (!dimensionTooltipSuccess || isNil$3(dimensionInfo))) {
+                if (!success.mark && !success.group && (!success.dimension || isNil$3(dimensionInfo))) {
                     this._handleChartMouseOut(params);
                     if (isClick && this._clickLock) {
                         this._clickLock = false;
@@ -89981,11 +89786,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 else {
                     const tooltipInfo = mouseEventData.tooltipInfo[activeType];
-                    const isSameAsCache = this._isSameAsCache(tooltipInfo, params);
+                    const isSameAsCache = this._isSameAsCache(tooltipInfo, params, activeType);
                     success = !processor.showTooltip(tooltipInfo, params, isSameAsCache);
                     if (success) {
                         this._cacheInfo = tooltipInfo;
                         this._cacheParams = params;
+                        this._cacheActiveType = activeType;
                     }
                 }
                 if (success) {
@@ -90005,21 +89811,38 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     tooltipInfo: {},
                     ignore: {}
                 };
-                Object.keys(this._processor).forEach(activeType => {
-                    const { tooltipInfo, ignore } = this._processor[activeType].getMouseEventData(params);
-                    result.tooltipInfo[activeType] = tooltipInfo;
-                    result.ignore[activeType] = ignore;
-                });
+                let activeType = 'dimension';
+                const { tooltipInfo, ignore } = this._processor[activeType].getMouseEventData(params);
+                result.tooltipInfo[activeType] = tooltipInfo;
+                result.ignore[activeType] = ignore;
+                const dimensionInfo = tooltipInfo;
+                for (activeType of Object.keys(this._processor)) {
+                    if (activeType !== 'dimension') {
+                        const { tooltipInfo, ignore } = this._processor[activeType].getMouseEventData(params, dimensionInfo);
+                        result.tooltipInfo[activeType] = tooltipInfo;
+                        result.ignore[activeType] = ignore;
+                    }
+                }
                 return result;
             };
             this._hideTooltipByHandler = (params) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 if (!this._isTooltipShown && !((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
                     return 0;
                 }
                 this.event.emit(exports.ChartEvent.tooltipHide, Object.assign(Object.assign({}, params), { source: exports.Event_Source_Type.chart, tooltip: this }));
-                if ((_c = this.tooltipHandler) === null || _c === void 0 ? void 0 : _c.hideTooltip) {
-                    const result = this.tooltipHandler.hideTooltip(params);
+                Object.values(this._processor).forEach((processor) => {
+                    processor.clearCache();
+                });
+                let hideTooltip;
+                if ((_c = this._spec.handler) === null || _c === void 0 ? void 0 : _c.hideTooltip) {
+                    hideTooltip = this._spec.handler.hideTooltip.bind(this._spec.handler);
+                }
+                else if ((_d = this.tooltipHandler) === null || _d === void 0 ? void 0 : _d.hideTooltip) {
+                    hideTooltip = this.tooltipHandler.hideTooltip.bind(this.tooltipHandler);
+                }
+                if (hideTooltip) {
+                    const result = hideTooltip(params);
                     if (!result) {
                         this._isTooltipShown = false;
                     }
@@ -90117,7 +89940,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _initProcessor() {
             this._processor = {
                 mark: new MarkTooltipProcessor(this),
-                dimension: new DimensionTooltipProcessor(this)
+                dimension: new DimensionTooltipProcessor(this),
+                group: new GroupTooltipProcessor(this)
             };
         }
         _initEvent() {
@@ -90178,7 +90002,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._alwaysShow = false;
             return !this._hideTooltipByHandler(params);
         }
-        _isSameAsCache(nextInfo, nextParams) {
+        _isSameAsCache(nextInfo, nextParams, nextActiveType) {
+            if (nextActiveType !== this._cacheActiveType) {
+                return false;
+            }
             if (nextInfo === this._cacheInfo) {
                 return true;
             }
@@ -95108,11 +94935,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             const series = this._getSeries();
             if ((_a = series.getSpec().totalLabel) === null || _a === void 0 ? void 0 : _a.visible) {
-                const mark = series.getMarkInName(series.type);
-                const textMark = this._createMark({ type: "label", name: `${mark.name}-total-label` });
-                this._baseMark = mark;
-                this._textMark = textMark;
-                this._initTextMarkStyle();
+                const mark = series.getSeriesMark();
+                if (mark) {
+                    const textMark = this._createMark({ type: "label", name: `${mark.name}-total-label` });
+                    this._baseMark = mark;
+                    this._textMark = textMark;
+                    this._initTextMarkStyle();
+                }
             }
         }
         _initTextMarkStyle() {
@@ -97124,6 +96953,372 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
+    const Appear_Wave = {
+        duration: 2000,
+        loop: true,
+        channel: {
+            wave: { from: 0, to: 1 }
+        }
+    };
+    const Appear_Grow = (params) => {
+        return {
+            duration: 2000,
+            channel: {
+                wave: { from: 0, to: 1 },
+                height: params.height,
+                y: params.y
+            }
+        };
+    };
+    const Appear_WaveGrow = (params) => {
+        return {
+            duration: 2000,
+            channel: {
+                wave: { from: 0, to: 1 },
+                height: params.height,
+                y: params.y
+            }
+        };
+    };
+    function liquidPresetAnimation(params, preset) {
+        switch (preset) {
+            case 'wave':
+                return Appear_Wave;
+            case 'grow':
+                return Appear_Grow(params);
+            case 'waveGrow':
+                return Appear_WaveGrow(params);
+            default:
+                return Appear_Wave;
+        }
+    }
+    const registerLiquidAnimation = () => {
+        Factory.registerAnimation('liquid', (params, preset) => {
+            return {
+                appear: liquidPresetAnimation(params, preset),
+                enter: liquidPresetAnimation(params, preset),
+                exit: liquidPresetAnimation(params, preset)
+            };
+        });
+    };
+
+    const WAVE_GLYPH_TYPE = 'wave';
+    class LiquidMark extends BaseMark {
+        constructor() {
+            super(...arguments);
+            this.type = LiquidMark.type;
+        }
+        _getDefaultStyle() {
+            const defaultStyle = Object.assign(Object.assign({}, super._getDefaultStyle()), { wave: 0 });
+            return defaultStyle;
+        }
+        _initProduct(group) {
+            const view = this.getVGrammarView();
+            const id = this.getProductId();
+            this._product = view.glyph(WAVE_GLYPH_TYPE, group !== null && group !== void 0 ? group : view.rootMark).id(id);
+            this._compiledProductId = id;
+        }
+    }
+    LiquidMark.type = "liquid";
+    const registerLiquidMark = () => {
+        Factory.registerMark(LiquidMark.type, LiquidMark);
+        registerWaveGlyph();
+    };
+
+    const getShapes = (shapesType, size) => {
+        if (shapesType === 'drop') {
+            return pin(0, 0, size / 2);
+        }
+        return shapesType;
+    };
+    function pin(x, y, radius) {
+        const w = (radius * 4) / 3;
+        const h = Math.max(w, radius * 2);
+        const r = w / 2;
+        const cx = x;
+        const cy = r + y - h / 2;
+        const theta = Math.asin(r / ((h - r) * 0.85));
+        const dy = Math.sin(theta) * r;
+        const dx = Math.cos(theta) * r;
+        const x0 = cx - dx;
+        const y0 = cy + dy;
+        const cpX = x;
+        const cpY = cy + r / Math.sin(theta);
+        return `
+      M ${x0} ${y0}
+      A ${r} ${r} 0 1 1 ${x0 + dx * 2} ${y0}
+      Q ${cpX} ${cpY} ${x} ${y + h / 2}
+      Q ${cpX} ${cpY} ${x0} ${y0}
+      Z 
+    `;
+    }
+
+    class LiquidSeriesTooltipHelper extends BaseSeriesTooltipHelper {
+        constructor() {
+            super(...arguments);
+            this.getContentKey = () => (datum) => {
+                return this.series.getValueField();
+            };
+            this.getContentValue = () => (datum) => {
+                const valueField = this.series.getValueField();
+                return datum[valueField];
+            };
+            this.getLiquidFillColor = (datum) => {
+                return this.series.getMarkInName('liquid').getAttribute('fill', datum);
+            };
+        }
+        getDefaultTooltipPattern(activeType) {
+            return {
+                visible: true,
+                activeType,
+                title: {
+                    key: undefined,
+                    value: this.titleValueCallback,
+                    hasShape: false
+                },
+                content: [
+                    {
+                        key: this.getContentKey(),
+                        value: this.getContentValue(),
+                        hasShape: true,
+                        shapeType: this.contentShapeTypeCallback,
+                        shapeColor: this.getLiquidFillColor,
+                        shapeStroke: this.getLiquidFillColor,
+                        shapeHollow: false
+                    }
+                ]
+            };
+        }
+    }
+
+    class LiquidSeries extends BaseSeries {
+        constructor() {
+            super(...arguments);
+            this.type = exports.SeriesTypeEnum.liquid;
+            this.transformerConstructor = LineLikeSeriesSpecTransformer;
+            this._liquidBackgroundMark = null;
+            this._liquidOutlineMark = null;
+        }
+        setValueField(field) {
+            if (isValid$3(field)) {
+                this._valueField = field;
+            }
+        }
+        getValueField() {
+            return this._valueField;
+        }
+        setAttrFromSpec() {
+            super.setAttrFromSpec();
+            this._marginSpec = normalizeLayoutPaddingSpec(this._spec.outlineMargin);
+            this._paddingSpec = normalizeLayoutPaddingSpec(this._spec.outlinePadding);
+            this.setValueField(this._spec.valueField);
+        }
+        rawDataUpdate(d) {
+            super.rawDataUpdate(d);
+            this._heightRatio = max$1(...this._data.getLatestData().map((d) => d[this._valueField]));
+        }
+        initMark() {
+            this._initLiquidOutlineMark();
+            this._initLiquidBackgroundMark();
+            this._initLiquidMark();
+        }
+        initMarkStyle() {
+            this._initLiquidOutlineMarkStyle();
+            this._initLiquidBackgroundMarkStyle();
+            this._initLiquidMarkStyle();
+        }
+        _initLiquidOutlineMark() {
+            this._liquidOutlineMark = this._createMark(LiquidSeries.mark.liquidOutline, {
+                isSeriesMark: true,
+                skipBeforeLayouted: false
+            });
+            return this._liquidOutlineMark;
+        }
+        _initLiquidBackgroundMark() {
+            this._liquidBackgroundMark = this._createMark(LiquidSeries.mark.liquidBackground, {
+                isSeriesMark: true,
+                skipBeforeLayouted: false
+            });
+            return this._liquidBackgroundMark;
+        }
+        _initLiquidMark() {
+            this._liquidMark = this._createMark(LiquidSeries.mark.liquid, {
+                parent: this._liquidBackgroundMark,
+                isSeriesMark: true,
+                skipBeforeLayouted: false
+            });
+            return this._liquidMark;
+        }
+        _getPosAndSizeFormRegion(isOutline = false) {
+            const { top: marginTop = 0, bottom: marginBottom = 0, left: marginLeft = 0, right: marginRight = 0 } = this._marginSpec;
+            const { top: paddingTop = 0, bottom: paddingBottom = 0, left: paddingLeft = 0, right: paddingRight = 0 } = this._paddingSpec;
+            const { width: regionWidth, height: regionHeight } = this._region.getLayoutRect();
+            if (!isOutline) {
+                return {
+                    x: regionWidth / 2 + (marginLeft + paddingRight - (marginRight + paddingRight)) / 2,
+                    y: regionHeight / 2 + (marginTop + paddingTop - (marginBottom + paddingBottom)) / 2,
+                    size: Math.min(regionWidth - (marginLeft + marginRight + paddingLeft + paddingRight), regionHeight - (marginTop + marginBottom + paddingTop + paddingBottom))
+                };
+            }
+            return {
+                x: regionWidth / 2 + (marginLeft - marginRight) / 2,
+                y: regionHeight / 2 + (marginTop - marginBottom) / 2,
+                size: Math.min(regionWidth - (marginLeft + marginRight), regionHeight - (marginTop + marginBottom))
+            };
+        }
+        _initLiquidOutlineMarkStyle() {
+            const liquidOutlineMark = this._liquidOutlineMark;
+            liquidOutlineMark.setZIndex(this.layoutZIndex);
+            liquidOutlineMark.created();
+            this.setMarkStyle(liquidOutlineMark, {
+                stroke: this.getColorAttribute(),
+                x: () => this._getPosAndSizeFormRegion(true).x,
+                y: () => this._getPosAndSizeFormRegion(true).y,
+                size: () => this._getPosAndSizeFormRegion(true).size,
+                symbolType: () => { var _a; return getShapes((_a = this._spec.maskShape) !== null && _a !== void 0 ? _a : 'circle', this._getPosAndSizeFormRegion(true).size); }
+            }, 'normal', exports.AttributeLevel.Series);
+            this._liquidOutlineMark.setInteractive(false);
+        }
+        _initLiquidBackgroundMarkStyle() {
+            const liquidBackgroundMark = this._liquidBackgroundMark;
+            liquidBackgroundMark.setZIndex(this.layoutZIndex);
+            liquidBackgroundMark.created();
+            this.setMarkStyle(liquidBackgroundMark, {
+                clip: true,
+                width: () => this._region.getLayoutRect().width,
+                height: () => this._region.getLayoutRect().height,
+                path: () => {
+                    var _a;
+                    const { x, y, size } = this._getPosAndSizeFormRegion();
+                    const symbolPath = createSymbol({
+                        x,
+                        y,
+                        size,
+                        symbolType: getShapes((_a = this._spec.maskShape) !== null && _a !== void 0 ? _a : 'circle', size),
+                        fill: true
+                    });
+                    return [symbolPath];
+                }
+            }, 'normal', exports.AttributeLevel.Series);
+            this._liquidBackgroundMark.setInteractive(false);
+        }
+        _initLiquidMarkStyle() {
+            const liquidMark = this._liquidMark;
+            if (liquidMark) {
+                this.setMarkStyle(liquidMark, {
+                    dx: () => {
+                        return this._region.getLayoutStartPoint().x + this._region.getLayoutRect().width / 2;
+                    },
+                    y: () => {
+                        const { y: liquidBackY, size: liquidBackSize } = this._getPosAndSizeFormRegion();
+                        return liquidBackY - liquidBackSize / 2 + liquidBackSize - liquidBackSize * this._heightRatio;
+                    },
+                    height: () => {
+                        const { size: liquidBackSize } = this._getPosAndSizeFormRegion();
+                        return liquidBackSize * this._heightRatio;
+                    },
+                    fill: this.getColorAttribute(),
+                    wave: 0
+                }, 'normal', exports.AttributeLevel.Series);
+            }
+        }
+        initTooltip() {
+            this._tooltipHelper = new LiquidSeriesTooltipHelper(this);
+            this._liquidMark && this._tooltipHelper.activeTriggerSet.mark.add(this._liquidMark);
+        }
+        initInteraction() {
+            this._parseInteractionConfig(this._liquidMark ? [this._liquidMark] : []);
+        }
+        initAnimation() {
+            var _a, _b, _c;
+            const animationParams = {
+                y: {
+                    from: () => {
+                        const { y: liquidBackY, size: liquidBackSize } = this._getPosAndSizeFormRegion();
+                        return liquidBackY - liquidBackSize / 2 + liquidBackSize;
+                    },
+                    to: () => {
+                        const { y: liquidBackY, size: liquidBackSize } = this._getPosAndSizeFormRegion();
+                        return liquidBackY - liquidBackSize / 2 + liquidBackSize - liquidBackSize * this._heightRatio;
+                    }
+                },
+                height: {
+                    from: 0,
+                    to: () => {
+                        const { size: liquidBackSize } = this._getPosAndSizeFormRegion();
+                        return liquidBackSize * this._heightRatio;
+                    }
+                }
+            };
+            const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
+            this._liquidMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('liquid')) === null || _c === void 0 ? void 0 : _c(animationParams, appearPreset), userAnimationConfig("liquid", this._spec, this._markAttributeContext)));
+        }
+        initEvent() {
+            super.initEvent();
+            if (!this._spec.indicatorSmartInvert || !this._option.getChart().getComponentsByKey('indicator')) {
+                return;
+            }
+            this.event.on(exports.ChartEvent.renderFinished, () => {
+                this._option
+                    .getChart()
+                    .getComponentsByKey('indicator')
+                    .forEach((indicatorComponent) => {
+                    var _a, _b;
+                    const grammarMark = this._liquidMark.getProduct();
+                    const waveItem = grammarMark.elements[0].glyphGraphicItems.wave1;
+                    let { y1: waveY1, y2: waveY2 } = waveItem.globalAABBBounds;
+                    waveY1 += this._region.getLayoutStartPoint().y;
+                    waveY2 += this._region.getLayoutStartPoint().y;
+                    (_b = (_a = indicatorComponent === null || indicatorComponent === void 0 ? void 0 : indicatorComponent.getIndicatorComponent()) === null || _a === void 0 ? void 0 : _a.getChildren()[0]) === null || _b === void 0 ? void 0 : _b.getChildren().forEach((text) => {
+                        const { y1: textY1, y2: textY2 } = text.globalAABBBounds;
+                        if (waveY1 < textY1 && waveY2 > textY2) {
+                            const foregroundColor = text.attribute.fill;
+                            const backgroundColor = waveItem.attribute.fill;
+                            const invertColor = labelSmartInvert(foregroundColor, backgroundColor);
+                            text.setAttribute('fill', invertColor);
+                        }
+                    });
+                });
+            });
+        }
+        dataToPosition(data) {
+            return null;
+        }
+        dataToPositionX(data) {
+            return null;
+        }
+        dataToPositionY(data) {
+            return null;
+        }
+        valueToPosition(value1, value2) {
+            return null;
+        }
+        getStatisticFields() {
+            return [];
+        }
+        getGroupFields() {
+            return [];
+        }
+        getStackGroupFields() {
+            return [];
+        }
+        getStackValueField() {
+            return '';
+        }
+        getActiveMarks() {
+            return [this._liquidMark];
+        }
+    }
+    LiquidSeries.type = exports.SeriesTypeEnum.liquid;
+    LiquidSeries.mark = LiquidSeriesMark;
+    LiquidSeries.transformerConstructor = LineLikeSeriesSpecTransformer;
+    const registerLiquidSeries = () => {
+        registerLiquidMark();
+        registerGroupMark();
+        registerLiquidAnimation();
+        Factory.registerSeries(LiquidSeries.type, LiquidSeries);
+    };
+
     class LiquidChart extends BaseChart {
         constructor() {
             super(...arguments);
@@ -97246,7 +97441,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.LinkPathMark = LinkPathMark;
     exports.LinkSeries = LinkSeries;
     exports.LiquidChart = LiquidChart;
-    exports.LiquidSeries = LiquidSeries;
     exports.MapChart = MapChart;
     exports.MapLabelComponent = MapLabelComponent;
     exports.MapSeries = MapSeries;
@@ -97399,7 +97593,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     exports.registerLinearProgressSeries = registerLinearProgressSeries;
     exports.registerLinkSeries = registerLinkSeries;
     exports.registerLiquidChart = registerLiquidChart;
-    exports.registerLiquidSeries = registerLiquidSeries;
     exports.registerLynxEnv = registerLynxEnv;
     exports.registerMapChart = registerMapChart;
     exports.registerMapLabel = registerMapLabel;