@visactor/vchart 1.1.0-beta.3 → 1.1.0-beta.5

package/build/index.js

@@ -7392,6 +7392,7 @@
     };
 
     const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+    const domDocument = isBrowser && globalThis.document;
     function isTrueBrowser(mode) {
         return (mode === 'desktop-browser' || mode === 'mobile-browser') && isBrowser;
     }
@@ -15570,7 +15571,7 @@
         return referenceNode.parent !== this ? null : (newNode.parent && newNode.parent.removeChild(newNode), newNode.parent = this, referenceNode._next ? (referenceNode._next._prev = newNode, newNode._next = referenceNode._next) : this._lastChild = newNode, referenceNode._next = newNode, newNode._prev = referenceNode, this._idMap || (this._idMap = new Map()), this._idMap.set(newNode._uid, newNode), this._structEdit = !0, this.setCount(newNode.count), newNode);
       }
       insertInto(newNode, idx) {
-        if (this._nodeList && console.warn("insertIntoKeepIdx和insertInto混用可能会存在错误"), idx >= this.childrenCount) return this.appendChild(newNode);
+        if (!this._ignoreWarn && this._nodeList && console.warn("insertIntoKeepIdx和insertInto混用可能会存在错误"), idx >= this.childrenCount) return this.appendChild(newNode);
         if (this._uid === newNode._uid) return null;
         if (newNode.isAncestorsOf(this)) throw new Error("【Node::insertBefore】不能将父辈元素insert为子元素");
         if (newNode.parent && newNode.parent.removeChild(newNode), newNode.parent = this, 0 === idx) newNode._next = this._firstChild, this._firstChild && (this._firstChild._prev = newNode), newNode._prev = null, this._firstChild = newNode;else {
@@ -15592,7 +15593,10 @@
         let node;
         this._nodeList[idx] = newNode;
         for (let i = idx - 1; i >= 0 && (node = this._nodeList[i], !node); i--);
-        return node ? node._next ? this.insertBefore(newNode, node._next) : this.appendChild(newNode) : this.insertInto(newNode, 0);
+        if (node) return node._next ? this.insertBefore(newNode, node._next) : this.appendChild(newNode);
+        this._ignoreWarn = !0;
+        const data = this.insertInto(newNode, 0);
+        return this._ignoreWarn = !1, data;
       }
       removeChild(child) {
         if (!this._idMap) return null;
@@ -23609,6 +23613,7 @@
     function getTextBounds(params) {
       return text.setAttributes(params), text.AABBBounds;
     }
+    createRichText({});
 
     class DefaultCanvasAllocate {
       constructor() {
@@ -23995,7 +24000,7 @@
             isFullStroke: isFullStroke,
             stroke: arrayStroke
           } = parseStroke(stroke);
-        if ((doFill || isFullStroke) && (context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), this._arcRenderContribitions || (this._arcRenderContribitions = this.arcRenderContribitions.getContributions() || [], this._arcRenderContribitions.sort((a, b) => b.order - a.order)), this._arcRenderContribitions.forEach(c => {
+        if ((doFill || isFullStroke || background) && (context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), this._arcRenderContribitions || (this._arcRenderContribitions = this.arcRenderContribitions.getContributions() || [], this._arcRenderContribitions.sort((a, b) => b.order - a.order)), this._arcRenderContribitions.forEach(c => {
           c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(arc, context, x, y, doFill, doStroke, fVisible, sVisible, arcAttribute, fillCb, strokeCb);
         }), context.setShadowStyle && context.setShadowStyle(arc, arc.attribute, arcAttribute), doFill && (fillCb ? fillCb(context, arc.attribute, arcAttribute) : fVisible && (context.setCommonStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.fill())), doStroke && isFullStroke && (strokeCb ? strokeCb(context, arc.attribute, arcAttribute) : sVisible && (context.setStrokeStyle(arc, arc.attribute, originX - x, originY - y, arcAttribute), context.stroke()))), !isFullStroke && doStroke) {
           context.beginPath();
@@ -28590,6 +28595,25 @@
           _context.setLineDash(lineDash);
         }
       }
+      _setStrokeStyle(params, attribute, offsetX, offsetY, defaultParams) {
+        const _context = this.nativeContext;
+        defaultParams || (defaultParams = this.strokeAttributes);
+        const {
+          strokeOpacity = defaultParams.strokeOpacity,
+          opacity = defaultParams.opacity
+        } = attribute;
+        if (strokeOpacity > 1e-12 && opacity > 1e-12) {
+          const {
+            lineWidth = defaultParams.lineWidth,
+            stroke = defaultParams.stroke,
+            lineJoin = defaultParams.lineJoin,
+            lineDash = defaultParams.lineDash,
+            lineCap = defaultParams.lineCap,
+            miterLimit = defaultParams.miterLimit
+          } = attribute;
+          _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
+        }
+      }
       draw() {
         const _context = this.nativeContext;
         this.drawPromise = new Promise(resolve => {
@@ -33701,7 +33725,10 @@
         let attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         if (this.graphicItem) return;
         const attrs = Object.assign({}, attributes);
-        this.graphicItem = this.mark.addGraphicItem(attrs, this.groupKey), this.graphicItem[BridgeElementKey] = this, this.graphicItem.onBeforeAttributeUpdate = attributes => transformAttributes(this.mark.getAttributeTransforms(), attributes, this), this.graphicItem.setAttributes(this.graphicItem.attribute), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes));
+        this.graphicItem = this.mark.addGraphicItem(attrs, this.groupKey), this.graphicItem[BridgeElementKey] = this, this.graphicItem.onBeforeAttributeUpdate = attributes => {
+          if (!this.mark) return attributes;
+          return transformAttributes(this.mark.getAttributeTransforms(), attributes, this);
+        }, this.graphicItem.setAttributes(this.graphicItem.attribute), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes));
       }
       updateGraphicItem(config) {
         var _a;
@@ -33752,7 +33779,7 @@
       encodeGraphic() {
         this.coordinateTransformEncode(this.items);
         const graphicAttributes = this.transformElementItems(this.items, this.mark.markType);
-        this.graphicItem ? this.applyGraphicAttributes(graphicAttributes) : this.initGraphicItem(graphicAttributes), this.diffState !== DiffState.enter && this.diffState !== DiffState.update || !this.states.length || (this.graphicItem.clearStates(), this.graphicItem.states = {}, this.useStates(this.states)), this.mark.markType === GrammarMarkType.shape && (this.graphicItem.datum = this.items[0].datum), this.items.forEach(item => {
+        this.graphicItem ? (this.graphicItem.clearStates(), this.graphicItem.states = {}, this.graphicItem.stateProxy = null, this.applyGraphicAttributes(graphicAttributes)) : this.initGraphicItem(graphicAttributes), this.diffState !== DiffState.enter && this.diffState !== DiffState.update || !this.states.length || this.useStates(this.states), this.mark.markType === GrammarMarkType.shape && (this.graphicItem.datum = this.items[0].datum), this.items.forEach(item => {
           item.nextAttrs = {};
         }), this._setCutomizedShape();
       }
@@ -33823,7 +33850,7 @@
         const item = items[0];
         if (!item.nextAttrs || 0 === Object.keys(item.nextAttrs).length) return {};
         let nextAttrs = null == item ? void 0 : item.nextAttrs;
-        if (items && items.length && isNil(null === (_a = item.nextAttrs) || void 0 === _a ? void 0 : _a.points) && !1 !== computePoints && isPointsMarkType(markType)) {
+        if (items && items.length && isNil(null === (_a = item.nextAttrs) || void 0 === _a ? void 0 : _a.points) && (!0 === computePoints || isValidPointsChannel(Object.keys(item.nextAttrs), this.mark.markType)) && isPointsMarkType(markType)) {
           const lastPoints = this.getGraphicAttribute("points", !1),
             lastSegments = this.getGraphicAttribute("segments", !1),
             enableSegments = null !== (_b = item.nextAttrs.enableSegments) && void 0 !== _b ? _b : this.getGraphicAttribute("enableSegments", !1),
@@ -33924,10 +33951,8 @@
         this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem = null);
       }
       release() {
-        var _a;
-        null === (_a = this.mark) || void 0 === _a || _a.animate.getElementAnimators(this).forEach(animator => {
-          animator.stop();
-        }), this.mark = null, this.data = null, this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem[BridgeElementKey] = null, this.graphicItem = null), this.items = null;
+        var _a, _b;
+        this.graphicItem && (null === (_b = null === (_a = this.graphicItem.animates) || void 0 === _a ? void 0 : _a.forEach) || void 0 === _b || _b.call(_a, animate => animate.stop())), this.mark = null, this.data = null, this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem[BridgeElementKey] = null, this.graphicItem = null), this.items = null;
       }
       getItemAttribute(channel) {
         var _a, _b;
@@ -36455,7 +36480,10 @@
         const glyphMarks = this.glyphMeta.getMarks();
         this.glyphGraphicItems = {}, this.graphicItem.getSubGraphic().forEach(graphic => {
           const markType = glyphMarks[graphic.name];
-          this.glyphGraphicItems[graphic.name] = graphic, graphic.onBeforeAttributeUpdate = attributes => transformAttributes(markType, attributes, this, graphic.name);
+          this.glyphGraphicItems[graphic.name] = graphic, graphic.onBeforeAttributeUpdate = attributes => {
+            if (!this.mark) return attributes;
+            return transformAttributes(markType, attributes, this, graphic.name);
+          };
         }), this.clearGraphicAttributes();
       }
       useStates(states, hasAnimation) {
@@ -36509,6 +36537,7 @@
       _onGlyphAttributeUpdate() {
         let first = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !1;
         return attributes => {
+          if (!this.mark) return attributes;
           const glyphMarks = this.glyphMeta.getMarks(),
             graphicAttributes = transformAttributes(this.mark.getAttributeTransforms(), attributes, this),
             defaultEncodeValues = first ? this.encodeDefault() : null,
@@ -36730,7 +36759,7 @@
       constructor(view, markType, group) {
         super(view), this.grammarType = "mark", this.elements = [], this.elementMap = new Map(), this.isUpdated = !0, this.animate = new Animate(this, {}), this.differ = new Differ([]), this.evaluateSync = (data, parameters) => {
           var _a;
-          return this.evaluateMainTasks(data, parameters), (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) || this.evaluateTransformSync(this.transforms, this.elements, parameters), this;
+          return this.evaluateMainTasks(data, parameters), (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) || this.evaluateTransformSync(this._getTransformsAfterEncode(), this.elements, parameters), this;
         }, this.markType = markType, this.spec.type = markType, this.spec.encode = {
           update: {}
         }, this.spec.group = group, group && (this.group = group, this.attach(group), group.appendChild(this));
@@ -36791,7 +36820,7 @@
       evaluate(data, parameters) {
         var _a;
         return __awaiter$7(this, void 0, void 0, function* () {
-          return this.evaluateMainTasks(data, parameters), (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) || (yield this.evaluateTransform(this.transforms, this.elements, parameters)), this;
+          return this.evaluateMainTasks(data, parameters), (null === (_a = this.renderContext) || void 0 === _a ? void 0 : _a.progressive) || (yield this.evaluateTransform(this._getTransformsAfterEncode(), this.elements, parameters)), this;
         });
       }
       output() {
@@ -37509,143 +37538,25 @@
       return "#" + rgbToHex(r, g, b);
     }
 
-    /**
-     * Common utilities
-     * @module glMatrix
-     */
-    var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
-    if (!Math.hypot) Math.hypot = function () {
-      var y = 0,
-        i = arguments.length;
-      while (i--) {
-        y += arguments[i] * arguments[i];
-      }
-      return Math.sqrt(y);
-    };
-
-    /**
-     * 2 Dimensional Vector
-     * @module vec2
-     */
-
-    /**
-     * Creates a new, empty vec2
-     *
-     * @returns {vec2} a new 2D vector
-     */
-
-    function create$2() {
-      var out = new ARRAY_TYPE(2);
-      if (ARRAY_TYPE != Float32Array) {
-        out[0] = 0;
-        out[1] = 0;
-      }
-      return out;
-    }
-    /**
-     * Scales a vec2 by a scalar number
-     *
-     * @param {vec2} out the receiving vector
-     * @param {ReadonlyVec2} a the vector to scale
-     * @param {Number} b amount to scale the vector by
-     * @returns {vec2} out
-     */
-
-    function scale(out, a, b) {
-      out[0] = a[0] * b;
-      out[1] = a[1] * b;
-      return out;
+    function scale(vector, scale) {
+      return [vector[0] * scale, vector[1] * scale];
     }
-    /**
-     * Calculates the length of a vec2
-     *
-     * @param {ReadonlyVec2} a vector to calculate length of
-     * @returns {Number} length of a
-     */
-
-    function length(a) {
-      var x = a[0],
-        y = a[1];
-      return Math.hypot(x, y);
+    function length(vector) {
+      const [x, y] = vector;
+      return Math.sqrt(x * x + y * y);
     }
-    /**
-     * Normalize a vec2
-     *
-     * @param {vec2} out the receiving vector
-     * @param {ReadonlyVec2} a vector to normalize
-     * @returns {vec2} out
-     */
-
-    function normalize(out, a) {
-      var x = a[0],
-        y = a[1];
-      var len = x * x + y * y;
-      if (len > 0) {
-        //TODO: evaluate use of glm_invsqrt here?
-        len = 1 / Math.sqrt(len);
-      }
-      out[0] = a[0] * len;
-      out[1] = a[1] * len;
-      return out;
+    function normalize(vector) {
+      const [x, y] = vector;
+      let len = x * x + y * y;
+      return len > 0 && (len = 1 / Math.sqrt(len)), [vector[0] * len, vector[1] * len];
     }
-    /**
-     * Get the angle between two 2D vectors
-     * @param {ReadonlyVec2} a The first operand
-     * @param {ReadonlyVec2} b The second operand
-     * @returns {Number} The angle in radians
-     */
-
-    function angle(a, b) {
-      var x1 = a[0],
-        y1 = a[1],
-        x2 = b[0],
-        y2 = b[1],
-        // mag is the product of the magnitudes of a and b
-        mag = Math.sqrt(x1 * x1 + y1 * y1) * Math.sqrt(x2 * x2 + y2 * y2),
-        // mag &&.. short circuits if mag == 0
-        cosine = mag && (x1 * x2 + y1 * y2) / mag; // Math.min(Math.max(cosine, -1), 1) clamps the cosine between -1 and 1
-
+    function angle(vector1, vector2) {
+      const [x1, y1] = vector1,
+        [x2, y2] = vector2,
+        mag = Math.sqrt((x1 * x1 + y1 * y1) * (x2 * x2 + y2 * y2)),
+        cosine = mag && (x1 * x2 + y1 * y2) / mag;
       return Math.acos(Math.min(Math.max(cosine, -1), 1));
     }
-    /**
-     * Perform some operation over an array of vec2s.
-     *
-     * @param {Array} a the array of vectors to iterate over
-     * @param {Number} stride Number of elements between the start of each vec2. If 0 assumes tightly packed
-     * @param {Number} offset Number of elements to skip at the beginning of the array
-     * @param {Number} count Number of vec2s to iterate over. If 0 iterates over entire array
-     * @param {Function} fn Function to call for each vector in the array
-     * @param {Object} [arg] additional argument to pass to fn
-     * @returns {Array} a
-     * @function
-     */
-
-    (function () {
-      var vec = create$2();
-      return function (a, stride, offset, count, fn, arg) {
-        var i, l;
-        if (!stride) {
-          stride = 2;
-        }
-        if (!offset) {
-          offset = 0;
-        }
-        if (count) {
-          l = Math.min(count * stride + offset, a.length);
-        } else {
-          l = a.length;
-        }
-        for (i = offset; i < l; i += stride) {
-          vec[0] = a[i];
-          vec[1] = a[i + 1];
-          fn(vec, vec, arg);
-          a[i] = vec[0];
-          a[i + 1] = vec[1];
-        }
-        return a;
-      };
-    })();
-
     function direction(v1, v2) {
       return v1[0] * v2[1] - v2[0] * v1[1];
     }
@@ -39190,11 +39101,10 @@
         axisTitle.name = AXIS_ELEMENT_NAME.title, axisTitle.id = this._getNodeId("title"), container.add(axisTitle);
       }
       renderGrid(container) {
-        this._renderGridByType("grid", container);
         const {
           visible: visible
         } = this.attribute.subGrid || {};
-        visible && this._renderGridByType("subGrid", container);
+        visible && this._renderGridByType("subGrid", container), this._renderGridByType("grid", container);
       }
       getVerticalCoord(point, offset, inside) {
         const vector = this.getVerticalVector(offset, inside, point);
@@ -39429,9 +39339,9 @@
             verticalFactor = 1
           } = this.attribute,
           axisVector = this.getRelativeVector(),
-          normalize$1 = normalize([0, 0], axisVector),
-          verticalVector = [normalize$1[1], -1 * normalize$1[0]];
-        return scale([0, 0], verticalVector, offset * (inside ? 1 : -1) * verticalFactor);
+          normalizedAxisVector = normalize(axisVector),
+          verticalVector = [normalizedAxisVector[1], -1 * normalizedAxisVector[0]];
+        return scale(verticalVector, offset * (inside ? 1 : -1) * verticalFactor);
       }
       getTitleAttribute() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -39673,7 +39583,7 @@
             center: center
           } = this.attribute,
           vector = [point.x - center.x, point.y - center.y];
-        return scale(vector, vector, (inside ? -1 : 1) * (axisInside ? -1 : 1) * offset / length(vector)), vector;
+        return scale(vector, (inside ? -1 : 1) * (axisInside ? -1 : 1) * offset / length(vector));
       }
       getRelativeVector(point) {
         const {
@@ -41143,7 +41053,8 @@
         } = handler;
         preShape || (preShape = isHorizontal ? "triangleLeft" : "triangleUp"), nextShape || (nextShape = isHorizontal ? "triangleRight" : "triangleDown");
         const preHandler = createSymbol(Object.assign(Object.assign({
-          strokeBoundsBuffer: 0
+          strokeBoundsBuffer: 0,
+          pickMode: "imprecise"
         }, handlerStyle), {
           x: 0,
           y: 0,
@@ -41170,7 +41081,8 @@
           }, textStyle));
         this.text = text, container.add(text);
         const nextHandler = createSymbol(Object.assign(Object.assign({
-          strokeBoundsBuffer: 0
+          strokeBoundsBuffer: 0,
+          pickMode: "imprecise"
         }, handlerStyle), {
           x: isHorizontal ? handlerSizeX + 2 * handlerSpace + maxTextWidth : 0,
           y: isHorizontal ? 0 : handlerSizeY + 2 * handlerSpace + maxTextHeight,
@@ -41400,14 +41312,16 @@
           const itemGroup = this._renderEachItem(item, !!isEmpty(defaultSelected) || (null == defaultSelected ? void 0 : defaultSelected.includes(item.label)), index),
             itemWidth = itemGroup.attribute.width,
             itemHeight = itemGroup.attribute.height;
-          this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (maxPages = maxRow, isValid(maxWidth) && maxWidth < startX + itemWidth && (doWrap = !0, startX = 0, startY += itemHeight + spaceRow, pages += 1), index > 0 && itemGroup.setAttributes({
+          this._itemHeight = Math.max(this._itemHeight, itemHeight), maxWidthInCol = Math.max(itemWidth, maxWidthInCol), this._itemMaxWidth = Math.max(itemWidth, this._itemMaxWidth), isHorizontal ? (maxPages = maxRow, isValid(maxWidth) && (itemWidth >= maxWidth ? (doWrap = !0, index > 0 && (startX = 0, startY += itemHeight + spaceRow, pages += 1)) : maxWidth < startX + itemWidth && (doWrap = !0, startX = 0, startY += itemHeight + spaceRow, pages += 1)), index > 0 && itemGroup.setAttributes({
             x: startX,
             y: startY
           }), startX += spaceCol + itemWidth) : (maxPages = maxCol, isValid(maxHeight) && maxHeight < startY + itemHeight && (doWrap = !0, startY = 0, startX += maxWidthInCol + spaceCol, maxWidthInCol = 0, pages += 1), index > 0 && itemGroup.setAttributes({
             x: startX,
             y: startY
           }), startY += spaceRow + itemHeight), itemsContainer.add(itemGroup);
-        }), doWrap && autoPage && pages > maxPages ? this._renderPager(isHorizontal) : (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
+        });
+        let pagerRendered = !1;
+        doWrap && autoPage && pages > maxPages && (pagerRendered = this._renderPager(isHorizontal)), pagerRendered || (itemsContainer.setAttribute("y", this._title ? this._title.AABBBounds.height() + get(this.attribute, "title.space", 8) : 0), this._innerView.add(itemsContainer));
       }
       _bindEvents() {
         if (!this._itemsContainer) return;
@@ -41539,43 +41453,50 @@
           startX = 0,
           startY = 0,
           pages = 1;
-        isHorizontal ? (pagerComp = new Pager(Object.assign({
-          layout: 1 === maxRow ? "horizontal" : "vertical",
-          total: 99
-        }, merge$1({
-          handler: {
-            preShape: "triangleUp",
-            nextShape: "triangleDown"
-          }
-        }, pageStyle))), this._pager = pagerComp, this._innerView.add(pagerComp), pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, pageWidth = maxWidth - pagerComp.AABBBounds.width() - pagerSpace, itemsContainer.getChildren().forEach((item, index) => {
-          const {
-            width: width,
-            height: height
-          } = item.attribute;
-          pageWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), index > 0 && item.setAttributes({
-            x: startX,
-            y: startY
-          }), startX += spaceCol + width;
-        }), pagerComp.setAttributes({
-          total: Math.ceil(pages / maxRow),
-          x: pageWidth,
-          y: renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2
-        })) : (pagerComp = new Pager(Object.assign({
-          layout: "horizontal",
-          total: 99
-        }, pageStyle)), this._pager = pagerComp, this._innerView.add(pagerComp), pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, pageHeight = maxHeight - pagerComp.AABBBounds.height() - pagerSpace - renderStartY, itemsContainer.getChildren().forEach((item, index) => {
-          const {
-            height: height
-          } = item.attribute;
-          pageHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, pages += 1), index > 0 && item.setAttributes({
-            x: startX,
-            y: startY
-          }), startY += spaceRow + height;
-        }), pagerComp.setAttributes({
-          total: Math.ceil(pages / maxCol),
-          x: (pageWidth - pagerComp.AABBBounds.width()) / 2,
-          y: maxHeight - pagerComp.AABBBounds.height()
-        })), pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
+        if (isHorizontal) {
+          if (pagerComp = new Pager(Object.assign({
+            layout: 1 === maxRow ? "horizontal" : "vertical",
+            total: 99
+          }, merge$1({
+            handler: {
+              preShape: "triangleUp",
+              nextShape: "triangleDown"
+            }
+          }, pageStyle))), this._pager = pagerComp, this._innerView.add(pagerComp), pageHeight = (maxRow - 1) * spaceRow + this._itemHeight * maxRow, pageWidth = maxWidth - pagerComp.AABBBounds.width() - pagerSpace, pageWidth <= 0) return this._innerView.removeChild(pagerComp), !1;
+          itemsContainer.getChildren().forEach((item, index) => {
+            const {
+              width: width,
+              height: height
+            } = item.attribute;
+            pageWidth < startX + width && (startX = 0, startY += height + spaceRow, pages += 1), index > 0 && item.setAttributes({
+              x: startX,
+              y: startY
+            }), startX += spaceCol + width;
+          }), pagerComp.setAttributes({
+            total: Math.ceil(pages / maxRow),
+            x: pageWidth,
+            y: renderStartY + pageHeight / 2 - pagerComp.AABBBounds.height() / 2
+          });
+        } else {
+          if (pagerComp = new Pager(Object.assign({
+            layout: "horizontal",
+            total: 99
+          }, pageStyle)), this._pager = pagerComp, this._innerView.add(pagerComp), pageWidth = this._itemMaxWidth * maxCol + (maxCol - 1) * spaceCol, pageHeight = maxHeight - pagerComp.AABBBounds.height() - pagerSpace - renderStartY, pageHeight <= 0) return this._innerView.removeChild(pagerComp), !1;
+          itemsContainer.getChildren().forEach((item, index) => {
+            const {
+              height: height
+            } = item.attribute;
+            pageHeight < startY + height && (startY = 0, startX += this._itemMaxWidth + spaceCol, pages += 1), index > 0 && item.setAttributes({
+              x: startX,
+              y: startY
+            }), startY += spaceRow + height;
+          }), pagerComp.setAttributes({
+            total: Math.ceil(pages / maxCol),
+            x: (pageWidth - pagerComp.AABBBounds.width()) / 2,
+            y: maxHeight - pagerComp.AABBBounds.height()
+          });
+        }
+        pager.defaultCurrent > 1 && (isHorizontal ? itemsContainer.setAttribute("y", -(pager.defaultCurrent - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(pager.defaultCurrent - 1) * (pageWidth + spaceCol)));
         const clipGroup = createGroup({
           x: 0,
           y: renderStartY,
@@ -41595,7 +41516,7 @@
             x: -(current - 1) * (pageWidth + spaceCol)
           }, animationDuration, animationEasing) : isHorizontal ? itemsContainer.setAttribute("y", -(current - 1) * (pageHeight + spaceRow)) : itemsContainer.setAttribute("x", -(current - 1) * (pageWidth + spaceCol));
         };
-        this._pager.addEventListener("toPrev", onPaging), this._pager.addEventListener("toNext", onPaging);
+        return this._pager.addEventListener("toPrev", onPaging), this._pager.addEventListener("toNext", onPaging), !0;
       }
       _setLegendItemState(legendItem, stateName) {
         let keepCurrentStates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
@@ -49236,8 +49157,14 @@
         static instanceExist(id) {
             return InstanceManager.instances.has(id);
         }
-        static forEach(callbackfn, thisArg) {
-            return InstanceManager.instances.forEach(callbackfn, thisArg);
+        static forEach(callbackfn, excludeId = [], thisArg) {
+            const excludeIdList = array(excludeId);
+            return InstanceManager.instances.forEach((instance, id, map) => {
+                if (excludeIdList.includes(id)) {
+                    return;
+                }
+                callbackfn(instance, id, map);
+            }, thisArg);
         }
     }
 
@@ -49294,6 +49221,11 @@
             ...(option ?? {})
         }, textSpec);
     };
+    const richText = createRichText({});
+    function getRichTextBounds(params) {
+        richText.setAttributes(params);
+        return richText.AABBBounds;
+    }
 
     function mergeFields(targetFields, mergeFields) {
         for (let i = 0; i < mergeFields.length; i++) {
@@ -49565,6 +49497,64 @@
         return data;
     };
 
+    const DEFAULT_SMOOTH_INTERPOLATE = 'monotone';
+    const DEFAULT_LINEAR_CLOSED_INTERPOLATE = 'linearClosed';
+
+    var ShapeTypeEnum;
+    (function (ShapeTypeEnum) {
+        ShapeTypeEnum["circle"] = "circle";
+        ShapeTypeEnum["triangle"] = "triangle";
+        ShapeTypeEnum["triangleUp"] = "triangleUp";
+        ShapeTypeEnum["triangleLeft"] = "triangleLeft";
+        ShapeTypeEnum["triangleRight"] = "triangleRight";
+        ShapeTypeEnum["triangleDown"] = "triangleDown";
+        ShapeTypeEnum["thinTriangle"] = "thinTriangle";
+        ShapeTypeEnum["rect"] = "rect";
+        ShapeTypeEnum["diamond"] = "diamond";
+        ShapeTypeEnum["square"] = "square";
+        ShapeTypeEnum["arrowLeft"] = "arrowLeft";
+        ShapeTypeEnum["arrow2Left"] = "arrow2Left";
+        ShapeTypeEnum["arrowRight"] = "arrowRight";
+        ShapeTypeEnum["arrow2Right"] = "arrow2Right";
+        ShapeTypeEnum["cross"] = "cross";
+        ShapeTypeEnum["wedge"] = "wedge";
+        ShapeTypeEnum["star"] = "star";
+        ShapeTypeEnum["wye"] = "wye";
+    })(ShapeTypeEnum || (ShapeTypeEnum = {}));
+
+    const DEFAULT_CLOSE_STROKE_JOIN = 'bevel';
+
+    var TooltipFixedPosition;
+    (function (TooltipFixedPosition) {
+        TooltipFixedPosition["top"] = "top";
+        TooltipFixedPosition["left"] = "left";
+        TooltipFixedPosition["right"] = "right";
+        TooltipFixedPosition["bottom"] = "bottom";
+        TooltipFixedPosition["inside"] = "inside";
+    })(TooltipFixedPosition || (TooltipFixedPosition = {}));
+
+    function isXAxis(orient) {
+        return orient === 'bottom' || orient === 'top';
+    }
+    function isYAxis(orient) {
+        return orient === 'left' || orient === 'right';
+    }
+    function isZAxis(orient) {
+        return orient === 'z';
+    }
+    function autoAxisType(orient, isHorizontal) {
+        if (isHorizontal) {
+            return isXAxis(orient) ? 'linear' : 'band';
+        }
+        return isXAxis(orient) ? 'band' : 'linear';
+    }
+    function getOrient(spec, whiteList) {
+        return isValidOrient(spec.orient) || (whiteList && whiteList.includes(spec.orient)) ? spec.orient : 'left';
+    }
+    function getDirectionByOrient(orient) {
+        return orient === 'top' || orient === 'bottom' ? Direction$2.horizontal : Direction$2.vertical;
+    }
+
     const getAxis$1 = (chart, type, pos) => {
         const axesComponents = chart
             .getAllComponents()
@@ -49592,6 +49582,8 @@
         }
         return null;
     };
+    const XAxisGetDimensionField = (series) => series.fieldX[0];
+    const YAxisGetDimensionField = (series) => series.fieldY[0];
     const getCartesianDimensionInfo = (chart, pos) => {
         if (!chart) {
             return null;
@@ -49605,49 +49597,15 @@
         const yAxisList = getAxis$1(chart, 'y', pos);
         const targetAxisInfo = [];
         if (xAxisList) {
-            const getDimensionField = (series) => series.fieldX[0];
             xAxisList.forEach(axis => {
-                const xScale = axis.getScale();
-                if (xScale && isDiscrete(xScale.type)) {
-                    const xValue = x - axis.getLayoutStartPoint().x;
-                    if ((xValue - xScale.range()[0]) * (xValue - xScale.range()[1]) > 0) {
-                        return;
-                    }
-                    const value = xScale.invert(xValue);
-                    if (isNil(value)) {
-                        return;
-                    }
-                    const domain = xScale.domain();
-                    let index = domain.findIndex((v) => v?.toString() === value.toString());
-                    if (index < 0) {
-                        index = undefined;
-                    }
-                    const data = getDimensionData(value, axis, 'cartesian', getDimensionField);
-                    targetAxisInfo.push({ index, value, axis, data });
-                }
+                const info = getDiscreteAxisDimensionInfo(axis, x, 'x', XAxisGetDimensionField);
+                info && targetAxisInfo.push(info);
             });
         }
         if (yAxisList) {
-            const getDimensionField = (series) => series.fieldY[0];
             yAxisList.forEach(axis => {
-                const yScale = axis.getScale();
-                if (yScale && isDiscrete(yScale.type)) {
-                    const yValue = y - axis.getLayoutStartPoint().y;
-                    if ((yValue - yScale.range()[0]) * (yValue - yScale.range()[1]) > 0) {
-                        return;
-                    }
-                    const value = yScale.invert(yValue);
-                    if (isNil(value)) {
-                        return;
-                    }
-                    const domain = yScale.domain();
-                    let index = domain.findIndex((v) => v?.toString() === value.toString());
-                    if (index < 0) {
-                        index = undefined;
-                    }
-                    const data = getDimensionData(value, axis, 'cartesian', getDimensionField);
-                    targetAxisInfo.push({ index, value, axis, data });
-                }
+                const info = getDiscreteAxisDimensionInfo(axis, y, 'y', YAxisGetDimensionField);
+                info && targetAxisInfo.push(info);
             });
         }
         if (!targetAxisInfo.length) {
@@ -49655,6 +49613,31 @@
         }
         return targetAxisInfo;
     };
+    const getDiscreteAxisDimensionInfo = (axis, posValue, posKey, getDimensionField) => {
+        const scale = axis.getScale();
+        const scalePos = posValue - axis.getLayoutStartPoint()[posKey];
+        if ((scalePos - scale.range()[0]) * (scalePos - scale.range()[1]) > 0) {
+            return null;
+        }
+        const value = scale.invert(scalePos);
+        return getDimensionInfoInAxis(axis, value, getDimensionField);
+    };
+    const getDimensionInfoInAxis = (axis, value, getDimensionField) => {
+        const scale = axis.getScale();
+        if (!scale || !isDiscrete(scale.type)) {
+            return null;
+        }
+        if (isNil(value)) {
+            return null;
+        }
+        const domain = scale.domain();
+        let index = domain.findIndex((v) => v?.toString() === value.toString());
+        if (index < 0) {
+            index = undefined;
+        }
+        const data = getDimensionData(value, axis, 'cartesian', getDimensionField ?? (isXAxis(axis.orient) ? XAxisGetDimensionField : YAxisGetDimensionField));
+        return { index, value, axis, data };
+    };
 
     const getAxis = (chart, type, pos) => {
         const axesComponents = chart
@@ -49805,6 +49788,33 @@
             }
             return result;
         }
+        dispatch(v, opt) {
+            const axis = this._chart?.getAllComponents().filter(c => {
+                if (c.specKey !== 'axes') {
+                    return false;
+                }
+                const scale = c.getScale();
+                if (!isDiscrete(scale.type)) {
+                    return false;
+                }
+                if (opt?.filter) {
+                    return opt.filter(c);
+                }
+                return true;
+            });
+            const dimensionInfo = [];
+            axis.forEach(a => {
+                const info = getDimensionInfoInAxis(a, v);
+                if (info) {
+                    dimensionInfo.push(info);
+                }
+            });
+            this._callback.call(null, {
+                action: 'enter',
+                dimensionInfo
+            });
+            return dimensionInfo;
+        }
     }
 
     class DimensionClickEvent extends DimensionEvent {
@@ -49925,6 +49935,9 @@
         _eventDispatcher;
         _mode;
         _composedEventMap = new Map();
+        getComposedEventMap() {
+            return this._composedEventMap;
+        }
         constructor(eventDispatcher, mode) {
             this._eventDispatcher = eventDispatcher;
             this._mode = mode;
@@ -50903,11 +50916,14 @@
         static getMap(key) {
             return getMapSource(key);
         }
-        static hideTooltip() {
-            InstanceManager.forEach(instance => instance?.hideTooltip?.());
+        static hideTooltip(excludeId = []) {
+            InstanceManager.forEach(instance => instance?.hideTooltip?.(), excludeId);
         }
         static InstanceManager = InstanceManager;
         static ThemeManager = ThemeManager;
+        static globalConfig = {
+            uniqueTooltip: true
+        };
         _spec;
         _viewBox;
         _chart;
@@ -51483,6 +51499,9 @@
         getComponents() {
             return this._chart.getAllComponents();
         }
+        setDimensionIndex(value, opt = {}) {
+            return this._chart?.setDimensionIndex(value, opt);
+        }
     }
 
     var STATE_VALUE_ENUM;
@@ -51587,7 +51606,7 @@
         }
         constructor(option) {
             this._option = option;
-            this.event = new Event$1(option.eventDispatcher, option.mode);
+            this.event = this._option.model.getOption().getChart().getEvent();
             this.interaction = option.interaction;
             this.initConfig(option.mode);
         }
@@ -51620,7 +51639,9 @@
             const items = [];
             params.dimensionInfo.forEach(df => {
                 df.data.forEach(dd => {
-                    const seriesMark = (reverse ? this._markReverse : this._marks).getMarks().filter(m => m.model === dd.series);
+                    const seriesMark = (reverse ? this._markReverse : this._marks)
+                        .getMarks()
+                        .filter(m => m.model === dd.series && m.getVisible());
                     seriesMark.forEach(m => {
                         const elements = m
                             .getProduct()
@@ -54110,7 +54131,7 @@
     VChart.useMark([ComponentMark, GroupMark]);
     Factory.registerRegion('region', Region);
     Factory.registerLayout('base', Layout);
-    const version = "1.1.0-beta.3";
+    const version = "1.1.0-beta.5";
 
     var SeriesMarkNameEnum;
     (function (SeriesMarkNameEnum) {
@@ -54598,6 +54619,9 @@
         _globalScale;
         _idMap = new Map();
         _event;
+        getEvent() {
+            return this._event;
+        }
         _dataSet;
         _layoutTag = true;
         getLayoutTag() {
@@ -55479,6 +55503,51 @@
                 }
             });
         }
+        setDimensionIndex(value, opt) {
+            let dimensionInfo = null;
+            Array.from(this._event.getComposedEventMap().values()).forEach(e => {
+                const { eventType, event } = e;
+                if (eventType === DimensionEventEnum.dimensionHover || eventType === DimensionEventEnum.dimensionClick) {
+                    const info = event.dispatch(value, opt);
+                    if (info?.length) {
+                        dimensionInfo = info;
+                    }
+                }
+            });
+            if (!dimensionInfo) {
+                return;
+            }
+            if (opt.tooltip) {
+                const tooltip = this._components.find(c => c.type === ComponentTypeEnum.tooltip);
+                if (tooltip.getVisible()) {
+                    const dataFilter = {};
+                    dimensionInfo.forEach((d) => {
+                        const { axis, value, data } = d;
+                        const isY = axis.orient === 'left' || axis.orient === 'right';
+                        data.forEach(d => {
+                            if (isY) {
+                                dataFilter[d.series.fieldY[0]] = value;
+                            }
+                            else {
+                                dataFilter[d.series.fieldX[0]] = value;
+                            }
+                        });
+                    });
+                    tooltip.showTooltip(dataFilter, opt.showTooltipOption);
+                }
+            }
+            if (opt.crosshair) {
+                const crosshair = this._components.find(c => c.type === ComponentTypeEnum.cartesianCrosshair);
+                if (crosshair && crosshair.clearAxisValue && crosshair.setAxisValue) {
+                    dimensionInfo.forEach((d) => {
+                        const { axis, value } = d;
+                        crosshair.clearAxisValue();
+                        crosshair.setAxisValue(value, axis);
+                        crosshair.layoutByValue();
+                    });
+                }
+            }
+        }
     }
 
     class CartesianChart extends BaseChart {
@@ -55600,42 +55669,6 @@
         ChartTypeEnum["heatmap"] = "heatmap";
     })(ChartTypeEnum || (ChartTypeEnum = {}));
 
-    const DEFAULT_SMOOTH_INTERPOLATE = 'monotone';
-    const DEFAULT_LINEAR_CLOSED_INTERPOLATE = 'linearClosed';
-
-    var ShapeTypeEnum;
-    (function (ShapeTypeEnum) {
-        ShapeTypeEnum["circle"] = "circle";
-        ShapeTypeEnum["triangle"] = "triangle";
-        ShapeTypeEnum["triangleUp"] = "triangleUp";
-        ShapeTypeEnum["triangleLeft"] = "triangleLeft";
-        ShapeTypeEnum["triangleRight"] = "triangleRight";
-        ShapeTypeEnum["triangleDown"] = "triangleDown";
-        ShapeTypeEnum["thinTriangle"] = "thinTriangle";
-        ShapeTypeEnum["rect"] = "rect";
-        ShapeTypeEnum["diamond"] = "diamond";
-        ShapeTypeEnum["square"] = "square";
-        ShapeTypeEnum["arrowLeft"] = "arrowLeft";
-        ShapeTypeEnum["arrow2Left"] = "arrow2Left";
-        ShapeTypeEnum["arrowRight"] = "arrowRight";
-        ShapeTypeEnum["arrow2Right"] = "arrow2Right";
-        ShapeTypeEnum["cross"] = "cross";
-        ShapeTypeEnum["wedge"] = "wedge";
-        ShapeTypeEnum["star"] = "star";
-        ShapeTypeEnum["wye"] = "wye";
-    })(ShapeTypeEnum || (ShapeTypeEnum = {}));
-
-    const DEFAULT_CLOSE_STROKE_JOIN = 'bevel';
-
-    var TooltipFixedPosition;
-    (function (TooltipFixedPosition) {
-        TooltipFixedPosition["top"] = "top";
-        TooltipFixedPosition["left"] = "left";
-        TooltipFixedPosition["right"] = "right";
-        TooltipFixedPosition["bottom"] = "bottom";
-        TooltipFixedPosition["inside"] = "inside";
-    })(TooltipFixedPosition || (TooltipFixedPosition = {}));
-
     function setDefaultCrosshairForCartesianChart(spec) {
         spec.crosshair = array(spec.crosshair || {}).map(crosshairCfg => {
             return merge$1({
@@ -56426,6 +56459,10 @@
                 itemMap: new Map()
             };
             tooltipHandler?.showTooltip?.(activeType, mockDimensionInfo, mockParams);
+            const vchart = componentOptions.globalInstance;
+            if (VChart.globalConfig.uniqueTooltip) {
+                VChart.hideTooltip(vchart.id);
+            }
             return activeType;
         }
         else if (activeType === 'mark') {
@@ -56453,6 +56490,10 @@
                     series: info.series
                 }
             ], mockParams);
+            const vchart = componentOptions.globalInstance;
+            if (VChart.globalConfig.uniqueTooltip) {
+                VChart.hideTooltip(vchart.id);
+            }
             return activeType;
         }
         return 'none';
@@ -65533,28 +65574,6 @@
     }
     mixin(RadarSeries, LineLikeSeriesMixin);
 
-    function isXAxis(orient) {
-        return orient === 'bottom' || orient === 'top';
-    }
-    function isYAxis(orient) {
-        return orient === 'left' || orient === 'right';
-    }
-    function isZAxis(orient) {
-        return orient === 'z';
-    }
-    function autoAxisType(orient, isHorizontal) {
-        if (isHorizontal) {
-            return isXAxis(orient) ? 'linear' : 'band';
-        }
-        return isXAxis(orient) ? 'band' : 'linear';
-    }
-    function getOrient(spec, whiteList) {
-        return isValidOrient(spec.orient) || (whiteList && whiteList.includes(spec.orient)) ? spec.orient : 'left';
-    }
-    function getDirectionByOrient(orient) {
-        return orient === 'top' || orient === 'bottom' ? Direction$2.horizontal : Direction$2.vertical;
-    }
-
     class DotSeriesTooltipHelper extends BaseSeriesTooltipHelper {
         updateTooltipSpec() {
             super.updateTooltipSpec();
@@ -74027,7 +74046,7 @@
                 outliersField: spec.outliersField,
                 outliersStyle: spec.outliersStyle
             };
-            seriesSpec[spec.direction === Direction$2.vertical ? 'yField' : 'xField'] = dataFields;
+            seriesSpec[seriesSpec.direction === Direction$2.vertical ? 'yField' : 'xField'] = dataFields;
             return seriesSpec;
         }
         transformSpec(spec) {
@@ -74042,19 +74061,6 @@
                     }
                 ];
             }
-            (spec.axes ?? []).forEach(axis => {
-                const { orient, type } = axis;
-                if (orient === 'left') {
-                    if (isNil(type)) {
-                        axis.type = spec.direction === Direction$2.vertical ? 'linear' : 'band';
-                    }
-                }
-                if (orient === 'bottom') {
-                    if (isNil(type)) {
-                        axis.type = spec.direction === Direction$2.vertical ? 'band' : 'linear';
-                    }
-                }
-            });
             setDefaultCrosshairForCartesianChart(spec);
         }
     }
@@ -78376,18 +78382,6 @@
             });
         }
         updateScaleDomain() {
-            if (!this.isSeriesDataEnable()) {
-                return;
-            }
-            this.computeStatisticsDomain();
-            for (let i = 0; i < this._scales.length; i++) {
-                const data = this.collectData(i);
-                const domain = this.computeDomain(data);
-                this._scales[i].domain(domain);
-            }
-            this.transformScaleDomain();
-            this.event.emit(ChartEvent.scaleDomainUpdate, { model: this });
-            this.event.emit(ChartEvent.scaleUpdate, { model: this });
         }
         computeData() {
             this._tickData.getDataView().reRunAllTransform();
@@ -79397,6 +79391,26 @@
             }
             return Array.from(tempSet);
         }
+        updateScaleDomain() {
+            if (!this.isSeriesDataEnable()) {
+                return;
+            }
+            this.computeStatisticsDomain();
+            const userDomain = this._spec.domain;
+            for (let i = 0; i < this._scales.length; i++) {
+                if (userDomain && userDomain.length && i === 0) {
+                    this._scales[i].domain(userDomain);
+                }
+                else {
+                    const data = this.collectData(i);
+                    const domain = this.computeDomain(data);
+                    this._scales[i].domain(domain);
+                }
+            }
+            this.transformScaleDomain();
+            this.event.emit(ChartEvent.scaleDomainUpdate, { model: this });
+            this.event.emit(ChartEvent.scaleUpdate, { model: this });
+        }
     }
 
     class CartesianBandAxis extends CartesianAxis {
@@ -80080,7 +80094,8 @@
     }
 
     const discreteLegendDataMake = (data, op) => {
-        const result = {};
+        const result = [];
+        const tempKey = {};
         const { series, seriesField } = op;
         series().forEach(s => {
             const field = seriesField(s);
@@ -80092,13 +80107,14 @@
                 infoList = s.getSeriesInfoInField(field);
             }
             infoList.forEach(info => {
-                if (result[info.key]) {
+                if (tempKey[info.key]) {
                     return;
                 }
-                result[info.key] = info;
+                tempKey[info.key] = true;
+                result.push(info);
             });
         });
-        return Object.values(result);
+        return result;
     };
     const discreteLegendFilter = (data, op) => {
         const { selected, field, data: legendData } = op;
@@ -81839,6 +81855,24 @@
             }
             return value;
         }
+        clearAxisValue() {
+            this.currValueX.clear();
+            this.currValueY.clear();
+        }
+        setAxisValue(v, axis) {
+            if (isXAxis(axis.orient)) {
+                this.currValueX.set(axis.getSpecIndex(), {
+                    v,
+                    axis
+                });
+            }
+            else {
+                this.currValueX.set(axis.getSpecIndex(), {
+                    v,
+                    axis
+                });
+            }
+        }
         getAllAxisValues(axisMap, p, currValue, vertical) {
             let discrete = false;
             axisMap.forEach(item => {
@@ -81889,7 +81923,7 @@
             this._yLeftLabel && this._yLeftLabel.hideAll();
             this._yRightLabel && this._yRightLabel.hideAll();
         }
-        layoutByValue(tag) {
+        layoutByValue(tag = LayoutType$1.ALL) {
             if (!this.enable) {
                 return;
             }
@@ -83718,6 +83752,24 @@
         }
     }
 
+    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
+    const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
+    const TOOLTIP_MAX_LINE_COUNT = 20;
+    const TOOLTIP_EMPTY_STRING = '';
+    const TOOLTIP_OTHERS_LINE = {
+        key: '其他',
+        value: '...'
+    };
+    const DEFAULT_OPTIONS = {
+        offsetX: 10,
+        offsetY: 10,
+        sanitize: escapeHTML
+    };
+    class TooltipHandlerType {
+        static dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
+        static canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
+    }
+
     const getShowContent = (pattern, data, params) => {
         if (!data ||
             params?.event?.type === 'mouseout') {
@@ -84074,9 +84126,13 @@
         const { visible: titleVisible = true, value: titleValue = '', hasShape: titleHasShape, shapeType: titleShapeType = '', shapeHollow: titleShapeHollow, shapeColor: titleShapeColor } = title;
         attribute.title.visible = titleVisible;
         if (titleVisible) {
-            const { width, height } = initTextMeasure(titleStyle).quickMeasure(titleValue);
+            const { text, width, height } = measureTooltipText(titleValue, titleStyle);
             attribute.title.value = {
-                text: titleValue
+                width,
+                height,
+                text,
+                multiLine: titleStyle.multiLine,
+                wordBreak: titleStyle.wordBreak
             };
             maxWidth = width;
             titleMaxHeight = height;
@@ -84110,16 +84166,18 @@
                 const keyWidths = [];
                 const adaptiveKeyWidths = [];
                 const valueWidths = [];
-                const keyTextMeasure = initTextMeasure(keyStyle);
-                const valueTextMeasure = initTextMeasure(valueStyle);
                 attribute.content = filteredContent.map((item, i) => {
                     const itemAttrs = { height: 0, spaceRow };
                     let itemHeight = 0;
                     const { hasShape, key, shapeColor, shapeHollow, shapeType = '', value, isKeyAdaptive } = item;
                     if (isValid(key)) {
-                        const { width, height } = keyTextMeasure.quickMeasure(key);
+                        const { width, height, text } = measureTooltipText(key, keyStyle);
                         itemAttrs.key = {
-                            text: key
+                            width,
+                            height,
+                            text,
+                            multiLine: keyStyle.multiLine,
+                            wordBreak: titleStyle.wordBreak
                         };
                         if (!isKeyAdaptive) {
                             keyWidths.push(width);
@@ -84130,9 +84188,13 @@
                         itemHeight = Math.max(itemHeight, height);
                     }
                     if (isValid(value)) {
-                        const { width, height } = valueTextMeasure.quickMeasure(value);
+                        const { width, height, text } = measureTooltipText(value, valueStyle);
                         itemAttrs.value = {
-                            text: value
+                            width,
+                            height,
+                            text,
+                            multiLine: valueStyle.multiLine,
+                            wordBreak: titleStyle.wordBreak
                         };
                         valueWidths.push(width);
                         itemHeight = Math.max(itemHeight, height);
@@ -84180,6 +84242,42 @@
         attribute.panel.height = containerSize.height;
         return attribute;
     };
+    const measureTooltipText = (text, style) => {
+        const measure = initTextMeasure(style);
+        if (!style.multiLine) {
+            const { width, height } = measure.fullMeasure(text);
+            return {
+                width,
+                height,
+                text
+            };
+        }
+        let textLines = text.split('\n');
+        textLines = textLines.map((line, i) => (i < textLines.length - 1 ? line + '\n' : line));
+        const { width, height } = measure.fullMeasure(textLines);
+        if (style.maxWidth && style.maxWidth <= width) {
+            const bound = getRichTextBounds({
+                wordBreak: style.wordBreak,
+                maxWidth: style.maxWidth,
+                width: 0,
+                height: 0,
+                textConfig: textLines.map((line, i) => ({
+                    ...style,
+                    text: line
+                }))
+            });
+            return {
+                width: bound.width(),
+                height: bound.height(),
+                text: textLines
+            };
+        }
+        return {
+            width,
+            height,
+            text: textLines
+        };
+    };
 
     function getTextAttributes(style = {}, globalTheme) {
         const attrs = {
@@ -84190,29 +84288,14 @@
             fontSize: style.fontSize,
             fontWeight: style.fontWeight,
             lineHeight: style.lineHeight,
-            spacing: style.spacing ?? 10
+            spacing: style.spacing ?? 10,
+            multiLine: style.multiLine ?? false,
+            maxWidth: style.maxWidth,
+            wordBreak: style.wordBreak ?? 'break-word'
         };
         return attrs;
     }
 
-    const TOOLTIP_EL_CLASS_NAME = 'vchart-tooltip-element';
-    const TOOLTIP_CONTAINER_EL_CLASS_NAME = 'vchart-tooltip-container';
-    const TOOLTIP_MAX_LINE_COUNT = 20;
-    const TOOLTIP_EMPTY_STRING = '';
-    const TOOLTIP_OTHERS_LINE = {
-        key: '其他',
-        value: '...'
-    };
-    const DEFAULT_OPTIONS = {
-        offsetX: 10,
-        offsetY: 10,
-        sanitize: escapeHTML
-    };
-    class TooltipHandlerType {
-        static dom = `${PREFIX}_TOOLTIP_HANDLER_DOM`;
-        static canvas = `${PREFIX}_TOOLTIP_HANDLER_CANVAS`;
-    }
-
     var TooltipResult;
     (function (TooltipResult) {
         TooltipResult[TooltipResult["success"] = 0] = "success";
@@ -84668,7 +84751,7 @@
         if (!labelStyle) {
             return undefined;
         }
-        const { fontFamily: labelFont, fontSize: labelFontSize, fill: labelColor, textAlign, lineHeight, fontWeight } = merge$1({}, defaultStyle, labelStyle);
+        const { fontFamily: labelFont, fontSize: labelFontSize, fill: labelColor, textAlign, lineHeight, fontWeight, multiLine, wordBreak, maxWidth } = merge$1({}, defaultStyle, labelStyle);
         const styleObj = {};
         styleObj.fontFamily = labelFont;
         styleObj.fontSize = getPixelPropertyStr(labelFontSize);
@@ -84676,6 +84759,9 @@
         styleObj.textAlign = textAlign;
         styleObj.lineHeight = getPixelPropertyStr(lineHeight);
         styleObj.fontWeight = fontWeight;
+        styleObj.whiteSpace = multiLine ? 'initial' : 'nowrap';
+        styleObj.wordBreak = wordBreak;
+        styleObj.maxWidth = getPixelPropertyStr(maxWidth);
         return styleObj;
     }
     function getShapeStyle(shapeStyle, defaultStyle) {
@@ -84685,11 +84771,9 @@
         const { size } = merge$1({}, defaultStyle, shapeStyle);
         const styleObj = {};
         styleObj.width = getPixelPropertyStr(size);
-        styleObj.height = styleObj.width;
         return styleObj;
     }
 
-    const domDocument = globalThis.document;
     class BaseTooltipModel {
         static type = 'tooltipModel';
         static isInstance(obj) {
@@ -84875,14 +84959,14 @@
         if (!option?.hasShape || !option.shapeType || !builtinSymbolsMap[option.shapeType]) {
             return '';
         }
-        const { shapeType, size, color, hollow = false } = option;
+        const { shapeType, size, color, hollow = false, marginTop = '0px' } = option;
         const path = builtinSymbolsMap[shapeType].pathStr;
         let fill = 'currentColor';
         if (!color || isString(color) || hollow) {
             fill = hollow ? 'none' : color ?? 'currentColor';
             return `
-    <svg width="${size}"
-      height="${size}" viewBox="-0.5 -0.5 1 1" style="display: inline-block; vertical-align: middle;">
+    <svg width="${size}" height="${size}" viewBox="-0.5 -0.5 1 1"
+      style="display: inline-block; vertical-align: middle; margin-top: ${marginTop};">
       <path fill="${fill}" d="${path}" style="fill: ${fill};">
       </path>
     </svg>`;
@@ -84905,8 +84989,8 @@
       `;
             }
             return `
-    <svg width="${size}" height="${size}"
-      viewBox="-0.5 -0.5 1 1" style="display: inline-block; vertical-align: middle;">
+    <svg width="${size}" height="${size}" viewBox="-0.5 -0.5 1 1"
+      style="display: inline-block; vertical-align: middle; margin-top: ${marginTop};">
       ${gradient}
       <path fill="url(#${fill})" d="${path}" style="fill: url(#${fill});">
       </path>
@@ -84921,13 +85005,16 @@
                 this.product = this.createElement(tag ?? 'span', classList, undefined, id);
             }
         }
-        setContent(content) {
+        setContent(content, multiLine) {
             if (!this.product) {
                 return;
             }
-            const html = this._option.valueToHtml(content);
+            let html = this._option.valueToHtml(content);
+            if (multiLine) {
+                html = html.replaceAll('\n', '<br>');
+            }
             if (html !== this.product.innerHTML) {
-                this.product.innerHTML = this._option.valueToHtml(content);
+                this.product.innerHTML = html;
             }
         }
     }
@@ -84978,12 +85065,13 @@
             const tooltipStyle = this._option.getTooltipStyle();
             super.setStyle(merge$1({}, defaultContentColumnStyle, tooltipStyle.content, this._getContentColumnStyle()));
             const renderContent = this._option.getTooltipActual()?.content ?? [];
+            const contentAttributes = this._option.getTooltipAttributes()?.content ?? [];
             renderContent.forEach((line, i) => {
                 let childStyle = {};
                 if (this.className === 'key-box') {
                     const { key, isKeyAdaptive } = line;
                     childStyle = merge$1({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, {
-                        height: `${100 / renderContent.length}%`,
+                        height: getPixelPropertyStr(contentAttributes[i].height),
                         ...tooltipStyle.keyColumn.item
                     });
                     const hasContent = (isString(key) && key?.trim?.() !== '') || isNumber(key);
@@ -84997,27 +85085,23 @@
                 }
                 else if (this.className === 'value-box') {
                     childStyle = merge$1({}, defaultValueStyle, {
-                        height: `${100 / renderContent.length}%`,
+                        height: getPixelPropertyStr(contentAttributes[i].height),
                         ...tooltipStyle.valueColumn.item
                     });
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'shape-box') {
-                    childStyle = merge$1({}, defaultShapeStyle, tooltipStyle.shapeColumn.item);
-                    const childContent = {
-                        hasShape: line.hasShape,
-                        shapeType: line.shapeType,
-                        size: tooltipStyle.shapeColumn.item?.width,
-                        color: line.shapeColor,
-                        hollow: line.shapeHollow
-                    };
-                    this.children[i]?.setStyle(childStyle, childContent);
+                    childStyle = merge$1({}, defaultShapeStyle, {
+                        height: getPixelPropertyStr(contentAttributes[i].height),
+                        ...tooltipStyle.shapeColumn.item
+                    });
+                    this.children[i]?.setStyle(childStyle, this._getShapeSvgOption(line));
                 }
             });
         }
         setContent() {
-            const tooltipStyle = this._option.getTooltipStyle();
             const renderContent = this._option.getTooltipActual()?.content ?? [];
+            const contentAttributes = this._option.getTooltipAttributes()?.content ?? [];
             renderContent.forEach((line, i) => {
                 let childContent;
                 if (this.className === 'key-box') {
@@ -85028,6 +85112,7 @@
                     else {
                         childContent = TOOLTIP_EMPTY_STRING;
                     }
+                    this.children[i]?.setContent(childContent, contentAttributes[i].value?.multiLine);
                 }
                 else if (this.className === 'value-box') {
                     const valueContent = line.value;
@@ -85037,17 +85122,12 @@
                     else {
                         childContent = TOOLTIP_EMPTY_STRING;
                     }
+                    this.children[i]?.setContent(childContent, contentAttributes[i].value?.multiLine);
                 }
                 else if (this.className === 'shape-box') {
-                    childContent = {
-                        hasShape: line.hasShape,
-                        shapeType: line.shapeType,
-                        size: tooltipStyle.shapeColumn.item?.width,
-                        color: line.shapeColor,
-                        hollow: line.shapeHollow
-                    };
+                    childContent = this._getShapeSvgOption(line);
+                    this.children[i]?.setContent(childContent);
                 }
-                this.children[i]?.setContent(childContent);
             });
         }
         _getContentColumnStyle() {
@@ -85067,6 +85147,17 @@
                     return tooltipStyle.valueColumn;
             }
         }
+        _getShapeSvgOption(line) {
+            const tooltipStyle = this._option.getTooltipStyle();
+            return {
+                hasShape: line.hasShape,
+                shapeType: line.shapeType,
+                size: tooltipStyle.shapeColumn.item?.width,
+                color: line.shapeColor,
+                hollow: line.shapeHollow,
+                marginTop: `calc((${tooltipStyle.keyColumn.item?.lineHeight ?? tooltipStyle.keyColumn.item?.fontSize ?? '18px'} - ${tooltipStyle.shapeColumn.item?.width ?? '8px'}) / 2)`
+            };
+        }
     }
 
     class ContentModel extends BaseTooltipModel {
@@ -85183,6 +85274,7 @@
         setContent() {
             const tooltipStyle = this._option.getTooltipStyle();
             const tooltipActual = this._option.getTooltipActual();
+            const tooltipAttributes = this._option.getTooltipAttributes();
             const { title } = tooltipActual;
             this.init();
             this.shape?.setStyle(undefined, {
@@ -85192,7 +85284,7 @@
                 color: title?.shapeColor,
                 hollow: title?.shapeHollow
             });
-            this.textSpan?.setContent(title?.value);
+            this.textSpan?.setContent(title?.value, tooltipAttributes.title?.value?.multiLine);
         }
         release() {
             super.release();
@@ -85323,7 +85415,7 @@
 
     class DomTooltipHandler extends BaseTooltipHandler {
         type = TooltipHandlerType.dom;
-        _tooltipContainer = globalThis.document?.body;
+        _tooltipContainer = domDocument?.body;
         _domStyle;
         _tooltipActual;
         model;
@@ -85359,7 +85451,8 @@
                 this.model = new TooltipModel(this._container, {
                     valueToHtml: this._option.sanitize,
                     getTooltipStyle: () => this._domStyle,
-                    getTooltipActual: () => this._tooltipActual
+                    getTooltipActual: () => this._tooltipActual,
+                    getTooltipAttributes: () => this._attributeCache
                 }, [tooltipSpec.className], this.id);
             }
         }
@@ -85796,6 +85889,10 @@
                     this._cacheInfo = tooltipInfo;
                 }
             }
+            const vchart = this._option.globalInstance;
+            if (success && VChart.globalConfig.uniqueTooltip) {
+                VChart.hideTooltip(vchart.id);
+            }
             return success;
         };
         _getMouseEventData = (params) => {
@@ -85859,7 +85956,7 @@
                 this._spec.parentElement = userSpec.parentElement;
             }
             else if (isTrueBrowser(this._option.mode)) {
-                this._spec.parentElement = globalThis.document?.body;
+                this._spec.parentElement = domDocument?.body;
             }
             if (isValid(userSpec.confine)) {
                 this._spec.confine = userSpec.confine;
@@ -85953,6 +86050,9 @@
             }
             return false;
         }
+        getVisible() {
+            return this._spec.visible === true;
+        }
     }
 
     function barLabel(labelInfo) {