@visactor/vchart 1.8.4 → 1.8.6

package/build/index.js

@@ -7985,6 +7985,10 @@
       let defined0 = !1;
       for (let i = 0, n = points.length; i <= n; i++) i >= n === defined0 && ((defined0 = !defined0) ? path.lineStart() : path.lineEnd()), defined0 && path.point(points[i]);
     }
+    function genSegContext(curveType, direction, points) {
+      const curveDirection = null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN;
+      return "monotoneY" === curveType ? new ReflectSegContext(curveType, curveDirection) : new SegContext(curveType, curveDirection);
+    }
 
     class Linear {
       constructor(context, startPoint) {
@@ -8027,7 +8031,7 @@
         startPoint: startPoint
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
-      const segContext = new SegContext("linear", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
+      const segContext = genSegContext("linear", direction, points);
       return genLinearTypeSegments(new Linear(segContext, startPoint), points), segContext;
     }
     function genLinearTypeSegments(path, points) {
@@ -8084,7 +8088,7 @@
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
       if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-      const segContext = new SegContext("basis", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
+      const segContext = genSegContext("basis", direction, points);
       return genBasisTypeSegments(new Basis(segContext, startPoint), points), segContext;
     }
 
@@ -8169,7 +8173,7 @@
         });
       }
     }
-    function genMonotpneXTypeSegments(path, points) {
+    function genMonotoneXTypeSegments(path, points) {
       return genCurveSegments(path, points);
     }
     function genMonotoneXSegments(points) {
@@ -8180,10 +8184,10 @@
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
       if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-      const segContext = new SegContext("monotoneX", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
-      return genMonotpneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
+      const segContext = genSegContext("monotoneX", direction, points);
+      return genMonotoneXTypeSegments(new MonotoneX(segContext, startPoint), points), segContext;
     }
-    function genMonotpneYTypeSegments(path, points) {
+    function genMonotoneYTypeSegments(path, points) {
       return genCurveSegments(path, points);
     }
     function genMonotoneYSegments(points) {
@@ -8194,8 +8198,8 @@
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
       if (points.length < 3 - Number(!!startPoint)) return genLinearSegments(points, params);
-      const segContext = new ReflectSegContext("monotoneY", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
-      return genMonotpneYTypeSegments(new MonotoneY(segContext, startPoint), points), segContext;
+      const segContext = genSegContext("monotoneY", direction, points);
+      return genMonotoneYTypeSegments(new MonotoneY(segContext, startPoint), points), segContext;
     }
 
     let Step$1 = class Step {
@@ -8251,39 +8255,10 @@
       return genCurveSegments(path, points);
     }
 
-    class LinearClosed {
-      constructor(context, startPoint) {
-        this.context = context, startPoint && (this.startPoint = startPoint);
-      }
-      areaStart() {
-        this._line = 0;
-      }
-      areaEnd() {
-        this._line = NaN;
-      }
-      lineStart() {
-        this._point = 0, this.startPoint && this.point(this.startPoint);
-      }
+    class LinearClosed extends Linear {
       lineEnd() {
         this.context.closePath();
       }
-      point(p) {
-        const x = p.x,
-          y = p.y;
-        switch (this._point) {
-          case 0:
-            this._point = 1, this._line ? this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p) : this.context.moveTo(x, y, p);
-            break;
-          case 1:
-            this._point = 2;
-          default:
-            this.context.lineTo(x, y, !1 !== this._lastDefined && !1 !== p.defined, p);
-        }
-        this._lastDefined = p.defined;
-      }
-      tryUpdateLength() {
-        return this.context.tryUpdateLength();
-      }
     }
     function genLinearClosedSegments(points) {
       let params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -8292,7 +8267,7 @@
         startPoint: startPoint
       } = params;
       if (points.length < 2 - Number(!!startPoint)) return null;
-      const segContext = new SegContext("linear", null != direction ? direction : abs$1(points[points.length - 1].x - points[0].x) > abs$1(points[points.length - 1].y - points[0].y) ? Direction$2.ROW : Direction$2.COLUMN);
+      const segContext = genSegContext("linear", direction, points);
       return genLinearClosedTypeSegments(new LinearClosed(segContext, startPoint), points), segContext;
     }
     function genLinearClosedTypeSegments(path, points) {
@@ -8684,6 +8659,7 @@
       textureSize: 10,
       texturePadding: 2,
       backgroundMode: "no-repeat",
+      backgroundFit: !0,
       blur: 0,
       cursor: null,
       html: null
@@ -8701,6 +8677,8 @@
       strokeSeg: null,
       pickable: !0,
       childrenPickable: !0,
+      fillPickable: !0,
+      strokePickable: !0,
       visible: !0,
       zIndex: 0,
       layout: null,
@@ -14953,11 +14931,11 @@
       get cliped() {
         const textTheme = getTheme$1(this).text,
           attribute = this.attribute;
-        if (!this.isSimplify()) return;
+        if (this.isMultiLine) return;
         const {
           maxLineWidth = textTheme.maxLineWidth
         } = attribute;
-        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), null != this.clipedText && this.clipedText !== attribute.text.toString());
+        return !!Number.isFinite(maxLineWidth) && (this.tryUpdateAABBBounds(), "vertical" === attribute.direction && this.cache.verticalList && this.cache.verticalList[0] ? this.cache.verticalList[0].map(item => item.text).join("") !== attribute.text.toString() : null != this.clipedText && this.clipedText !== attribute.text.toString());
       }
       get multilineLayout() {
         if (this.isMultiLine) return this.tryUpdateAABBBounds(), this.cache.layoutData;
@@ -18563,7 +18541,8 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
         const {
           background: background,
-          backgroundMode = graphicAttribute.backgroundMode
+          backgroundMode = graphicAttribute.backgroundMode,
+          backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
@@ -18578,13 +18557,33 @@
           }
           context.clip();
           const b = graphic.AABBBounds;
-          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
-      doDrawImage(context, data, b, backgroundMode) {
+      doDrawImage(context, data, b, backgroundMode, backgroundFit) {
         if ("no-repeat" === backgroundMode) context.drawImage(data, b.x1, b.y1, b.width(), b.height());else {
+          const targetW = b.width(),
+            targetH = b.height();
+          let w = targetW,
+            h = targetH;
+          if (backgroundFit && "repeat" !== backgroundMode && (data.width || data.height)) {
+            const resW = data.width,
+              resH = data.height;
+            if ("repeat-x" === backgroundMode) {
+              w = resW * (targetH / resH);
+            } else if ("repeat-y" === backgroundMode) {
+              h = resH * (targetW / resW);
+            }
+            const canvas = canvasAllocate.allocate({
+                width: w,
+                height: h,
+                dpr: context.dpr
+              }),
+              ctx = canvas.getContext("2d");
+            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), document.body.appendChild(data), canvasAllocate.free(canvas);
+          }
           const pattern = context.createPattern(data, backgroundMode);
-          context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, b.width(), b.height()), context.translate(-b.x1, -b.y1);
+          context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
         }
       }
     }
@@ -18600,6 +18599,7 @@
       }
     };
     DefaultBaseInteractiveRenderContribution = __decorate$1p([injectable(), __param$J(0, inject(ContributionProvider)), __param$J(0, named(InteractiveSubRenderContribution)), __metadata$13("design:paramtypes", [Object])], DefaultBaseInteractiveRenderContribution);
+
     class DefaultBaseTextureRenderContribution {
       constructor() {
         this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 10;
@@ -18683,7 +18683,9 @@
           textureSize = graphicAttribute.textureSize,
           texturePadding = graphicAttribute.texturePadding
         } = graphic.attribute;
-        if (!texture) return;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+      drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding) {
         let pattern = this.textureMap.get(texture);
         if (!pattern) switch (texture) {
           case "circle":
@@ -18841,14 +18843,15 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         const {
           background: background,
-          backgroundMode = graphicAttribute.backgroundMode
+          backgroundMode = graphicAttribute.backgroundMode,
+          backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
           context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
           const b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }
@@ -18917,7 +18920,8 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         const {
           background: background,
-          backgroundMode = graphicAttribute.backgroundMode
+          backgroundMode = graphicAttribute.backgroundMode,
+          backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg) {
           const res = graphic.resources.get(background);
@@ -18931,7 +18935,7 @@
             context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.translate(scrollX, scrollY);
           }
           const b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, backgroundMode), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
+          this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else if (isObject$2(background)) {
           const {
             stroke: stroke,
@@ -19123,6 +19127,26 @@
     const defaultSymbolTextureRenderContribution = defaultBaseTextureRenderContribution;
     const defaultSymbolBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
+    class DefaultAreaTextureRenderContribution extends DefaultBaseTextureRenderContribution {
+      constructor() {
+        super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
+      }
+      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
+        var _a, _b, _c, _d;
+        this.textureMap || this.initTextureMap(context, graphic.stage);
+        const {
+            attribute = graphic.attribute
+          } = options || {},
+          {
+            texture = null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture"),
+            textureColor = null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor"),
+            textureSize = null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize"),
+            texturePadding = null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding")
+          } = attribute;
+        texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
+      }
+    }
+
     var __decorate$1n = undefined && undefined.__decorate || function (decorators, target, key, desc) {
         var d,
           c = arguments.length,
@@ -19336,6 +19360,22 @@
     };
     DefaultCanvasCircleRender = __decorate$1m([injectable(), __param$H(0, inject(ContributionProvider)), __param$H(0, named(CircleRenderContribution)), __metadata$11("design:paramtypes", [Object])], DefaultCanvasCircleRender);
 
+    function drawSegItem(ctx, curve, endPercent, params) {
+      if (!curve.p1) return;
+      const {
+        offsetX = 0,
+        offsetY = 0,
+        offsetZ = 0
+      } = params || {};
+      if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
+        const [curve1] = divideCubic(curve, endPercent);
+        ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
+      } else {
+        const p = curve.getPointAt(endPercent);
+        ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
+      }
+    }
+
     function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
       var _a;
       const {
@@ -19378,7 +19418,7 @@
             } else lastCurve = curve;
           });
         } else curves.forEach(curve => {
-          curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
+          curve.defined ? (needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, 1, params), needMoveTo = !1) : needMoveTo = !0;
         });
         return;
       }
@@ -19419,7 +19459,7 @@
             needMoveTo = !0;
             continue;
           }
-          needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min$1(_p, 1), params), needMoveTo = !1;
+          needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem(path, curve, min$1(_p, 1), params), needMoveTo = !1;
         }
       }
     }
@@ -19456,21 +19496,6 @@
         path.lineTo(null !== (_c = startP.x1) && void 0 !== _c ? _c : startP.x, null !== (_d = startP.y1) && void 0 !== _d ? _d : startP.y), path.closePath();
       });
     }
-    function drawSegItem$1(ctx, curve, endPercent, params) {
-      if (!curve.p1) return;
-      const {
-        offsetX = 0,
-        offsetY = 0,
-        offsetZ = 0
-      } = params || {};
-      if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
-        const [curve1] = divideCubic(curve, endPercent);
-        ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
-      } else {
-        const p = curve.getPointAt(endPercent);
-        ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-      }
-    }
 
     var __decorate$1l = undefined && undefined.__decorate || function (decorators, target, key, desc) {
       var d,
@@ -19531,10 +19556,10 @@
             points: points
           } = line.attribute,
           startP = points[0];
-        context.moveTo(startP.x, startP.y, z);
+        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (let i = 1; i < points.length; i++) {
           const p = points[i];
-          context.lineTo(p.x, p.y, z);
+          context.lineTo(p.x + offsetX, p.y + offsetY, z);
         }
         context.setShadowBlendStyle && context.setShadowBlendStyle(line, line.attribute, lineAttribute);
         const {
@@ -19754,68 +19779,7 @@
       }
       path.closePath();
     }
-    function drawSegItem(ctx, curve, endPercent, params) {
-      if (!curve.p1) return;
-      const {
-        offsetX = 0,
-        offsetY = 0,
-        offsetZ = 0
-      } = params || {};
-      if (1 === endPercent) curve.p2 && curve.p3 ? ctx.bezierCurveTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetX + curve.p2.x, offsetY + curve.p2.y, offsetX + curve.p3.x, offsetY + curve.p3.y, offsetZ) : ctx.lineTo(offsetX + curve.p1.x, offsetY + curve.p1.y, offsetZ);else if (curve.p2 && curve.p3) {
-        const [curve1] = divideCubic(curve, endPercent);
-        ctx.bezierCurveTo(offsetX + curve1.p1.x, offsetY + curve1.p1.y, offsetX + curve1.p2.x, offsetY + curve1.p2.y, offsetX + curve1.p3.x, offsetY + curve1.p3.y, offsetZ);
-      } else {
-        const p = curve.getPointAt(endPercent);
-        ctx.lineTo(offsetX + p.x, offsetY + p.y, offsetZ);
-      }
-    }
 
-    class DefaultAreaTextureRenderContribution extends DefaultBaseTextureRenderContribution {
-      constructor() {
-        super(...arguments), this.time = BaseRenderContributionTime.afterFillStroke;
-      }
-      drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb, options) {
-        var _a, _b, _c, _d;
-        this.textureMap || this.initTextureMap(context, graphic.stage);
-        const {
-            attribute = graphic.attribute
-          } = options || {},
-          {
-            texture = null !== (_a = graphic.attribute.texture) && void 0 !== _a ? _a : getAttributeFromDefaultAttrList(graphicAttribute, "texture"),
-            textureColor = null !== (_b = graphic.attribute.textureColor) && void 0 !== _b ? _b : getAttributeFromDefaultAttrList(graphicAttribute, "textureColor"),
-            textureSize = null !== (_c = graphic.attribute.textureSize) && void 0 !== _c ? _c : getAttributeFromDefaultAttrList(graphicAttribute, "textureSize"),
-            texturePadding = null !== (_d = graphic.attribute.texturePadding) && void 0 !== _d ? _d : getAttributeFromDefaultAttrList(graphicAttribute, "texturePadding")
-          } = attribute;
-        if (!texture) return;
-        let pattern = this.textureMap.get(texture);
-        if (!pattern) switch (texture) {
-          case "circle":
-            pattern = this.createCirclePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "diamond":
-            pattern = this.createDiamondPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "rect":
-            pattern = this.createRectPattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "vertical-line":
-            pattern = this.createVerticalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "horizontal-line":
-            pattern = this.createHorizontalLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-lr":
-            pattern = this.createBiasLRLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "bias-rl":
-            pattern = this.createBiasRLLinePattern(textureSize, texturePadding, textureColor, context);
-            break;
-          case "grid":
-            pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
-        }
-        pattern && (context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore());
-      }
-    }
     const defaultAreaTextureRenderContribution = new DefaultAreaTextureRenderContribution();
     const defaultAreaBackgroundRenderContribution = defaultBaseBackgroundRenderContribution;
 
@@ -19867,39 +19831,43 @@
             points: points
           } = area.attribute,
           startP = points[0];
-        context.moveTo(startP.x, startP.y, z);
+        context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
         for (let i = 1; i < points.length; i++) {
           const p = points[i];
-          context.lineTo(p.x, p.y, z);
+          context.lineTo(p.x + offsetX, p.y + offsetY, z);
         }
         for (let i = points.length - 1; i >= 0; i--) {
           const p = points[i];
-          context.lineTo(null !== (_b = p.x1) && void 0 !== _b ? _b : p.x, null !== (_c = p.y1) && void 0 !== _c ? _c : p.y, z);
+          context.lineTo((null !== (_b = p.x1) && void 0 !== _b ? _b : p.x) + offsetX, (null !== (_c = p.y1) && void 0 !== _c ? _c : p.y) + offsetY, z);
         }
-        context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(area, area.attribute, areaAttribute);
+        context.closePath(), context.setShadowBlendStyle && context.setShadowBlendStyle(area, area.attribute, areaAttribute), this.beforeRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+          attribute: area.attribute
+        });
         const {
           x: originX = 0,
           x: originY = 0
         } = area.attribute;
-        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), stroke) {
+        if (!1 !== fill && (fillCb ? fillCb(context, area.attribute, areaAttribute) : fillOpacity && (context.setCommonStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.fill())), this.afterRenderStep(area, context, offsetX, offsetY, !!fillOpacity, !1, fill, !1, areaAttribute, drawContext, fillCb, null, {
+          attribute: area.attribute
+        }), stroke) {
           const {
             stroke = areaAttribute && areaAttribute.stroke
           } = area.attribute;
           if (isArray$1(stroke) && (stroke[0] || stroke[2]) && !1 === stroke[1]) if (context.beginPath(), stroke[0]) {
-            context.moveTo(startP.x, startP.y, z);
+            context.moveTo(startP.x + offsetX, startP.y + offsetY, z);
             for (let i = 1; i < points.length; i++) {
               const p = points[i];
-              context.lineTo(p.x, p.y, z);
+              context.lineTo(p.x + offsetX, p.y + offsetY, z);
             }
           } else if (stroke[2]) {
             const endP = points[points.length - 1];
-            context.moveTo(endP.x, endP.y, z);
+            context.moveTo(endP.x + offsetX, endP.y + offsetY, z);
             for (let i = points.length - 2; i >= 0; i--) {
               const p = points[i];
-              context.lineTo(null !== (_d = p.x1) && void 0 !== _d ? _d : p.x, null !== (_e = p.y1) && void 0 !== _e ? _e : p.y, z);
+              context.lineTo((null !== (_d = p.x1) && void 0 !== _d ? _d : p.x) + offsetX, (null !== (_e = p.y1) && void 0 !== _e ? _e : p.y) + offsetY, z);
             }
           }
-          context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke();
+          strokeCb ? strokeCb(context, area.attribute, areaAttribute) : (context.setStrokeStyle(area, area.attribute, originX - offsetX, originY - offsetY, areaAttribute), context.stroke());
         }
       }
       drawShape(area, context, x, y, drawContext, params, fillCb, strokeCb) {
@@ -20268,14 +20236,15 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         const {
           background: background,
-          backgroundMode = graphicAttribute.backgroundMode
+          backgroundMode = graphicAttribute.backgroundMode,
+          backgroundFit = graphicAttribute.backgroundFit
         } = graphic.attribute;
         if (!background) return;
         const b = graphic.AABBBounds;
         if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
           if ("success" !== res.state || !res.data) return;
-          context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), this.doDrawImage(context, res.data, b, backgroundMode), context.highPerformanceRestore(), context.setTransformForCurrent();
+          context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit), context.highPerformanceRestore(), context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.fillStyle = background, context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
       }
     }
@@ -22174,10 +22143,10 @@
         let left = 0,
           top = 0;
         if ("position" === anchorType) {
-          const matrix = graphic.transMatrix;
+          const matrix = graphic.globalTransMatrix;
           left = matrix.e, top = matrix.f;
         } else {
-          const b = graphic.AABBBounds;
+          const b = graphic.globalAABBBounds;
           left = b.x1, top = b.y1;
         }
         const containerTL = application.global.getElementTopLeft(nativeContainer, !1),
@@ -22839,7 +22808,7 @@
         return this.removeChild(this.findChildByUid(ILayerId));
       }
       tryInitInteractiveLayer() {
-        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.nextFrameRenderLayerSet.add(this.interactiveLayer));
+        this.supportInteractiveLayer && !this.interactiveLayer && (this.interactiveLayer = this.createLayer(), this.interactiveLayer.name = "_builtin_interactive", this.interactiveLayer.attribute.pickable = !1, this.nextFrameRenderLayerSet.add(this.interactiveLayer));
       }
       clearViewBox(color) {
         this.window.clearViewBox(this._viewBox, color);
@@ -31588,12 +31557,22 @@
           x = areaAttribute.x,
           y = areaAttribute.y
         } = area.attribute;
+        const {
+          fillPickable = areaAttribute.fillPickable,
+          strokePickable = areaAttribute.strokePickable
+        } = area.attribute;
         if (pickContext.highPerformanceSave(), area.transMatrix.onlyTranslate()) {
           const point = area.getOffsetXY(areaAttribute);
           x += point.x, y += point.y, pickContext.setTransformForCurrent();
         } else x = 0, y = 0, pickContext.transformFromMatrix(area.transMatrix, !0);
         let picked = !1;
-        return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || (picked = context.isPointInPath(point.x, point.y), picked)), pickContext.highPerformanceRestore(), picked;
+        return this.canvasRenderer.drawShape(area, pickContext, x, y, {}, null, context => !!picked || !!fillPickable && (picked = context.isPointInPath(point.x, point.y), picked), (context, areaAttribute, themeAttribute) => {
+          if (picked) return !0;
+          if (!strokePickable) return !1;
+          const lineWidth = areaAttribute.lineWidth || themeAttribute.lineWidth,
+            pickStrokeBuffer = areaAttribute.pickStrokeBuffer || themeAttribute.pickStrokeBuffer;
+          return pickContext.lineWidth = getScaledStroke(pickContext, lineWidth + pickStrokeBuffer, pickContext.dpr), picked = context.isPointInStroke(point.x, point.y), picked;
+        }), pickContext.highPerformanceRestore(), picked;
       }
     };
     DefaultCanvasAreaPicker = __decorate$l([injectable(), __param$g(0, inject(AreaRender)), __metadata$g("design:paramtypes", [Object])], DefaultCanvasAreaPicker);
@@ -34262,6 +34241,34 @@
         y: graphicBounds.y1
       };
     }
+    function connectLineBetweenBounds(boundA, boundB) {
+      if (!boundA || !boundB) return;
+      if (isRectIntersect(boundA, boundB, !0)) return;
+      const x1 = Math.min(boundA.x1, boundA.x2),
+        y1 = Math.min(boundA.y1, boundA.y2),
+        x2 = Math.min(boundB.x1, boundB.x2),
+        y2 = Math.min(boundB.y1, boundB.y2),
+        w1 = Math.abs(boundA.x2 - x1) / 2,
+        h1 = Math.abs(boundA.y2 - y1) / 2,
+        w2 = Math.abs(boundB.x2 - x2) / 2,
+        h2 = Math.abs(boundB.y2 - y2) / 2,
+        cx1 = x1 + w1,
+        cy1 = y1 + h1,
+        cx2 = x2 + w2,
+        cy2 = y2 + h2,
+        dx = cx2 - cx1,
+        dy = cy2 - cy1;
+      return [getIntersection(dx, dy, cx1, cy1, w1, h1), getIntersection(-dx, -dy, cx2, cy2, w2, h2)];
+    }
+    function getIntersection(dx, dy, cx, cy, w, h) {
+      return Math.abs(dy / dx) < h / w ? {
+        x: cx + (dx > 0 ? w : -w),
+        y: cy + dy * w / Math.abs(dx)
+      } : {
+        x: cx + dx * h / Math.abs(dy),
+        y: cy + (dy > 0 ? h : -h)
+      };
+    }
 
     function loadLabelComponent() {
       registerGroup(), registerText(), registerRichtext(), registerLine();
@@ -34294,9 +34301,9 @@
             node === target || isEmpty(node.states) || node.addState(StateValue.selectedReverse, !0);
           }), this._lastSelect = target);
         }, this._handleRelatedGraphicSetState = e => {
-          var _a, _b, _c;
-          if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === AttributeUpdateType.STATE) {
-            const currentStates = null !== (_c = null === (_b = e.target) || void 0 === _b ? void 0 : _b.currentStates) && void 0 !== _c ? _c : [];
+          var _a, _b, _c, _d, _e;
+          if ((null === (_a = e.detail) || void 0 === _a ? void 0 : _a.type) === AttributeUpdateType.STATE || (null === (_b = e.detail) || void 0 === _b ? void 0 : _b.type) === AttributeUpdateType.ANIMATE_UPDATE && (null === (_c = e.detail.animationState) || void 0 === _c ? void 0 : _c.isFirstFrameOfStep)) {
+            const currentStates = null !== (_e = null === (_d = e.target) || void 0 === _d ? void 0 : _d.currentStates) && void 0 !== _e ? _e : [];
             (this._isCollectionBase ? [...this._graphicToText.values()] : [this._graphicToText.get(e.target)]).forEach(label => {
               label && (label.text && label.text.useStates(currentStates), label.labelLine && label.labelLine.useStates(currentStates));
             });
@@ -34304,7 +34311,15 @@
         };
       }
       labeling(textBounds, graphicBounds, position, offset) {}
-      _labelLine(text) {}
+      _createLabelLine(text, baseMark) {
+        const points = connectLineBetweenBounds(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds);
+        if (points) {
+          const line = graphicCreator.line({
+            points: points
+          });
+          return baseMark && baseMark.attribute.fill && line.setAttribute("stroke", baseMark.attribute.fill), this.attribute.line && !isEmpty(this.attribute.line.style) && line.setAttributes(this.attribute.line.style), this._setStatesOfLabelLine(line), line;
+        }
+      }
       render() {
         if (this._prepare(), isNil$1(this._idToGraphic) || this._isCollectionBase && isNil$1(this._idToPoint)) return;
         const {
@@ -34370,7 +34385,7 @@
             for (let i = 0; i < currentBaseMarks.length; i++) {
               const baseMark = currentBaseMarks[i],
                 points = getPointsOfLineArea(baseMark);
-              if (null == points ? void 0 : points.length) for (let j = 0; j < points.length; j++) {
+              if (points && points.length) for (let j = 0; j < points.length; j++) {
                 const textData = data[cur];
                 textData && points[j] && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${cur}`), this._idToPoint.set(textData.id, points[j]), this._idToGraphic.set(textData.id, baseMark)), cur++;
               }
@@ -34460,7 +34475,7 @@
               bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
               continue;
             }
-            if (checkBounds && (null == baseMark ? void 0 : baseMark.AABBBounds) && this._canPlaceInside(text.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
+            if (checkBounds && baseMark && baseMark.AABBBounds && this._canPlaceInside(text.AABBBounds, baseMark.AABBBounds)) {
               bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
               continue;
             }
@@ -34508,29 +34523,49 @@
       }
       getGraphicBounds(graphic) {
         let point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        return (null == graphic ? void 0 : graphic.AABBBounds) || {
-          x1: point.x,
-          x2: point.x,
-          y1: point.y,
-          y2: point.y
+        if (graphic) {
+          if (!1 !== graphic.attribute.visible) return graphic.AABBBounds;
+          const {
+            x: x,
+            y: y
+          } = graphic.attribute;
+          return {
+            x1: x,
+            x2: x,
+            y1: y,
+            y2: y
+          };
+        }
+        const {
+          x: x,
+          y: y
+        } = point;
+        return {
+          x1: x,
+          x2: x,
+          y1: y,
+          y2: y
         };
       }
       _renderLabels(labels) {
         !1 === this._enableAnimation || !1 === this.attribute.animation ? this._renderWithOutAnimation(labels) : this._renderWithAnimation(labels);
       }
       _renderWithAnimation(labels) {
+        var _a;
         const currentTextMap = new Map(),
           prevTextMap = this._graphicToText || new Map(),
           texts = [],
-          labelLines = [];
+          labelLines = [],
+          {
+            visible: showLabelLine
+          } = null !== (_a = this.attribute.line) && void 0 !== _a ? _a : {};
         labels.forEach((text, index) => {
-          var _a, _b, _c, _d, _e, _f, _g;
-          const labelLine = this._labelLine(text),
-            relatedGraphic = this.getRelatedGraphic(text.attribute),
+          const relatedGraphic = this.getRelatedGraphic(text.attribute),
             textId = text.attribute.id,
             textKey = this._isCollectionBase ? textId : relatedGraphic,
             state = (null == prevTextMap ? void 0 : prevTextMap.get(textKey)) ? "update" : "enter";
-          if ("enter" === state) {
+          let labelLine;
+          if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), "enter" === state) {
             if (texts.push(text), currentTextMap.set(textKey, labelLine ? {
               text: text,
               labelLine: labelLine
@@ -34541,7 +34576,7 @@
                 from: from,
                 to: to
               } = getAnimationAttributes(text.attribute, "fadeIn");
-              this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), labelLines.push(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", a => {
+              this.add(text), labelLine && (labelLines.push(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), this._animationConfig.enter.duration > 0 && relatedGraphic.once("animate-bind", a => {
                 text.setAttributes(from), labelLine && labelLine.setAttributes(from);
                 const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, labelLine, labelLines, index, relatedGraphic, to, this._animationConfig.enter);
                 relatedGraphic.on("afterAttributeUpdate", listener);
@@ -34555,40 +34590,42 @@
                 duration: duration,
                 easing: easing
               } = this._animationConfig.update;
-            updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && prevLabel.labelLine.animate().to(merge$1({}, prevLabel.labelLine.attribute, {
-              visible: null === (_f = null !== (_d = (null === (_b = null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.line) || void 0 === _b ? void 0 : _b.visible) && (null === (_c = text.attribute) || void 0 === _c ? void 0 : _c.visible)) && void 0 !== _d ? _d : null === (_e = text.attribute) || void 0 === _e ? void 0 : _e.visible) || void 0 === _f || _f,
-              points: null === (_g = text.attribute) || void 0 === _g ? void 0 : _g.points
+            updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && labelLine && prevLabel.labelLine.animate().to(merge$1({}, prevLabel.labelLine.attribute, {
+              points: labelLine.attribute.points
             }), duration, easing);
           }
         }), prevTextMap.forEach(label => {
           var _a;
           null === (_a = label.text) || void 0 === _a || _a.animate().to(getAnimationAttributes(label.text.attribute, "fadeOut").to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd(() => {
-            this.removeChild(label.text), (null == label ? void 0 : label.labelLine) && this.removeChild(label.labelLine);
+            this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
           });
         }), this._graphicToText = currentTextMap;
       }
       _renderWithOutAnimation(labels) {
+        var _a;
         const currentTextMap = new Map(),
-          prevTextMap = this._graphicToText || new Map();
+          prevTextMap = this._graphicToText || new Map(),
+          {
+            visible: showLabelLine
+          } = null !== (_a = this.attribute.line) && void 0 !== _a ? _a : {};
         labels.forEach(text => {
-          var _a;
-          const labelLine = this._labelLine(text),
-            relatedGraphic = this.getRelatedGraphic(text.attribute),
+          const relatedGraphic = this.getRelatedGraphic(text.attribute),
             state = (null == prevTextMap ? void 0 : prevTextMap.get(relatedGraphic)) ? "update" : "enter",
             textKey = this._isCollectionBase ? text.attribute.id : relatedGraphic;
-          if ("enter" === state) currentTextMap.set(textKey, labelLine ? {
+          let labelLine;
+          if (showLabelLine && (labelLine = this._createLabelLine(text, relatedGraphic)), "enter" === state) currentTextMap.set(textKey, labelLine ? {
             text: text,
             labelLine: labelLine
           } : {
             text: text
           }), this.add(text), labelLine && this.add(labelLine), this._syncStateWithRelatedGraphic(relatedGraphic);else if ("update" === state) {
             const prevLabel = prevTextMap.get(textKey);
-            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), (null == prevLabel ? void 0 : prevLabel.labelLine) && prevLabel.labelLine.setAttributes({
-              points: null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.points
+            prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel), prevLabel.text.setAttributes(text.attribute), prevLabel.labelLine && labelLine && prevLabel.labelLine.setAttributes({
+              points: labelLine.attribute.points
             });
           }
         }), prevTextMap.forEach(label => {
-          this.removeChild(label.text), (null == label ? void 0 : label.labelLine) && this.removeChild(label.labelLine);
+          this.removeChild(label.text), label.labelLine && this.removeChild(label.labelLine);
         }), this._graphicToText = currentTextMap;
       }
       _syncStateWithRelatedGraphic(relatedGraphic) {
@@ -34674,7 +34711,7 @@
               stroke: stroke
             });
           } else {
-            if (this._canPlaceInside(label.AABBBounds, null == baseMark ? void 0 : baseMark.AABBBounds)) {
+            if (this._canPlaceInside(label.AABBBounds, baseMark.AABBBounds)) {
               const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
               if (fill && label.setAttributes({
                 fill: fill
@@ -34917,17 +34954,19 @@
             basedArc = arcs.find(arc => {
               var _a;
               return (null === (_a = arc.refDatum) || void 0 === _a ? void 0 : _a.id) === textData.id;
-            }),
-            labelAttribute = {
+            });
+          if (basedArc) {
+            const labelAttribute = {
               visible: basedArc.labelVisible,
               x: basedArc.labelPosition.x,
               y: basedArc.labelPosition.y,
               angle: basedArc.angle,
               maxLineWidth: basedArc.labelLimit,
-              points: (null == basedArc ? void 0 : basedArc.pointA) && (null == basedArc ? void 0 : basedArc.pointB) && (null == basedArc ? void 0 : basedArc.pointC) ? [basedArc.pointA, basedArc.pointB, basedArc.pointC] : void 0,
-              line: null == basedArc ? void 0 : basedArc.labelLine
+              points: basedArc.pointA && basedArc.pointB && basedArc.pointC ? [basedArc.pointA, basedArc.pointB, basedArc.pointC] : void 0,
+              line: basedArc.labelLine
             };
-          labels[i].setAttributes(labelAttribute);
+            labels[i].setAttributes(labelAttribute);
+          }
         }
         return labels;
       }
@@ -34981,8 +35020,8 @@
         var _a, _b;
         const labelConfig = attribute,
           spaceWidth = labelConfig.spaceWidth,
-          position = null !== (_a = null == labelConfig ? void 0 : labelConfig.position) && void 0 !== _a ? _a : "inside",
-          offsetRadius = null !== (_b = null == labelConfig ? void 0 : labelConfig.offsetRadius) && void 0 !== _b ? _b : -spaceWidth;
+          position = null !== (_a = labelConfig.position) && void 0 !== _a ? _a : "inside",
+          offsetRadius = null !== (_b = labelConfig.offsetRadius) && void 0 !== _b ? _b : -spaceWidth;
         return arcs.forEach(arc => {
           var _a, _b, _c;
           const {
@@ -34996,22 +35035,22 @@
             let minRadius;
             minRadius = radian >= Math.PI ? innerRadius : Math.max(innerRadius, labelSize.height / 2 / Math.tan(radian / 2)), limit = outerRadius - minRadius - spaceWidth;
           }
-          !0 !== (null == labelConfig ? void 0 : labelConfig.rotate) && (limit = outerRadius - spaceWidth);
+          !0 !== labelConfig.rotate && (limit = outerRadius - spaceWidth);
           const text = this._getFormatLabelText(arc.refDatum, limit);
           arc.labelText = text;
           const labelWidth = Math.min(limit, arc.labelSize.width),
             align = this._computeAlign(arc, attribute);
           let labelRadius,
             alignOffset = 0;
-          "inside" === position && (alignOffset = "left" === align ? labelWidth : "right" === align ? 0 : labelWidth / 2), labelRadius = "inside-inner" === position ? innerRadius - offsetRadius + alignOffset : outerRadius + offsetRadius - alignOffset, arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle), arc.labelLimit = labelWidth, isGreater(labelWidth, 0) || (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : arc.middleAngle;
-          let offsetAngle = null !== (_c = null == labelConfig ? void 0 : labelConfig.offsetAngle) && void 0 !== _c ? _c : 0;
+          "inside" === position && (alignOffset = "left" === align ? labelWidth : "right" === align ? 0 : labelWidth / 2), labelRadius = "inside-inner" === position ? innerRadius - offsetRadius + alignOffset : outerRadius + offsetRadius - alignOffset, arc.labelPosition = circlePoint(arc.circleCenter.x, arc.circleCenter.y, labelRadius, arc.middleAngle), arc.labelLimit = labelWidth, isGreater(labelWidth, 0) || (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : arc.middleAngle;
+          let offsetAngle = null !== (_c = labelConfig.offsetAngle) && void 0 !== _c ? _c : 0;
           ["inside-inner", "inside-outer"].includes(position) && (offsetAngle += Math.PI / 2), arc.angle += offsetAngle;
         }), arcs;
       }
       _layoutOutsideLabels(arcs, attribute, currentMarks) {
-        var _a, _b, _c, _d, _e;
-        const center_x = null !== (_b = null === (_a = currentMarks[0].attribute) || void 0 === _a ? void 0 : _a.x) && void 0 !== _b ? _b : 0,
-          height = 2 * (null !== (_d = null === (_c = currentMarks[0].attribute) || void 0 === _c ? void 0 : _c.y) && void 0 !== _d ? _d : 0),
+        var _a, _b, _c;
+        const center_x = null !== (_a = currentMarks[0].attribute.x) && void 0 !== _a ? _a : 0,
+          height = 2 * (null !== (_b = currentMarks[0].attribute.y) && void 0 !== _b ? _b : 0),
           line2MinLength = attribute.line.line2MinLength,
           labelLayout = attribute.layout,
           spaceWidth = attribute.spaceWidth;
@@ -35037,7 +35076,7 @@
           }
           !1 === attribute.coverEnable && "none" === labelLayout.strategy && this._coverLabels(arcs);
         } else {
-          const maxLabels = height / ((null === (_e = attribute.textStyle) || void 0 === _e ? void 0 : _e.fontSize) || 16);
+          const maxLabels = height / ((null === (_c = attribute.textStyle) || void 0 === _c ? void 0 : _c.fontSize) || 16);
           this._adjustY(arcs, maxLabels, attribute, currentMarks);
           const {
               minY: minY,
@@ -35059,7 +35098,7 @@
         const width = 2 * center_x;
         return arcs.forEach(arc => {
           var _a, _b;
-          arc.labelVisible && (isLess(arc.pointB.x, line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = null == attribute ? void 0 : attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0, (null == attribute ? void 0 : attribute.offsetAngle) && (arc.angle += attribute.offsetAngle), arc.labelLine = Object.assign({}, null == attribute ? void 0 : attribute.line);
+          arc.labelVisible && (isLess(arc.pointB.x, line2MinLength + spaceWidth) || isGreater(arc.pointB.x, width - line2MinLength - spaceWidth)) && (arc.labelVisible = !1), arc.angle = null !== (_b = null === (_a = attribute.textStyle) || void 0 === _a ? void 0 : _a.angle) && void 0 !== _b ? _b : 0, attribute.offsetAngle && (arc.angle += attribute.offsetAngle), arc.labelLine = Object.assign({}, attribute.line);
         }), arcs;
       }
       _computeX(arc, attribute, currentMarks) {
@@ -35127,9 +35166,9 @@
         return null !== (_a = null == value ? void 0 : value.text) && void 0 !== _a ? _a : "";
       }
       _adjustY(arcs, maxLabels, attribute, currentMarks) {
-        var _a, _c, _d;
-        null === (_a = currentMarks[0].attribute) || void 0 === _a ? void 0 : _a.x;
-        const plotRect_height = 2 * (null !== (_d = null === (_c = currentMarks[0].attribute) || void 0 === _c ? void 0 : _c.y) && void 0 !== _d ? _d : 0),
+        var _b;
+        currentMarks[0].attribute.x;
+        const plotRect_height = 2 * (null !== (_b = currentMarks[0].attribute.y) && void 0 !== _b ? _b : 0),
           labelLayout = attribute.layout;
         if ("vertical" === labelLayout.strategy) {
           let delta,
@@ -35347,15 +35386,22 @@
           checkBoundsOverlap(lastBounds, bounds) ? arcs[i].labelVisible = !1 : lastBounds = bounds;
         }
       }
-      _labelLine(text) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-        return (null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.points) ? graphicCreator.line({
-          visible: null === (_g = null !== (_e = (null === (_c = null === (_b = text.attribute) || void 0 === _b ? void 0 : _b.line) || void 0 === _c ? void 0 : _c.visible) && (null === (_d = text.attribute) || void 0 === _d ? void 0 : _d.visible)) && void 0 !== _e ? _e : null === (_f = text.attribute) || void 0 === _f ? void 0 : _f.visible) || void 0 === _g || _g,
-          stroke: null !== (_l = null === (_k = null === (_j = null === (_h = text.attribute) || void 0 === _h ? void 0 : _h.line) || void 0 === _j ? void 0 : _j.style) || void 0 === _k ? void 0 : _k.stroke) && void 0 !== _l ? _l : null === (_m = text.attribute) || void 0 === _m ? void 0 : _m.fill,
-          lineWidth: null !== (_r = null === (_q = null === (_p = null === (_o = text.attribute) || void 0 === _o ? void 0 : _o.line) || void 0 === _p ? void 0 : _p.style) || void 0 === _q ? void 0 : _q.lineWidth) && void 0 !== _r ? _r : 1,
-          points: null === (_s = text.attribute) || void 0 === _s ? void 0 : _s.points,
-          curveType: (null === (_u = null === (_t = text.attribute) || void 0 === _t ? void 0 : _t.line) || void 0 === _u ? void 0 : _u.smooth) ? "basis" : null
-        }) : void 0;
+      _createLabelLine(text, baseMark) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const {
+            points: points,
+            line = {},
+            visible: visible,
+            fill: fill
+          } = text.attribute,
+          labelLine = text.attribute.points ? graphicCreator.line({
+            visible: null === (_c = null !== (_a = line.visible && visible) && void 0 !== _a ? _a : null === (_b = text.attribute) || void 0 === _b ? void 0 : _b.visible) || void 0 === _c || _c,
+            stroke: null !== (_e = null === (_d = line.style) || void 0 === _d ? void 0 : _d.stroke) && void 0 !== _e ? _e : fill,
+            lineWidth: null !== (_g = null === (_f = line.style) || void 0 === _f ? void 0 : _f.lineWidth) && void 0 !== _g ? _g : 1,
+            points: points,
+            curveType: line.smooth ? "basis" : null
+          }) : void 0;
+        return labelLine && this._setStatesOfLabelLine(labelLine), labelLine;
       }
       computeRadius(r, width, height, k) {
         return this.computeLayoutRadius(width || 0, height || 0) * r * (isNil$1(k) ? 1 : k);
@@ -35850,6 +35896,24 @@
             const layerLabelGroup = this.renderLabels(labelGroup, axisItems, layer),
               labels = layerLabelGroup.getChildren();
             this.beforeLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length), this.handleLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length), this.afterLabelsOverlap(labels, axisItems, layerLabelGroup, layer, items.length);
+            let maxTextWidth = 0,
+              maxTextHeight = 0,
+              textAlign = "center",
+              textBaseline = "middle";
+            labels.forEach(label => {
+              var _a;
+              const labelStyle = label.attribute,
+                angle = null !== (_a = labelStyle.angle) && void 0 !== _a ? _a : 0,
+                textBounds = label.AABBBounds;
+              let textWidth = textBounds.width(),
+                textHeight = textBounds.height();
+              angle && (textWidth = Math.abs(textWidth * Math.cos(angle)), textHeight = Math.abs(textHeight * Math.sin(angle))), maxTextWidth = Math.max(maxTextWidth, textWidth), maxTextHeight = Math.max(maxTextHeight, textHeight), textAlign = labelStyle.textAlign, textBaseline = labelStyle.textBaseline;
+            }), this.axisLabelLayerSize[layer] = {
+              width: maxTextWidth,
+              height: maxTextHeight,
+              textAlign: textAlign,
+              textBaseline: textBaseline
+            };
           });
         }
         title && title.visible && this.renderTitle(axisContainer);
@@ -35901,13 +35965,8 @@
             y: 0,
             pickable: !1
           });
-        labelGroup.name = `${AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`, labelGroup.id = this._getNodeId(`label-container-layer-${layer}`), container.add(labelGroup);
-        let maxTextWidth = 0,
-          maxTextHeight = 0,
-          textAlign = "center",
-          textBaseline = "middle";
-        return data.forEach((item, index) => {
-          var _a, _b, _c, _d;
+        return labelGroup.name = `${AXIS_ELEMENT_NAME.labelContainer}-layer-${layer}`, labelGroup.id = this._getNodeId(`label-container-layer-${layer}`), container.add(labelGroup), data.forEach((item, index) => {
+          var _a, _b, _c;
           const labelStyle = this._getLabelAttribute(item, index, data, layer);
           let text;
           if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = graphicCreator.richtext(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
@@ -35919,14 +35978,7 @@
             }), text.states = labelState;
           }
           labelGroup.add(text);
-          const angle = null !== (_d = labelStyle.angle) && void 0 !== _d ? _d : 0;
-          maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width()), maxTextHeight = Math.max(maxTextHeight, text.AABBBounds.height()), angle && (maxTextWidth = Math.abs(maxTextWidth * Math.cos(angle)), maxTextHeight = Math.abs(maxTextHeight * Math.sin(angle))), textAlign = labelStyle.textAlign, textBaseline = labelStyle.textBaseline;
-        }), this.axisLabelLayerSize[layer] = {
-          width: maxTextWidth,
-          height: maxTextHeight,
-          textAlign: textAlign,
-          textBaseline: textBaseline
-        }, labelGroup;
+        }), labelGroup;
       }
       renderTitle(container) {
         const titleAttributes = this.getTitleAttribute(),
@@ -36154,7 +36206,16 @@
         do {
           items = reduce(items, sep);
         } while (items.length >= 3 && hasOverlap$1(items, sep));
-        items.length < 3 && !last(source).attribute.opacity && items.length > 1 && (last(items).setAttribute("opacity", 0), last(source).setAttribute("opacity", 1));
+        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(items[i], lastSourceItem, sep); i--) items[i].setAttribute("opacity", 0);
+            }
+          }
+        }
       }
       source.forEach(item => {
         item.setAttribute("visible", !!item.attribute.opacity);
@@ -36232,13 +36293,16 @@
     function autoLimit(labels, config) {
       const {
         limitLength: limitLength,
+        verticalLimitLength: verticalLimitLength,
         ellipsis = "...",
         orient: orient
       } = config;
       !isEmpty(labels) && isValidNumber$1(limitLength) && labels.forEach(label => {
         if (("top" === orient || "bottom" === orient) && Math.floor(label.AABBBounds.height()) <= limitLength) return;
-        if (("left" === orient || "right" === orient) && Math.floor(label.AABBBounds.width()) <= limitLength) return;
-        let limitLabelLength = 0 === label.attribute.angle || isNil$1(label.attribute.angle) ? "top" === orient || "bottom" === orient ? null : limitLength : Math.abs(limitLength / Math.sin(label.attribute.angle));
+        const direction = label.attribute.direction;
+        if (("left" === orient || "right" === orient) && ("vertical" === direction && Math.floor(label.AABBBounds.height()) <= verticalLimitLength || "vertical" !== direction && Math.floor(label.AABBBounds.width()) <= limitLength)) return;
+        const angle = label.attribute.angle;
+        let limitLabelLength = 0 === angle || isNil$1(angle) ? "top" === orient || "bottom" === orient ? null : "vertical" === direction ? verticalLimitLength : limitLength : Math.abs(limitLength / Math.sin(angle));
         isValidNumber$1(label.attribute.maxLineWidth) && (limitLabelLength = isValidNumber$1(limitLabelLength) ? Math.min(label.attribute.maxLineWidth, limitLabelLength) : label.attribute.maxLineWidth), label.setAttributes({
           maxLineWidth: limitLabelLength,
           ellipsis: label.attribute.ellipsis || ellipsis
@@ -36593,20 +36657,29 @@
             limitEllipsis: limitEllipsis,
             autoHide: autoHide$1,
             autoHideMethod: autoHideMethod,
-            autoHideSeparation: autoHideSeparation
+            autoHideSeparation: autoHideSeparation,
+            lastVisible: lastVisible
           } = label;
-        isFunction$1(layoutFunc) ? layoutFunc(labelShapes, labelData, layer, this) : (autoRotate$1 && autoRotate(labelShapes, {
-          labelRotateAngle: autoRotateAngle,
-          orient: orient
-        }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0 && autoLimit(labelShapes, {
-          limitLength: limitLength,
-          ellipsis: limitEllipsis,
-          orient: orient
-        }), autoHide$1 && autoHide(labelShapes, {
-          orient: orient,
-          method: autoHideMethod,
-          separation: autoHideSeparation
-        }));
+        if (isFunction$1(layoutFunc)) layoutFunc(labelShapes, labelData, layer, this);else {
+          if (autoRotate$1 && autoRotate(labelShapes, {
+            labelRotateAngle: autoRotateAngle,
+            orient: orient
+          }), autoLimit$1 && isValidNumber$1(limitLength) && limitLength > 0) {
+            const verticalLimitLength = "left" !== orient && "right" !== orient || !labelShapes.some(label => "vertical" === label.attribute.direction) ? 1 / 0 : Math.abs(this.attribute.start.y - this.attribute.end.y) / labelShapes.length;
+            autoLimit(labelShapes, {
+              limitLength: limitLength,
+              verticalLimitLength: verticalLimitLength,
+              ellipsis: limitEllipsis,
+              orient: orient
+            });
+          }
+          autoHide$1 && autoHide(labelShapes, {
+            orient: orient,
+            method: autoHideMethod,
+            separation: autoHideSeparation,
+            lastVisible: lastVisible
+          });
+        }
       }
       afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
         const {
@@ -39216,7 +39289,8 @@
           shapeSize = 0,
           shapeSpace = 0;
         if (shapeAttr && !1 !== shapeAttr.visible) {
-          shapeSize = get$1(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE), shapeSpace = get$1(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
+          const s = get$1(shapeStyle, "style.size", DEFAULT_SHAPE_SIZE);
+          shapeSize = isArray$1(s) ? s[0] || 0 : s, shapeSpace = get$1(shapeAttr, "space", DEFAULT_SHAPE_SPACE);
           const itemShape = graphicCreator.symbol(Object.assign(Object.assign({
             x: 0,
             y: 0,
@@ -43366,9 +43440,9 @@
           effects = timeSlice.effects;
         if (delay > 0 && graphicAnimate.wait(delay), effects.length < 0) graphicAnimate.wait(duration);else {
           const customAnimates = effects.map((effect, index) => {
-            var _a;
-            const attributes = null !== (_a = effect.type ? typeAnimationAttributes(this.element, effect, animationParameters, parameters) : channelAnimationAttributes(this.element, effect, animationParameters, parameters)) && void 0 !== _a ? _a : {},
-              customOption = (null == attributes ? void 0 : attributes.custom) || (null == effect ? void 0 : effect.custom),
+            const attributes = effect.type ? typeAnimationAttributes(this.element, effect, animationParameters, parameters) : effect.channel ? channelAnimationAttributes(this.element, effect, animationParameters, parameters) : void 0;
+            if (!attributes) return null;
+            const customOption = (null == attributes ? void 0 : attributes.custom) || (null == effect ? void 0 : effect.custom),
               customParametersOption = (null == attributes ? void 0 : attributes.customParameters) || (null == effect ? void 0 : effect.customParameters);
             attributes.from && Object.keys(attributes.from).length && this.unit && this.animationOptions.timeline.controlOptions.immediatelyApply && "component" !== this.element.mark.markType && this.element.getGraphicItem().setAttributes(attributes.from);
             const isCustomAnimate = isCustomAnimateCtor(customOption);
@@ -43378,7 +43452,7 @@
               parameters: customParametersOption
             }) : isCustomAnimate ? new customOption(attributes.from, attributes.to, duration, effect.easing, customParametersOption) : attributes.to ? new AttributeAnimate(attributes.from, attributes.to, duration, effect.easing) : void 0;
           }).filter(animate => !isNil$1(animate));
-          1 === customAnimates.length ? graphicAnimate.play(customAnimates[0]) : graphicAnimate.play(new AnimateGroup(duration, customAnimates));
+          1 === customAnimates.length ? graphicAnimate.play(customAnimates[0]) : customAnimates.length > 1 && graphicAnimate.play(new AnimateGroup(duration, customAnimates));
         }
         delayAfter > 0 && graphicAnimate.wait(delayAfter);
       }
@@ -47661,9 +47735,10 @@
       return [];
     };
 
+    const HIDE_KEY = "_mo_hide_";
     function reset(elements) {
       return elements.forEach(element => {
-        element.setGraphicAttribute("visible", !0);
+        element.getGraphicAttribute("HIDE_KEY") && (element.setGraphicAttribute("visible", !0), element.setGraphicAttribute(HIDE_KEY, !1));
       }), elements;
     }
     function overlapX(elements, delta, deltaMul, useRadius) {
@@ -47673,9 +47748,10 @@
         const useDeltaMul = isNil$1(delta);
         let itemDelta = delta;
         elements.forEach(element => {
+          if (!1 === element.getGraphicAttribute("visible")) return;
           const r = element.getGraphicAttribute("size") / 2,
             currentX = element.getGraphicAttribute("x");
-          useDeltaMul && (itemDelta = (r + lastR) * deltaMul), Math.abs(currentX - lastX) < itemDelta + lastR + r ? element.getGraphicAttribute("forceShow") || element.setGraphicAttribute("visible", !1) : lastX = currentX, lastR = r;
+          useDeltaMul && (itemDelta = (r + lastR) * deltaMul), Math.abs(currentX - lastX) < itemDelta + lastR + r ? element.getGraphicAttribute("forceShow") || (element.setGraphicAttribute(HIDE_KEY, !0), element.setGraphicAttribute("visible", !1)) : lastX = currentX, lastR = r;
         });
       }
     }
@@ -47686,9 +47762,10 @@
         const useDeltaMul = isNil$1(delta);
         let itemDelta = delta;
         elements.forEach(element => {
+          if (!1 === element.getGraphicAttribute("visible")) return;
           const r = element.getGraphicAttribute("size") / 2,
             currentY = element.getGraphicAttribute("y");
-          useDeltaMul && (itemDelta = (r + lastR) * deltaMul), Math.abs(currentY - lastY) < itemDelta + lastR + r ? element.getGraphicAttribute("forceShow") || element.setGraphicAttribute("visible", !1) : lastY = currentY, lastR = r;
+          useDeltaMul && (itemDelta = (r + lastR) * deltaMul), Math.abs(currentY - lastY) < itemDelta + lastR + r ? element.getGraphicAttribute("forceShow") || (element.setGraphicAttribute(HIDE_KEY, !0), element.setGraphicAttribute("visible", !1)) : lastY = currentY, lastR = r;
         });
       }
     }
@@ -47701,10 +47778,11 @@
         const useDeltaMul = isNil$1(delta);
         let itemDelta = delta;
         elements.forEach(element => {
+          if (!1 === element.getGraphicAttribute("visible")) return;
           const r = element.getGraphicAttribute("size") / 2,
             currentX = element.getGraphicAttribute("x"),
             currentY = element.getGraphicAttribute("y");
-          useDeltaMul && (itemDelta = (r + lastR) * deltaMul), dis = (lastX - currentX) ** 2 + (lastY - currentY) ** 2, dis < (itemDelta + lastR + r) ** 2 ? element.getGraphicAttribute("forceShow") || element.setGraphicAttribute("visible", !1) : lastY = currentY, lastR = r;
+          useDeltaMul && (itemDelta = (r + lastR) * deltaMul), dis = (lastX - currentX) ** 2 + (lastY - currentY) ** 2, dis < (itemDelta + lastR + r) ** 2 ? element.getGraphicAttribute("forceShow") || (element.setGraphicAttribute(HIDE_KEY, !0), element.setGraphicAttribute("visible", !1)) : lastY = currentY, lastR = r;
         });
       }
     }
@@ -48314,7 +48392,7 @@
         };
       return points.forEach(point => {
         center.x += point.x, center.y += point.y;
-      }), center.x /= points.length, center.y /= points.length, options && options.center && (isValidNumber$1(options.center.x) && (center.x = options.center.x), isValidNumber$1(options.center.y) && (center.y = options.center.y)), points.map(() => Object.assign(center));
+      }), center.x /= points.length, center.y /= points.length, options && options.center && (isValidNumber$1(options.center.x) && (center.x = options.center.x), isValidNumber$1(options.center.y) && (center.y = options.center.y)), "area" === element.mark.markType && (center.x1 = center.x, center.y1 = center.y), points.map(() => Object.assign(center));
     };
     const growPointsIn = (element, options, animationParameters) => ({
       from: {
@@ -49250,6 +49328,9 @@
             }
         }
     };
+    const axisZ = Object.assign(Object.assign({}, axisX), { label: {
+            space: 0
+        } });
 
     const commonAxis = {
         domainLine: {
@@ -50116,6 +50197,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         axisLinear,
         axisX,
         axisY,
+        axisZ,
         axisAngle,
         axisRadius,
         markLine,
@@ -57813,7 +57895,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         registerChartPlugin(MediaQuery);
     };
 
-    const version = "1.8.4";
+    const version = "1.8.6";
 
     var ChartTypeEnum;
     (function (ChartTypeEnum) {
@@ -57904,9 +57986,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._markReverse = new MarkSet();
             this.onHover = (params) => {
                 if (this.filterEventMark(params)) {
+                    this._isHovered = true;
                     this.hoverItem(params);
                 }
-                else {
+                else if (this._isHovered) {
+                    this._isHovered = false;
                     this.unhoverItem();
                 }
             };
@@ -63185,7 +63269,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError(`${key}Field is required.`);
                     return spec;
                 }
-                if (spec.length > 2) {
+                if (defaultScaleType !== 'ordinal' && spec.length > 2) {
                     (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError(`${key} length is invalid, specify up to 2 ${key}s.`);
                     return spec;
                 }
@@ -63922,7 +64006,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 : {})) !== null && _a !== void 0 ? _a : {};
         const axisTheme = isXAxis(orient)
             ? getComponentThemeFromOption('axisX', chartTheme)
-            : getComponentThemeFromOption('axisY', chartTheme);
+            : isYAxis(orient)
+                ? getComponentThemeFromOption('axisY', chartTheme)
+                : getComponentThemeFromOption('axisZ', chartTheme);
         return mergeSpec({}, getComponentThemeFromOption('axis', chartTheme), axisTypeTheme, axisTheme);
     };
     const getPolarAxisTheme = (orient, type, chartTheme) => {
@@ -64125,13 +64211,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function getComponentThemeFromGlobalTheme(type, chartTheme, componentSpec, chartSpec) {
         switch (type) {
             case ComponentTypeEnum.cartesianBandAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'band', chartTheme);
+                return getCartesianAxisTheme(getOrient(componentSpec, ['z']), 'band', chartTheme);
             case ComponentTypeEnum.cartesianLinearAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'linear', chartTheme);
+                return getCartesianAxisTheme(getOrient(componentSpec, ['z']), 'linear', chartTheme);
             case ComponentTypeEnum.cartesianLogAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'log', chartTheme);
+                return getCartesianAxisTheme(getOrient(componentSpec, ['z']), 'log', chartTheme);
             case ComponentTypeEnum.cartesianSymlogAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'symlog', chartTheme);
+                return getCartesianAxisTheme(getOrient(componentSpec, ['z']), 'symlog', chartTheme);
             case ComponentTypeEnum.cartesianAxis:
             case ComponentTypeEnum.cartesianTimeAxis:
                 return getCartesianAxisTheme(getOrient(componentSpec), undefined, chartTheme);
@@ -65511,6 +65597,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class WaterfallSeriesSpecTransformer extends BarSeriesSpecTransformer {
         _transformLabelSpec(spec) {
+            this._addMarkLabelSpec(spec, exports.SeriesMarkNameEnum.bar);
             this._addMarkLabelSpec(spec, exports.SeriesMarkNameEnum.bar, 'stackLabel');
         }
     }
@@ -72442,7 +72529,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 themeSpec: (_a = this._theme) === null || _a === void 0 ? void 0 : _a.funnel,
                 morph: shouldMarkDoMorph(this._spec, this._funnelMarkName),
                 defaultMorphElementKey: this._seriesField,
-                key: this._seriesField,
                 groupKey: this._seriesField,
                 isSeriesMark: true,
                 customShape: (_b = this._spec.funnel) === null || _b === void 0 ? void 0 : _b.customShape
@@ -72450,7 +72536,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (this._spec.isTransform) {
                 this._funnelTransformMark = this._createMark(Object.assign(Object.assign({}, FunnelSeries.mark.transform), { name: this._transformMarkName, type: this._transformMarkType }), {
                     themeSpec: (_c = this._theme) === null || _c === void 0 ? void 0 : _c.transform,
-                    key: this._seriesField,
                     skipBeforeLayouted: false,
                     dataView: this._viewDataTransform.getDataView(),
                     dataProductId: this._viewDataTransform.getProductId(),
@@ -72462,13 +72547,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const { line: lineTheme } = (_j = (_h = this._theme) === null || _h === void 0 ? void 0 : _h.outerLabel) !== null && _j !== void 0 ? _j : {};
                 this._funnelOuterLabelMark.label = this._createMark(FunnelSeries.mark.outerLabel, {
                     themeSpec: (_k = this._theme) === null || _k === void 0 ? void 0 : _k.outerLabel,
-                    key: this._seriesField,
                     markSpec: this._spec.outerLabel,
                     skipBeforeLayouted: true
                 });
                 this._funnelOuterLabelMark.line = this._createMark(FunnelSeries.mark.outerLabelLine, {
                     themeSpec: lineTheme,
-                    key: this._seriesField,
                     markSpec: line,
                     depend: [this._funnelOuterLabelMark.label]
                 });
@@ -72577,7 +72660,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             const rootMark = this.getRootMark().getProduct();
                             if (rootMark) {
                                 const { x1, x2 } = rootMark.getBounds();
-                                return Math.abs(x1 - x2);
+                                return Math.max(x1, x2);
                             }
                             return this.getLayoutRect().width;
                         },
@@ -72585,7 +72668,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             const rootMark = this.getRootMark().getProduct();
                             if (rootMark) {
                                 const { y1, y2 } = rootMark.getBounds();
-                                return Math.abs(y1 - y2);
+                                return Math.max(y1, y2);
                             }
                             return this.getLayoutRect().height;
                         },
@@ -72674,7 +72757,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _getMainAxisLength(isTransform = false) {
             var _a;
-            const funnelCount = this.getViewDataStatistics().latestData[this.getCategoryField()].values.length;
+            const funnelCount = this.getViewData().latestData.length;
             const viewHeight = this._isHorizontal() ? this.getLayoutRect().width : this.getLayoutRect().height;
             const hasTransform = !!this._spec.isTransform;
             const gap = hasTransform ? 0 : (_a = this._spec.gap) !== null && _a !== void 0 ? _a : 0;
@@ -72693,7 +72776,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _getPositionByData(datum) {
             var _a;
-            const index = (_a = this.getViewData().latestData) === null || _a === void 0 ? void 0 : _a.findIndex((d) => d[this._seriesField] === datum[this._seriesField]);
+            const index = (_a = this.getViewData().latestData) === null || _a === void 0 ? void 0 : _a.findIndex((d) => d[this._categoryField] === datum[this._categoryField] && d[DEFAULT_DATA_KEY] === datum[DEFAULT_DATA_KEY]);
             if (!isValid$1(index) || index < 0) {
                 return {};
             }
@@ -85904,8 +85987,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.triggerOff = 'hover';
             this._handleEvent = throttle((params) => {
                 const { event } = params;
-                const x = event.viewX - this.getLayoutStartPoint().x;
-                const y = event.viewY - this.getLayoutStartPoint().y;
+                const layer = this._option.getCompiler().getStage().getLayer(undefined);
+                const point = { x: event.viewX, y: event.viewY };
+                layer.globalTransMatrix.transformPoint({ x: event.viewX, y: event.viewY }, point);
+                const x = point.x - this.getLayoutStartPoint().x;
+                const y = point.y - this.getLayoutStartPoint().y;
                 this.showDefault = false;
                 this._layoutCrosshair(x, y);
             }, 10);
@@ -88553,36 +88639,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return median(data, opt.field);
     }
     function markerAggregation(_data, options) {
-        const aggrMap = {
-            min: markerMin,
-            max: markerMax,
-            sum: markerSum,
-            average: markerAverage,
-            variance: markerVariance,
-            standardDeviation: markerStandardDeviation,
-            median: markerMedian
-        };
         const results = [];
         options.forEach(option => {
             const result = { x: null, y: null };
             if (isValid$1(option.x)) {
                 const x = option.x;
-                if (isPlainObject$1(x)) {
-                    const { aggrType, field } = x;
-                    result.x = aggrMap[aggrType](_data, { field: field });
+                if (isArray$1(x)) {
+                    result.x = x.map(item => getFinalValue(item, _data, option));
                 }
                 else {
-                    result.x = x;
+                    result.x = getFinalValue(x, _data, option);
                 }
             }
             if (isValid$1(option.y)) {
                 const y = option.y;
-                if (isPlainObject$1(y)) {
-                    const { aggrType, field } = y;
-                    result.y = aggrMap[aggrType](_data, { field: field });
+                if (isArray$1(y)) {
+                    result.y = y.map(item => getFinalValue(item, _data, option));
                 }
                 else {
-                    result.y = y;
+                    result.y = getFinalValue(y, _data, option);
                 }
             }
             if (option.getRefRelativeSeries) {
@@ -88592,6 +88667,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         });
         return results;
     }
+    const aggrMap = {
+        min: markerMin,
+        max: markerMax,
+        sum: markerSum,
+        average: markerAverage,
+        variance: markerVariance,
+        standardDeviation: markerStandardDeviation,
+        median: markerMedian
+    };
+    function getFinalValue(source, _data, option) {
+        const relativeSeries = option.getRelativeSeries();
+        const startSeries = option.getStartRelativeSeries();
+        const endSeries = option.getEndRelativeSeries();
+        const relativeSeriesData = relativeSeries.getData().getLatestData();
+        const startRelativeSeriesData = startSeries.getData().getLatestData();
+        const endRelativeSeriesData = endSeries.getData().getLatestData();
+        if (isFunction$1(source)) {
+            return source(relativeSeriesData, startRelativeSeriesData, endRelativeSeriesData, relativeSeries, startSeries, endSeries);
+        }
+        if (isPlainObject$1(source)) {
+            const { aggrType, field } = source;
+            return aggrMap[aggrType](_data, { field: field });
+        }
+        return source;
+    }
 
     const AGGR_TYPE = ['sum', 'average', 'min', 'max', 'variance', 'standardDeviation', 'median'];
 
@@ -88609,7 +88709,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
     function getXValue(datum, xDomain, autoRange, refSeries, regionWidth, regionStartLayoutStartPoint) {
         var _a, _b;
-        const { relativeSeries, startRelativeSeries, endRelativeSeries } = refSeries;
+        const { relativeSeries } = refSeries;
         isNumber$2(datum.x) &&
             isNeedExtendDomain(xDomain, datum.x, autoRange) &&
             ((_b = relativeSeries === null || relativeSeries === void 0 ? void 0 : (_a = relativeSeries.getXAxisHelper()).setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_xAxis_extend', datum.x));
@@ -88618,20 +88718,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             x = convertPercentToValue(datum.x, regionWidth) + regionStartLayoutStartPoint.x;
         }
         else {
-            x = datum.x;
-            if (isFunction$1(datum.x)) {
-                const relativeSeriesData = relativeSeries.getData().getLatestData();
-                const startRelativeSeriesData = startRelativeSeries.getData().getLatestData();
-                const endRelativeSeriesData = endRelativeSeries.getData().getLatestData();
-                x = datum.x(relativeSeriesData, startRelativeSeriesData, endRelativeSeriesData, relativeSeries, startRelativeSeries, endRelativeSeries);
-            }
-            x = relativeSeries.getXAxisHelper().dataToPosition([x]) + regionStartLayoutStartPoint.x;
+            x = relativeSeries.getXAxisHelper().dataToPosition([datum.x]) + regionStartLayoutStartPoint.x;
         }
         return x;
     }
     function getYValue(datum, yDomain, autoRange, refSeries, regionHeight, regionStartLayoutStartPoint) {
         var _a, _b;
-        const { relativeSeries, startRelativeSeries, endRelativeSeries } = refSeries;
+        const { relativeSeries } = refSeries;
         isNumber$2(datum.y) &&
             isNeedExtendDomain(yDomain, datum.y, autoRange) &&
             ((_b = (_a = relativeSeries.getYAxisHelper()) === null || _a === void 0 ? void 0 : _a.setExtendDomain) === null || _b === void 0 ? void 0 : _b.call(_a, 'marker_yAxis_extend', datum.y));
@@ -88640,14 +88733,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             y = convertPercentToValue(datum.y, regionHeight) + regionStartLayoutStartPoint.y;
         }
         else {
-            y = datum.y;
-            if (isFunction$1(datum.y)) {
-                const relativeSeriesData = relativeSeries.getData().getLatestData();
-                const startRelativeSeriesData = startRelativeSeries.getData().getLatestData();
-                const endRelativeSeriesData = endRelativeSeries.getData().getLatestData();
-                y = datum.y(relativeSeriesData, startRelativeSeriesData, endRelativeSeriesData, relativeSeries, startRelativeSeries, endRelativeSeries);
-            }
-            y = relativeSeries.getYAxisHelper().dataToPosition([y]) + regionStartLayoutStartPoint.y;
+            y = relativeSeries.getYAxisHelper().dataToPosition([datum.y]) + regionStartLayoutStartPoint.y;
         }
         return y;
     }
@@ -88741,19 +88827,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             const xDomain = refRelativeSeries.getXAxisHelper().getScale(0).domain();
             const yDomain = refRelativeSeries.getYAxisHelper().getScale(0).domain();
-            const refRelativeSeriesData = refRelativeSeries.getData().getLatestData();
-            const xValue = array(datum.x).map(x => {
-                if (isFunction$1(x)) {
-                    return x(refRelativeSeriesData, refRelativeSeries);
-                }
-                return x;
-            });
-            const yValue = array(datum.y).map(y => {
-                if (isFunction$1(y)) {
-                    return y(refRelativeSeriesData, refRelativeSeries);
-                }
-                return y;
-            });
+            const xValue = array(datum.x);
+            const yValue = array(datum.y);
             xValue.length === 1 &&
                 isNumber$2(xValue[0]) &&
                 isNeedExtendDomain(xDomain, xValue[0], autoRange) &&