@visactor/vchart 1.12.7 → 1.12.8

package/build/index.js

@@ -600,7 +600,7 @@
     function eq(value, other) {
       return value === other || Number.isNaN(value) && Number.isNaN(other);
     }
-    function merge$2(target) {
+    function merge$1(target) {
       let sourceIndex = -1;
       const length = arguments.length <= 1 ? 0 : arguments.length - 1;
       for (; ++sourceIndex < length;) {
@@ -2633,14 +2633,6 @@
         y: y
       };
     }
-    function hasParentElement(element, target) {
-      let parent = element.parentNode;
-      for (; null !== parent;) {
-        if (parent === target) return !0;
-        parent = parent.parentNode;
-      }
-      return !1;
-    }
     const styleStringToObject = function () {
       let styleStr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
       const res = {};
@@ -3988,7 +3980,7 @@
 
     bisector(ascending);
 
-    function merge$1 (arrays) {
+    function merge (arrays) {
       var n = arrays.length,
         m,
         i = -1,
@@ -4031,7 +4023,7 @@
             clip.point = point;
             clip.lineStart = lineStart;
             clip.lineEnd = lineEnd;
-            segments = merge$1(segments);
+            segments = merge(segments);
             var startInside = polygonContains(polygon, start);
             if (segments.length) {
               if (!polygonStarted) sink.polygonStart(), polygonStarted = true;
@@ -4500,7 +4492,7 @@
         function polygonEnd() {
           var startInside = polygonInside(),
             cleanInside = clean && startInside,
-            visible = (segments = merge$1(segments)).length;
+            visible = (segments = merge(segments)).length;
           if (cleanInside || visible) {
             stream.polygonStart();
             if (cleanInside) {
@@ -7111,7 +7103,7 @@
       }
       setFields(f) {
         let foreMerge = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-        this._fields = f && foreMerge ? merge$2({}, this._fields, f) : f;
+        this._fields = f && foreMerge ? merge$1({}, this._fields, f) : f;
         const fieldsOption = this.transformsArr.find(_op => "fields" === _op.type);
         !isNil$1(this._fields) && isNil$1(fieldsOption) ? (this.dataSet.registerTransform("fields", fields), this.transform({
           type: "fields",
@@ -9445,8 +9437,14 @@
       return needTestLetter && (index = testLetter(desc, index)), index;
     }
     function testLetter(string, index) {
+      let negativeWrongMatch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
       let i = index;
-      for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return index;
+      for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i--, i <= 0) return negativeWrongMatch ? testLetter2(string, index) : index;
+      return i;
+    }
+    function testLetter2(string, index) {
+      let i = index;
+      for (; regLetter.test(string[i - 1]) && regLetter.test(string[i]) || regPunctuation.test(string[i]);) if (i++, i >= string.length) return i;
       return i;
     }
     function measureTextCanvas(text, character) {
@@ -9544,7 +9542,7 @@
           width: length
         };
       }
-      clipText(text, options, width, wordBreak) {
+      clipText(text, options, width, wordBreak, keepAllBreak) {
         if (0 === text.length) return {
           str: "",
           width: 0
@@ -9560,8 +9558,8 @@
         };
         const data = this._clipText(text, options, width, 0, text.length - 1, "end", !1);
         if (wordBreak && data.str !== text) {
-          const index = testLetter(text, data.str.length);
-          index !== data.str.length && (data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
+          let index = testLetter(text, data.str.length, keepAllBreak);
+          index !== data.str.length && (index > data.str.length && (data.wordBreaked = index, index = data.str.length), data.str = text.substring(0, index), data.width = this.measureTextWidth(data.str, options));
         }
         return data;
       }
@@ -15234,7 +15232,7 @@
       const path = "function" == typeof graphic.pathProxy ? graphic.pathProxy(graphic.attribute) : graphic.pathProxy;
       return renderCommandList(path.commandList, context, x, y), context.setShadowBlendStyle && context.setShadowBlendStyle(graphic, graphic.attribute, themeAttributes), doStroke && (strokeCb ? strokeCb(context, graphic.attribute, themeAttributes) : sVisible && (context.setStrokeStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.stroke())), doFill && (fillCb ? fillCb(context, graphic.attribute, themeAttributes) : fVisible && (context.setCommonStyle(graphic, graphic.attribute, x - originX, y - originY, themeAttributes), context.fill())), !0;
     }
-    function intersect$2(x0, y0, x1, y1, x2, y2, x3, y3) {
+    function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
       const x10 = x1 - x0,
         y10 = y1 - y0,
         x32 = x3 - x2,
@@ -15303,7 +15301,7 @@
         yire = innerRadius * sin$1(innerEndAngle);
       let xore, yore, xirs, yirs;
       if ((maxInnerCornerRadius > epsilon$1 || maxOuterCornerRadius > epsilon$1) && (xore = outerRadius * cos$1(outerEndAngle), yore = outerRadius * sin$1(outerEndAngle), xirs = innerRadius * cos$1(innerStartAngle), yirs = innerRadius * sin$1(innerStartAngle), deltaAngle < pi$1)) {
-        const oc = intersect$2(xors, yors, xirs, yirs, xore, yore, xire, yire);
+        const oc = intersect(xors, yors, xirs, yirs, xore, yore, xire, yire);
         if (oc) {
           const ax = xors - oc[0],
             ay = yors - oc[1],
@@ -19171,20 +19169,22 @@
               });
               break;
             }
-            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-word" === wordBreak);
-            if ("" !== str && "" === clip.str) {
+            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-all" !== wordBreak, "keep-all" === wordBreak);
+            if ("" !== str && "" === clip.str || clip.wordBreaked) {
               if (ellipsis) {
                 const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1, suffixPosition);
                 clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
-            if (linesLayout.push({
+            linesLayout.push({
               str: clip.str,
               width: clip.width
-            }), clip.str.length === str.length) ;else if (needCut) {
-              const newStr = str.substring(clip.str.length);
-              lines.splice(i + 1, 0, newStr);
+            });
+            let cutLength = clip.str.length;
+            if (!clip.wordBreaked || "" !== str && "" === clip.str || (needCut = !0, cutLength = clip.wordBreaked), clip.str.length === str.length) ;else if (needCut) {
+              let newStr = str.substring(cutLength);
+              "keep-all" === wordBreak && (newStr = newStr.replace(/^\s+/g, "")), lines.splice(i + 1, 0, newStr);
             }
           }
           let maxWidth = 0;
@@ -20171,7 +20171,7 @@
           } = attribute,
           b = aabbBounds;
         return points.forEach(p => {
-          !1 === p.defined && "zero" !== connectedType || b.add(p.x, p.y);
+          !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
         }), b;
       }
       updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) {
@@ -20182,7 +20182,7 @@
           b = aabbBounds;
         return segments.forEach(s => {
           s.points.forEach(p => {
-            !1 === p.defined && "zero" !== connectedType || b.add(p.x, p.y);
+            !1 === p.defined && "zero" !== connectedType && "connect" !== connectedType || b.add(p.x, p.y);
           });
         }), b;
       }
@@ -25180,7 +25180,7 @@
         });
       }
       setAttribute(key, value, forceUpdateTag) {
-        isPlainObject$1(this.attribute[key]) && isPlainObject$1(value) && !isFunction$1(this.attribute[key]) && !isFunction$1(value) ? merge$2(this.attribute[key], value) : this.attribute[key] = value, GROUP_ATTRIBUTES.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
+        isPlainObject$1(this.attribute[key]) && isPlainObject$1(value) && !isFunction$1(this.attribute[key]) && !isFunction$1(value) ? merge$1(this.attribute[key], value) : this.attribute[key] = value, GROUP_ATTRIBUTES.includes(key) || this.render(), this.valid = this.isValid(), this.updateShapeAndBoundsTagSetted() || !forceUpdateTag && !this.needUpdateTag(key) ? this.addUpdateBoundTag() : this.addUpdateShapeAndBoundsTag(), this.addUpdatePositionTag(), this.onAttributeUpdate();
       }
       setAttributes(params, forceUpdateTag) {
         const keys = Object.keys(params);
@@ -25190,7 +25190,7 @@
         isNil$1(keys) && (keys = Object.keys(params));
         for (let i = 0; i < keys.length; i++) {
           const key = keys[i];
-          !isPlainObject$1(this.attribute[key]) || isFunction$1(this.attribute[key]) || isFunction$1(params[key]) ? this.attribute[key] = params[key] : merge$2(this.attribute[key], params[key]);
+          !isPlainObject$1(this.attribute[key]) || isFunction$1(this.attribute[key]) || isFunction$1(params[key]) ? this.attribute[key] = params[key] : merge$1(this.attribute[key], params[key]);
         }
       }
       bindEvents() {}
@@ -25742,7 +25742,7 @@
             const bez = arr[i];
             this.bezierCurveTo(bez[0], bez[1], bez[2], bez[3], bez[4], bez[5], z);
           }
-        } else this.nativeContext.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+        } else this.nativeContext.arc(x, y, Math.max(0, radius), startAngle, endAngle, anticlockwise);
       }
       arcTo(x1, y1, x2, y2, radiusX) {
         this.nativeContext.arcTo(x1, y1, x2, y2, radiusX);
@@ -25796,7 +25796,7 @@
         return 2 === a.length ? this.nativeContext.createImageData(a[0], a[1]) : 1 === a.length ? this.nativeContext.createImageData(a[0]) : null;
       }
       createLinearGradient(x0, y0, x1, y1) {
-        return this.nativeContext.createLinearGradient(x0, y0, x1, y1);
+        return isFinite(x0 + y0 + x1 + y1) || (x0 = 0, y0 = 0, x1 = 0, y1 = 0), this.nativeContext.createLinearGradient(x0, y0, x1, y1);
       }
       createPattern(image, repetition) {
         return 0 === image.width || 0 === image.height ? null : this.nativeContext.createPattern(image, repetition);
@@ -30112,7 +30112,7 @@
     loadScrollbarComponent();
     let ScrollBar$1 = class ScrollBar extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._onRailPointerDown = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ScrollBar.defaultAttributes, attributes)), this.name = "scrollbar", this._onRailPointerDown = e => {
           const {
               viewX: viewX,
               viewY: viewY
@@ -30608,7 +30608,7 @@
         return this._textShape;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Tag.defaultAttributes, attributes)), this.name = "tag", this._tagStates = [], this._rectStates = [], this._symbolStates = [], this._textStates = [];
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Tag.defaultAttributes, attributes)), this.name = "tag", this._tagStates = [], this._rectStates = [], this._symbolStates = [], this._textStates = [];
       }
       render() {
         var _a, _b, _c;
@@ -30762,7 +30762,7 @@
         this._textShape = textShape, this._symbol = symbol, this.resetStates();
       }
       initAttributes(params, options) {
-        params = (null == options ? void 0 : options.skipDefault) ? params : merge$2({}, Tag.defaultAttributes, params), super.initAttributes(params), this.render();
+        params = (null == options ? void 0 : options.skipDefault) ? params : merge$1({}, Tag.defaultAttributes, params), super.initAttributes(params), this.render();
       }
       addState(stateName, keepCurrentStates, hasAnimation) {
         super.addState(stateName, keepCurrentStates, hasAnimation), this._textShape && this._textShape.addState(stateName, keepCurrentStates, hasAnimation), this._bgRect && this._bgRect.addState(stateName, keepCurrentStates, hasAnimation), this._symbol && this._symbol.addState(stateName, keepCurrentStates, hasAnimation);
@@ -30816,14 +30816,14 @@
       }
     };
     const theme = {
-      poptip: merge$2({}, DEFAULT_THEME)
+      poptip: merge$1({}, DEFAULT_THEME)
     };
 
     function loadPoptipComponent() {
       registerGroup(), registerText(), registerSymbol(), registerRect();
     }
     function setPoptipTheme(defaultPoptipTheme) {
-      merge$2(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
+      merge$1(theme.poptip, DEFAULT_THEME, defaultPoptipTheme);
     }
 
     var __rest$c = undefined && undefined.__rest || function (s, e) {
@@ -30839,7 +30839,7 @@
     loadPoptipComponent();
     class PopTip extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, PopTip.defaultAttributes, attributes)), this.name = "poptip", this.positionList = ["top", "tl", "tr", "bottom", "bl", "br", "left", "lt", "lb", "right", "rt", "rb"];
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, PopTip.defaultAttributes, attributes)), this.name = "poptip", this.positionList = ["top", "tl", "tr", "bottom", "bl", "br", "left", "lt", "lb", "right", "rt", "rb"];
       }
       render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -31092,7 +31092,7 @@
       return c > 3 && r && Object.defineProperty(target, key, r), r;
     };
     function wrapPoptip(target, source) {
-      return merge$2(target, theme.poptip, source), target;
+      return merge$1(target, theme.poptip, source), target;
     }
     let PopTipRenderContribution = class {
       render(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
@@ -31104,7 +31104,7 @@
           } = graphic.attribute.poptip || {};
           if (!1 === visible || visibleCb && !1 === visibleCb(graphic)) return;
           const attribute = {};
-          merge$2(attribute, PopTip.defaultAttributes, graphic.attribute.poptip ? graphic.attribute.poptip : {}), this.poptipComponent ? this.poptipComponent.initAttributes(attribute) : this.poptipComponent = new PopTip(attribute);
+          merge$1(attribute, PopTip.defaultAttributes, graphic.attribute.poptip ? graphic.attribute.poptip : {}), this.poptipComponent ? this.poptipComponent.initAttributes(attribute) : this.poptipComponent = new PopTip(attribute);
           let poptip = graphic.attribute.poptip || {};
           if ("text" === graphic.type && null == poptip.title && null == poptip.content) {
             const out = {};
@@ -31239,7 +31239,7 @@
     loadLineCrosshairComponent();
     class LineCrosshair extends CrosshairBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, LineCrosshair.defaultAttributes, attributes));
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, LineCrosshair.defaultAttributes, attributes));
       }
       renderCrosshair(container) {
         const {
@@ -31273,7 +31273,7 @@
     loadRectCrosshairComponent();
     class RectCrosshair extends CrosshairBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, RectCrosshair.defaultAttributes, attributes));
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, RectCrosshair.defaultAttributes, attributes));
       }
       renderCrosshair(container) {
         const {
@@ -31309,7 +31309,7 @@
     loadCircleCrosshairComponent();
     class CircleCrosshair extends CrosshairBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, CircleCrosshair.defaultAttributes, attributes));
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, CircleCrosshair.defaultAttributes, attributes));
       }
       renderCrosshair(container) {
         const {
@@ -31340,7 +31340,7 @@
     loadSectorCrosshairComponent();
     class SectorCrosshair extends CrosshairBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, SectorCrosshair.defaultAttributes, attributes));
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, SectorCrosshair.defaultAttributes, attributes));
       }
       renderCrosshair(container) {
         const {
@@ -31384,7 +31384,7 @@
     loadPolygonCrosshairComponent();
     class PolygonCrosshair extends CrosshairBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, PolygonCrosshair.defaultAttributes, attributes));
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, PolygonCrosshair.defaultAttributes, attributes));
       }
       renderCrosshair(container) {
         const {
@@ -31950,7 +31950,7 @@
           restAttributes = __rest$b(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
-        }, merge$2({}, LabelBase.defaultAttributes, restAttributes))), this.name = "label", this._onHover = e => {
+        }, merge$1({}, LabelBase.defaultAttributes, restAttributes))), this.name = "label", this._onHover = e => {
           const target = e.target;
           target === this._lastHover || isEmpty(target.states) || (target.addState(StateValue.hover, !0), traverseGroup(this, node => {
             node === target || isEmpty(node.states) || node.addState(StateValue.hoverReverse, !0);
@@ -32075,9 +32075,9 @@
               } = this.attribute,
               animationCfg = isObject$2(animation) ? animation : {};
             this._animationConfig = {
-              enter: !1 !== animationEnter && merge$2({}, DefaultLabelAnimation, animationCfg, null != animationEnter ? animationEnter : {}),
-              exit: !1 !== animationExit && merge$2({}, DefaultLabelAnimation, animationCfg, null != animationExit ? animationExit : {}),
-              update: !1 !== animationUpdate && (isArray$1(animationUpdate) ? animationUpdate : merge$2({}, DefaultLabelAnimation, animationCfg, null != animationUpdate ? animationUpdate : {}))
+              enter: !1 !== animationEnter && merge$1({}, DefaultLabelAnimation, animationCfg, null != animationEnter ? animationEnter : {}),
+              exit: !1 !== animationExit && merge$1({}, DefaultLabelAnimation, animationCfg, null != animationExit ? animationExit : {}),
+              update: !1 !== animationUpdate && (isArray$1(animationUpdate) ? animationUpdate : merge$1({}, DefaultLabelAnimation, animationCfg, null != animationUpdate ? animationUpdate : {}))
             };
           } else this._animationConfig = {
             enter: !1,
@@ -32405,7 +32405,8 @@
             textType: textType,
             contrastRatiosThreshold: contrastRatiosThreshold,
             alternativeColors: alternativeColors,
-            mode: mode
+            mode: mode,
+            interactInvertType: interactInvertType
           } = option,
           fillStrategy = null !== (_a = option.fillStrategy) && void 0 !== _a ? _a : "invertBase",
           strokeStrategy = null !== (_b = option.strokeStrategy) && void 0 !== _b ? _b : "base",
@@ -32419,18 +32420,20 @@
             backgroundColor = baseMark.attribute.fill,
             foregroundColor = label.attribute.fill,
             invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode),
-            similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
-          if (outsideEnable || this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds)) {
+            similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor,
+            isInside = this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds),
+            isIntersect = !isInside && label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds);
+          if (isInside || outsideEnable || isIntersect && "inside" === interactInvertType) {
             const fill = smartInvertStrategy(fillStrategy, backgroundColor, invertColor, similarColor);
             if (fill && label.setAttributes({
               fill: fill
-            }), 0 === label.attribute.lineWidth) continue;
+            }), 0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
             const stroke = smartInvertStrategy(strokeStrategy, backgroundColor, invertColor, similarColor);
             stroke && label.setAttributes({
               stroke: stroke
             });
-          } else if (label.AABBBounds && baseMark.AABBBounds && baseMark.AABBBounds.intersects(label.AABBBounds)) {
-            if (0 === label.attribute.lineWidth) continue;
+          } else if (isIntersect && "none" !== interactInvertType) {
+            if (0 === label.attribute.lineWidth || 0 === label.attribute.strokeOpacity) continue;
             if (label.attribute.stroke) {
               label.setAttributes({
                 fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors, mode)
@@ -32495,7 +32498,7 @@
           restAttributes = __rest$a(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
-        }, merge$2({}, SymbolLabel.defaultAttributes, restAttributes))), this.name = "symbol-label";
+        }, merge$1({}, SymbolLabel.defaultAttributes, restAttributes))), this.name = "symbol-label";
       }
       labeling(textBounds, graphicBounds) {
         let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "top";
@@ -32531,7 +32534,7 @@
           restAttributes = __rest$9(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
-        }, merge$2({}, RectLabel.defaultAttributes, restAttributes)));
+        }, merge$1({}, RectLabel.defaultAttributes, restAttributes)));
       }
       labeling(textBounds, graphicBounds) {
         let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "top";
@@ -32595,7 +32598,7 @@
           restAttributes = __rest$8(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
-        }, merge$2({}, LineLabel.defaultAttributes, restAttributes))), this.name = "line-label";
+        }, merge$1({}, LineLabel.defaultAttributes, restAttributes))), this.name = "line-label";
       }
       getGraphicBounds(graphic) {
         let point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -32667,7 +32670,7 @@
           restAttributes = __rest$7(attributes, ["data"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           data: data
-        }, merge$2({}, ArcLabel.defaultAttributes, restAttributes))), this.name = "arc-label", this._ellipsisWidth = 0, this._arcLeft = new Map(), this._arcRight = new Map(), this._line2MinLength = 0, this._alignOffset = 0;
+        }, merge$1({}, ArcLabel.defaultAttributes, restAttributes))), this.name = "arc-label", this._ellipsisWidth = 0, this._arcLeft = new Map(), this._arcRight = new Map(), this._line2MinLength = 0, this._alignOffset = 0;
       }
       _overlapping(labels) {
         return labels;
@@ -32877,7 +32880,7 @@
         const radius = this.computeRadius(radiusRatio, attribute.width, attribute.height),
           flag = isQuadrantLeft(quadrant) ? -1 : 1;
         let cx = 0,
-          limit = (flag > 0 ? plotLayout_x2 - pointB.x + this._alignOffset : pointB.x - plotLayout_x1 - this._alignOffset) - this._line2MinLength - spaceWidth;
+          limit = (flag > 0 ? plotLayout_x2 - pointB.x : pointB.x - plotLayout_x1) + this._alignOffset - this._line2MinLength - spaceWidth;
         "labelLine" === labelLayoutAlign && (cx = (radius + line1MinLength + this._line2MinLength) * flag + center.x, limit = (flag > 0 ? plotLayout_x2 - cx : cx - plotLayout_x1) - spaceWidth);
         const text = this._getFormatLabelText(arc.refDatum, limit);
         arc.labelText = text;
@@ -33212,7 +33215,7 @@
           restAttributes = __rest$6(attributes, ["dataLabels"]);
         super((null == options ? void 0 : options.skipDefault) ? attributes : Object.assign({
           dataLabels: dataLabels
-        }, merge$2({}, DataLabel.defaultAttributes, restAttributes))), this.name = "data-label";
+        }, merge$1({}, DataLabel.defaultAttributes, restAttributes))), this.name = "data-label";
       }
       render() {
         var _a;
@@ -33287,7 +33290,7 @@
         return this._mainSegmentPoints;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Segment.defaultAttributes, attributes)), this.name = "segment", this.key = "segment", this.lines = [];
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Segment.defaultAttributes, attributes)), this.name = "segment", this.key = "segment", this.lines = [];
       }
       render() {
         this.removeAllChild(!0), this._reset();
@@ -33463,7 +33466,7 @@
     loadArcSegmentComponent();
     class ArcSegment extends Segment {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Segment.defaultAttributes, attributes)), this.name = "arc-segment", this.key = "arc-segment", this.isReverseArc = !1;
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Segment.defaultAttributes, attributes)), this.name = "arc-segment", this.key = "arc-segment", this.isReverseArc = !1;
       }
       getStartAngle() {
         const tangAng = this.isReverseArc ? this._startAngle + Math.PI / 2 : this._startAngle - Math.PI / 2;
@@ -33611,7 +33614,7 @@
           style = {},
           angle = .5 * Math.PI
         } = props,
-        symbolStyle = merge$2({}, DEFAULT_AXIS_BREAK_SYMBOL_STYLE, style),
+        symbolStyle = merge$1({}, DEFAULT_AXIS_BREAK_SYMBOL_STYLE, style),
         symbolSize = null !== (_a = symbolStyle.size) && void 0 !== _a ? _a : DEFAULT_AXIS_BREAK_SYMBOL_STYLE.size;
       return Object.assign(Object.assign({}, symbolStyle), {
         symbolType: null !== (_b = symbolStyle.symbolType) && void 0 !== _b ? _b : `M ${-symbolSize / 2} ${symbolSize * Math.sin(angle)} L ${symbolSize / 2} ${-symbolSize * Math.sin(angle)}`,
@@ -33667,6 +33670,15 @@
         0 === index ? path = `M${point.x},${point.y}` : path += `L${point.x},${point.y}`;
       }), closed && (path += "Z")), path;
     }
+    function textIntersect(textA, textB, sep) {
+      let a = textA.OBBBounds,
+        b = textB.OBBBounds;
+      return a && b && !a.empty() && !b.empty() ? a.intersects(b) : (a = textA.AABBBounds, b = textB.AABBBounds, sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2));
+    }
+    function hasOverlap$1(items, pad) {
+      for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (b = items[i], textIntersect(a, b, pad)) return !0;
+      return !1;
+    }
 
     const dispatchHoverState = (e, container, lastHover) => {
       const target = e.target;
@@ -33704,7 +33716,7 @@
       }
       getBoundsWithoutRender(attributes) {
         const currentAttribute = cloneDeep(this.attribute);
-        merge$2(this.attribute, attributes);
+        merge$1(this.attribute, attributes);
         const offscreenGroup = graphicCreator.group({
           x: this.attribute.x,
           y: this.attribute.y
@@ -33786,7 +33798,7 @@
           const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("tick", item, index, tickLineItems)));
           if (line.name = AXIS_ELEMENT_NAME.tick, line.id = this._getNodeId(item.id), isEmpty(null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.state)) line.states = DEFAULT_STATES$2;else {
             const data = this.data[index],
-              tickLineState = merge$2({}, DEFAULT_STATES$2, this.attribute.tick.state);
+              tickLineState = merge$1({}, DEFAULT_STATES$2, this.attribute.tick.state);
             Object.keys(tickLineState).forEach(key => {
               isFunction$1(tickLineState[key]) && (tickLineState[key] = tickLineState[key](data.rawValue, index, data, this.data));
             }), line.states = tickLineState;
@@ -33801,7 +33813,7 @@
           subTickLineItems.length && subTickLineItems.forEach((item, index) => {
             const line = graphicCreator.line(Object.assign({}, this._getTickLineAttribute("subTick", item, index, tickLineItems)));
             if (line.name = AXIS_ELEMENT_NAME.subTick, line.id = this._getNodeId(`${index}`), isEmpty(subTick.state)) line.states = DEFAULT_STATES$2;else {
-              const subTickLineState = merge$2({}, DEFAULT_STATES$2, subTick.state);
+              const subTickLineState = merge$1({}, DEFAULT_STATES$2, subTick.state);
               Object.keys(subTickLineState).forEach(key => {
                 isFunction$1(subTickLineState[key]) && (subTickLineState[key] = subTickLineState[key](item.value, index, item, tickLineItems));
               }), line.states = subTickLineState;
@@ -33826,7 +33838,7 @@
           const labelStyle = this._getLabelAttribute(item, index, data, layer),
             text = createTextGraphicByType(labelStyle);
           if (text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = DEFAULT_STATES$2;else {
-            const labelState = merge$2({}, DEFAULT_STATES$2, this.attribute.label.state);
+            const labelState = merge$1({}, DEFAULT_STATES$2, this.attribute.label.state);
             Object.keys(labelState).forEach(key => {
               isFunction$1(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
             }), text.states = labelState;
@@ -33918,7 +33930,7 @@
       _getTickLineAttribute(type, tickItem, index, tickItems) {
         let style = get$1(this.attribute, `${type}.style`);
         const data = this.data[index];
-        style = isFunction$1(style) ? merge$2({}, get$1(DEFAULT_AXIS_THEME, `${type}.style`), "tick" === type ? style(data.rawValue, index, data, this.data) : style(tickItem.value, index, tickItem, tickItems)) : style;
+        style = isFunction$1(style) ? merge$1({}, get$1(DEFAULT_AXIS_THEME, `${type}.style`), "tick" === type ? style(data.rawValue, index, data, this.data) : style(tickItem.value, index, tickItem, tickItems)) : style;
         const {
           start: start,
           end: end,
@@ -33953,9 +33965,9 @@
         let {
           style: textStyle
         } = this.attribute.label;
-        textStyle = isFunction$1(textStyle) ? merge$2({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle;
+        textStyle = isFunction$1(textStyle) ? merge$1({}, DEFAULT_AXIS_THEME.label.style, textStyle(tickDatum, index, tickData, layer)) : textStyle;
         const labelAlign = this.getLabelAlign(vector, inside, textStyle.angle);
-        return textStyle = merge$2(labelAlign, textStyle), isFunction$1(textStyle.text) && (textStyle.text = textStyle.text({
+        return textStyle = merge$1(labelAlign, textStyle), isFunction$1(textStyle.text) && (textStyle.text = textStyle.text({
           label: tickDatum.label,
           value: tickDatum.rawValue,
           index: tickDatum.index,
@@ -33991,17 +34003,9 @@
       },
       greedy: function (items, sep) {
         let a;
-        return items.filter((b, i) => i && intersect$1(a, b, sep) ? b.setAttribute("opacity", 0) : (a = b, 1));
+        return items.filter((b, i) => i && textIntersect(a, b, sep) ? b.setAttribute("opacity", 0) : (a = b, 1));
       }
     };
-    function intersect$1(textA, textB, sep) {
-      let a = textA.OBBBounds,
-        b = textB.OBBBounds;
-      return a && b && !a.empty() && !b.empty() ? a.intersects(b) : (a = textA.AABBBounds, b = textB.AABBBounds, sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2));
-    }
-    function hasOverlap$2(items, pad) {
-      for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (intersect$1(a, b = items[i], pad)) return !0;
-    }
     function hasBounds(item) {
       let bounds;
       return bounds = item.OBBBounds.empty() ? item.AABBBounds : item.OBBBounds, bounds.width() > 1 && bounds.height() > 1;
@@ -34009,6 +34013,20 @@
     function reset$1(items) {
       return items.forEach(item => item.setAttribute("opacity", 1)), items;
     }
+    function forceItemVisible$1(sourceItem, items, check, comparator) {
+      let inverse = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
+      if (check && !sourceItem.attribute.opacity) {
+        const remainLength = items.length;
+        if (remainLength > 1) {
+          sourceItem.setAttribute("opacity", 1);
+          for (let i = 0; i < remainLength; i++) {
+            const item = inverse ? items[remainLength - 1 - i] : items[i];
+            if (!comparator(item)) break;
+            item.setAttribute("opacity", 0);
+          }
+        }
+      }
+    }
     function autoHide(labels, config) {
       if (isEmpty(labels)) return;
       const source = labels.filter(hasBounds);
@@ -34020,20 +34038,16 @@
           separation: sep = 0
         } = config,
         reduce = isFunction$1(method) ? method : methods$2[method] || methods$2.parity;
-      if (items.length >= 3 && hasOverlap$2(items, sep)) {
+      if (items.length >= 3 && hasOverlap$1(items, sep)) {
         do {
           items = reduce(items, sep);
-        } while (items.length >= 3 && hasOverlap$2(items, sep));
-        if (items.length < 3 || config.lastVisible) {
-          const lastSourceItem = last(source);
-          if (!lastSourceItem.attribute.opacity) {
-            const remainLength = items.length;
-            if (remainLength > 1) {
-              lastSourceItem.setAttribute("opacity", 1);
-              for (let i = remainLength - 1; i >= 0 && intersect$1(items[i], lastSourceItem, sep); i--) items[i].setAttribute("opacity", 0);
-            }
-          }
-        }
+        } while (items.length >= 3 && hasOverlap$1(items, sep));
+        const shouldCheck = (length, visibility) => length < 3 || visibility,
+          checkFirst = shouldCheck(items.length, config.firstVisible);
+        let checkLast = shouldCheck(items.length, config.lastVisible);
+        const firstSourceItem = source[0],
+          lastSourceItem = last(source);
+        textIntersect(firstSourceItem, lastSourceItem, sep) && (lastSourceItem.setAttribute("opacity", 0), checkLast = !1), forceItemVisible$1(firstSourceItem, items, checkFirst, item => textIntersect(item, firstSourceItem, sep)), forceItemVisible$1(lastSourceItem, items, checkLast, item => textIntersect(item, lastSourceItem, sep) || !(!checkFirst || item === firstSourceItem) && textIntersect(item, firstSourceItem, sep), !0);
       }
       source.forEach(item => {
         item.setAttribute("visible", !!item.attribute.opacity);
@@ -34346,7 +34360,7 @@
     loadLineAxisComponent();
     class LineAxis extends AxisBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, LineAxis.defaultAttributes, attributes), options);
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, LineAxis.defaultAttributes, attributes), options);
       }
       _renderInner(container) {
         var _a;
@@ -34406,7 +34420,7 @@
               width: axisContainerBounds.width(),
               height: axisContainerBounds.height()
             }, panel.style));
-          bgRect.name = AXIS_ELEMENT_NAME.background, bgRect.id = this._getNodeId("background"), bgRect.states = merge$2({}, DEFAULT_STATES$1, null !== (_a = panel.state) && void 0 !== _a ? _a : {}), axisContainer.insertBefore(bgRect, axisContainer.firstChild);
+          bgRect.name = AXIS_ELEMENT_NAME.background, bgRect.id = this._getNodeId("background"), bgRect.states = merge$1({}, DEFAULT_STATES$1, null !== (_a = panel.state) && void 0 !== _a ? _a : {}), axisContainer.insertBefore(bgRect, axisContainer.firstChild);
         }
       }
       renderLine(container) {
@@ -34440,8 +34454,8 @@
           }), linePoints.push([lastStartPoint, end]), lineAttrs.points = linePoints, lineAttrs.multiSegment = !0;
         } else lineAttrs.points = [start, end];
         isEmpty(state) || (lineAttrs.state = {
-          line: merge$2({}, DEFAULT_STATES$1, state),
-          symbol: merge$2({}, DEFAULT_STATES$1, state)
+          line: merge$1({}, DEFAULT_STATES$1, state),
+          symbol: merge$1({}, DEFAULT_STATES$1, state)
         });
         const axisLineGroup = new Segment(lineAttrs);
         axisLineGroup.name = AXIS_ELEMENT_NAME.line, axisLineGroup.id = this._getNodeId("line"), container.add(axisLineGroup);
@@ -34537,9 +34551,9 @@
             textBaseline: textBaseline
           }, textStyle),
           state: {
-            text: merge$2({}, DEFAULT_STATES$1, state.text),
-            shape: merge$2({}, DEFAULT_STATES$1, state.shape),
-            panel: merge$2({}, DEFAULT_STATES$1, state.background)
+            text: merge$1({}, DEFAULT_STATES$1, state.text),
+            shape: merge$1({}, DEFAULT_STATES$1, state.shape),
+            panel: merge$1({}, DEFAULT_STATES$1, state.background)
           }
         });
         return attrs.angle = angle, shape && shape.visible && (attrs.shape = Object.assign({
@@ -34649,6 +34663,7 @@
             autoHideMethod: autoHideMethod,
             autoHideSeparation: autoHideSeparation,
             lastVisible: lastVisible,
+            firstVisible: firstVisible,
             autoWrap: autoWrap$1,
             overflowLimitLength: overflowLimitLength
           } = label;
@@ -34682,7 +34697,8 @@
             orient: orient,
             method: autoHideMethod,
             separation: autoHideSeparation,
-            lastVisible: lastVisible
+            lastVisible: lastVisible,
+            firstVisible: firstVisible
           });
         }
       }
@@ -34850,7 +34866,7 @@
     loadCircleAxisComponent();
     class CircleAxis extends AxisBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, CircleAxis.defaultAttributes, attributes));
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, CircleAxis.defaultAttributes, attributes));
       }
       renderLine(container) {
         const {
@@ -34880,7 +34896,7 @@
           }), line.style);
           lineGraphic = graphicCreator.circle(arcAttrs);
         }
-        lineGraphic.name = AXIS_ELEMENT_NAME.line, lineGraphic.id = this._getNodeId("line"), isEmpty(line.state) || (lineGraphic.states = merge$2({}, DEFAULT_STATES$1, line.state)), container.add(lineGraphic);
+        lineGraphic.name = AXIS_ELEMENT_NAME.line, lineGraphic.id = this._getNodeId("line"), isEmpty(line.state) || (lineGraphic.states = merge$1({}, DEFAULT_STATES$1, line.state)), container.add(lineGraphic);
       }
       getTitleAttribute() {
         var _a, _b, _c;
@@ -34921,9 +34937,9 @@
               textAlign: "center"
             }, textStyle),
             state: {
-              text: merge$2({}, DEFAULT_STATES$1, state.text),
-              shape: merge$2({}, DEFAULT_STATES$1, state.shape),
-              panel: merge$2({}, DEFAULT_STATES$1, state.background)
+              text: merge$1({}, DEFAULT_STATES$1, state.text),
+              shape: merge$1({}, DEFAULT_STATES$1, state.shape),
+              panel: merge$1({}, DEFAULT_STATES$1, state.background)
             }
           }),
           {
@@ -35115,13 +35131,6 @@
         nextBounds = new AABBBounds(nextLabel).expand(gap / 2);
       return prevBounds.intersects(nextBounds);
     };
-    function intersect(a, b, sep) {
-      return sep > Math.max(b.x1 - a.x2, a.x1 - b.x2, b.y1 - a.y2, a.y1 - b.y2);
-    }
-    function hasOverlap$1(items, pad) {
-      for (let b, i = 1, n = items.length, a = items[0]; i < n; a = b, ++i) if (b = items[i], intersect(a.AABBBounds, b.AABBBounds, pad)) return !0;
-      return !1;
-    }
     const MIN_TICK_GAP = 12;
     const calculateFlushPos = (basePosition, size, rangePosition, otherEnd) => rangePosition < basePosition ? Math.max(basePosition - size / 2, rangePosition) : rangePosition > basePosition ? Math.min(basePosition - size / 2, rangePosition - size) : rangePosition < otherEnd ? rangePosition : rangePosition - size;
     const getCartesianLabelBounds = (scale, domain, op) => {
@@ -36194,6 +36203,20 @@
       } else scaleTicks = getTicks(count);
       return scaleTicks;
     }
+    function forceItemVisible(sourceItem, items, check, comparator) {
+      let inverse = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : !1;
+      if (check && !items.includes(sourceItem)) {
+        let remainLength = items.length;
+        if (remainLength > 1) {
+          inverse ? items.push(sourceItem) : items.unshift(sourceItem);
+          for (let i = 0; i < remainLength; i++) {
+            const index = inverse ? remainLength - 1 - i : i;
+            if (!comparator(items[index])) break;
+            items.splice(index, 1), i--, remainLength--;
+          }
+        }
+      }
+    }
     const continuousTicks = (scale, op) => {
       var _a, _b;
       if (!isContinuous(scale.type)) return convertDomainToTickData(scale.domain());
@@ -36233,7 +36256,8 @@
           customTicks: customTicks
         }));
       }
-      if (op.sampling && ("cartesian" === op.coordinateType || "polar" === op.coordinateType && "radius" === op.axisOrientType)) {
+      const domain = scale.domain();
+      if (op.labelFirstVisible && domain[0] !== scaleTicks[0] && !scaleTicks.includes(domain[0]) && scaleTicks.unshift(domain[0]), op.labelLastVisible && domain[domain.length - 1] !== scaleTicks[scaleTicks.length - 1] && !scaleTicks.includes(domain[domain.length - 1]) && scaleTicks.push(domain[domain.length - 1]), op.sampling && scaleTicks.length > 1 && ("cartesian" === op.coordinateType || "polar" === op.coordinateType && "radius" === op.axisOrientType)) {
         const {
           labelGap = 4,
           labelFlush: labelFlush
@@ -36242,8 +36266,15 @@
           AABBBounds: bounds,
           value: scaleTicks[i]
         }));
-        const samplingMethod = breakData && breakData() ? methods$1.greedy : methods$1.parity;
+        const source = [...items],
+          firstSourceItem = source[0],
+          lastSourceItem = last(source),
+          samplingMethod = breakData && breakData() ? methods$1.greedy : methods$1.parity;
         for (; items.length >= 3 && hasOverlap$1(items, labelGap);) items = samplingMethod(items, labelGap);
+        const shouldCheck = (length, visibility) => length < 3 || visibility,
+          checkFirst = shouldCheck(items.length, op.labelFirstVisible);
+        let checkLast = shouldCheck(items.length, op.labelLastVisible);
+        textIntersect(firstSourceItem, lastSourceItem, labelGap) && items.includes(lastSourceItem) && items.length > 1 && (items.splice(items.indexOf(lastSourceItem), 1), checkLast = !1), forceItemVisible(firstSourceItem, items, checkFirst, item => textIntersect(item, firstSourceItem, labelGap)), forceItemVisible(lastSourceItem, items, checkLast, item => textIntersect(item, lastSourceItem, labelGap) || !(!checkFirst || item === firstSourceItem) && textIntersect(item, firstSourceItem, labelGap), !0);
         const ticks = items.map(item => item.value);
         ticks.length < 3 && labelFlush && (ticks.length > 1 && ticks.pop(), last(ticks) !== last(scaleTicks) && ticks.push(last(scaleTicks))), scaleTicks = ticks;
       }
@@ -36255,7 +36286,7 @@
       },
       greedy: function (items, sep) {
         let a;
-        return items.filter((b, i) => (!i || !intersect(a.AABBBounds, b.AABBBounds, sep)) && (a = b, !0));
+        return items.filter((b, i) => (!i || !textIntersect(a, b, sep)) && (a = b, !0));
       }
     };
 
@@ -36539,7 +36570,7 @@
         visible && this._renderGridByType(!0, container), this._renderGridByType(!1, container);
       }
       _renderGridByType(isSubGrid, container) {
-        const gridAttrs = merge$2({}, this.attribute, this.getGridAttribute(isSubGrid)),
+        const gridAttrs = merge$1({}, this.attribute, this.getGridAttribute(isSubGrid)),
           {
             type: type,
             items: items,
@@ -36564,7 +36595,7 @@
           const shape = graphicCreator.path(Object.assign({
             path: path,
             z: depth
-          }, isFunction$1(style) ? merge$2({}, this.skipDefault ? null : BaseGrid.defaultAttributes.style, style(item, index)) : style));
+          }, isFunction$1(style) ? merge$1({}, this.skipDefault ? null : BaseGrid.defaultAttributes.style, style(item, index)) : style));
           shape.name = `${name}-line`, shape.id = this._getNodeId(`${name}-path-${id}`), container.add(shape);
         }), depth && "line" === type && items.forEach((item, index) => {
           const {
@@ -36590,7 +36621,7 @@
               alpha: deltaX > deltaY ? (points[1].x - points[0].x > 0 ? -1 : 1) * pi$1 / 2 : 0,
               beta: deltaX < deltaY ? -pi$1 / 2 : 0,
               anchor3d: deltaX > deltaY ? [nextPoints[0].x, 0] : [0, nextPoints[0].y]
-            }, isFunction$1(style) ? merge$2({}, this.skipDefault ? null : BaseGrid.defaultAttributes.style, style(item, index)) : style));
+            }, isFunction$1(style) ? merge$1({}, this.skipDefault ? null : BaseGrid.defaultAttributes.style, style(item, index)) : style));
           shape.name = `${name}-line`, shape.id = this._getNodeId(`${name}-path-${id}`), container.add(shape);
         }), items.length > 1 && alternateColor) {
           const colors = isArray$1(alternateColor) ? alternateColor : [alternateColor, "transparent"],
@@ -36662,7 +36693,7 @@
     loadLineAxisGridComponent();
     class LineAxisGrid extends BaseGrid {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, BaseGrid.defaultAttributes, attributes), options);
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, BaseGrid.defaultAttributes, attributes), options);
       }
       _getGridPoint(gridType, point) {
         let gridPoints;
@@ -36696,7 +36727,7 @@
         let gridAttribute,
           items = [];
         if (isSubGrid) {
-          gridAttribute = merge$2({}, this.attribute, this.attribute.subGrid);
+          gridAttribute = merge$1({}, this.attribute, this.attribute.subGrid);
           const subGridItems = [],
             {
               count: subCount = 4
@@ -36766,7 +36797,7 @@
     loadCircleAxisGridComponent();
     class CircleAxisGrid extends BaseGrid {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, BaseGrid.defaultAttributes, attributes), options);
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, BaseGrid.defaultAttributes, attributes), options);
       }
       getGridPointsByValue(value) {
         const basePoint = this.getTickCoord(value),
@@ -36795,7 +36826,7 @@
           length = radius - innerRadius,
           tickSegment = this._parseTickSegment();
         if (isSubGrid) {
-          gridAttribute = merge$2({}, grid, subGrid);
+          gridAttribute = merge$1({}, grid, subGrid);
           const subGridItems = [],
             {
               count: subCount = 4
@@ -37015,7 +37046,7 @@
         this._spanCache = this.state.end - this.state.start, this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", previewData && (this._previewData = previewData), isFunction$1(previewPointsX) && (this._previewPointsX = previewPointsX), isFunction$1(previewPointsY) && (this._previewPointsY = previewPointsY), isFunction$1(previewPointsX1) && (this._previewPointsX1 = previewPointsX1), isFunction$1(previewPointsY1) && (this._previewPointsY1 = previewPointsY1);
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, DataZoom.defaultAttributes, attributes)), this.name = "dataZoom", this._previewData = [], this._activeState = !1, this._activeCache = {
           startPos: {
             x: 0,
             y: 0
@@ -37239,7 +37270,7 @@
         }, endTextAlignStyle = {
           textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
           textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
-        }), this._startText = this.maybeAddLabel(this._container, merge$2({}, restStartTextStyle, {
+        }), this._startText = this.maybeAddLabel(this._container, merge$1({}, restStartTextStyle, {
           text: startTextValue,
           x: startTextPosition.x,
           y: startTextPosition.y,
@@ -37247,7 +37278,7 @@
           pickable: !1,
           childrenPickable: !1,
           textStyle: startTextAlignStyle
-        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge$2({}, restEndTextStyle, {
+        }), `data-zoom-start-text-${position}`), this._endText = this.maybeAddLabel(this._container, merge$1({}, restEndTextStyle, {
           text: endTextValue,
           x: endTextPosition.x,
           y: endTextPosition.y,
@@ -37723,9 +37754,9 @@
         if (!1 !== this.attribute.animation) {
           const animation = isObject$2(this.attribute.animation) ? this.attribute.animation : {};
           this._animationConfig = {
-            enter: merge$2({}, this.defaultUpdateAnimation, animation, null !== (_a = this.attribute.animationEnter) && void 0 !== _a ? _a : {}),
-            exit: merge$2({}, this.defaultExitAnimation, animation, null !== (_b = this.attribute.animationExit) && void 0 !== _b ? _b : {}),
-            update: merge$2({}, this.defaultUpdateAnimation, animation, null !== (_c = this.attribute.animationUpdate) && void 0 !== _c ? _c : {})
+            enter: merge$1({}, this.defaultUpdateAnimation, animation, null !== (_a = this.attribute.animationEnter) && void 0 !== _a ? _a : {}),
+            exit: merge$1({}, this.defaultExitAnimation, animation, null !== (_b = this.attribute.animationExit) && void 0 !== _b ? _b : {}),
+            update: merge$1({}, this.defaultUpdateAnimation, animation, null !== (_c = this.attribute.animationUpdate) && void 0 !== _c ? _c : {})
           };
         }
       }
@@ -38083,8 +38114,8 @@
         line.name = "mark-common-line-line", this._line = line, container.add(line);
         const markLabel = new Tag(Object.assign(Object.assign({}, label), {
           state: {
-            panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
+            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
+            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
           }
         }));
         markLabel.name = "mark-common-line-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
@@ -38099,8 +38130,8 @@
           dy: 0
         }, label), {
           state: {
-            panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
+            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
+            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
           }
         })), this.setLabelPos());
       }
@@ -38568,7 +38599,7 @@
         MarkLine._animate && this._animationConfig && MarkLine._animate(this._line, this._label, this._animationConfig, state);
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, MarkLine.defaultAttributes, attributes)), this.name = "markLine";
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkLine.defaultAttributes, attributes)), this.name = "markLine";
       }
       getPointAttrByPosition(position) {
         var _a;
@@ -38630,9 +38661,9 @@
           multiSegment: multiSegment,
           pickable: !1,
           state: {
-            line: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
-            startSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
-            endSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
+            line: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
+            startSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
+            endSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
           }
         });
       }
@@ -38654,9 +38685,9 @@
           mainSegmentIndex: mainSegmentIndex,
           multiSegment: multiSegment,
           state: {
-            line: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
-            startSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
-            endSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
+            line: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
+            startSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
+            endSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
           }
         });
       }
@@ -38690,7 +38721,7 @@
         return this._label;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, MarkArea.defaultAttributes, attributes)), this.name = "markArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArea.defaultAttributes, attributes)), this.name = "markArea", this.defaultUpdateAnimation = DefaultUpdateMarkAreaAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation;
       }
       getPointAttrByPosition(position) {
         const {
@@ -38752,11 +38783,11 @@
           area = graphicCreator.polygon(Object.assign({
             points: points
           }, areaStyle));
-        area.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "mark-area-polygon", this._area = area, container.add(area);
+        area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "mark-area-polygon", this._area = area, container.add(area);
         const markLabel = new Tag(Object.assign(Object.assign({}, label), {
           state: {
-            panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
+            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
+            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
           }
         }));
         markLabel.name = "mark-area-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
@@ -38770,13 +38801,13 @@
         } = this.attribute;
         this._area && (this._area.setAttributes(Object.assign({
           points: points
-        }, areaStyle)), this._area.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && this._label.setAttributes(Object.assign(Object.assign({
+        }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && this._label.setAttributes(Object.assign(Object.assign({
           dx: 0,
           dy: 0
         }, label), {
           state: {
-            panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
+            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
+            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
           }
         })), this.setLabelPos();
       }
@@ -38802,7 +38833,7 @@
         MarkArcLine._animate && this._animationConfig && MarkArcLine._animate(this._line, this._label, this._animationConfig, state);
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, MarkArcLine.defaultAttributes, attributes, {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcLine.defaultAttributes, attributes, {
           label: {
             autoRotate: !0
           }
@@ -38873,9 +38904,9 @@
           endSymbol: endSymbol,
           lineStyle: lineStyle,
           state: {
-            line: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
-            startSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
-            endSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
+            line: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
+            startSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
+            endSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
           }
         });
       }
@@ -38899,9 +38930,9 @@
           endSymbol: endSymbol,
           lineStyle: lineStyle,
           state: {
-            line: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
-            startSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
-            endSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
+            line: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
+            startSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
+            endSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
           }
         });
       }
@@ -38926,7 +38957,7 @@
         return this._label;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, MarkArcArea.defaultAttributes, attributes, {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkArcArea.defaultAttributes, attributes, {
           label: {
             autoRotate: !0
           }
@@ -39028,11 +39059,11 @@
             startAngle: startAngle,
             endAngle: endAngle
           }, areaStyle));
-        area.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "polar-mark-area-area", this._area = area, container.add(area);
+        area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area), area.name = "polar-mark-area-area", this._area = area, container.add(area);
         const markLabel = new Tag(Object.assign(Object.assign({}, label), {
           state: {
-            panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
+            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
+            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
           }
         }));
         markLabel.name = "mark-area-label", this._label = markLabel, container.add(markLabel), this.setLabelPos();
@@ -39055,13 +39086,13 @@
           outerRadius: outerRadius,
           startAngle: startAngle,
           endAngle: endAngle
-        }, areaStyle)), this._area.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && (this._label.setAttributes(Object.assign(Object.assign({
+        }, areaStyle)), this._area.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.area)), this._label && (this._label.setAttributes(Object.assign(Object.assign({
           dx: 0,
           dy: 0
         }, label), {
           state: {
-            panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
-            text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
+            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.labelBackground),
+            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.label)
           }
         })), this.setLabelPos());
       }
@@ -39080,7 +39111,7 @@
         MarkPoint._animate && this._animationConfig && MarkPoint._animate([this._line, this._decorativeLine], this._item, this._animationConfig, state);
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, MarkPoint.defaultAttributes, attributes)), this.name = "markPoint", this.defaultUpdateAnimation = DefaultUpdateMarkPointAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation, this._isArcLine = !1, this._isStraightLine = !1;
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, MarkPoint.defaultAttributes, attributes)), this.name = "markPoint", this.defaultUpdateAnimation = DefaultUpdateMarkPointAnimation, this.defaultExitAnimation = DefaultExitMarkerAnimation, this._isArcLine = !1, this._isStraightLine = !1;
       }
       setLabelPos() {}
       getTextAlignAttr(autoRotate, offsetX, offsetY, lineEndAngle, itemPosition) {
@@ -39111,17 +39142,17 @@
           item.setAttributes(Object.assign(Object.assign({}, textStyle), {
             textStyle: Object.assign(Object.assign({}, this.getTextAlignAttr(autoRotate, offsetX, offsetY, lineEndAngle, null !== (_b = itemContent.position) && void 0 !== _b ? _b : "end")), textStyle.textStyle),
             state: {
-              panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.textBackground),
-              text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.text)
+              panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.textBackground),
+              text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.text)
             }
           }));
         } else "richText" === itemType ? (item.setAttributes({
           dx: this.getItemDx(item, positionType, richTextStyle) + (richTextStyle.dx || 0),
           dy: this.getItemDy(item, positionType, richTextStyle) + (richTextStyle.dy || 0)
-        }), item.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.richText)) : "image" === itemType && (item.setAttributes({
+        }), item.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.richText)) : "image" === itemType && (item.setAttributes({
           dx: this.getItemDx(item, positionType, imageStyle) + (imageStyle.dx || 0),
           dy: this.getItemDy(item, positionType, imageStyle) + (imageStyle.dy || 0)
-        }), item.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.image));
+        }), item.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.image));
         const itemAngle = isPostiveXAxis(lineEndAngle) ? lineEndAngle : lineEndAngle - Math.PI;
         item.setAttributes({
           x: newItemPosition.x + (itemRefOffsetX || 0),
@@ -39151,12 +39182,12 @@
             renderCustomCallback: renderCustomCallback
           } = itemContent;
         let item;
-        return "symbol" === type ? (item = graphicCreator.symbol(Object.assign(Object.assign({}, newItemPosition), symbolStyle)), item.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.symbol)) : "text" === type ? item = new Tag(Object.assign(Object.assign({}, newItemPosition), {
+        return "symbol" === type ? (item = graphicCreator.symbol(Object.assign(Object.assign({}, newItemPosition), symbolStyle)), item.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.symbol)) : "text" === type ? item = new Tag(Object.assign(Object.assign({}, newItemPosition), {
           state: {
-            panel: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.textBackground),
-            text: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.text)
+            panel: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.textBackground),
+            text: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.text)
           }
-        })) : "richText" === type ? (item = graphicCreator.richtext(Object.assign(Object.assign({}, newItemPosition), richTextStyle)), item.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.richText)) : "image" === type ? (item = graphicCreator.image(Object.assign(Object.assign({}, newItemPosition), imageStyle)), item.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.image)) : "custom" === type && renderCustomCallback && (item = renderCustomCallback(), item.states = merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.customMark)), item.name = `mark-point-${type}`, this.setItemAttributes(item, itemContent, newPosition, newItemPosition, type), item;
+        })) : "richText" === type ? (item = graphicCreator.richtext(Object.assign(Object.assign({}, newItemPosition), richTextStyle)), item.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.richText)) : "image" === type ? (item = graphicCreator.image(Object.assign(Object.assign({}, newItemPosition), imageStyle)), item.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.image)) : "custom" === type && renderCustomCallback && (item = renderCustomCallback(), item.states = merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.customMark)), item.name = `mark-point-${type}`, this.setItemAttributes(item, itemContent, newPosition, newItemPosition, type), item;
       }
       getItemLineAttr(itemLine, newPosition, newItemPosition) {
         let points = [],
@@ -39228,9 +39259,9 @@
           lineStyle: lineStyle,
           visible: itemLine.visible,
           state: {
-            line: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
-            startSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
-            endSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
+            line: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
+            startSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
+            endSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
           }
         })), this._container.add(this._line);
       }
@@ -39252,9 +39283,9 @@
             lineStyle: lineStyle,
             visible: itemLine.visible,
             state: {
-              line: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
-              startSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
-              endSymbol: merge$2({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
+              line: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.line),
+              startSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineStartSymbol),
+              endSymbol: merge$1({}, DEFAULT_STATES$2, null == state ? void 0 : state.lineEndSymbol)
             }
           })) : this.reDrawLine(itemLine, pointsAttr);
         }
@@ -39292,7 +39323,7 @@
             }]
           }, lineStyle), {
             visible: visible
-          })), this._decorativeLine.states = merge$2({}, DEFAULT_STATES$2, null === (_a = this.attribute.state) || void 0 === _a ? void 0 : _a.line);
+          })), this._decorativeLine.states = merge$1({}, DEFAULT_STATES$2, null === (_a = this.attribute.state) || void 0 === _a ? void 0 : _a.line);
         }
       }
       setTargetItemAttributes(targetItem, position) {
@@ -39302,7 +39333,7 @@
           y: position.y,
           visible: null !== (_a = targetItem.visible) && void 0 !== _a && _a,
           size: targetItem.size
-        }, targetItem.style)), this._targetItem.states = merge$2({}, DEFAULT_STATES$2, null === (_b = this.attribute.state) || void 0 === _b ? void 0 : _b.targetItem));
+        }, targetItem.style)), this._targetItem.states = merge$1({}, DEFAULT_STATES$2, null === (_b = this.attribute.state) || void 0 === _b ? void 0 : _b.targetItem));
       }
       setAllOfItemsAttr(newPosition, newItemPosition) {
         var _a;
@@ -39478,7 +39509,7 @@
         return this._current;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Pager.defaultAttributes, attributes)), this.name = "pager", this._current = 1, this._onHover = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Pager.defaultAttributes, attributes)), this.name = "pager", this._current = 1, this._onHover = e => {
           const target = e.target;
           target.hasState("disable") || target.addState("hover");
         }, this._onUnHover = e => {
@@ -39720,7 +39751,7 @@
     loadDiscreteLegendComponent();
     let DiscreteLegend$1 = class DiscreteLegend extends LegendBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, DiscreteLegend.defaultAttributes, attributes)), this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, this._itemHeight = 0, this._itemMaxWidth = 0, this._onHover = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, DiscreteLegend.defaultAttributes, attributes)), this.name = "discreteLegend", this._itemsContainer = null, this._itemHeightByUser = void 0, this._itemHeight = 0, this._itemMaxWidth = 0, this._onHover = e => {
           const target = e.target;
           if (target && target.name && target.name.startsWith(LEGEND_ELEMENT_NAME.item)) {
             const legendItem = target.delegate;
@@ -39998,8 +40029,8 @@
             this._autoEllipsis(autoEllipsisStrategy, layoutWidth, labelShape, valueShape), valueAttr.alignRight ? valueShape.setAttributes({
               textAlign: "right",
               x: this._itemWidthByUser - shapeSize / 2 - parsedPadding[1] - parsedPadding[3] - focusSpace - valueSpace
-            }) : valueShape.setAttribute("x", valueSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
-          } else valueShape.setAttribute("x", valueSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
+            }) : valueShape.setAttribute("x", labelSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
+          } else valueShape.setAttribute("x", labelSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2));
           focusStartX = valueSpace + (valueShape.AABBBounds.empty() ? 0 : valueShape.AABBBounds.x2), innerGroup.add(valueShape);
         } else this._itemWidthByUser ? (labelShape.setAttribute("maxLineWidth", this._itemWidthByUser - parsedPadding[1] - parsedPadding[3] - shapeSize - shapeSpace - focusSpace), focusStartX = labelSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2)) : focusStartX = labelSpace + (labelShape.AABBBounds.empty() ? 0 : labelShape.AABBBounds.x2);
         focusShape && (focusShape.setAttribute("x", focusStartX), innerGroup.add(focusShape));
@@ -40030,7 +40061,7 @@
         return this._itemContext.isHorizontal ? new Pager(Object.assign(Object.assign({
           layout: 1 === maxRow ? "horizontal" : "vertical",
           total: estimateTotal(this._itemContext.pages)
-        }, merge$2({
+        }, merge$1({
           handler: {
             preShape: "triangleUp",
             nextShape: "triangleDown"
@@ -40065,9 +40096,8 @@
           disableTriggerEvent: disableTriggerEvent
         }));
       }
-      _updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight) {
+      _updatePositionOfPager(renderStartY, compWidth, compHeight) {
         const {
-            maxHeight: maxHeight,
             pager: pager
           } = this.attribute,
           {
@@ -40078,14 +40108,14 @@
         if (this._pagerComponent.setTotal(totalPage), isHorizontal) {
           let y;
           y = "start" === position ? renderStartY : "end" === position ? renderStartY + compHeight - this._pagerComponent.AABBBounds.height() / 2 : renderStartY + compHeight / 2 - this._pagerComponent.AABBBounds.height() / 2, this._pagerComponent.setAttributes({
-            x: contentWidth,
+            x: compWidth - this._pagerComponent.AABBBounds.width(),
             y: y
           });
         } else {
           let x;
           x = "start" === position ? 0 : "end" === position ? compWidth - this._pagerComponent.AABBBounds.width() : (compWidth - this._pagerComponent.AABBBounds.width()) / 2, this._pagerComponent.setAttributes({
             x: x,
-            y: maxHeight - this._pagerComponent.AABBBounds.height()
+            y: compHeight - this._pagerComponent.AABBBounds.height()
           });
         }
       }
@@ -40114,11 +40144,10 @@
             const {
               value: value
             } = e.detail;
-            let newPage = value[0] * this._itemContext.totalPage;
-            return pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1, newPage;
+            let newPage;
+            return 0 === value[0] ? newPage = 1 : 1 === value[1] ? newPage = this._itemContext.totalPage : (newPage = value[0] * this._itemContext.totalPage, pager.scrollByPosition ? newPage += 1 : newPage = Math.floor(newPage) + 1), newPage;
           } : e => e.detail.current,
           onScroll = e => {
-            e.preventDefault();
             const scrollComponent = this._pagerComponent,
               preScrollRange = scrollComponent.getScrollRange(),
               {
@@ -40147,7 +40176,7 @@
         if (this._itemContext.isScrollbar) {
           if (this._pagerComponent.addEventListener("scrollDrag", onPaging), this._pagerComponent.addEventListener("scrollUp", onPaging), this.attribute.pager.roamScroll) {
             const THROTTLE_TIME = 50;
-            this.addEventListener("wheel", throttle(onScroll, THROTTLE_TIME));
+            this.addEventListener("wheel", e => e.nativeEvent.preventDefault()), this.addEventListener("wheel", throttle(onScroll, THROTTLE_TIME));
           }
         } else this._pagerComponent.addEventListener("toPrev", onPaging), this._pagerComponent.addEventListener("toNext", onPaging);
       }
@@ -40195,7 +40224,7 @@
             }), startX += spaceCol + width;
           }), this._itemContext.startX = startX, this._itemContext.startY = startY, this._itemContext.pages = pages;
           const total = Math.ceil(pages / maxRow);
-          this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(renderStartY, compWidth, compHeight);
         } else {
           if (compWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, compHeight = maxHeight, contentWidth = compWidth, comp = this._createPager(compStyle), this._pagerComponent = comp, this._innerView.add(comp), contentHeight = maxHeight - comp.AABBBounds.height() - pagerSpace - renderStartY, contentHeight <= 0) return this._innerView.removeChild(comp), !1;
           itemsContainer.getChildren().forEach((item, index) => {
@@ -40208,7 +40237,7 @@
             }), startY += spaceRow + height;
           });
           const total = Math.ceil(pages / maxCol);
-          this._itemContext.totalPage = total, this._updatePositionOfPager(contentWidth, contentHeight, renderStartY, compWidth, compHeight);
+          this._itemContext.totalPage = total, this._updatePositionOfPager(renderStartY, compWidth, compHeight);
         }
         defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(defaultCurrent - 1) * (compHeight + spaceRow)) : itemsContainer.setAttribute("x", -(defaultCurrent - 1) * (compWidth + spaceCol)));
         const clipGroup = graphicCreator.group({
@@ -40310,7 +40339,7 @@
       }
       _appendDataToShape(shape, name, data, delegateShape) {
         let states = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-        shape.name = name, shape.data = data, shape.delegate = delegateShape, shape.states = merge$2({}, DEFAULT_STATES, states);
+        shape.name = name, shape.data = data, shape.delegate = delegateShape, shape.states = merge$1({}, DEFAULT_STATES, states);
       }
       _dispatchLegendEvent(eventName, legendItem, event) {
         const currentSelectedItems = this._getSelectedLegends();
@@ -40331,6 +40360,9 @@
           config.state[key] && (isFunction$1(config.state[key]) ? newConfig.state[key] = config.state[key](item, isSelected, index, items) : newConfig.state[key] = config.state[key]);
         })), newConfig;
       }
+      release() {
+        super.release(), this.removeAllEventListeners();
+      }
     };
     DiscreteLegend$1.defaultAttributes = {
       layout: "horizontal",
@@ -40451,7 +40483,7 @@
         return this._tooltipShape;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Slider.defaultAttributes, attributes)), this.name = "slider", this._isHorizontal = !0, this._startHandler = null, this._endHandler = null, this._startHandlerText = null, this._endHandlerText = null, this._currentHandler = null, this._currentValue = {}, this._onTooltipShow = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Slider.defaultAttributes, attributes)), this.name = "slider", this._isHorizontal = !0, this._startHandler = null, this._endHandler = null, this._startHandlerText = null, this._endHandlerText = null, this._currentHandler = null, this._currentValue = {}, this._onTooltipShow = e => {
           this._isChanging || this._tooltipState && this._tooltipState.isActive || (this._tooltipState ? this._tooltipState.isActive = !0 : this._tooltipState = {
             isActive: !0
           }, this._onTooltipUpdate(e), this._dispatchTooltipEvent("sliderTooltipShow"));
@@ -41052,7 +41084,7 @@
     loadColorContinuousLegendComponent();
     class ColorContinuousLegend extends LegendBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, ColorContinuousLegend.defaultAttributes, attributes)), this.name = "colorLegend", this._onSliderToolipChange = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, ColorContinuousLegend.defaultAttributes, attributes)), this.name = "colorLegend", this._onSliderToolipChange = e => {
           const tooltipShape = this._slider.tooltipShape;
           if (tooltipShape && e.detail && !isNil$1(e.detail.value)) {
             const color = this._colorScale.scale(e.detail.value);
@@ -41255,7 +41287,7 @@
     loadSizeContinuousLegendComponent();
     class SizeContinuousLegend extends LegendBase {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, SizeContinuousLegend.defaultAttributes, attributes)), this.name = "sizeLegend", this._onSliderChange = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, SizeContinuousLegend.defaultAttributes, attributes)), this.name = "sizeLegend", this._onSliderChange = e => {
           this.dispatchEvent(e);
         }, this._onSliderToolipChange = e => {
           this.dispatchEvent(e);
@@ -41371,7 +41403,7 @@
     loadTitleComponent();
     let Title$1 = class Title extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Title.defaultAttributes, attributes)), this.name = "title";
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Title.defaultAttributes, attributes)), this.name = "title";
       }
       render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
@@ -41594,7 +41626,7 @@
       }
       _renderText(group, title, limit, limitRatio, themePath, graphicName) {
         if (!1 !== title.visible) {
-          const titleStyle = merge$2({}, get$1(DEFAULT_INDICATOR_THEME, themePath), title.style, {
+          const titleStyle = merge$1({}, get$1(DEFAULT_INDICATOR_THEME, themePath), title.style, {
             visible: title.visible
           });
           titleStyle.lineHeight = isValid$1(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize, title.formatMethod && (titleStyle._originText = titleStyle.text, titleStyle.text = title.formatMethod(titleStyle.text, titleStyle));
@@ -41712,7 +41744,7 @@
 
     class Controller extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Controller.defaultAttributes, attributes)), this._isPaused = !0, this.updateAttributes = () => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Controller.defaultAttributes, attributes)), this._isPaused = !0, this.updateAttributes = () => {
           this._startAttr = {
             style: Object.assign(Object.assign(Object.assign({
               symbolType: iconPlay
@@ -41898,7 +41930,7 @@
         return this._dataIndex;
       }
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, BasePlayer.defaultAttributes, attributes)), this._data = [], this._dataIndex = 0, this._layoutInfo = {}, this._updateSliderAttrs = () => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, BasePlayer.defaultAttributes, attributes)), this._data = [], this._dataIndex = 0, this._layoutInfo = {}, this._updateSliderAttrs = () => {
           var _a, _b;
           let handlerSize;
           isValidNumber$1(this._handlerStyle.size) ? handlerSize = this._handlerStyle.size : this._handlerStyle.size && this._handlerStyle.size.length && (handlerSize = max$1(this._handlerStyle.size[0], this._handlerStyle.size[1]));
@@ -42110,7 +42142,7 @@
     loadDiscretePlayerComponent();
     class DiscretePlayer extends BasePlayer {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, attributes)), this._activeIndex = -1, this._isReachEnd = !1, this._initAttributes = () => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, attributes)), this._activeIndex = -1, this._isReachEnd = !1, this._initAttributes = () => {
           var _a, _b, _c;
           super._initAttributes(), this._alternate = null !== (_a = this.attribute.alternate) && void 0 !== _a && _a, this._interval = null !== (_b = this.attribute.interval) && void 0 !== _b ? _b : 1e3, this._direction = null !== (_c = this.attribute.direction) && void 0 !== _c ? _c : DirectionEnum.Default;
         }, this._initDataIndex = () => {
@@ -42307,7 +42339,7 @@
     loadBrushComponent();
     let Brush$1 = class Brush extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._isDrawedBeforeEnd = !1, this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._onBrushStart = e => {
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Brush.defaultAttributes, attributes)), this.name = "brush", this._activeDrawState = !1, this._cacheDrawPoints = [], this._isDrawedBeforeEnd = !1, this._activeMoveState = !1, this._operatingMaskMoveDx = 0, this._operatingMaskMoveDy = 0, this._operatingMaskMoveRangeX = [-1 / 0, 1 / 0], this._operatingMaskMoveRangeY = [-1 / 0, 1 / 0], this._brushMaskAABBBoundsDict = {}, this._onBrushStart = e => {
           var _a;
           if (this._outOfInteractiveRange(e)) return;
           e.stopPropagation();
@@ -42545,10 +42577,10 @@
       const shapeList = [target.shape, ...sources.map(s => null == s ? void 0 : s.shape)],
         keyList = [target.key, ...sources.map(s => null == s ? void 0 : s.key)],
         valueList = [target.value, ...sources.map(s => null == s ? void 0 : s.value)];
-      return merge$2(target, ...sources, {
-        shape: shapeList.every(isNil$1) ? void 0 : merge$2({}, ...shapeList),
-        key: keyList.every(isNil$1) ? void 0 : merge$2({}, ...keyList),
-        value: valueList.every(isNil$1) ? void 0 : merge$2({}, ...valueList)
+      return merge$1(target, ...sources, {
+        shape: shapeList.every(isNil$1) ? void 0 : merge$1({}, ...shapeList),
+        key: keyList.every(isNil$1) ? void 0 : merge$1({}, ...keyList),
+        value: valueList.every(isNil$1) ? void 0 : merge$1({}, ...valueList)
       });
     };
     const getRichTextAttribute = attr => {
@@ -42653,7 +42685,7 @@
     loadTooltipComponent();
     let Tooltip$1 = class Tooltip extends AbstractComponent {
       constructor(attributes, options) {
-        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$2({}, Tooltip.defaultAttributes, attributes), options), this.name = "tooltip";
+        super((null == options ? void 0 : options.skipDefault) ? attributes : merge$1({}, Tooltip.defaultAttributes, attributes), options), this.name = "tooltip";
       }
       render() {
         var _a;
@@ -42679,7 +42711,7 @@
           y: padding[0]
         }, "group");
         const titleAttr = Tooltip.getTitleAttr(this.attribute);
-        this._tooltipTitleSymbol = this._tooltipTitleContainer.createOrUpdateChild("tooltip-title-shape", merge$2({
+        this._tooltipTitleSymbol = this._tooltipTitleContainer.createOrUpdateChild("tooltip-title-shape", merge$1({
           symbolType: "circle"
         }, titleAttr.shape, {
           visible: isVisible(titleAttr) && isVisible(titleAttr.shape)
@@ -47915,28 +47947,30 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       }
       addBothStateOfElements(statedElements, state, reverseState) {
         this._marks.forEach(mark => {
+          var _a;
           const hasReverse = reverseState && this._stateMarks[reverseState] && this._stateMarks[reverseState].includes(mark),
             hasState = state && this._stateMarks[state] && this._stateMarks[state].includes(mark);
-          (hasReverse || hasState) && mark.elements.forEach(el => {
+          (hasReverse || hasState) && (null === (_a = mark.elements) || void 0 === _a || _a.forEach(el => {
             statedElements && statedElements.includes(el) ? hasState && el.addState(state) : hasReverse && el.addState(reverseState);
-          });
+          }));
         });
       }
       addStateOfElements(statedElements, state) {
         this._marks.forEach(mark => {
+          var _a;
           const hasState = state && this._stateMarks[state] && this._stateMarks[state].includes(mark);
-          hasState && mark.elements.forEach(el => {
+          hasState && (null === (_a = mark.elements) || void 0 === _a || _a.forEach(el => {
             statedElements && statedElements.includes(el) && hasState && el.addState(state);
-          });
+          }));
         });
       }
       clearAllStates(state, reverseState) {
         this._statedElements && this._statedElements.length && this._marks.forEach(mark => {
-          reverseState && this._stateMarks[reverseState] && this._stateMarks[reverseState].includes(mark) && mark.elements.forEach(el => {
+          mark && mark.elements && (reverseState && this._stateMarks[reverseState] && this._stateMarks[reverseState].includes(mark) && mark.elements.forEach(el => {
             el.removeState(reverseState);
           }), state && this._stateMarks[state] && this._stateMarks[state].includes(mark) && mark.elements.forEach(el => {
             this._statedElements.includes(el) && el.removeState(state);
-          });
+          }));
         });
       }
     }
@@ -52169,28 +52203,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const generateLineAxisAttributes = (scale, theme, addition, tickCount) => {
       var _a, _b, _c, _d;
       const axisTheme = null !== (_b = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.axis) && void 0 !== _b ? _b : {};
-      if (!scale) return merge$2({}, axisTheme, null != addition ? addition : {});
+      if (!scale) return merge$1({}, axisTheme, null != addition ? addition : {});
       const items = [(null !== (_d = null === (_c = scale.tickData) || void 0 === _c ? void 0 : _c.call(scale, tickCount)) && void 0 !== _d ? _d : []).map(tick => ({
         id: tick.index,
         label: tick.tick,
         value: tick.value,
         rawValue: tick.tick
       }))];
-      return merge$2({}, axisTheme, {
+      return merge$1({}, axisTheme, {
         items: items
       }, null != addition ? addition : {});
     };
     const generateCircleAxisAttributes = (scale, theme, addition, tickCount) => {
       var _a, _b, _c, _d;
       const axisTheme = null !== (_b = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.circleAxis) && void 0 !== _b ? _b : {};
-      if (!scale) return merge$2({}, axisTheme, null != addition ? addition : {});
+      if (!scale) return merge$1({}, axisTheme, null != addition ? addition : {});
       const items = [(null !== (_d = null === (_c = scale.tickData) || void 0 === _c ? void 0 : _c.call(scale, tickCount)) && void 0 !== _d ? _d : []).map(tick => ({
         id: tick.index,
         label: tick.tick,
         value: tick.value,
         rawValue: tick.tick
       }))];
-      return merge$2({}, axisTheme, {
+      return merge$1({}, axisTheme, {
         items: items
       }, null != addition ? addition : {});
     };
@@ -52236,7 +52270,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return this.spec.axisType = axisType, this._axisComponentType = null, this._prepareRejoin(), this.commit(), this;
       }
       addGraphicItem(attrs, groupKey) {
-        const initialAttributes = merge$2({
+        const initialAttributes = merge$1({
             x: 0,
             y: 0,
             start: {
@@ -52368,7 +52402,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           if (data && data.length > 0) data.forEach((d, index) => {
             if (mark.elements[index]) {
               const attributes = invokeEncoder(encoder, d, mark.elements[index], labelParameters);
-              merge$2(d, themeDatum, attributes);
+              merge$1(d, themeDatum, attributes);
             }
           });else {
             const mergeAttributes = (attributes, themeDatum) => {
@@ -52376,7 +52410,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                   data: labelData
                 } = attributes,
                 restAttribute = __rest(attributes, ["data"]);
-              return Object.assign(Object.assign({}, merge$2({}, themeDatum, restAttribute)), {
+              return Object.assign(Object.assign({}, merge$1({}, themeDatum, restAttribute)), {
                 data: labelData
               });
             };
@@ -52393,13 +52427,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
           }
           const graphicItemName = null === (_e = mark.graphicItem) || void 0 === _e ? void 0 : _e.name,
-            result = merge$2({}, currentTheme, {
+            result = merge$1({}, currentTheme, {
               baseMarkGroupName: graphicItemName,
               getBaseMarks: () => mark.elements.map(element => element.getGraphicItem())
             }, null != addition ? addition : {});
           return result.data = null != data ? data : currentTheme.data, result;
         }).filter(label => !isNil$1(label)),
-        result = merge$2({}, labelTheme, {
+        result = merge$1({}, labelTheme, {
           size: groupSize
         });
       return result.dataLabels = dataLabels, result;
@@ -52463,28 +52497,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const generateLineAxisGridAttributes = (scale, theme, addition, tickCount) => {
       var _a, _b, _c, _d;
       const gridTheme = null !== (_b = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.grid) && void 0 !== _b ? _b : {};
-      if (!scale) return merge$2({}, gridTheme, null != addition ? addition : {});
+      if (!scale) return merge$1({}, gridTheme, null != addition ? addition : {});
       const items = (null !== (_d = null === (_c = scale.tickData) || void 0 === _c ? void 0 : _c.call(scale, tickCount)) && void 0 !== _d ? _d : []).map(tick => ({
         id: tick.index,
         label: tick.tick,
         value: tick.value,
         rawValue: tick.tick
       }));
-      return merge$2({}, gridTheme, {
+      return merge$1({}, gridTheme, {
         items: items
       }, null != addition ? addition : {});
     };
     const generateCircleAxisGridAttributes = (scale, theme, addition, tickCount) => {
       var _a, _b, _c, _d;
       const gridTheme = null !== (_b = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.circleGrid) && void 0 !== _b ? _b : {};
-      if (!scale) return merge$2({}, gridTheme, null != addition ? addition : {});
+      if (!scale) return merge$1({}, gridTheme, null != addition ? addition : {});
       const items = (null !== (_d = null === (_c = scale.tickData) || void 0 === _c ? void 0 : _c.call(scale, tickCount)) && void 0 !== _d ? _d : []).map(tick => ({
         id: tick.index,
         label: tick.tick,
         value: tick.value,
         rawValue: tick.tick
       }));
-      return merge$2({}, gridTheme, {
+      return merge$1({}, gridTheme, {
         items: items
       }, null != addition ? addition : {});
     };
@@ -52524,7 +52558,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return this.setFunctionSpec(baseValue, "baseValue");
       }
       addGraphicItem(attrs, groupKey) {
-        const initialAttributes = merge$2({
+        const initialAttributes = merge$1({
             x: 0,
             y: 0,
             start: {
@@ -54203,7 +54237,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           totalTime: typeConfig.totalTime,
           oneByOne: null !== (_b = typeConfig.oneByOne) && void 0 !== _b ? _b : DefaultAnimationOneByOne,
           loop: null !== (_c = typeConfig.loop) && void 0 !== _c ? _c : DefaultAnimationLoop,
-          controlOptions: merge$2({}, DefaultAnimationControlOptions, null !== (_d = typeConfig.controlOptions) && void 0 !== _d ? _d : {}),
+          controlOptions: merge$1({}, DefaultAnimationControlOptions, null !== (_d = typeConfig.controlOptions) && void 0 !== _d ? _d : {}),
           timeSlices: [{
             duration: null !== (_e = typeConfig.duration) && void 0 !== _e ? _e : DefaultAnimationDuration,
             delay: null !== (_f = typeConfig.delay) && void 0 !== _f ? _f : DefaultAnimationDelay,
@@ -54225,7 +54259,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         totalTime: animationConfig.totalTime,
         oneByOne: null !== (_k = animationConfig.oneByOne) && void 0 !== _k ? _k : DefaultAnimationOneByOne,
         loop: null !== (_l = animationConfig.loop) && void 0 !== _l ? _l : DefaultAnimationLoop,
-        controlOptions: merge$2({}, DefaultAnimationControlOptions, null !== (_m = animationConfig.controlOptions) && void 0 !== _m ? _m : {}),
+        controlOptions: merge$1({}, DefaultAnimationControlOptions, null !== (_m = animationConfig.controlOptions) && void 0 !== _m ? _m : {}),
         timeSlices: formattedTimeSlices.map(timeSlice => {
           var _a, _b;
           return {
@@ -55749,7 +55783,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initMapDataSet();
         const dataView = new DataView(mapDataSet);
-        const options = merge$2({}, { centroid: true, simplify: false }, option);
+        const options = merge$1({}, { centroid: true, simplify: false }, option);
         if (option.type === 'topojson') {
             dataView.parse(source, {
                 type: 'topojson',
@@ -56504,7 +56538,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             this._children.push(mark);
             this._markNameMap[mark.name] = mark;
-            this._infoMap.set(mark, merge$2({}, MarkSet.defaultMarkInfo, markInfo));
+            this._infoMap.set(mark, merge$1({}, MarkSet.defaultMarkInfo, markInfo));
         }
         removeMark(markName) {
             const index = this._children.findIndex(m => m.name === markName);
@@ -57106,7 +57140,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!newState) {
                 return;
             }
-            merge$2(this._stateMap, newState);
+            merge$1(this._stateMap, newState);
             this.compile(newState);
             if (noRender) {
                 return;
@@ -57810,13 +57844,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setLayoutStartPosition(pos) {
             return this._layout
                 ? this._layout.setLayoutStartPosition(pos)
-                : (this._layoutStartPos = merge$2(this._layoutStartPos, pos));
+                : (this._layoutStartPos = merge$1(this._layoutStartPos, pos));
         }
         getLayoutRect() {
             return this._layout ? this._layout.getLayoutRect() : this._layoutRect;
         }
         setLayoutRect(rect, levelMap) {
-            return this._layout ? this._layout.setLayoutRect(rect) : (this._lastLayoutRect = merge$2(this._layoutRect, rect));
+            return this._layout ? this._layout.setLayoutRect(rect) : (this._lastLayoutRect = merge$1(this._layoutRect, rect));
         }
         getLastComputeOutBounds() {
             var _a;
@@ -60255,7 +60289,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return userUpdateOptions
                     ? Object.assign(Object.assign({}, res), userUpdateOptions) : res;
             };
-            this._option = merge$2(this._option, { animation: spec.animation !== false }, options);
+            this._option = merge$1(this._option, { animation: spec.animation !== false }, options);
             this._onError = (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError;
             const _j = this._option, { dom, renderCanvas, mode, stage, poptip } = _j, restOptions = __rest$e(_j, ["dom", "renderCanvas", "mode", "stage", "poptip"]);
             const isTrueBrowseEnv = isTrueBrowser(mode);
@@ -60913,33 +60947,38 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._chart.clearHovered();
         }
         _updateCurrentTheme(nextThemeName) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c;
             const optionTheme = this._option.theme;
             const specTheme = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.theme;
             const chartType = (_b = this._spec) === null || _b === void 0 ? void 0 : _b.type;
             if (nextThemeName) {
                 this._currentThemeName = nextThemeName;
             }
+            const processThemeByChartType = (type, theme) => {
+                var _a;
+                if ((_a = theme.chart) === null || _a === void 0 ? void 0 : _a[type]) {
+                    theme = mergeTheme({}, theme, theme.chart[type]);
+                }
+                return theme;
+            };
             let currentTheme;
             if (!isEmpty(optionTheme) || !isEmpty(specTheme)) {
                 if ((isString$1(optionTheme) && (!specTheme || isString$1(specTheme))) ||
                     (isString$1(specTheme) && (!optionTheme || isString$1(optionTheme)))) {
-                    currentTheme = getThemeObject(this._currentThemeName, true);
-                    const finalTheme = mergeTheme({}, currentTheme, (_c = currentTheme.chart) === null || _c === void 0 ? void 0 : _c[chartType], getThemeObject(optionTheme, true), getThemeObject(specTheme, true));
-                    this._currentTheme = finalTheme;
+                    const finalTheme = mergeTheme({}, getThemeObject(this._currentThemeName, true), getThemeObject(optionTheme, true), getThemeObject(specTheme, true));
+                    this._currentTheme = processThemeByChartType(chartType, finalTheme);
                 }
                 else {
-                    currentTheme = getThemeObject(this._currentThemeName);
-                    const finalTheme = mergeTheme({}, currentTheme, (_d = currentTheme.chart) === null || _d === void 0 ? void 0 : _d[chartType], getThemeObject(optionTheme), getThemeObject(specTheme));
-                    this._currentTheme = preprocessTheme(finalTheme);
+                    const finalTheme = mergeTheme({}, getThemeObject(this._currentThemeName), getThemeObject(optionTheme), getThemeObject(specTheme));
+                    this._currentTheme = preprocessTheme(processThemeByChartType(chartType, finalTheme));
                 }
             }
             else {
                 currentTheme = getThemeObject(this._currentThemeName, true);
-                this._currentTheme = mergeTheme({}, currentTheme, (_e = currentTheme.chart) === null || _e === void 0 ? void 0 : _e[chartType]);
+                this._currentTheme = processThemeByChartType(chartType, currentTheme);
             }
             setPoptipTheme(get$1(this._currentTheme, 'component.poptip'));
-            (_f = this._compiler) === null || _f === void 0 ? void 0 : _f.setBackground(this._getBackground());
+            (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.setBackground(this._getBackground());
         }
         _shouldChartResize(oldSpec) {
             var _a, _b;
@@ -61407,7 +61446,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.7";
+    const version = "1.12.8";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -61419,8 +61458,210 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return data;
     };
 
-    class BaseTooltipHelper {
-        constructor() {
+    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$1.getFormatter();
+        if (formatter && formatterImpl) {
+            return { formatFunc: formatterImpl, args: [text, datum, formatter] };
+        }
+        return {};
+    }
+    const getSpecInfo = (chartSpec, specKey, compType, filter) => {
+        if (isNil$1(chartSpec[specKey])) {
+            return undefined;
+        }
+        const isArraySpec = isArray$1(chartSpec[specKey]);
+        const spec = isArraySpec ? chartSpec[specKey] : [chartSpec[specKey]];
+        const specInfos = [];
+        spec.forEach((s, i) => {
+            if (s && (!filter || filter(s))) {
+                specInfos.push({
+                    spec: s,
+                    specPath: isArraySpec ? [specKey, i] : [specKey],
+                    specInfoPath: ['component', specKey, i],
+                    type: compType
+                });
+            }
+        });
+        return specInfos;
+    };
+
+    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$1(field)) {
+            return field;
+        }
+        if (isFunction$1(field)) {
+            return field(data, params);
+        }
+        return field;
+    };
+    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;
+                    }
+                }
+            }
+        }
+        return undefined;
+    }
+
+    const getTooltipActualActiveType = (spec) => {
+        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,
+            group: ((_c = spec === null || spec === void 0 ? void 0 : spec.group) === null || _c === void 0 ? void 0 : _c.visible) !== false
+        };
+        if (isValid$1(spec === null || spec === void 0 ? void 0 : spec.activeType)) {
+            Object.keys(activeTypeMap).forEach(t => {
+                var _a;
+                activeTypeMap[t] = (_a = spec === null || spec === void 0 ? void 0 : spec.activeType) === null || _a === void 0 ? void 0 : _a.includes(t);
+            });
+        }
+        return Object.keys(activeTypeMap).filter(t => activeTypeMap[t]);
+    };
+    const isActiveTypeVisible = (type, spec) => {
+        if (!spec) {
+            return true;
+        }
+        if (spec.visible === false) {
+            return false;
+        }
+        if (spec[type] && spec[type].visible === false) {
+            return false;
+        }
+        if (spec.activeType && (isArray$1(spec.activeType) ? !spec.activeType.includes(type) : spec.activeType !== type)) {
+            return false;
+        }
+        return true;
+    };
+    function isEmptyPos(params) {
+        return isNil$1(params.mark) && isNil$1(params.model) && isNil$1(params.datum);
+    }
+    function addContentLine(result, contentSpec, defaultContent, shapeAttrs, datum, params) {
+        const addByDatum = (spec) => {
+            if (spec) {
+                const res = {};
+                const finalSpec = isNil$1(spec.key) && isNil$1(spec.value) && !isEmpty(spec)
+                    ? Object.assign(Object.assign(Object.assign({}, shapeAttrs), defaultContent), spec) : Object.assign(Object.assign({}, shapeAttrs), spec);
+                Object.keys(finalSpec).forEach(k => {
+                    if (k === 'key') {
+                        res.key = getTimeString(getTooltipContentValue(finalSpec.key, datum, params, finalSpec.keyFormatter), finalSpec.keyTimeFormat, finalSpec.keyTimeFormatMode);
+                    }
+                    else if (k === 'value') {
+                        res.value = getTimeString(getTooltipContentValue(finalSpec.value, datum, params, finalSpec.valueFormatter), finalSpec.valueTimeFormat, finalSpec.valueTimeFormatMode);
+                    }
+                    else {
+                        res[k] = getTooltipContentValue(finalSpec[k], datum, params);
+                    }
+                });
+                if (res.visible !== false && (isValid$1(res.key) || isValid$1(res.value))) {
+                    result.push(res);
+                }
+            }
+        };
+        if (isArray$1(contentSpec)) {
+            contentSpec.forEach(spec => {
+                addByDatum(spec);
+            });
+        }
+        else {
+            addByDatum(contentSpec);
+        }
+    }
+    function parseContentFunction(result, contentSpec, defaultContent, shapeAttrs, data, datum, params) {
+        if (isFunction$1(contentSpec)) {
+            const specs = contentSpec(data, params);
+            addContentLine(result, specs, defaultContent, shapeAttrs, datum, params);
+        }
+        else if (contentSpec) {
+            addContentLine(result, contentSpec, defaultContent, shapeAttrs, datum, params);
+        }
+    }
+    function parseContent(contentSpec, defaultContent, shapeAttrs, data, datum, params) {
+        if (datum && datum.length) {
+            const contents = [];
+            datum.forEach(d => {
+                if (isArray$1(contentSpec)) {
+                    contentSpec.forEach(spec => {
+                        parseContentFunction(contents, spec, defaultContent, shapeAttrs, data, d, params);
+                    });
+                }
+                else if (isFunction$1(contentSpec)) {
+                    parseContentFunction(contents, contentSpec, defaultContent, shapeAttrs, data, d, params);
+                }
+                else if (contentSpec) {
+                    addContentLine(contents, contentSpec, defaultContent, shapeAttrs, d, params);
+                }
+            });
+            return contents;
+        }
+        return null;
+    }
+    function combineContents(patternList) {
+        if (!patternList || !patternList.length) {
+            return null;
+        }
+        const defaultPatternContent = [];
+        patternList.forEach(({ content }) => {
+            if (content) {
+                content.forEach(c => {
+                    defaultPatternContent.push(c);
+                });
+            }
+        });
+        if (defaultPatternContent.length) {
+            return Object.assign(Object.assign({}, patternList[0]), { content: defaultPatternContent });
+        }
+        return patternList[0];
+    }
+    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);
+    };
+
+    class BaseSeriesTooltipHelper {
+        constructor(series) {
             this.activeTriggerSet = {
                 mark: new Set(),
                 group: new Set()
@@ -61428,12 +61669,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.ignoreTriggerSet = {
                 mark: new Set()
             };
-        }
-    }
-
-    class BaseSeriesTooltipHelper extends BaseTooltipHelper {
-        constructor(series) {
-            super();
             this._getSeriesCacheInfo = () => {
                 var _a, _b, _c;
                 const { series } = this;
@@ -61505,6 +61740,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 return dimensionFields.map(field => datum === null || datum === void 0 ? void 0 : datum[field]).join('-');
             };
+            this.getHasShape = (isContent) => {
+                return !!isContent;
+            };
             this.series = series;
             this.updateTooltipSpec();
         }
@@ -61514,82 +61752,100 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.spec = seriesTooltipSpec;
             this._seriesCacheInfo = this._getSeriesCacheInfo();
         }
-        getDefaultTooltipPattern(activeType, dimensionInfo) {
-            switch (activeType) {
-                case 'mark':
-                    return {
-                        visible: true,
-                        activeType,
-                        title: {
-                            key: undefined,
-                            value: this.dimensionTooltipTitleCallback,
-                            hasShape: false
-                        },
-                        content: [
-                            {
-                                seriesId: this.series.id,
-                                key: this.markTooltipKeyCallback,
-                                value: this.markTooltipValueCallback,
-                                hasShape: true,
-                                shapeType: this.shapeTypeCallback,
-                                shapeColor: this.shapeColorCallback,
-                                shapeStroke: this.shapeStrokeCallback,
-                                shapeHollow: false
-                            }
-                        ]
-                    };
-                case 'group':
-                    return {
-                        visible: true,
-                        activeType,
-                        title: {
-                            key: undefined,
-                            value: this.groupTooltipTitleCallback,
-                            hasShape: false
-                        },
-                        content: [
-                            {
-                                seriesId: this.series.id,
-                                key: this.groupTooltipKeyCallback,
-                                value: this.markTooltipValueCallback,
-                                hasShape: true,
-                                shapeType: this.shapeTypeCallback,
-                                shapeColor: this.shapeColorCallback,
-                                shapeStroke: this.shapeStrokeCallback,
-                                shapeHollow: false
-                            }
-                        ]
-                    };
-                case 'dimension':
-                    if (dimensionInfo) {
-                        const title = {
-                            key: undefined,
-                            value: this.dimensionTooltipTitleCallback,
-                            hasShape: false
-                        };
-                        const content = [];
-                        dimensionInfo.forEach(({ data }) => data.forEach(({ series }) => {
-                            content.push({
-                                seriesId: series.id,
-                                key: this.markTooltipKeyCallback,
-                                value: this.markTooltipValueCallback,
-                                hasShape: true,
-                                shapeType: this.shapeTypeCallback,
-                                shapeColor: this.shapeColorCallback,
-                                shapeStroke: this.shapeStrokeCallback,
-                                shapeHollow: false
-                            });
-                        }));
-                        return {
-                            visible: true,
-                            activeType,
-                            title,
-                            content
-                        };
-                    }
-                    break;
+        getShapeAttrs(activeType, isContent, chartTooltipSpec) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            const key = isContent ? 'content' : 'title';
+            const shapeAttrs = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (_a = chartTooltipSpec === null || chartTooltipSpec === void 0 ? void 0 : chartTooltipSpec.style) === null || _a === void 0 ? void 0 : _a.shape), chartTooltipSpec === null || chartTooltipSpec === void 0 ? void 0 : chartTooltipSpec[activeType]), (_b = chartTooltipSpec === null || chartTooltipSpec === void 0 ? void 0 : chartTooltipSpec[activeType]) === null || _b === void 0 ? void 0 : _b[key]), (_c = this.spec) === null || _c === void 0 ? void 0 : _c[activeType]), (_e = (_d = this.spec) === null || _d === void 0 ? void 0 : _d[activeType]) === null || _e === void 0 ? void 0 : _e[key]);
+            const res = {
+                shapeType: (_f = shapeAttrs.shapeType) !== null && _f !== void 0 ? _f : this.shapeTypeCallback,
+                shapeFill: (_h = (_g = shapeAttrs.shapeFill) !== null && _g !== void 0 ? _g : shapeAttrs.shapeColor) !== null && _h !== void 0 ? _h : this.shapeColorCallback,
+                shapeStroke: (_j = shapeAttrs.shapeStroke) !== null && _j !== void 0 ? _j : this.shapeStrokeCallback,
+                shapeHollow: (_k = shapeAttrs.shapeHollow) !== null && _k !== void 0 ? _k : false,
+                shapeLineWidth: shapeAttrs.shapeLineWidth,
+                shapeSize: (_l = shapeAttrs.shapeSize) !== null && _l !== void 0 ? _l : shapeAttrs.size,
+                hasShape: (_m = shapeAttrs.hasShape) !== null && _m !== void 0 ? _m : this.getHasShape(isContent)
+            };
+            return res;
+        }
+        enableByType(activeType) {
+            return true;
+        }
+        getDefaultContentList(activeType) {
+            return [this.getDefaultContentPattern(activeType)];
+        }
+        getContentList(activeType, spec, shapeAttrs, data, datum, params) {
+            var _a;
+            return parseContent((_a = spec === null || spec === void 0 ? void 0 : spec.content) !== null && _a !== void 0 ? _a : this.getDefaultContentList(activeType), this.getDefaultContentPattern(activeType), shapeAttrs, data, datum, params);
+        }
+        getTitleResult(activeType, titleSpec, shapeAttrs, data, params) {
+            let titlePattern = isFunction$1(titleSpec)
+                ? titleSpec(data, params)
+                : titleSpec;
+            if (!titlePattern) {
+                titlePattern = this.getDefaultTitlePattern(activeType);
+            }
+            else if (isNil$1(titlePattern.value)) {
+                titlePattern = Object.assign(Object.assign({}, this.getDefaultTitlePattern(activeType)), titlePattern);
+            }
+            if (titlePattern && titlePattern.visible !== false) {
+                const datum = getFirstDatumFromTooltipData(data);
+                const res = {
+                    visible: getTooltipContentValue(titlePattern.visible, datum, params),
+                    value: getTimeString(getTooltipContentValue(titlePattern.value, datum, params, titlePattern.valueFormatter), titlePattern.valueTimeFormat, titlePattern.valueTimeFormatMode),
+                    valueStyle: getTooltipContentValue(titlePattern.valueStyle, datum, params),
+                    hasShape: titlePattern.hasShape
+                };
+                Object.keys(shapeAttrs).forEach(key => {
+                    res[key] = getTooltipContentValue(shapeAttrs[key], datum, params);
+                });
+                return res;
             }
-            return null;
+            return {
+                hasShape: false,
+                visible: false
+            };
+        }
+        getTooltipData(activeType, chartTooltipSpec, data, datum, params) {
+            var _a, _b;
+            if (!this.enableByType(activeType) ||
+                !isActiveTypeVisible(activeType, this.spec) ||
+                (activeType === 'dimension' && (!datum || !datum.length))) {
+                return null;
+            }
+            const patternSpec = (_b = (_a = this.spec) === null || _a === void 0 ? void 0 : _a[activeType]) !== null && _b !== void 0 ? _b : chartTooltipSpec === null || chartTooltipSpec === void 0 ? void 0 : chartTooltipSpec[activeType];
+            const contentShapeAttrs = this.getShapeAttrs(activeType, true, chartTooltipSpec);
+            const titleShapeAttrs = this.getShapeAttrs(activeType, false, chartTooltipSpec);
+            let content;
+            if (activeType === 'dimension') {
+                content = [];
+                const userContents = this.getContentList(activeType, patternSpec, contentShapeAttrs, data, datum, params);
+                userContents.forEach(entry => {
+                    content.push(entry);
+                });
+            }
+            else {
+                content = this.getContentList(activeType, patternSpec, contentShapeAttrs, data, datum, params);
+            }
+            return {
+                visible: true,
+                activeType,
+                data,
+                title: this.getTitleResult(activeType, patternSpec === null || patternSpec === void 0 ? void 0 : patternSpec.title, titleShapeAttrs, data, params),
+                content
+            };
+        }
+        getDefaultTitlePattern(activeType) {
+            return {
+                key: undefined,
+                value: activeType === 'group' ? this.groupTooltipTitleCallback : this.dimensionTooltipTitleCallback
+            };
+        }
+        getDefaultContentPattern(activeType) {
+            return {
+                seriesId: this.series.id,
+                key: activeType === 'group' ? this.groupTooltipKeyCallback : this.markTooltipKeyCallback,
+                value: this.markTooltipValueCallback
+            };
         }
     }
 
@@ -62598,7 +62854,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         const result = dimensionStatisticsOfSimpleData(this._rawData.latestData, [
                             { key: field, operations: isNumeric ? ['min', 'max'] : ['values'] }
                         ])[field];
-                        this._rawStatisticsCache[field] = merge$2((_c = this._rawStatisticsCache[field]) !== null && _c !== void 0 ? _c : {}, result);
+                        this._rawStatisticsCache[field] = merge$1((_c = this._rawStatisticsCache[field]) !== null && _c !== void 0 ? _c : {}, result);
                     }
                 }
             }
@@ -63071,7 +63327,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _compareLabelSpec(newLabels, prevLabels, compareResult) {
             if (newLabels.length !== prevLabels.length ||
                 prevLabels.some((prev, index) => {
-                    return prev.labelLayout !== newLabels[index].labelLayout;
+                    return prev.labelLayout !== newLabels[index].labelLayout || prev.visible !== newLabels[index].visible;
                 })) {
                 compareResult.reMake = true;
             }
@@ -64612,39 +64868,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$1.getFormatter();
-        if (formatter && formatterImpl) {
-            return { formatFunc: formatterImpl, args: [text, datum, formatter] };
-        }
-        return {};
-    }
-    const getSpecInfo = (chartSpec, specKey, compType, filter) => {
-        if (isNil$1(chartSpec[specKey])) {
-            return undefined;
-        }
-        const isArraySpec = isArray$1(chartSpec[specKey]);
-        const spec = isArraySpec ? chartSpec[specKey] : [chartSpec[specKey]];
-        const specInfos = [];
-        spec.forEach((s, i) => {
-            if (s && (!filter || filter(s))) {
-                specInfos.push({
-                    spec: s,
-                    specPath: isArraySpec ? [specKey, i] : [specKey],
-                    specInfoPath: ['component', specKey, i],
-                    type: compType
-                });
-            }
-        });
-        return specInfos;
-    };
-
     const DEFAULT_TITLE_STYLE = {
         left: {
             textAlign: 'center',
@@ -65280,7 +65503,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return result;
             }
             result.reRender = true;
-            if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.type) !== (spec === null || spec === void 0 ? void 0 : spec.type)) {
+            if ((prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.type) !== (spec === null || spec === void 0 ? void 0 : spec.type) || (prevSpec === null || prevSpec === void 0 ? void 0 : prevSpec.visible) !== (spec === null || spec === void 0 ? void 0 : spec.visible)) {
                 result.reMake = true;
                 return result;
             }
@@ -65667,12 +65890,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             const position = bindAxis.valueToPosition(0);
                             if (isX) {
                                 axisMark.encode({
-                                    line: Object.assign(Object.assign({}, this._axisStyle.line), { dy: this._orient === 'bottom' ? -(bindAxis.getScale().range()[0] - position) : position })
+                                    line: Object.assign(Object.assign({}, this._axisStyle.line), { dy: this._orient === 'bottom'
+                                            ? -((bindAxis.getInverse() ? bindAxis.getScale().range()[1] : bindAxis.getScale().range()[0]) -
+                                                position)
+                                            : position })
                                 });
                             }
                             else {
                                 axisMark.encode({
-                                    line: Object.assign(Object.assign({}, this._axisStyle.line), { dx: this._orient === 'left' ? position : -(bindAxis.getScale().range()[1] - position) })
+                                    line: Object.assign(Object.assign({}, this._axisStyle.line), { dx: this._orient === 'left'
+                                            ? position
+                                            : -((bindAxis.getInverse() ? bindAxis.getScale().range()[0] : bindAxis.getScale().range()[1]) -
+                                                position) })
                                 });
                             }
                         }
@@ -65849,8 +66078,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return [f[0]];
         }
         _tickTransformOption() {
-            var _a, _b, _c;
-            return Object.assign(Object.assign({}, super._tickTransformOption()), { noDecimals: (_a = this._tick) === null || _a === void 0 ? void 0 : _a.noDecimals, labelLastVisible: (_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.lastVisible, labelFlush: (_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.flush });
+            var _a, _b, _c, _d;
+            return Object.assign(Object.assign({}, super._tickTransformOption()), { noDecimals: (_a = this._tick) === null || _a === void 0 ? void 0 : _a.noDecimals, labelLastVisible: (_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.lastVisible, labelFirstVisible: (_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.firstVisible, labelFlush: (_d = this._spec.label) === null || _d === void 0 ? void 0 : _d.flush });
         }
         axisHelper() {
             const getScale = (depth = 0) => {
@@ -71658,9 +71887,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initEvent() {
             this.event.on(ChartEvent.scaleUpdate, { filter: ({ model }) => (model === null || model === void 0 ? void 0 : model.id) === this.id }, this.effect.scaleUpdate.bind(this));
-            if (this._spec.roam) {
+            const { roam } = this._spec;
+            if (roam) {
                 this.initZoomEventOfRegions(this._regions, null, this._handleChartZoom);
-                this.initDragEventOfRegions(this._regions, () => true, this.pan);
+                this.initDragEventOfRegions(this._regions, roam.blank ? null : () => true, this.pan);
                 this._regions.forEach(r => {
                     r.getSeries().forEach(s => {
                         s.event.on('zoom', e => {
@@ -72537,6 +72767,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (series.type !== exports.SeriesTypeEnum.sankey) {
             const { formatFunc, args } = getFormatFunction(formatMethod, formatter, textAttribute.text, datum);
             if (formatFunc) {
+                textAttribute._originText = textAttribute.text;
                 textAttribute.text = formatFunc(...args, { series });
             }
         }
@@ -73226,81 +73457,40 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return isValid$1(datum[BOX_PLOT_OUTLIER_VALUE_FIELD]);
             };
         }
-        getDefaultTooltipPattern(activeType) {
-            return {
-                visible: true,
-                activeType,
-                title: {
-                    key: undefined,
-                    value: this.dimensionTooltipTitleCallback,
-                    hasShape: false
+        getDefaultContentList(activeType) {
+            return [
+                {
+                    key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.OUTLIER),
+                    value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.OUTLIER),
+                    shapeType: this.shapeTypeCallback,
+                    shapeColor: this.getOutlierFillColor,
+                    shapeStroke: this.getOutlierFillColor
                 },
-                content: [
-                    {
-                        key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.OUTLIER),
-                        value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.OUTLIER),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.getOutlierFillColor,
-                        shapeStroke: this.getOutlierFillColor,
-                        shapeHollow: false
-                    },
-                    {
-                        key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.MAX),
-                        value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.MAX),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.shapeColorCallback,
-                        shapeStroke: this.shapeStrokeCallback,
-                        shapeHollow: false
-                    },
-                    {
-                        key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.Q3),
-                        value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.Q3),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.shapeColorCallback,
-                        shapeStroke: this.shapeStrokeCallback,
-                        shapeHollow: false
-                    },
-                    {
-                        key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.MEDIAN),
-                        value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.MEDIAN),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.shapeColorCallback,
-                        shapeStroke: this.shapeStrokeCallback,
-                        shapeHollow: false
-                    },
-                    {
-                        key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.Q1),
-                        value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.Q1),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.shapeColorCallback,
-                        shapeStroke: this.shapeStrokeCallback,
-                        shapeHollow: false
-                    },
-                    {
-                        key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.MIN),
-                        value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.MIN),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.shapeColorCallback,
-                        shapeStroke: this.shapeStrokeCallback,
-                        shapeHollow: false
-                    },
-                    {
-                        key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.SERIES_FIELD),
-                        value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.SERIES_FIELD),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.shapeColorCallback,
-                        shapeStroke: this.shapeStrokeCallback,
-                        shapeHollow: false
-                    }
-                ]
-            };
+                {
+                    key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.MAX),
+                    value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.MAX)
+                },
+                {
+                    key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.Q3),
+                    value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.Q3)
+                },
+                {
+                    key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.MEDIAN),
+                    value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.MEDIAN)
+                },
+                {
+                    key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.Q1),
+                    value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.Q1)
+                },
+                {
+                    key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.MIN),
+                    value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.MIN)
+                },
+                {
+                    key: this.getContentKey(BOX_PLOT_TOOLTIP_KEYS.SERIES_FIELD),
+                    value: this.getContentValue(BOX_PLOT_TOOLTIP_KEYS.SERIES_FIELD)
+                }
+            ];
         }
     }
 
@@ -73534,7 +73724,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._autoBoxWidth = null;
         }
         _initAnimationSpec(config = {}) {
-            const newConfig = merge$2({}, config);
+            const newConfig = merge$1({}, config);
             ['appear', 'enter', 'update', 'exit', 'disappear'].forEach(state => {
                 if (newConfig[state] && newConfig[state].type === 'scaleIn') {
                     newConfig[state].type = this._shaftShape === 'line' ? 'boxplotScaleIn' : 'barBoxplotScaleIn';
@@ -73776,28 +73966,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     class RangeColumnSeriesTooltipHelper extends BaseSeriesTooltipHelper {
-        getDefaultTooltipPattern(activeType) {
-            return {
-                visible: true,
-                activeType,
-                title: {
-                    key: undefined,
-                    value: this.dimensionTooltipTitleCallback,
-                    hasShape: false
-                },
-                content: [
-                    {
-                        key: this.markTooltipKeyCallback,
-                        value: (datum) => 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.shapeTypeCallback,
-                        shapeColor: this.shapeColorCallback,
-                        shapeStroke: this.shapeStrokeCallback,
-                        shapeHollow: false
-                    }
-                ]
+        constructor() {
+            super(...arguments);
+            this._getMeasureData = (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]];
             };
         }
     }
@@ -74040,66 +74214,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class RangeAreaSeriesTooltipHelper extends BaseSeriesTooltipHelper {
-        getDefaultTooltipPattern(activeType, dimensionInfo) {
-            switch (activeType) {
-                case 'mark':
-                case 'group':
-                    return {
-                        visible: true,
-                        activeType,
-                        title: {
-                            key: undefined,
-                            value: this.dimensionTooltipTitleCallback,
-                            hasShape: false
-                        },
-                        content: [
-                            {
-                                key: this.markTooltipKeyCallback,
-                                value: this.markTooltipValueCallback,
-                                hasShape: true,
-                                shapeType: this.shapeTypeCallback,
-                                shapeColor: this.shapeColorCallback,
-                                shapeStroke: this.shapeStrokeCallback,
-                                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.markTooltipKeyCallback,
-                                    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.shapeTypeCallback,
-                                    shapeColor: this.shapeColorCallback,
-                                    shapeStroke: this.shapeStrokeCallback,
-                                    shapeHollow: false
-                                });
-                            }
-                        }));
-                        return {
-                            visible: true,
-                            activeType,
-                            title,
-                            content
-                        };
-                    }
-                    break;
-            }
-            return null;
+        constructor() {
+            super(...arguments);
+            this._getMeasureData = (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]];
+            };
         }
     }
 
@@ -74394,15 +74515,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return Number.parseFloat(value);
     }
     const pie = (originData, op) => {
-        const data = originData.map((datum) => (Object.assign({}, datum)));
-        if (!data || data.length === 0) {
-            return data;
-        }
-        const { asStartAngle, asEndAngle, asMiddleAngle, asRadian, asRatio, asQuadrant, asK, showAllZero, supportNegative } = op;
+        const { asStartAngle, asEndAngle, asMiddleAngle, asRadian, asRatio, asQuadrant, asK, showAllZero, supportNegative, showEmptyCircle } = op;
         const angleField = op.angleField();
         const startAngle = op.startAngle();
         const endAngle = op.endAngle();
         const minAngle = op.minAngle();
+        const data = originData.map((datum) => (Object.assign({}, datum)));
+        if (!data || data.length === 0) {
+            return data;
+        }
+        if (!showAllZero && showEmptyCircle && isDataEmpty(data, angleField, supportNegative)) {
+            return data;
+        }
         const appendArcInfo = (data, startAngle, angle) => {
             data[asStartAngle] = startAngle;
             data[asEndAngle] = startAngle + angle;
@@ -74477,6 +74601,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return data;
     };
+    const isDataEmpty = (data, angleField, supportNegative) => {
+        if (isNil$1(data)) {
+            return true;
+        }
+        if (data.length === 0) {
+            return true;
+        }
+        if (data.every(datum => transformInvalidValue(datum[angleField]) === 0)) {
+            return true;
+        }
+        if (!supportNegative && data.reduce((sum, datum) => sum + transformInvalidValue(datum[angleField]), 0) === 0) {
+            return true;
+        }
+        return false;
+    };
 
     function pieGrowOption(pieParams, isOverall, state) {
         return (datum, element, params) => {
@@ -74840,7 +74979,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     asQuadrant: ARC_QUADRANT,
                     asK: ARC_K,
                     showAllZero: this._showAllZero,
-                    supportNegative: this._supportNegative
+                    supportNegative: this._supportNegative,
+                    showEmptyCircle: this._showEmptyCircle
                 }
             }, false);
             const viewDataLabel = new DataView(this._dataSet, { name: `${PREFIX}_series_${this.id}_viewDataLabel` });
@@ -74902,7 +75042,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const emptyPieMark = this._emptyArcMark;
             if (emptyPieMark) {
-                this.setMarkStyle(emptyPieMark, Object.assign(Object.assign({}, initialStyle), { visible: () => this.getViewData().latestData.length === 0 }), 'normal', AttributeLevel.Series);
+                this.setMarkStyle(emptyPieMark, Object.assign(Object.assign({}, initialStyle), { visible: () => {
+                        const angleField = this.getAngleField()[0];
+                        return isDataEmpty(this.getViewData().latestData, angleField, this._supportNegative);
+                    } }), 'normal', AttributeLevel.Series);
             }
         }
         initInteraction() {
@@ -76276,60 +76419,63 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class DotSeriesTooltipHelper extends BaseSeriesTooltipHelper {
-        getDefaultTooltipPattern(activeType) {
-            if (activeType === 'mark') {
-                return {
-                    visible: true,
-                    activeType,
-                    title: {
-                        key: 'event info',
-                        value: 'event info'
-                    },
-                    content: [
-                        {
-                            key: (datum) => datum.type,
-                            value: (datum) => datum.id
-                        },
-                        {
-                            key: 'event_time',
-                            value: (datum) => TimeUtil.getInstance().timeFormat('%Y%m%d', datum.event_time)
-                        },
-                        {
-                            key: 'action_type',
-                            value: (datum) => datum.action_type
-                        },
-                        {
-                            key: 'children',
-                            value: (datum) => {
-                                return datum.children;
-                            }
-                        }
-                    ].map(entry => {
-                        return Object.assign({ hasShape: true, shapeType: 'square', shapeColor: this.shapeColorCallback, shapeStroke: this.shapeStrokeCallback }, entry);
-                    }),
-                    updateContent: (prev, datum, params) => {
-                        const childrenContent = [];
-                        const childrenPrev = prev.filter((p) => p.key === 'children');
-                        childrenPrev.length > 0 &&
-                            childrenPrev[0].value.forEach((element) => {
-                                let flag = true;
-                                for (const key in element) {
-                                    childrenContent.push({
-                                        shapeType: 'circle',
-                                        hasShape: flag,
-                                        shapeColor: this.shapeColorCallback(datum[0].datum[0]),
-                                        shapeStroke: this.shapeStrokeCallback(datum[0].datum[0]),
-                                        key: key,
-                                        value: element[key] + ''
-                                    });
-                                    flag = false;
-                                }
-                            });
-                        return prev.concat(childrenContent);
+        constructor() {
+            super(...arguments);
+            this.shapeTypeCallback = () => {
+                return 'square';
+            };
+        }
+        enableByType(activeType) {
+            return activeType === 'mark';
+        }
+        getDefaultTitlePattern(activeType) {
+            return {
+                key: 'event info',
+                value: 'event info'
+            };
+        }
+        getDefaultContentList() {
+            return [
+                {
+                    key: (datum) => datum.type,
+                    value: (datum) => datum.id
+                },
+                {
+                    key: 'event_time',
+                    value: (datum) => TimeUtil.getInstance().timeFormat('%Y%m%d', datum.event_time)
+                },
+                {
+                    key: 'action_type',
+                    value: (datum) => datum.action_type
+                },
+                {
+                    key: 'children',
+                    value: (datum) => {
+                        return datum.children;
                     }
+                }
+            ];
+        }
+        getTooltipData(activeType, chartTooltipSpec, data, datum, params) {
+            var _a, _b, _c, _d;
+            const res = super.getTooltipData(activeType, chartTooltipSpec, data, datum, params);
+            const userUpdateContent = (_c = (_b = (_a = this.spec) === null || _a === void 0 ? void 0 : _a[activeType]) === null || _b === void 0 ? void 0 : _b.updateContent) !== null && _c !== void 0 ? _c : (_d = chartTooltipSpec === null || chartTooltipSpec === void 0 ? void 0 : chartTooltipSpec[activeType]) === null || _d === void 0 ? void 0 : _d.updateContent;
+            if (res && !userUpdateContent) {
+                res.updateContent = (prev, datum, params) => {
+                    const childrenContent = [];
+                    const childrenPrev = prev.filter((p) => p.key === 'children');
+                    childrenPrev.length > 0 &&
+                        childrenPrev[0].value.forEach((element) => {
+                            let flag = true;
+                            for (const key in element) {
+                                childrenContent.push(Object.assign(Object.assign({}, childrenPrev[0]), { shapeType: 'circle', hasShape: flag, key: key, value: element[key] + '' }));
+                                flag = false;
+                            }
+                        });
+                    return prev.concat(childrenContent);
                 };
             }
-            return null;
+            return res;
         }
     }
 
@@ -76673,38 +76819,40 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class LinkSeriesTooltipHelper extends BaseSeriesTooltipHelper {
-        getDefaultTooltipPattern(activeType) {
-            if (activeType === 'mark') {
-                return {
-                    visible: true,
-                    activeType,
-                    title: {
-                        key: 'link info',
-                        value: 'link info'
-                    },
-                    content: [
-                        {
-                            key: 'time',
-                            value: (datum) => TimeUtil.getInstance().timeFormat('%Y%m%d %H:%M', datum.from.split('_')[1])
-                        },
-                        {
-                            key: 'type',
-                            value: (datum) => datum.action_type
-                        },
-                        {
-                            key: 'from',
-                            value: (datum) => datum.from
-                        },
-                        {
-                            key: 'to',
-                            value: (datum) => datum.to
-                        }
-                    ].map(entry => {
-                        return Object.assign({ hasShape: true, shapeType: 'square', shapeColor: this.shapeColorCallback, shapeStroke: this.shapeStrokeCallback }, entry);
-                    })
-                };
-            }
-            return null;
+        constructor() {
+            super(...arguments);
+            this.shapeTypeCallback = () => {
+                return 'square';
+            };
+        }
+        enableByType(activeType) {
+            return activeType === 'mark';
+        }
+        getDefaultTitlePattern(activeType) {
+            return {
+                key: 'link info',
+                value: 'link info'
+            };
+        }
+        getDefaultContentList() {
+            return [
+                {
+                    key: 'time',
+                    value: (datum) => TimeUtil.getInstance().timeFormat('%Y%m%d %H:%M', datum.from.split('_')[1])
+                },
+                {
+                    key: 'type',
+                    value: (datum) => datum.action_type
+                },
+                {
+                    key: 'from',
+                    value: (datum) => datum.from
+                },
+                {
+                    key: 'to',
+                    value: (datum) => datum.to
+                }
+            ];
         }
     }
 
@@ -77462,17 +77610,8 @@ 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);
-            switch (activeType) {
-                case 'mark':
-                case 'group':
-                    return result;
-                case 'dimension':
-                    result.visible = false;
-                    return result;
-            }
-            return null;
+        enableByType(activeType) {
+            return activeType !== 'dimension';
         }
     }
 
@@ -78079,7 +78218,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class BaseLayout {
       constructor(options) {
         var _a, _b;
-        switch (this.options = merge$2({}, BaseLayout.defaultOptions, options), isFunction$1(this.options.shape) ? this.shape = this.options.shape : this.shape = getShapeFunction(this.options.shape), this.getText = null !== (_a = functor$1(this.options.text)) && void 0 !== _a ? _a : d => d, this.getTextFontWeight = functor$1(this.options.fontWeight), this.getTextFontSize = functor$1(this.options.fontSize), this.getTextFontStyle = functor$1(this.options.fontStyle), this.getTextFontFamily = functor$1(this.options.fontFamily), this.outputCallback = null !== (_b = this.options.outputCallback) && void 0 !== _b ? _b : res => res, this.options.color) {
+        switch (this.options = merge$1({}, BaseLayout.defaultOptions, options), isFunction$1(this.options.shape) ? this.shape = this.options.shape : this.shape = getShapeFunction(this.options.shape), this.getText = null !== (_a = functor$1(this.options.text)) && void 0 !== _a ? _a : d => d, this.getTextFontWeight = functor$1(this.options.fontWeight), this.getTextFontSize = functor$1(this.options.fontSize), this.getTextFontStyle = functor$1(this.options.fontStyle), this.getTextFontFamily = functor$1(this.options.fontFamily), this.outputCallback = null !== (_b = this.options.outputCallback) && void 0 !== _b ? _b : res => res, this.options.color) {
           case "random-dark":
             this.getTextColor = () => randomHslColor(10, 50);
             break;
@@ -78202,7 +78341,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class CloudLayout extends BaseLayout {
       constructor(options) {
         var _a;
-        super(merge$2({}, CloudLayout.defaultOptions, options)), this.cw = 64, this.ch = 2048, this._size = [256, 256], this._isBoardExpandCompleted = !1, this._placeStatus = 0, this._tTemp = null, this._dtTemp = null, this._dy = 0, this.cacheMap = new Map(), this.options.minFontSize <= CloudLayout.defaultOptions.minFontSize && (this.options.minFontSize = CloudLayout.defaultOptions.minFontSize), this.spiral = isString$1(this.options.spiral) ? null !== (_a = spirals[this.options.spiral]) && void 0 !== _a ? _a : spirals.archimedean : this.options.spiral, this.random = this.options.random ? Math.random : () => 1, this.getTextPadding = functor$1(this.options.padding);
+        super(merge$1({}, CloudLayout.defaultOptions, options)), this.cw = 64, this.ch = 2048, this._size = [256, 256], this._isBoardExpandCompleted = !1, this._placeStatus = 0, this._tTemp = null, this._dtTemp = null, this._dy = 0, this.cacheMap = new Map(), this.options.minFontSize <= CloudLayout.defaultOptions.minFontSize && (this.options.minFontSize = CloudLayout.defaultOptions.minFontSize), this.spiral = isString$1(this.options.spiral) ? null !== (_a = spirals[this.options.spiral]) && void 0 !== _a ? _a : spirals.archimedean : this.options.spiral, this.random = this.options.random ? Math.random : () => 1, this.getTextPadding = functor$1(this.options.padding);
       }
       zoomRatio() {
         return this._originSize[0] / this._size[0];
@@ -78540,7 +78679,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     let GridLayout$1 = class GridLayout extends BaseLayout {
       constructor(options) {
-        super(merge$2({}, GridLayout.defaultOptions, options)), this.fillGridAt = (x, y) => {
+        super(merge$1({}, GridLayout.defaultOptions, options)), this.fillGridAt = (x, y) => {
           x >= this.ngx || y >= this.ngy || x < 0 || y < 0 || (this.grid[x][y] = !1);
         }, this.updateGrid = (gx, gy, gw, gh, info) => {
           const occupied = info.occupied;
@@ -78738,7 +78877,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class FastLayout extends BaseLayout {
       constructor(options) {
-        super(merge$2({}, FastLayout.defaultOptions, options)), this.random = this.options.random ? Math.random : () => 0, this.aspectRatio = 1;
+        super(merge$1({}, FastLayout.defaultOptions, options)), this.random = this.options.random ? Math.random : () => 0, this.aspectRatio = 1;
       }
       fit(word) {
         for (let i = 0, len = this.result.length; i < len; i++) if (isOverlap(word, this.result[i])) return !1;
@@ -82416,7 +82555,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             this._tooltipHelper = new CirclePackingTooltipHelper(this);
-            this._tooltipHelper.updateTooltipSpec();
             this._circlePackingMark && this._tooltipHelper.activeTriggerSet.mark.add(this._circlePackingMark);
             this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
         }
@@ -83159,70 +83297,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class SankeySeriesTooltipHelper extends BaseSeriesTooltipHelper {
-        getDefaultTooltipPattern(activeType, dimensionInfo) {
-            switch (activeType) {
-                case 'mark':
-                    return {
-                        visible: true,
-                        activeType,
-                        title: {
-                            key: undefined,
-                            value: (datum) => {
-                                if (datum.source) {
-                                    if (isNumber$1(datum.source)) {
-                                        const seriesKeys = this.series.getSeriesKeys();
-                                        return seriesKeys[datum.source] + ' => ' + seriesKeys[datum.target];
-                                    }
-                                    return datum.source + ' => ' + datum.target;
-                                }
-                                return datum.datum ? datum.datum[this.series.getSpec().categoryField] : datum.key;
-                            },
-                            hasShape: false
-                        },
-                        content: [
-                            {
-                                key: this.markTooltipKeyCallback,
-                                value: (datum) => {
-                                    return datum.value;
-                                },
-                                hasShape: true,
-                                shapeType: this.shapeTypeCallback,
-                                shapeColor: this.shapeColorCallback,
-                                shapeStroke: this.shapeStrokeCallback,
-                                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.markTooltipKeyCallback,
-                                value: this.markTooltipValueCallback,
-                                hasShape: true,
-                                shapeType: this.shapeTypeCallback,
-                                shapeColor: this.shapeColorCallback,
-                                shapeStroke: this.shapeStrokeCallback,
-                                shapeHollow: false
-                            });
-                        }));
-                        return {
-                            visible: true,
-                            activeType,
-                            title,
-                            content
-                        };
+        constructor() {
+            super(...arguments);
+            this._getDimensionData = (datum) => {
+                if (datum.source) {
+                    if (isNumber$1(datum.source)) {
+                        const seriesKeys = this.series.getSeriesKeys();
+                        return seriesKeys[datum.source] + ' => ' + seriesKeys[datum.target];
                     }
-                    break;
-            }
-            return null;
+                    return datum.source + ' => ' + datum.target;
+                }
+                return datum.datum ? datum.datum[this.series.getSpec().categoryField] : datum.key;
+            };
+            this.markTooltipValueCallback = (datum) => {
+                return datum.value;
+            };
         }
     }
 
@@ -84432,7 +84521,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const result = hierarchyDimensionStatistics([this._rawData], {
                         fields: [{ key: field, operations: isNumeric ? ['min', 'max'] : ['values'] }]
                     })[field];
-                    this._rawStatisticsCache[field] = merge$2((_a = this._rawStatisticsCache[field]) !== null && _a !== void 0 ? _a : {}, result);
+                    this._rawStatisticsCache[field] = merge$1((_a = this._rawStatisticsCache[field]) !== null && _a !== void 0 ? _a : {}, result);
                 }
             }
             return this._rawStatisticsCache[field];
@@ -84768,14 +84857,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     class GaugePointerTooltipHelper extends BaseSeriesTooltipHelper {
-        updateTooltipSpec() {
-            var _a;
-            super.updateTooltipSpec();
-            if (isNil$1((_a = this.spec) === null || _a === void 0 ? void 0 : _a.dimension)) {
-                this.spec = Object.assign(Object.assign({}, this.spec), { dimension: {
-                        visible: false
-                    } });
-            }
+        enableByType(activeType) {
+            return activeType !== 'dimension';
         }
     }
 
@@ -85134,12 +85217,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class HeatmapSeriesTooltipHelper extends BaseSeriesTooltipHelper {
-        getDefaultTooltipPattern(activeType, dimensionInfo) {
-            const pattern = super.getDefaultTooltipPattern(activeType, dimensionInfo);
-            if (isValid$1(pattern) && activeType === 'dimension') {
-                pattern.visible = false;
-            }
-            return pattern;
+        enableByType(activeType) {
+            return activeType !== 'dimension';
         }
     }
 
@@ -85888,39 +85967,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class LiquidSeriesTooltipHelper extends BaseSeriesTooltipHelper {
         constructor() {
             super(...arguments);
-            this.getContentKey = () => (datum) => {
+            this.markTooltipKeyCallback = (datum) => {
                 return this.series.getValueField();
             };
-            this.getContentValue = () => (datum) => {
+            this.markTooltipValueCallback = (datum) => {
                 const valueField = this.series.getValueField();
                 return datum[valueField];
             };
-            this.getLiquidFillColor = (datum) => {
+            this.shapeStrokeCallback = (datum) => {
                 return this.series.getMarkInName('liquid').getAttribute('fill', datum);
             };
         }
-        getDefaultTooltipPattern(activeType) {
-            return {
-                visible: true,
-                activeType,
-                title: {
-                    key: undefined,
-                    value: this.dimensionTooltipTitleCallback,
-                    hasShape: false
-                },
-                content: [
-                    {
-                        key: this.getContentKey(),
-                        value: this.getContentValue(),
-                        hasShape: true,
-                        shapeType: this.shapeTypeCallback,
-                        shapeColor: this.getLiquidFillColor,
-                        shapeStroke: this.getLiquidFillColor,
-                        shapeHollow: false
-                    }
-                ]
-            };
-        }
     }
 
     class LiquidSeries extends BaseSeries {
@@ -89969,181 +90026,60 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return markInfoList;
     };
 
-    const getTooltipActualActiveType = (spec) => {
+    const pick_keys = ['updateTitle', 'updateContent', 'updatePosition', 'maxLineCount', 'othersLine'];
+    const getTooltipSpecForShow = (activeType, globalSpec, series, data, params) => {
         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,
-            group: ((_c = spec === null || spec === void 0 ? void 0 : spec.group) === null || _c === void 0 ? void 0 : _c.visible) !== false
+        const finalSpec = {
+            activeType
         };
-        if (isValid$1(spec === null || spec === void 0 ? void 0 : spec.activeType)) {
-            Object.keys(activeTypeMap).forEach(t => {
-                var _a;
-                activeTypeMap[t] = (_a = spec === null || spec === void 0 ? void 0 : spec.activeType) === null || _a === void 0 ? void 0 : _a.includes(t);
-            });
-        }
-        return Object.keys(activeTypeMap).filter(t => activeTypeMap[t]);
-    };
-    const isActiveTypeVisible = (type, spec) => {
-        if (!spec) {
-            return true;
-        }
-        if (spec.visible === false) {
-            return false;
-        }
-        if (spec[type] && spec[type].visible === false) {
-            return false;
-        }
-        if (spec.activeType && !spec.activeType.includes(type)) {
-            return false;
-        }
-        return true;
-    };
-    function isEmptyPos(params) {
-        return isNil$1(params.mark) && isNil$1(params.model) && isNil$1(params.datum);
-    }
-    function combinePattern(patternList) {
-        if (!patternList || !patternList.length) {
-            return null;
-        }
-        const defaultPatternContent = [];
-        patternList.forEach(({ content }) => {
-            if (isFunction$1(content)) {
-                defaultPatternContent.push(content);
-            }
-            else if (isArray$1(content)) {
-                content.forEach(c => {
-                    defaultPatternContent.push(c);
-                });
-            }
-            else if (content) {
-                defaultPatternContent.push(content);
-            }
-        });
-        if (defaultPatternContent.length) {
-            return Object.assign(Object.assign({}, patternList[0]), { content: defaultPatternContent });
-        }
-        return patternList[0];
-    }
-
-    const getTooltipSpecForShow = (activeType, globalSpec, series, dimensionInfo) => {
-        var _a, _b, _c, _d, _e, _f;
-        const finalSpec = Object.assign(Object.assign({}, globalSpec), { activeType });
-        const { style = {} } = globalSpec;
         switch (activeType) {
             case 'mark':
             case 'group':
                 if (series) {
                     const seriesSpec = (_a = series.getSpec()) === null || _a === void 0 ? void 0 : _a.tooltip;
                     finalSpec.visible = true;
-                    finalSpec.handler = (_b = seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.handler) !== null && _b !== void 0 ? _b : globalSpec.handler;
-                    if ((_c = finalSpec.handler) === null || _c === void 0 ? void 0 : _c.showTooltip) {
+                    if (seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec.handler) {
+                        finalSpec.handler = seriesSpec.handler;
+                    }
+                    if ((_b = finalSpec.handler) === null || _b === void 0 ? void 0 : _b.showTooltip) {
                         return finalSpec;
                     }
+                    if (seriesSpec === null || seriesSpec === void 0 ? void 0 : seriesSpec[activeType]) {
+                        pick_keys.forEach(k => {
+                            if (isValid$1(seriesSpec[activeType][k])) {
+                                finalSpec[k] = seriesSpec[activeType][k];
+                            }
+                        });
+                    }
+                    return Object.assign(Object.assign({}, finalSpec), series.tooltipHelper.getTooltipData(activeType, globalSpec, data, data[0].datum, params));
                 }
                 break;
             case 'dimension':
-                if (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length) {
-                    const seriesList = getSeriesListFromDimensionInfo(dimensionInfo);
+                if (data === null || data === void 0 ? void 0 : data.length) {
+                    const seriesList = getSeriesListFromDimensionInfo(data);
                     if (seriesList.every(series => { var _a; return !isActiveTypeVisible('dimension', (_a = series.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec); })) {
                         finalSpec.visible = false;
                     }
                     else {
                         finalSpec.visible = true;
                     }
-                    finalSpec.handler = (_d = globalSpec.handler) !== null && _d !== void 0 ? _d : undefined;
-                    if ((_e = finalSpec.handler) === null || _e === void 0 ? void 0 : _e.showTooltip) {
+                    finalSpec.handler = globalSpec.handler;
+                    if ((_c = finalSpec.handler) === null || _c === void 0 ? void 0 : _c.showTooltip) {
                         return finalSpec;
                     }
-                }
-                break;
-        }
-        const defaultPattern = (_f = getDefaultTooltipPattern(activeType, series, dimensionInfo)) !== null && _f !== void 0 ? _f : {};
-        const userPattern = getSeriesTooltipPattern(activeType, globalSpec, series, dimensionInfo);
-        if (userPattern) {
-            const defaultPatternTitle = defaultPattern.title;
-            const defaultTitleShape = getShapePattern(undefined, userPattern, style.shape, undefined, defaultPatternTitle);
-            if (isValid$1(userPattern.title)) {
-                userPattern.title = addExtraInfoToTooltipTitlePattern(userPattern.title, Object.assign(Object.assign({}, defaultPatternTitle), defaultTitleShape));
-            }
-            else {
-                userPattern.title = addExtraInfoToTooltipTitlePattern(defaultPatternTitle, defaultTitleShape, true);
-            }
-            const defaultPatternContent = array(defaultPattern.content);
-            if (isValid$1(userPattern.content)) {
-                const shapePatternMap = getShapePatternMapOfEachSeries(defaultPatternContent);
-                userPattern.content = addExtraInfoToTooltipContentPattern(userPattern.content, userLine => getShapePattern(userLine, userPattern, style.shape, shapePatternMap));
-            }
-            else {
-                userPattern.content = addExtraInfoToTooltipContentPattern(defaultPatternContent, line => getShapePattern(undefined, userPattern, style.shape, undefined, line), true);
-            }
-        }
-        finalSpec[activeType] = Object.assign(Object.assign(Object.assign({}, defaultPattern), userPattern), { activeType });
-        return finalSpec;
-    };
-    const getDefaultTooltipPattern = (activeType, series, dimensionInfo) => {
-        switch (activeType) {
-            case 'mark':
-            case 'group':
-                if (series) {
-                    return series.tooltipHelper.getDefaultTooltipPattern(activeType);
-                }
-                break;
-            case 'dimension':
-                if (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length) {
                     const patternList = [];
-                    dimensionInfo.forEach(info => info.data.forEach(datum => {
+                    data.forEach(info => info.data.forEach(datum => {
                         const { series } = datum;
-                        const mockDimensionInfo = [
-                            Object.assign(Object.assign({}, info), { data: [datum] })
-                        ];
-                        const pattern = series.tooltipHelper.getDefaultTooltipPattern(activeType, mockDimensionInfo);
+                        const pattern = series.tooltipHelper.getTooltipData(activeType, globalSpec, data, datum.datum, params);
                         if (pattern) {
                             patternList.push(pattern);
                         }
                     }));
-                    return combinePattern(patternList);
+                    return combineContents(patternList);
                 }
                 break;
         }
-        return undefined;
-    };
-    const getSeriesTooltipPattern = (activeType, globalSpec, series, dimensionInfo) => {
-        const allSeries = activeType === 'dimension' && (dimensionInfo === null || dimensionInfo === void 0 ? void 0 : dimensionInfo.length)
-            ? getSeriesListFromDimensionInfo(dimensionInfo)
-            : (activeType === 'mark' || activeType === 'group') && series
-                ? [series]
-                : null;
-        if (allSeries && allSeries.length) {
-            const seriesPatternList = [];
-            allSeries.forEach(s => {
-                var _a;
-                const seriesSpec = (_a = s.tooltipHelper) === null || _a === void 0 ? void 0 : _a.spec;
-                if (isActiveTypeVisible(activeType, seriesSpec)) {
-                    let finalPattern = seriesSpec && seriesSpec[activeType]
-                        ? Object.assign(Object.assign({}, globalSpec[activeType]), seriesSpec[activeType]) : globalSpec[activeType];
-                    if (finalPattern) {
-                        finalPattern = cloneDeep(finalPattern);
-                        if (finalPattern.title) {
-                            finalPattern.title = addExtraInfoToTooltipTitlePattern(finalPattern.title, {
-                                seriesId: s.id
-                            }, true);
-                        }
-                        if (finalPattern.content) {
-                            finalPattern.content = addExtraInfoToTooltipContentPattern(finalPattern.content, {
-                                seriesId: s.id
-                            }, true);
-                        }
-                        seriesPatternList.push(finalPattern);
-                    }
-                }
-            });
-            return seriesPatternList && seriesPatternList.length ? combinePattern(seriesPatternList) : null;
-        }
-        return undefined;
+        return null;
     };
     const getSeriesListFromDimensionInfo = (dimensionInfo) => {
         const list = [];
@@ -90156,122 +90092,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         return list;
     };
-    const getShapePatternMapOfEachSeries = (content) => {
-        const shapePatternMap = {};
-        content.forEach(line => {
-            const key = line.seriesId;
-            if (isValid$1(key) && !shapePatternMap[key]) {
-                shapePatternMap[key] = line;
-            }
-            if (!shapePatternMap[-1]) {
-                shapePatternMap[-1] = line;
-            }
-        });
-        return shapePatternMap;
-    };
-    const isShapeKey = (key) => key.toLowerCase().includes('shape');
-    const getShapePattern = (userLinePattern, userPattern, userStyle, shapePatternMap, defaultShapePattern) => {
-        var _a, _b;
-        if (userStyle) {
-            userStyle.shapeSize = (_a = userStyle.shapeSize) !== null && _a !== void 0 ? _a : userStyle.size;
-        }
-        const shapePatternFromMap = shapePatternMap
-            ? (_b = shapePatternMap[userLinePattern === null || userLinePattern === void 0 ? void 0 : userLinePattern.seriesId]) !== null && _b !== void 0 ? _b : shapePatternMap[-1]
-            : null;
-        const shapePattern = {};
-        [userLinePattern, userPattern, userStyle, shapePatternFromMap, defaultShapePattern].forEach(cfg => {
-            if (isValid$1(cfg)) {
-                Object.keys(cfg).forEach(key => {
-                    if (isShapeKey(key) && isNil$1(shapePattern[key]) && !isNil$1(cfg[key])) {
-                        shapePattern[key] = cfg[key];
-                    }
-                });
-            }
-        });
-        return shapePattern;
-    };
-    const merge = (source, extraInfo, overwrite) => {
-        const info = isFunction$1(extraInfo) ? extraInfo(source) : extraInfo;
-        return overwrite ? Object.assign(Object.assign({}, source), info) : Object.assign(Object.assign({}, info), source);
-    };
-    const addExtraInfoToTooltipTitlePattern = (pattern, extraInfo, overwrite) => {
-        const result = isValid$1(pattern)
-            ? isFunction$1(pattern)
-                ? (...args) => merge(pattern(...args), extraInfo, overwrite)
-                : merge(pattern, extraInfo, overwrite)
-            : undefined;
-        return result;
-    };
-    const addExtraInfoToTooltipContentPattern = (pattern, extraInfo, overwrite) => {
-        const result = isValid$1(pattern)
-            ? array(pattern).map(patternItem => isFunction$1(patternItem)
-                ? (...args) => array(patternItem(...args)).map(line => merge(line, extraInfo, overwrite))
-                : merge(patternItem, extraInfo, overwrite))
-            : undefined;
-        return result;
-    };
 
-    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$1(field)) {
-            return field;
-        }
-        if (isFunction$1(field)) {
-            return field(data, params);
-        }
-        return field;
+    const TooltipHandlerType = {
+        dom: `${PREFIX}_TOOLTIP_HANDLER_DOM`,
+        canvas: `${PREFIX}_TOOLTIP_HANDLER_CANVAS`
     };
-    const getTooltipContentPattern = (field, data, params) => {
-        if (isNil$1(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;
-                    }
-                }
-            }
-        }
-        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 = {
@@ -90279,164 +90104,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         value: '...'
     };
     const TOOLTIP_TYPES = ['group', 'mark', 'dimension'];
-
-    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;
-        const othersLine = pattern.othersLine
-            ? Object.assign(Object.assign({}, TOOLTIP_OTHERS_LINE), pattern.othersLine) : TOOLTIP_OTHERS_LINE;
-        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), othersLine));
-                                break;
-                            }
-                            else if (tooltipActualTitleContent.content.length < maxLineCount) {
-                                tooltipActualTitleContent.content.push(oneLineData);
-                            }
-                            else {
-                                break;
-                            }
-                        }
-                    }
-                }
-            }
-        };
-        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 (!isActiveTypeVisible('dimension', (_c = series.tooltipHelper) === null || _c === void 0 ? void 0 : _c.spec)) {
-                            continue;
-                        }
-                        const contentPatterns = (_d = patternContent === null || patternContent === void 0 ? void 0 : patternContent.filter(c => isNil$1(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), othersLine));
-                                    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;
-        }
-        if (tooltipActualTitleContent.title) {
-            if (tooltipActualTitleContent.content.length > 0 && tooltipActualTitleContent.content[0].shapeType) {
-                if (isNil$1(tooltipActualTitleContent.title.shapeType)) {
-                    tooltipActualTitleContent.title.shapeType = tooltipActualTitleContent.content[0].shapeType;
-                }
-                if (isNil$1(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$1(key) || isValid$1(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 DEFAULT_SHOW_DELAY = 50;
 
     class BaseTooltipProcessor {
         constructor(component) {
@@ -90448,17 +90116,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!params.changePositionOnly) {
                     this.clearCache();
                 }
-                this._updateViewSpec(params);
-                const spec = this._cacheViewSpec;
-                if (isNil$1(spec === null || spec === void 0 ? void 0 : spec[this.activeType]) || spec.visible === false) {
+                this._updateViewSpec(data, params);
+                const spec = this._cacheActiveSpec;
+                if (isNil$1(spec) || spec.visible === false) {
                     return 1;
                 }
-                params.tooltipSpec = spec;
-                this._updateActualTooltip(data, params);
-                params.tooltipActual = this._cacheActualTooltip;
-                const { title, content } = this._cacheActualTooltip;
+                params.tooltipSpec = this.component.getSpec();
+                params.activeTooltipSpec = spec;
+                const { title, content } = spec;
                 const isEmpty = isNil$1(title === null || title === void 0 ? void 0 : title.key) && isNil$1(title === null || title === void 0 ? void 0 : title.value) && !(content === null || content === void 0 ? void 0 : content.length);
-                this.component.event.emit(ChartEvent.tooltipShow, Object.assign(Object.assign({}, params), { isEmptyTooltip: isNil$1(title === null || title === void 0 ? void 0 : title.key) && isNil$1(title === null || title === void 0 ? void 0 : title.value) && !(content === null || content === void 0 ? void 0 : content.length), tooltipData: data, activeType: this.activeType, tooltip: this.component }));
+                this.component.event.emit(ChartEvent.tooltipShow, Object.assign(Object.assign({}, params), { isEmptyTooltip: isEmpty, tooltipData: data, activeType: this.activeType, tooltip: this.component }));
                 if (isEmpty) {
                     return 1;
                 }
@@ -90489,23 +90156,38 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return undefined;
         }
-        _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$1(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;
+        _updateViewSpec(data, params) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const { changePositionOnly, model } = params;
+            if (!changePositionOnly || !this._cacheActiveSpec) {
+                const tooltipSpec = this.component.getSpec();
+                this._cacheActiveSpec = getTooltipSpecForShow(this.activeType, this.component.getSpec(), model, data, params);
+                if (this._cacheActiveSpec) {
+                    if (isNil$1(this._cacheActiveSpec.handler) && isValid$1(tooltipSpec.handler)) {
+                        this._cacheActiveSpec.handler = tooltipSpec.handler;
+                    }
+                    const specByType = (_a = tooltipSpec[this.activeType]) !== null && _a !== void 0 ? _a : {};
+                    const updateTitle = (_b = this._cacheActiveSpec.updateTitle) !== null && _b !== void 0 ? _b : specByType.updateTitle;
+                    const updateContent = (_c = this._cacheActiveSpec.updateContent) !== null && _c !== void 0 ? _c : specByType.updateContent;
+                    const maxLineCount = (_e = (_d = this._cacheActiveSpec.maxLineCount) !== null && _d !== void 0 ? _d : specByType.maxLineCount) !== null && _e !== void 0 ? _e : TOOLTIP_MAX_LINE_COUNT;
+                    if (updateTitle) {
+                        this._cacheActiveSpec.title =
+                            (_f = updateTitle(this._cacheActiveSpec.title, data, params)) !== null && _f !== void 0 ? _f : this._cacheActiveSpec.title;
+                    }
+                    if (updateContent) {
+                        this._cacheActiveSpec.content =
+                            (_g = updateContent(this._cacheActiveSpec.content, data, params)) !== null && _g !== void 0 ? _g : this._cacheActiveSpec.content;
+                    }
+                    else if (maxLineCount >= 1 && ((_h = this._cacheActiveSpec.content) === null || _h === void 0 ? void 0 : _h.length) > maxLineCount) {
+                        const othersLine = (_j = this._cacheActiveSpec.othersLine) !== null && _j !== void 0 ? _j : specByType.othersLine;
+                        const otherLine = othersLine
+                            ? Object.assign(Object.assign({}, TOOLTIP_OTHERS_LINE), othersLine) : TOOLTIP_OTHERS_LINE;
+                        this._cacheActiveSpec.content = [
+                            ...this._cacheActiveSpec.content.slice(0, maxLineCount - 1),
+                            Object.assign(Object.assign({}, this._cacheActiveSpec.content[maxLineCount - 1]), otherLine)
+                        ];
+                    }
+                }
             }
         }
         shouldHandleTooltip(params, info) {
@@ -90516,8 +90198,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return isActiveTypeVisible(this.activeType, (_b = (_a = params.model) === null || _a === void 0 ? void 0 : _a.tooltipHelper) === null || _b === void 0 ? void 0 : _b.spec);
         }
         clearCache() {
-            this._cacheViewSpec = undefined;
-            this._cacheActualTooltip = undefined;
+            this._cacheActiveSpec = undefined;
         }
     }
 
@@ -90615,14 +90296,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const helper = series.tooltipHelper;
                 const activeTriggers = helper === null || helper === void 0 ? void 0 : helper.activeTriggerSet.mark;
                 const ignoreTriggers = helper === null || helper === void 0 ? void 0 : helper.ignoreTriggerSet.mark;
-                if ((activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.model)) || (activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.mark))) {
+                if (activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.mark)) {
                     info = {
                         mark: params.mark,
                         datum: params.datum,
                         series
                     };
                 }
-                else if ((ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.model)) || (ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.mark))) {
+                else if (ignoreTriggers === null || ignoreTriggers === void 0 ? void 0 : ignoreTriggers.has(params.mark)) {
                     ignore = true;
                 }
             }
@@ -90651,7 +90332,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const series = params.model;
                 const helper = series.tooltipHelper;
                 const activeTriggers = helper === null || helper === void 0 ? void 0 : helper.activeTriggerSet.group;
-                if ((activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.model)) || (activeTriggers === null || activeTriggers === void 0 ? void 0 : activeTriggers.has(params.mark))) {
+                if (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)) {
@@ -90712,12 +90393,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             spec.transitionDuration = (_f = spec.transitionDuration) !== null && _f !== void 0 ? _f : 150;
             spec.triggerOff = (_g = spec.triggerOff) !== null && _g !== void 0 ? _g : spec.trigger;
             spec.confine = (_h = spec.confine) !== null && _h !== void 0 ? _h : spec.renderMode === 'canvas';
-            if (isValid$1(spec.mark)) {
-                spec.mark.activeType = 'mark';
-            }
-            if (isValid$1(spec.dimension)) {
-                spec.dimension.activeType = 'dimension';
-            }
             if (isValid$1(spec.parentElement)) {
                 if (isString$1(spec.parentElement)) {
                     spec.parentElement = vglobal.getElementById(spec.parentElement);
@@ -90740,7 +90415,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutType = 'none';
             this._alwaysShow = false;
             this._eventList = [];
-            this._isTooltipShown = false;
             this._clickLock = false;
             this._mountEvent = (eType, query, callback) => {
                 this.event.on(eType, query, callback);
@@ -90759,22 +90433,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             };
             this._getMouseOutHandler = (needPointerDetection) => (params) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 if (this._alwaysShow || this._clickLock) {
                     return;
                 }
-                if (!this._isTooltipShown && !((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                if (!((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
                     return;
                 }
                 const browserEnv = isTrueBrowser((_c = this._option) === null || _c === void 0 ? void 0 : _c.mode);
                 const { clientX, clientY } = params.event;
-                if (browserEnv && this._isPointerOnTooltip(params)) {
-                    return;
-                }
                 if (browserEnv && needPointerDetection && this._isPointerInChart({ x: clientX, y: clientY })) {
                     return;
                 }
-                this._handleChartMouseOut(params);
+                if (this._enterable) {
+                    this._outTimer = setTimeout(() => {
+                        this._handleChartMouseOut(params);
+                    }, (_d = this._spec.showDelay) !== null && _d !== void 0 ? _d : DEFAULT_SHOW_DELAY);
+                }
             };
             this._handleChartMouseOut = (params) => {
                 if (this._alwaysShow) {
@@ -90782,12 +90457,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 if (this._spec.triggerOff !== 'none') {
                     this._hideTooltipByHandler(Object.assign(Object.assign({}, params), { tooltip: this }));
+                    this._cacheEnterableRect = null;
                     this._cacheInfo = undefined;
                     this._cacheParams = undefined;
                     this._cacheActiveType = undefined;
                 }
             };
             this._getMouseMoveHandler = (isClick) => (params) => {
+                var _a;
+                if (this._outTimer) {
+                    clearTimeout(this._outTimer);
+                    this._outTimer = null;
+                }
                 if (!this.tooltipHandler) {
                     this._initHandler();
                 }
@@ -90797,9 +90478,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (this._alwaysShow) {
                     return;
                 }
-                if (this._isPointerOnTooltip(params)) {
-                    return;
-                }
                 if (this._clickLock) {
                     if (isClick) {
                         this._handleChartMouseOut(params);
@@ -90807,8 +90485,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     return;
                 }
+                if (!isClick && this._enterable && this.isTooltipShown()) {
+                    if (this._showTimer) {
+                        clearTimeout(this._showTimer);
+                    }
+                    this._showTimer = setTimeout(() => {
+                        this._handleChartMouseMove(params, isClick);
+                    }, (_a = this._spec.showDelay) !== null && _a !== void 0 ? _a : DEFAULT_SHOW_DELAY);
+                }
+                else {
+                    this._handleChartMouseMove(params, isClick);
+                }
+            };
+            this._handleChartMouseMove = (params, isClick) => {
                 const mouseEventData = this._getMouseEventData(params);
-                const { tooltipInfo: { dimension: dimensionInfo }, ignore: { mark: ignoreMark, dimension: ignoreDimension } } = mouseEventData;
+                const { tooltipInfo: { dimension: dimensionInfo }, ignore: { mark: ignoreMark } } = mouseEventData;
                 const success = {
                     mark: false,
                     dimension: false,
@@ -90833,6 +90524,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!success.mark && !success.group && (!success.dimension || isNil$1(dimensionInfo))) {
                     this._handleChartMouseOut(params);
                 }
+                else {
+                    this._initEventOfTooltipContent();
+                }
             };
             this._showTooltipByMouseEvent = (activeType, mouseEventData, params, isClick, useCache) => {
                 var _a;
@@ -90840,8 +90534,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!processor.shouldHandleTooltip(params, mouseEventData.tooltipInfo[activeType])) {
                     return false;
                 }
-                if (this._timer) {
-                    clearTimeout(this._timer);
+                if (this._hideTimer) {
+                    clearTimeout(this._hideTimer);
                 }
                 let success;
                 if (useCache) {
@@ -90858,12 +90552,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }
                 if (success) {
-                    this._isTooltipShown = true;
                     if (isClick && this._spec.lockAfterClick && !this._clickLock) {
                         this._clickLock = true;
                     }
                     else if (Number.isFinite(this._spec.hideTimer)) {
-                        this._timer = setTimeout(() => {
+                        this._hideTimer = setTimeout(() => {
                             this._handleChartMouseOut();
                         }, this._spec.hideTimer);
                     }
@@ -90888,7 +90581,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
             this._hideTooltipByHandler = (params) => {
                 var _a, _b, _c;
-                if (!this._isTooltipShown && !((_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                if (!((_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(ChartEvent.tooltipHide, Object.assign(Object.assign({}, params), { source: Event_Source_Type.chart, tooltip: this }));
@@ -90897,17 +90590,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
                 const handler = (_c = this._spec.handler) !== null && _c !== void 0 ? _c : this.tooltipHandler;
                 if (handler.hideTooltip) {
-                    const result = handler.hideTooltip.call(handler, params);
-                    if (!result) {
-                        this._isTooltipShown = false;
-                    }
-                    return result;
+                    return handler.hideTooltip.call(handler, params);
                 }
                 return 1;
             };
+            this.hideTooltip = () => {
+                const params = {
+                    changePositionOnly: false,
+                    tooltip: this,
+                    item: undefined,
+                    datum: undefined,
+                    source: Event_Source_Type.chart
+                };
+                this._alwaysShow = false;
+                return !this._hideTooltipByHandler(params);
+            };
         }
         isTooltipShown() {
-            return this._isTooltipShown;
+            var _a, _b;
+            return (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.isTooltipShown) === null || _b === void 0 ? void 0 : _b.call(_a);
         }
         changeRegions(regions) {
         }
@@ -90932,15 +90633,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         release() {
             var _a, _b;
             super.release();
-            if (this._timer) {
-                clearTimeout(this._timer);
+            if (this._hideTimer) {
+                clearTimeout(this._hideTimer);
             }
             this._eventList.forEach(({ eventType, handler }) => {
                 this.event.off(eventType, handler);
             });
             this._eventList = [];
             (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.release) === null || _b === void 0 ? void 0 : _b.call(_a);
-            this._isTooltipShown = false;
         }
         beforeRelease() {
             this.event.emit(ChartEvent.tooltipHide, {
@@ -90958,6 +90658,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const userTooltipHandler = this._option.globalInstance.getTooltipHandlerByUser();
             if (userTooltipHandler) {
                 this.tooltipHandler = userTooltipHandler;
+                this._enterable = false;
             }
             else {
                 const type = renderMode === 'canvas' ? TooltipHandlerType.canvas : TooltipHandlerType.dom;
@@ -90969,6 +90670,50 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 handler.name = `${this._spec.className}-${(_b = this._option.globalInstance.id) !== null && _b !== void 0 ? _b : 0}-${this.getSpecIndex()}`;
                 (_c = this.pluginService) === null || _c === void 0 ? void 0 : _c.load([handler]);
                 this.tooltipHandler = handler;
+                if (this._spec.enterable && renderMode === 'html' && this.tooltipHandler) {
+                    this._enterable = true;
+                    this._needInitEventOfTooltip = true;
+                }
+                else {
+                    this._enterable = false;
+                }
+            }
+        }
+        _initEventOfTooltipContent() {
+            var _a, _b;
+            if (!this._needInitEventOfTooltip || !this._enterable) {
+                return;
+            }
+            const container = (_b = (_a = this.tooltipHandler).getTooltipContainer) === null || _b === void 0 ? void 0 : _b.call(_a);
+            const element = container === null || container === void 0 ? void 0 : container.firstChild;
+            if (element) {
+                element.addEventListener('mouseenter', () => {
+                    var _a;
+                    const rect = (_a = element.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(element);
+                    if (rect) {
+                        this._cacheEnterableRect = { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+                    }
+                    if (this._outTimer) {
+                        clearTimeout(this._outTimer);
+                        this._outTimer = null;
+                    }
+                    if (this._showTimer) {
+                        clearTimeout(this._showTimer);
+                        this._showTimer = null;
+                    }
+                });
+                element.addEventListener('mouseleave', () => {
+                    var _a, _b;
+                    if (this._cacheEnterableRect) {
+                        const newRect = (_a = element.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(element);
+                        if (newRect &&
+                            Object.keys(this._cacheEnterableRect).every(k => this._cacheEnterableRect[k] === newRect[k])) {
+                            this._cacheEnterableRect = null;
+                            this._outTimer = setTimeout(this.hideTooltip, (_b = this._spec.showDelay) !== null && _b !== void 0 ? _b : DEFAULT_SHOW_DELAY);
+                        }
+                    }
+                });
+                this._needInitEventOfTooltip = false;
             }
         }
         _initProcessor() {
@@ -90997,7 +90742,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._mountEvent('pointerdown', { source: 'chart' }, this._getMouseMoveHandler(false));
                     this._mountEvent('pointerup', { source: 'window' }, this._getMouseOutHandler(true));
                 }
-                this._mountEvent('pointerout', { source: 'canvas' }, this._getMouseOutHandler(false));
+                this._mountEvent('pointerleave', { source: 'canvas' }, this._getMouseOutHandler(false));
             }
             if (trigger.includes('click')) {
                 this._mountEvent('pointertap', { source: 'chart' }, this._getMouseMoveHandler(true));
@@ -91034,17 +90779,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return result;
         }
-        hideTooltip() {
-            const params = {
-                changePositionOnly: false,
-                tooltip: this,
-                item: undefined,
-                datum: undefined,
-                source: Event_Source_Type.chart
-            };
-            this._alwaysShow = false;
-            return !this._hideTooltipByHandler(params);
-        }
         _isSameAsCache(nextInfo, nextParams, nextActiveType) {
             if (nextActiveType !== this._cacheActiveType) {
                 return false;
@@ -91101,28 +90835,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return false;
         }
-        _isPointerOnTooltip(params) {
-            var _a, _b;
-            if (this._spec.enterable && this._spec.renderMode === 'html') {
-                const { event } = params;
-                let newTarget;
-                if (isValid$1(event.nativeEvent)) {
-                    const nativeEvent = event.nativeEvent;
-                    newTarget = nativeEvent.relatedTarget;
-                    if (nativeEvent.composedPath && nativeEvent.composedPath().length > 0) {
-                        newTarget = nativeEvent.composedPath()[0];
-                    }
-                }
-                else {
-                    newTarget = event.relatedTarget;
-                }
-                const container = (_b = (_a = this.tooltipHandler) === null || _a === void 0 ? void 0 : _a.getTooltipContainer) === null || _b === void 0 ? void 0 : _b.call(_a);
-                if (isValid$1(container) && isValid$1(newTarget) && hasParentElement(newTarget, container)) {
-                    return true;
-                }
-            }
-            return false;
-        }
         getVisible() {
             return this._spec.visible !== false;
         }
@@ -93107,19 +92819,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             super.setAttrFromSpec();
             if (this._spec.roamZoom === true || this._spec.roamZoom) {
-                this._zoomAttr = merge$2({}, this._zoomAttr, this._spec.roamZoom);
+                this._zoomAttr = merge$1({}, this._zoomAttr, this._spec.roamZoom);
             }
             else {
                 this._zoomAttr.enable = false;
             }
             if (this._spec.roamDrag === true || this._spec.roamDrag) {
-                this._dragAttr = merge$2({}, this._dragAttr, this._spec.roamDrag);
+                this._dragAttr = merge$1({}, this._dragAttr, this._spec.roamDrag);
             }
             else {
                 this._dragAttr.enable = false;
             }
             if (this._spec.roamScroll === true || this._spec.roamScroll) {
-                this._scrollAttr = merge$2({}, this._scrollAttr, this._spec.roamScroll);
+                this._scrollAttr = merge$1({}, this._scrollAttr, this._spec.roamScroll);
             }
             else {
                 this._scrollAttr.enable = false;
@@ -98778,27 +98490,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return result;
     };
     const positionType = {
-        left: ['left', 'center'],
-        right: ['right', 'center'],
-        top: ['center', 'top'],
-        lt: ['left', 'top'],
-        tl: ['left', 'top'],
-        rt: ['right', 'top'],
-        tr: ['right', 'top'],
-        bottom: ['center', 'bottom'],
-        bl: ['left', 'bottom'],
-        lb: ['left', 'bottom'],
-        br: ['right', 'bottom'],
-        rb: ['right', 'bottom'],
-        inside: ['center', 'center'],
-        center: ['center', 'center'],
-        centerBottom: ['center', 'centerBottom'],
-        centerTop: ['center', 'centerTop'],
-        centerLeft: ['centerLeft', 'center'],
-        centerRight: ['centerRight', 'center']
-    };
-    const getHorizontalPositionType = (position, defaultCase) => { var _a, _b; return (_b = (_a = positionType[position]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : defaultCase; };
-    const getVerticalPositionType = (position, defaultCase) => { var _a, _b; return (_b = (_a = positionType[position]) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : defaultCase; };
+        left: [-2, 0],
+        right: [2, 0],
+        top: [0, -2],
+        lt: [-2, -2],
+        tl: [-2, -2],
+        rt: [2, -2],
+        tr: [2, -2],
+        bottom: [0, 2],
+        bl: [-2, 2],
+        lb: [-2, 2],
+        br: [2, 2],
+        rb: [2, 2],
+        inside: [0, 0],
+        center: [0, 0],
+        centerBottom: [0, 1],
+        centerTop: [0, -1],
+        centerLeft: [-1, 0],
+        centerRight: [1, 0]
+    };
+    const getPositionType = (position, dim, defaultCase = 2) => { var _a, _b; return (_b = (_a = positionType[position]) === null || _a === void 0 ? void 0 : _a[dim === 'x' ? 0 : 1]) !== null && _b !== void 0 ? _b : defaultCase; };
     const getCartesianCrosshairRect = (dimensionData, layoutStartPoint) => {
         var _a;
         const currValueX = new Map();
@@ -98927,10 +98638,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         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;
+        const hasContent = !!content.length;
         let maxKeyWidth = 0;
         let maxAdaptiveKeyWidth = 0;
         let maxValueWidth = 0;
@@ -98941,9 +98649,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const valueWidths = [];
             const shapeWidths = [];
             let contentHeight = 0;
-            attributes.content = filteredContent.map((item, i) => {
+            attributes.content = content.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 { 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 } = item;
                 const itemAttrs = { height: 0, spaceRow: actualSpaceRow !== null && actualSpaceRow !== void 0 ? actualSpaceRow : commonSpaceRow };
                 if (isValid$1(actualKey)) {
                     const itemKeyStyle = mergeSpec({}, keyStyle, getTextAttributes(actualKeyStyle, undefined, {}));
@@ -98971,14 +98679,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         visible: true,
                         symbolType: actualShapeType
                     };
-                    const adaptiveShapeFill = actualShapeFill !== null && actualShapeFill !== void 0 ? actualShapeFill : actualShapeColor;
                     if (actualShapeHollow) {
-                        shape.stroke = adaptiveShapeFill;
+                        shape.stroke = actualShapeFill;
                     }
                     else {
-                        shape.fill = adaptiveShapeFill;
+                        shape.fill = actualShapeFill;
                     }
-                    shape.stroke = actualShapeStroke !== null && actualShapeStroke !== void 0 ? actualShapeStroke : adaptiveShapeFill;
+                    shape.stroke = actualShapeStroke !== null && actualShapeStroke !== void 0 ? actualShapeStroke : actualShapeFill;
                     shape.lineWidth = actualShapeLineWidth;
                     itemAttrs.shape = shape;
                     const shapeWidth = actualShapeSize !== null && actualShapeSize !== void 0 ? actualShapeSize : shapeStyle.size;
@@ -98990,7 +98697,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 itemAttrs.height = itemHeight;
                 contentHeight += itemHeight;
-                if (i < filteredContent.length - 1) {
+                if (i < content.length - 1) {
                     contentHeight += itemAttrs.spaceRow;
                 }
                 return itemAttrs;
@@ -99080,52 +98787,37 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     return 1;
                 }
                 if (!visible) {
-                    this._clearAllCache();
                     this._updateTooltip(false, params);
                     return 0;
                 }
                 return this._changeTooltipPosition(params, data);
             };
             this._changeTooltipPosition = (params, data) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d, _e;
                 if (this._isReleased) {
                     return 1;
                 }
                 const event = params.event;
-                const { tooltipSpec, tooltipActual, changePositionOnly } = params;
-                if (tooltipSpec.enterable) {
-                    if (!this._isPointerEscaped && this._isPointerMovingToTooltip(params)) {
-                        if (!this._isTooltipPaused) {
-                            this._isTooltipPaused = true;
-                            this._cachePointerTimer = setTimeout(() => {
-                                this._isPointerEscaped = true;
-                            }, 300);
-                        }
-                        return 0;
-                    }
-                    this._isTooltipPaused = false;
-                    this._isPointerEscaped = false;
-                    clearTimeout(this._cachePointerTimer);
-                    this._cachePointerPosition = this._getPointerPositionRelativeToTooltipParent(params);
-                }
-                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 = tooltipSpec[activeType];
-                if (!pattern) {
+                const { tooltipSpec, activeTooltipSpec, changePositionOnly } = params;
+                if (!activeTooltipSpec) {
                     return 1;
                 }
-                const position = this._getActualTooltipPosition(tooltipActual, params, this._getTooltipBoxSize(tooltipActual, changePositionOnly));
-                tooltipActual.position = position;
-                if (pattern.updatePosition) {
-                    tooltipActual.position = pattern.updatePosition(tooltipActual.position, data, params);
+                const activeType = activeTooltipSpec.activeType;
+                if (activeTooltipSpec.handler) {
+                    return (_c = (_b = (_a = activeTooltipSpec.handler).showTooltip) === null || _b === void 0 ? void 0 : _b.call(_a, activeType, data, params)) !== null && _c !== void 0 ? _c : 0;
+                }
+                const pattern = activeTooltipSpec;
+                const position = this._getActualTooltipPosition(activeTooltipSpec, params, this._getTooltipBoxSize(activeTooltipSpec, changePositionOnly));
+                activeTooltipSpec.position = position;
+                const updatePosition = (_d = activeTooltipSpec.updatePosition) !== null && _d !== void 0 ? _d : (_e = tooltipSpec[activeType]) === null || _e === void 0 ? void 0 : _e.updatePosition;
+                if (updatePosition) {
+                    activeTooltipSpec.position = updatePosition(activeTooltipSpec.position, data, params);
                 }
                 let tooltipVisible = (pattern === null || pattern === void 0 ? void 0 : pattern.visible) !== false;
                 if (!data ||
                     event.type === 'pointerout' ||
-                    !tooltipActual.visible ||
-                    (!tooltipActual.title && !tooltipActual.content)) {
+                    !activeTooltipSpec.visible ||
+                    (!activeTooltipSpec.title && !activeTooltipSpec.content)) {
                     tooltipVisible = false;
                 }
                 this._updateTooltip(tooltipVisible, Object.assign(Object.assign({}, params), { changePositionOnly }));
@@ -99139,16 +98831,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     y: Infinity
                 };
                 if (!tooltipSpec) {
-                    this._cacheTooltipPosition = undefined;
                     return invalidPosition;
                 }
                 const event = params.event;
                 const { activeType, data } = actualTooltip;
                 const firstDim = activeType === 'dimension' ? (_b = (_a = data[0]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0] : data === null || data === void 0 ? void 0 : data[0];
-                let { offsetX, offsetY } = this._option;
+                const { offsetX, offsetY } = this._option;
                 const spec = tooltipSpec[activeType];
-                const position = getTooltipPatternValue(spec.position, data, params);
-                const positionMode = (_c = getTooltipPatternValue(spec.positionMode, data, params)) !== null && _c !== void 0 ? _c : (activeType === 'mark' ? 'mark' : 'pointer');
+                const position = getTooltipPatternValue(spec === null || spec === void 0 ? void 0 : spec.position, data, params);
+                const positionMode = (_c = getTooltipPatternValue(spec === null || spec === void 0 ? void 0 : spec.positionMode, data, params)) !== null && _c !== void 0 ? _c : (activeType === 'mark' ? 'mark' : 'pointer');
                 const { width: tooltipBoxWidth = 0, height: tooltipBoxHeight = 0 } = tooltipBoxSize !== null && tooltipBoxSize !== void 0 ? tooltipBoxSize : {};
                 const isCanvas = tooltipSpec.renderMode === 'canvas';
                 const canvasRect = (_d = params === null || params === void 0 ? void 0 : params.chart) === null || _d === void 0 ? void 0 : _d.getCanvasRect();
@@ -99184,26 +98875,23 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     containerSize.height = canvasHeight;
                 }
                 const tooltipSizeScale = tooltipParentElementScale / chartElementScale;
-                let left;
-                let top;
-                let right;
-                let bottom;
-                let pointerFixedPositionX = position;
-                let pointerFixedPositionY = position;
-                const processCartesianFixedPositionX = ({ orient, mode, offset }) => {
+                const calcPos = {};
+                const pointerFixedPosition = { x: position, y: position };
+                const dimToPos = { x: ['left', 'right'], y: ['top', 'bottom'] };
+                const processCartesianFixedPosition = ({ orient, mode, offset }, dim) => {
                     var _a;
-                    let x1;
-                    let x2;
+                    let dim1;
+                    let dim2;
                     const model = params.model;
                     const startPoint = model === null || model === void 0 ? void 0 : model.getLayoutStartPoint();
-                    offsetX = offset !== null && offset !== void 0 ? offset : offsetX;
+                    const dimOffset = offset !== null && offset !== void 0 ? offset : (dim === 'x' ? offsetX : offsetY);
                     if (mode === 'mark') {
                         isFixedPosition = true;
                         const element = params.item;
                         const bounds = element === null || element === void 0 ? void 0 : element.getBounds();
                         if (bounds && startPoint) {
-                            x1 = bounds.x1 + startPoint.x;
-                            x2 = bounds.x2 + startPoint.x;
+                            dim1 = (dim === 'x' ? bounds.x1 : bounds.y1) + startPoint[dim];
+                            dim2 = (dim === 'x' ? bounds.x2 : bounds.y2) + startPoint[dim];
                         }
                     }
                     else if (mode === 'crosshair' &&
@@ -99213,272 +98901,123 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         isFixedPosition = true;
                         const rect = getCartesianCrosshairRect(firstDim, startPoint);
                         if (rect) {
-                            x1 = rect.start.x;
-                            x2 = rect.end.x;
+                            dim1 = rect.start[dim];
+                            dim2 = rect.end[dim];
                         }
                     }
                     else {
-                        pointerFixedPositionX = orient;
+                        pointerFixedPosition[dim] = orient;
                     }
                     if (isFixedPosition) {
-                        switch (getHorizontalPositionType(orient)) {
-                            case 'left':
-                                left = x1 - tooltipBoxWidth * tooltipSizeScale - offsetX;
+                        const posKey = dimToPos[dim][0];
+                        const boxSize = dim === 'x' ? tooltipBoxWidth : tooltipBoxHeight;
+                        switch (getPositionType(orient, dim)) {
+                            case -2:
+                                calcPos[posKey] = dim1 - boxSize * tooltipSizeScale - dimOffset;
                                 break;
-                            case 'right':
-                                left = x2 + offsetX;
+                            case 0:
+                                calcPos[posKey] = (dim1 + dim2) / 2 - (boxSize * tooltipSizeScale) / 2;
                                 break;
-                            case 'center':
-                                left = (x1 + x2) / 2 - (tooltipBoxWidth * tooltipSizeScale) / 2;
+                            case -1:
+                                calcPos[posKey] = (dim1 + dim2) / 2 - boxSize * tooltipSizeScale - dimOffset;
                                 break;
-                            case 'centerLeft':
-                                left = (x1 + x2) / 2 - tooltipBoxWidth * tooltipSizeScale - offsetX;
+                            case 1:
+                                calcPos[posKey] = (dim1 + dim2) / 2 + dimOffset;
                                 break;
-                            case 'centerRight':
-                                left = (x1 + x2) / 2 + offsetX;
-                                break;
-                        }
-                    }
-                };
-                const processCartesianFixedPositionY = ({ orient, mode, offset }) => {
-                    var _a;
-                    let y1;
-                    let y2;
-                    const model = params.model;
-                    const startPoint = model === null || model === void 0 ? void 0 : model.getLayoutStartPoint();
-                    offsetY = offset !== null && offset !== void 0 ? offset : offsetY;
-                    if (mode === 'mark') {
-                        isFixedPosition = true;
-                        const element = params.item;
-                        const bounds = element === null || element === void 0 ? void 0 : element.getBounds();
-                        if (bounds && startPoint) {
-                            y1 = bounds.y1 + startPoint.y;
-                            y2 = bounds.y2 + startPoint.y;
-                        }
-                    }
-                    else if (mode === 'crosshair' &&
-                        ((_a = firstDim === null || firstDim === void 0 ? void 0 : firstDim.series) === null || _a === void 0 ? void 0 : _a.coordinate) === 'cartesian' &&
-                        firstDim.datum &&
-                        firstDim.datum.length) {
-                        isFixedPosition = true;
-                        const rect = getCartesianCrosshairRect(firstDim, startPoint);
-                        if (rect) {
-                            y1 = rect.start.y;
-                            y2 = rect.end.y;
-                        }
-                    }
-                    else {
-                        pointerFixedPositionY = orient;
-                    }
-                    if (isFixedPosition) {
-                        switch (getVerticalPositionType(orient)) {
-                            case 'top':
-                                top = y1 - tooltipBoxHeight * tooltipSizeScale - offsetY;
-                                break;
-                            case 'bottom':
-                                top = y2 + offsetY;
-                                break;
-                            case 'center':
-                                top = (y1 + y2) / 2 - (tooltipBoxHeight * tooltipSizeScale) / 2;
-                                break;
-                            case 'centerTop':
-                                top = (y1 + y2) / 2 - tooltipBoxHeight * tooltipSizeScale - offsetY;
-                                break;
-                            case 'centerBottom':
-                                top = (y1 + y2) / 2 + offsetY;
+                            case 2:
+                                calcPos[posKey] = dim2 + dimOffset;
                                 break;
                         }
                     }
                 };
+                const dims = ['x', 'y'];
                 if (isObject$2(position)) {
                     if (isGlobalTooltipPositionPattern(position)) {
                         const { left: posLeft, right: posRight, top: posTop, bottom: posBottom } = position;
-                        left = getActualTooltipPositionValue(posLeft, event);
-                        top = getActualTooltipPositionValue(posTop, event);
-                        right = getActualTooltipPositionValue(posRight, event);
-                        bottom = getActualTooltipPositionValue(posBottom, event);
+                        calcPos.left = getActualTooltipPositionValue(posLeft, event);
+                        calcPos.top = getActualTooltipPositionValue(posTop, event);
+                        calcPos.right = getActualTooltipPositionValue(posRight, event);
+                        calcPos.bottom = getActualTooltipPositionValue(posBottom, event);
                     }
                     else if (isFixedTooltipPositionPattern(position)) {
-                        const { x, y } = position;
-                        if (isNumber$1(x) || isFunction$1(x)) {
-                            left = getActualTooltipPositionValue(x, event);
-                        }
-                        else {
-                            processCartesianFixedPositionX(x);
-                        }
-                        if (isNumber$1(y) || isFunction$1(y)) {
-                            top = getActualTooltipPositionValue(y, event);
-                        }
-                        else {
-                            processCartesianFixedPositionY(y);
-                        }
-                    }
-                }
-                else if (isValid$1(position)) {
-                    processCartesianFixedPositionX({ orient: position, mode: positionMode });
-                    processCartesianFixedPositionY({ orient: position, mode: positionMode });
-                }
-                let x;
-                let y;
-                const { canvasX, canvasY } = event;
-                if (isValidNumber$1(left)) {
-                    x = left;
-                }
-                else if (isValidNumber$1(right)) {
-                    x = canvasWidth - tooltipBoxWidth * tooltipSizeScale - right;
-                }
-                else {
-                    const x0 = canvasX;
-                    switch (getHorizontalPositionType(pointerFixedPositionX, 'right')) {
-                        case 'center':
-                            x = x0 - (tooltipBoxWidth * tooltipSizeScale) / 2;
-                            break;
-                        case 'left':
-                        case 'centerLeft':
-                            x = x0 - tooltipBoxWidth * tooltipSizeScale - offsetX;
-                            break;
-                        case 'right':
-                        case 'centerRight':
-                            x = x0 + offsetX;
-                            break;
-                    }
-                }
-                if (isValidNumber$1(top)) {
-                    y = top;
-                }
-                else if (isValidNumber$1(bottom)) {
-                    y = canvasHeight - tooltipBoxHeight * tooltipSizeScale - bottom;
-                }
-                else {
-                    const y0 = canvasY;
-                    switch (getVerticalPositionType(pointerFixedPositionY, 'bottom')) {
-                        case 'center':
-                            y = y0 - (tooltipBoxHeight * tooltipSizeScale) / 2;
-                            break;
-                        case 'top':
-                        case 'centerTop':
-                            y = y0 - tooltipBoxHeight * tooltipSizeScale - offsetY;
-                            break;
-                        case 'bottom':
-                        case 'centerBottom':
-                            y = y0 + offsetY;
-                            break;
-                    }
-                }
-                x *= chartElementScale;
-                y *= chartElementScale;
-                if (isTrueBrowser(this._env)) {
-                    x += relativePosOffset.x;
-                    y += relativePosOffset.y;
-                }
-                x /= tooltipParentElementScale;
-                y /= tooltipParentElementScale;
-                const { width: containerWidth, height: containerHeight } = containerSize;
-                const isLeftOut = () => x * tooltipParentElementScale + tooltipParentElementRect.x < 0;
-                const isRightOut = () => (x + tooltipBoxWidth) * tooltipParentElementScale + tooltipParentElementRect.x > containerWidth;
-                const isTopOut = () => y * tooltipParentElementScale + tooltipParentElementRect.y < 0;
-                const isBottomOut = () => (y + tooltipBoxHeight) * tooltipParentElementScale + tooltipParentElementRect.y > containerHeight;
-                const detectLeftFirst = () => {
-                    if (isLeftOut()) {
-                        if (isFixedPosition) {
-                            x = -tooltipParentElementRect.x / tooltipParentElementScale;
-                        }
-                        else {
-                            if (getHorizontalPositionType(position, 'right') === 'center') {
-                                x += offsetX + tooltipBoxWidth / 2;
+                        dims.forEach(dim => {
+                            const dimValue = position[dim];
+                            if (isNumber$1(dimValue) || isFunction$1(dimValue)) {
+                                calcPos[dimToPos[dim][0]] = getActualTooltipPositionValue(dimValue, event);
                             }
                             else {
-                                x += offsetX * 2 + tooltipBoxWidth;
+                                processCartesianFixedPosition(dimValue, dim);
                             }
-                        }
+                        });
                     }
-                };
-                const detectLeftLast = () => {
-                    if (isLeftOut()) {
-                        x = -tooltipParentElementRect.x / tooltipParentElementScale;
+                }
+                else if (isValid$1(position)) {
+                    processCartesianFixedPosition({ orient: position, mode: positionMode }, 'x');
+                    processCartesianFixedPosition({ orient: position, mode: positionMode }, 'y');
+                }
+                const result = { x: null, y: null };
+                const isBrowser = isTrueBrowser(this._env);
+                dims.forEach(dim => {
+                    const boxSize = dim === 'x' ? tooltipBoxWidth : tooltipBoxHeight;
+                    const canvasSize = dim === 'x' ? canvasWidth : canvasHeight;
+                    const offset = dim === 'x' ? offsetX : offsetY;
+                    const posType = getPositionType(pointerFixedPosition[dim], dim);
+                    if (isValidNumber$1(calcPos[dimToPos[dim][0]])) {
+                        result[dim] = calcPos[dimToPos[dim][0]];
+                    }
+                    else if (isValidNumber$1(calcPos[dimToPos[dim][1]])) {
+                        result[dim] = canvasSize - boxSize * tooltipSizeScale - calcPos[dimToPos[dim][1]];
                     }
-                };
-                const detectRightFirst = () => {
-                    if (isRightOut()) {
-                        if (isFixedPosition) {
-                            x = (containerWidth - tooltipParentElementRect.x) / tooltipParentElementScale - tooltipBoxWidth;
+                    else {
+                        const value0 = dim === 'x' ? event.canvasX : event.canvasY;
+                        if (posType > 0) {
+                            result[dim] = value0 + offset;
                         }
                         else {
-                            if (getHorizontalPositionType(position, 'right') === 'center') {
-                                x -= offsetX + tooltipBoxWidth / 2;
-                            }
-                            else {
-                                x -= offsetX * 2 + tooltipBoxWidth;
-                            }
+                            result[dim] = value0 - (boxSize * tooltipSizeScale) / 2 + (posType < 0 ? -1 : 0) * offset;
                         }
                     }
-                };
-                const detectRightLast = () => {
-                    if (isRightOut()) {
-                        x = (containerWidth - tooltipParentElementRect.x) / tooltipParentElementScale - tooltipBoxWidth;
+                    result[dim] *= chartElementScale;
+                    if (isBrowser) {
+                        result[dim] += relativePosOffset[dim];
                     }
-                };
-                const detectTopFirst = () => {
-                    if (isTopOut()) {
+                    result[dim] /= tooltipParentElementScale;
+                    const containerDimSize = dim === 'x' ? containerSize.width : containerSize.height;
+                    const leftOrTop = -tooltipParentElementRect[dim] / tooltipParentElementScale;
+                    const rightOrBottom = (containerDimSize - tooltipParentElementRect[dim]) / tooltipParentElementScale - boxSize;
+                    if (posType !== 2 && result[dim] < leftOrTop) {
                         if (isFixedPosition) {
-                            y = -tooltipParentElementRect.y / tooltipParentElementScale;
+                            result[dim] = leftOrTop;
                         }
                         else {
-                            if (getVerticalPositionType(position, 'bottom') === 'center') {
-                                y += offsetY + tooltipBoxHeight / 2;
+                            if (posType === 0) {
+                                result[dim] += offset + boxSize / 2;
                             }
                             else {
-                                y += offsetY * 2 + tooltipBoxHeight;
+                                result[dim] += offset * 2 + boxSize;
+                            }
+                            if (result[dim] > rightOrBottom) {
+                                result[dim] = rightOrBottom;
                             }
                         }
                     }
-                };
-                const detectTopLast = () => {
-                    if (isTopOut()) {
-                        y = 0 - tooltipParentElementRect.y / tooltipParentElementScale;
-                    }
-                };
-                const detectBottomFirst = () => {
-                    if (isBottomOut()) {
+                    else if (posType !== -2 && result[dim] > rightOrBottom) {
                         if (isFixedPosition) {
-                            y = (containerHeight - tooltipParentElementRect.y) / tooltipParentElementScale - tooltipBoxHeight;
+                            result[dim] = rightOrBottom;
                         }
                         else {
-                            if (getVerticalPositionType(position, 'bottom') === 'center') {
-                                y -= offsetY + tooltipBoxHeight / 2;
+                            if (posType === 0) {
+                                result[dim] -= offset + boxSize / 2;
                             }
                             else {
-                                y -= offsetY * 2 + tooltipBoxHeight;
+                                result[dim] -= offset * 2 + boxSize;
+                            }
+                            if (result[dim] < leftOrTop) {
+                                result[dim] = leftOrTop;
                             }
                         }
                     }
-                };
-                const detectBottomLast = () => {
-                    if (isBottomOut()) {
-                        y = (containerHeight - tooltipParentElementRect.y) / tooltipParentElementScale - tooltipBoxHeight;
-                    }
-                };
-                const horizontalType = getHorizontalPositionType(position, 'right');
-                if (horizontalType === 'left' || (horizontalType.includes('center') && isLeftOut())) {
-                    detectLeftFirst();
-                    detectRightLast();
-                }
-                else {
-                    detectRightFirst();
-                    detectLeftLast();
-                }
-                const verticalType = getVerticalPositionType(position, 'bottom');
-                if (verticalType === 'top' || (verticalType.includes('center') && isTopOut())) {
-                    detectTopFirst();
-                    detectBottomLast();
-                }
-                else {
-                    detectBottomFirst();
-                    detectTopLast();
-                }
-                const result = { x, y };
-                this._cacheTooltipPosition = result;
-                this._cacheTooltipSize = { width: tooltipBoxWidth, height: tooltipBoxHeight };
+                });
                 return result;
             };
         }
@@ -99500,7 +99039,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         release() {
             var _a, _b, _c;
-            this._clearAllCache();
             const spec = (_a = this._component.getSpec()) !== null && _a !== void 0 ? _a : {};
             if (spec.handler) {
                 (_c = (_b = spec.handler).release) === null || _c === void 0 ? void 0 : _c.call(_b);
@@ -99509,15 +99047,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._removeTooltip();
             this._isReleased = true;
         }
-        _clearAllCache() {
-            this._isTooltipPaused = false;
-            this._isPointerEscaped = false;
-            clearTimeout(this._cachePointerTimer);
-            this._cachePointerTimer = -1;
-            this._cachePointerPosition = undefined;
-            this._cacheTooltipPosition = undefined;
-            this._cacheTooltipSize = undefined;
-        }
         _throttle(callback) {
             const tooltipSpec = this._component.getSpec();
             let wait;
@@ -99552,68 +99081,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 height: (panelDomHeight !== null && panelDomHeight !== void 0 ? panelDomHeight : panel === null || panel === void 0 ? void 0 : panel.height) + (isCanvas ? panel.lineWidth : 0)
             };
         }
-        _getPointerPositionRelativeToTooltipParent(params) {
-            var _a, _b;
-            let { canvasX: x, canvasY: y } = params.event;
-            const { tooltipSpec } = params;
-            const invalidPosition = {
-                x: Infinity,
-                y: Infinity
-            };
-            const isCanvas = tooltipSpec.renderMode === 'canvas';
-            const tooltipParentElement = this._getParentElement(tooltipSpec);
-            let relativePosOffset = { x: 0, y: 0 };
-            let tooltipParentElementRect = { x: 0, y: 0 };
-            let chartElementScale = 1;
-            let tooltipParentElementScale = 1;
-            if (isTrueBrowser(this._env) && !tooltipSpec.confine) {
-                if (!isCanvas) {
-                    tooltipParentElementRect = (_a = tooltipParentElement === null || tooltipParentElement === void 0 ? void 0 : tooltipParentElement.getBoundingClientRect()) !== null && _a !== void 0 ? _a : invalidPosition;
-                    const chartElement = ((_b = this._compiler.getCanvas()) !== null && _b !== void 0 ? _b : this._chartContainer);
-                    const chartElementRect = chartElement === null || chartElement === void 0 ? void 0 : chartElement.getBoundingClientRect();
-                    relativePosOffset = {
-                        x: chartElementRect.x - tooltipParentElementRect.x,
-                        y: chartElementRect.y - tooltipParentElementRect.y
-                    };
-                    chartElementScale = getScale(chartElement, chartElementRect);
-                    tooltipParentElementScale = getScale(tooltipParentElement, tooltipParentElementRect);
-                }
-            }
-            x *= chartElementScale;
-            y *= chartElementScale;
-            if (isTrueBrowser(this._env)) {
-                x += relativePosOffset.x;
-                y += relativePosOffset.y;
-            }
-            x /= tooltipParentElementScale;
-            y /= tooltipParentElementScale;
-            return { x, y };
-        }
-        _isPointerMovingToTooltip(params) {
-            if (!this._cacheTooltipPosition || !this._cacheTooltipSize || !this._cachePointerPosition) {
-                return false;
-            }
-            const { width: tooltipWidth, height: tooltipHeight } = this._cacheTooltipSize;
-            const { x: tooltipX = 0, y: tooltipY } = this._cacheTooltipPosition;
-            const pos = this._getPointerPositionRelativeToTooltipParent(params);
-            if (pointInRect(pos, {
-                x1: tooltipX,
-                y1: tooltipY,
-                x2: tooltipX + tooltipWidth,
-                y2: tooltipY + tooltipHeight
-            }, false)) {
-                return true;
-            }
-            const a = { x: tooltipX, y: tooltipY };
-            const b = { x: a.x + tooltipWidth, y: a.y };
-            const c = { x: a.x, y: a.y + tooltipHeight };
-            const d = { x: b.x, y: c.y };
-            const oldPos = this._cachePointerPosition;
-            return (polygonContainPoint([oldPos, a, b], pos.x, pos.y) ||
-                polygonContainPoint([oldPos, c, d], pos.x, pos.y) ||
-                polygonContainPoint([oldPos, a, d], pos.x, pos.y) ||
-                polygonContainPoint([oldPos, b, c], pos.x, pos.y));
-        }
         _getParentElement(spec) {
             return spec.parentElement;
         }
@@ -100071,10 +99538,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             super.setStyle(mergeSpec({}, defaultContentColumnStyle, tooltipStyle.content, this._getContentColumnStyle()));
             const renderContent = (_b = (_a = this._option.getTooltipActual()) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : [];
             const contentAttributes = (_d = (_c = this._option.getTooltipAttributes()) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : [];
-            const getKeyItemStyle = (line, i) => {
+            const getKeyItemStyle = (line, attrs, i) => {
                 var _a, _b;
                 const { key, isKeyAdaptive } = line;
-                const { height } = contentAttributes[i];
+                const { height } = attrs;
                 const { keyColumn } = tooltipStyle;
                 const style = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(height) }, defaultLabelStyle), keyColumn.common), (_a = keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
                 const hasContent = (isString$1(key) && ((_b = key === null || key === void 0 ? void 0 : key.trim) === null || _b === void 0 ? void 0 : _b.call(key)) !== '') || isNumber$1(key);
@@ -100086,32 +99553,33 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 return style;
             };
-            const getValueItemStyle = (line, i) => {
+            const getValueItemStyle = (line, attrs, i) => {
                 var _a;
-                const { height } = contentAttributes[i];
+                const { height } = attrs;
                 const { valueColumn } = tooltipStyle;
                 const style = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(height) }, defaultLabelStyle), valueColumn.common), (_a = valueColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
                 return style;
             };
-            const getShapeItemStyle = (line, i) => {
+            const getShapeItemStyle = (line, attrs, i) => {
                 var _a, _b, _c, _d;
-                const { height } = contentAttributes[i];
+                const { height } = attrs;
                 const { shapeColumn } = tooltipStyle;
-                const keyStyle = getKeyItemStyle(line, i);
+                const keyStyle = getKeyItemStyle(line, attrs, i);
                 const paddingTop = `calc((${(_b = (_a = keyStyle.lineHeight) !== null && _a !== void 0 ? _a : keyStyle.fontSize) !== null && _b !== void 0 ? _b : '18px'} - ${(_c = shapeColumn.width) !== null && _c !== void 0 ? _c : '8px'}) / 2)`;
                 const style = mergeSpec({}, defaultShapeStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(height), paddingTop }, shapeColumn.common), (_d = shapeColumn.items) === null || _d === void 0 ? void 0 : _d[i]));
                 return style;
             };
-            renderContent.forEach((line, i) => {
+            contentAttributes.forEach((attrs, i) => {
                 var _a;
+                const line = renderContent[i];
                 if (this.className === 'key-box') {
-                    this.children[i].setStyle(getKeyItemStyle(line, i));
+                    this.children[i].setStyle(getKeyItemStyle(line, attrs, i));
                 }
                 else if (this.className === 'value-box') {
-                    this.children[i].setStyle(getValueItemStyle(line, i));
+                    this.children[i].setStyle(getValueItemStyle(line, attrs, i));
                 }
                 else if (this.className === 'shape-box') {
-                    (_a = this.children[i]) === null || _a === void 0 ? void 0 : _a.setStyle(getShapeItemStyle(line, i), this._getShapeSvgOption(line, i));
+                    (_a = this.children[i]) === null || _a === void 0 ? void 0 : _a.setStyle(getShapeItemStyle(line, attrs, i), this._getShapeSvgOption(line, i));
                 }
             });
         }
@@ -100119,9 +99587,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d;
             const renderContent = (_b = (_a = this._option.getTooltipActual()) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : [];
             const contentAttributes = (_d = (_c = this._option.getTooltipAttributes()) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : [];
-            renderContent.forEach((line, i) => {
+            contentAttributes.forEach((attributes, i) => {
                 var _a, _b, _c, _d, _e, _f, _g;
                 let childContent;
+                const line = renderContent[i];
                 if (this.className === 'key-box') {
                     const keyContent = line.key;
                     if ((isString$1(keyContent) && ((_a = keyContent === null || keyContent === void 0 ? void 0 : keyContent.trim) === null || _a === void 0 ? void 0 : _a.call(keyContent)) !== '') || isNumber$1(keyContent)) {
@@ -100130,7 +99599,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     else {
                         childContent = TOOLTIP_EMPTY_STRING;
                     }
-                    (_b = this.children[i]) === null || _b === void 0 ? void 0 : _b.setContent(childContent, (_c = contentAttributes[i].key) === null || _c === void 0 ? void 0 : _c.multiLine);
+                    (_b = this.children[i]) === null || _b === void 0 ? void 0 : _b.setContent(childContent, (_c = attributes.key) === null || _c === void 0 ? void 0 : _c.multiLine);
                 }
                 else if (this.className === 'value-box') {
                     const valueContent = line.value;
@@ -100140,7 +99609,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     else {
                         childContent = TOOLTIP_EMPTY_STRING;
                     }
-                    (_e = this.children[i]) === null || _e === void 0 ? void 0 : _e.setContent(childContent, (_f = contentAttributes[i].value) === null || _f === void 0 ? void 0 : _f.multiLine);
+                    (_e = this.children[i]) === null || _e === void 0 ? void 0 : _e.setContent(childContent, (_f = attributes.value) === null || _f === void 0 ? void 0 : _f.multiLine);
                 }
                 else if (this.className === 'shape-box') {
                     childContent = this._getShapeSvgOption(line, i);
@@ -100164,14 +99633,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _getShapeSvgOption(line, index) {
-            var _a, _b;
+            var _a;
             const tooltipStyle = this._option.getTooltipStyle();
             const shapeColumn = Object.assign(Object.assign({}, tooltipStyle.shapeColumn), (_a = tooltipStyle.shapeColumn.items) === null || _a === void 0 ? void 0 : _a[index]);
             return {
                 hasShape: line.hasShape,
                 symbolType: line.shapeType,
                 size: shapeColumn.width,
-                fill: (_b = line.shapeFill) !== null && _b !== void 0 ? _b : line.shapeColor,
+                fill: line.shapeFill,
                 stroke: line.shapeStroke,
                 lineWidth: line.shapeLineWidth,
                 hollow: line.shapeHollow,
@@ -100310,7 +99779,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 hasShape: title === null || title === void 0 ? void 0 : title.hasShape,
                 symbolType: title === null || title === void 0 ? void 0 : title.shapeType,
                 size: (_c = tooltipStyle.shapeColumn.common) === null || _c === void 0 ? void 0 : _c.width,
-                fill: title === null || title === void 0 ? void 0 : title.shapeColor,
+                fill: title === null || title === void 0 ? void 0 : title.shapeFill,
                 hollow: title === null || title === void 0 ? void 0 : title.shapeHollow
             });
             (_d = this.textSpan) === null || _d === void 0 ? void 0 : _d.setStyle({
@@ -100328,7 +99797,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 hasShape: title === null || title === void 0 ? void 0 : title.hasShape,
                 symbolType: title === null || title === void 0 ? void 0 : title.shapeType,
                 size: (_b = tooltipStyle.shapeColumn.common) === null || _b === void 0 ? void 0 : _b.width,
-                fill: title === null || title === void 0 ? void 0 : title.shapeColor,
+                fill: title === null || title === void 0 ? void 0 : title.shapeFill,
                 hollow: title === null || title === void 0 ? void 0 : title.shapeHollow
             });
             (_c = this.textSpan) === null || _c === void 0 ? void 0 : _c.setStyle({
@@ -100514,31 +99983,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _updateTooltip(visible, params) {
             var _a, _b;
-            const { tooltipActual, tooltipSpec } = params;
             if (!visible || !this.model) {
                 this.setVisibility(visible);
                 this._cacheCustomTooltipPosition = undefined;
             }
             else {
+                const { tooltipSpec, activeTooltipSpec } = params;
                 if (!params.changePositionOnly) {
-                    this._tooltipActual = tooltipActual;
+                    this._tooltipActual = activeTooltipSpec;
                     this._initStyle();
-                    const firstInit = !this.model.product;
                     this.model.initAll();
-                    if (firstInit) {
-                        this._initEvent(this.model.product);
-                    }
                     this.model.setStyle();
                     this.model.setContent();
                 }
                 this.setVisibility(visible);
                 const el = this.model.product;
                 if (el) {
-                    const { x = 0, y = 0 } = (_a = tooltipActual.position) !== null && _a !== void 0 ? _a : {};
+                    const { x = 0, y = 0 } = (_a = activeTooltipSpec.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, {
+                        tooltipSpec.updateElement(el, activeTooltipSpec, params);
+                        const position = this._getActualTooltipPosition(activeTooltipSpec, params, {
                             width: el.offsetWidth,
                             height: el.offsetHeight
                         });
@@ -100571,19 +100036,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
             }
         }
-        _initEvent(el) {
-            el.addEventListener('pointerleave', event => {
-                const { renderMode, enterable } = this._component.getSpec();
-                const relatedTarget = event.relatedTarget;
-                if (renderMode === 'html' && enterable) {
-                    if (isNil$1(relatedTarget) ||
-                        (relatedTarget !== this._compiler.getCanvas() &&
-                            !hasParentElement(relatedTarget, this.getTooltipContainer()))) {
-                        this._component.hideTooltip();
-                    }
-                }
-            });
-        }
     }
     DomTooltipHandler.type = TooltipHandlerType.dom;
     const registerDomTooltipHandler = () => {
@@ -100644,8 +100096,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._tooltipComponent) {
                 this._initTooltipComponent(stage);
             }
-            const { tooltipActual } = params;
-            const pos = tooltipActual.position;
+            const { activeTooltipSpec } = params;
+            const pos = activeTooltipSpec.position;
             if (!params.changePositionOnly) {
                 this._tooltipComponent.setAttributes(Object.assign(Object.assign({}, this._attributes), pos));
             }