@visactor/vchart 1.12.4 → 1.12.6

package/build/index.js

@@ -1312,12 +1312,12 @@
     function radianToDegree(radian) {
       return 180 * radian / Math.PI;
     }
-    const clampRadian$1 = function () {
+    const clampRadian = function () {
       let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       if (angle < 0) for (; angle < -tau$1;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
       return angle;
     };
-    const clampAngleByRadian = clampRadian$1;
+    const clampAngleByRadian = clampRadian;
     function polarToCartesian(center, radius, angleInRadian) {
       return radius ? {
         x: center.x + radius * Math.cos(angleInRadian),
@@ -1327,6 +1327,37 @@
         y: center.y
       };
     }
+    function cartesianToPolar(point) {
+      let center = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+        x: 0,
+        y: 0
+      };
+      let startAngle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      let endAngle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 2 * Math.PI;
+      const {
+          x: x,
+          y: y
+        } = point,
+        {
+          x: centerX,
+          y: centerY
+        } = center;
+      let dx = x - centerX,
+        dy = y - centerY;
+      const radius = Math.sqrt(dx * dx + dy * dy);
+      if (0 === radius) return {
+        radius: 0,
+        angle: 0
+      };
+      dx /= radius, dy /= radius;
+      let radian = Math.atan2(dy, dx);
+      if (radian < startAngle) for (; radian <= startAngle;) radian += 2 * Math.PI;
+      if (radian > endAngle) for (; radian >= endAngle;) radian -= 2 * Math.PI;
+      return {
+        radius: radius,
+        angle: radian
+      };
+    }
     function getAngleByPoint(center, point) {
       return Math.atan2(point.y - center.y, point.x - center.x);
     }
@@ -7849,7 +7880,7 @@
         this.bounds.add(cx + xmin, cy + ymin), this.bounds.add(cx + xmax, cy + ymax);
       }
       arcTo(x1, y1, x2, y2, radius) {
-        throw new Error("不支持arcTo");
+        this.bounds.add(x1, y1);
       }
       bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
         this.bounds.add(cp1x, cp1y), this.bounds.add(cp2x, cp2y), this.bounds.add(x, y);
@@ -8058,19 +8089,25 @@
     }
     const addArcToBezierPath$1 = (bezierPath, startAngle, endAngle, cx, cy, rx, ry) => {
       const delta = Math.abs(endAngle - startAngle),
-        len = 4 * Math.tan(delta / 4) / 3,
-        dir = endAngle < startAngle ? -1 : 1,
-        c1 = Math.cos(startAngle),
-        s1 = Math.sin(startAngle),
-        c2 = Math.cos(endAngle),
-        s2 = Math.sin(endAngle),
-        x1 = c1 * rx + cx,
-        y1 = s1 * ry + cy,
-        x4 = c2 * rx + cx,
-        y4 = s2 * ry + cy,
-        hx = rx * len * dir,
-        hy = ry * len * dir;
-      bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+        count = delta > .5 * Math.PI ? Math.ceil(2 * delta / Math.PI) : 1,
+        stepAngle = (endAngle - startAngle) / count;
+      for (let i = 0; i < count; i++) {
+        const sa = startAngle + stepAngle * i,
+          ea = startAngle + stepAngle * (i + 1),
+          len = 4 * Math.tan(Math.abs(stepAngle) / 4) / 3,
+          dir = ea < sa ? -1 : 1,
+          c1 = Math.cos(sa),
+          s1 = Math.sin(sa),
+          c2 = Math.cos(ea),
+          s2 = Math.sin(ea),
+          x1 = c1 * rx + cx,
+          y1 = s1 * ry + cy,
+          x4 = c2 * rx + cx,
+          y4 = s2 * ry + cy,
+          hx = rx * len * dir,
+          hy = ry * len * dir;
+        bezierPath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+      }
     };
 
     const commandFuncs = [(command, context, x, y, sx, sy, z) => context.arc(command[1] * sx + x, command[2] * sy + y, command[3] * (sx + sy) / 2, command[4], command[5], command[6], z), (command, context, x, y, sx, sy, z) => context.arcTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * (sx + sy) / 2, z), (command, context, x, y, sx, sy, z) => context.bezierCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, command[5] * sx + x, command[6] * sy + y, z), (command, context, x, y) => context.closePath(), (command, context, x, y, sx, sy) => context.ellipse(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, command[5], command[6], command[7], command[8]), (command, context, x, y, sx, sy, z) => context.lineTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.moveTo(command[1] * sx + x, command[2] * sy + y, z), (command, context, x, y, sx, sy, z) => context.quadraticCurveTo(command[1] * sx + x, command[2] * sy + y, command[3] * sx + x, command[4] * sy + y, z), (command, context, x, y, sx, sy, z) => context.rect(command[1] * sx + x, command[2] * sy + y, command[3] * sx, command[4] * sy, z)];
@@ -15825,6 +15862,7 @@
       validCheck(attribute, theme, aabbBounds, graphic) {
         if (!graphic) return !0;
         if (null != attribute.forceBoundsHeight || null != attribute.forceBoundsWidth) return !0;
+        if (graphic.shadowRoot) return !0;
         if (!graphic.valid) return aabbBounds.clear(), !1;
         const {
           visible = theme.visible
@@ -18957,13 +18995,23 @@
         if (this.isSimplify()) return this.tryUpdateAABBBounds(), this.cache.clipedWidth;
       }
       get cliped() {
+        var _a, _b;
         const textTheme = this.getGraphicTheme(),
-          attribute = this.attribute;
-        if (this.isMultiLine) return;
-        const {
-          maxLineWidth = textTheme.maxLineWidth
-        } = attribute;
-        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());
+          attribute = this.attribute,
+          {
+            maxLineWidth = textTheme.maxLineWidth,
+            text: text,
+            whiteSpace = textTheme.whiteSpace
+          } = attribute;
+        if (!Number.isFinite(maxLineWidth)) return !1;
+        if (this.tryUpdateAABBBounds(), null === (_b = null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData) || void 0 === _b ? void 0 : _b.lines) {
+          let mergedText = "";
+          this.cache.layoutData.lines.forEach(item => {
+            mergedText += item.str;
+          });
+          return (Array.isArray(text) ? text.join("") : text) !== mergedText;
+        }
+        return "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;
@@ -20732,10 +20780,22 @@
       }
       draw(ctx, lastLine, x, y, drawEllipsis, drawIcon) {
         if (drawEllipsis && (lastLine || this.paragraphs.some(p => p.overflow))) {
-          let otherParagraphWidth = 0;
+          let emptyOverflow = !0,
+            skipEllipsis = !1;
           for (let i = this.paragraphs.length - 1; i >= 0; i--) {
             const paragraph = this.paragraphs[i];
-            if (paragraph.overflow) continue;
+            if (paragraph.overflow) emptyOverflow = emptyOverflow && "" === paragraph.text;else if (emptyOverflow) {
+              skipEllipsis = !0;
+              break;
+            }
+          }
+          let otherParagraphWidth = 0;
+          if (!skipEllipsis) for (let i = this.paragraphs.length - 1; i >= 0; i--) {
+            const paragraph = this.paragraphs[i];
+            if (paragraph.overflow) {
+              if ("" === paragraph.text) break;
+              continue;
+            }
             if (paragraph instanceof RichTextIcon) break;
             if ("vertical" === this.direction && "vertical" !== paragraph.direction) {
               paragraph.verticalEllipsis = !0;
@@ -20829,7 +20889,13 @@
     const RICHTEXT_UPDATE_TAG_KEY = ["width", "height", "ellipsis", "wordBreak", "verticalDirection", "maxHeight", "maxWidth", "textAlign", "textBaseline", "textConfig", "layoutDirection", "fill", "stroke", "fontSize", ...GRAPHIC_UPDATE_TAG_KEY];
     class RichText extends Graphic {
       constructor(params) {
-        super(params), this.type = "richtext", this._currentHoverIcon = null, this.numberType = RICHTEXT_NUMBER_TYPE;
+        super(params), this.type = "richtext", this._currentHoverIcon = null, this.numberType = RICHTEXT_NUMBER_TYPE, this.onBeforeAttributeUpdate = (val, attributes, key) => {
+          for (const key in val) if ("hoverIconId" === key) {
+            if (val[key] === attributes[key]) continue;
+            const icon = this._frameCache.icons.get(val[key]);
+            this.updateHoverIconState(icon);
+          }
+        };
       }
       get width() {
         var _a;
@@ -20954,6 +21020,21 @@
       getFrameCache() {
         return this.shouldUpdateShape() && (this.doUpdateFrameCache(), this.clearUpdateShapeTag()), this._frameCache;
       }
+      get cliped() {
+        const frameCache = this.getFrameCache();
+        if (frameCache.actualHeight > frameCache.height) return !0;
+        const {
+          disableAutoWrapLine: disableAutoWrapLine
+        } = this.attribute;
+        if (disableAutoWrapLine) for (let i = 0; i < frameCache.lines.length; i++) {
+          const l = frameCache.lines[i];
+          for (let j = 0; j < l.paragraphs.length; j++) {
+            const p = l.paragraphs[j];
+            if (p.overflow && "" !== p.text) return !0;
+          }
+        }
+        return !1;
+      }
       combinedStyleToCharacter(config) {
         const {
           fill: fill,
@@ -21000,8 +21081,9 @@
           paragraphs = [],
           textConfig = null != tc ? tc : _tc;
         for (let i = 0; i < textConfig.length; i++) if ("image" in textConfig[i]) {
-          const config = this.combinedStyleToCharacter(textConfig[i]),
-            iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
+          const config = this.combinedStyleToCharacter(textConfig[i]);
+          config.lineWidth = void 0;
+          const iconCache = config.id && this._frameCache && this._frameCache.icons && this._frameCache.icons.get(config.id);
           if (iconCache) paragraphs.push(iconCache);else {
             const icon = new RichTextIcon(config);
             icon.successCallback = () => {
@@ -21051,14 +21133,16 @@
       }
       bindIconEvent() {
         this.addEventListener("pointermove", e => {
-          var _a, _b, _c, _d, _e;
           const pickedIcon = this.pickIcon(e.global);
-          pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : !pickedIcon && this._currentHoverIcon && (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame()));
+          pickedIcon && pickedIcon === this._currentHoverIcon || (pickedIcon ? this.setAttribute("hoverIconId", pickedIcon.richtextId) : !pickedIcon && this._currentHoverIcon && this.setAttribute("hoverIconId", void 0));
         }), this.addEventListener("pointerleave", e => {
-          var _a, _b;
-          this._currentHoverIcon && (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_a = this.stage) || void 0 === _a || _a.setCursor(), null === (_b = this.stage) || void 0 === _b || _b.renderNextFrame());
+          this._currentHoverIcon && this.setAttribute("hoverIconId", void 0);
         });
       }
+      updateHoverIconState(pickedIcon) {
+        var _a, _b, _c, _d, _e;
+        pickedIcon ? (null === (_a = this._currentHoverIcon) || void 0 === _a || _a.setHoverState(!1), this._currentHoverIcon = pickedIcon, this._currentHoverIcon.setHoverState(!0), null === (_b = this.stage) || void 0 === _b || _b.setCursor(pickedIcon.attribute.cursor), null === (_c = this.stage) || void 0 === _c || _c.renderNextFrame()) : (this._currentHoverIcon.setHoverState(!1), this._currentHoverIcon = null, null === (_d = this.stage) || void 0 === _d || _d.setCursor(), null === (_e = this.stage) || void 0 === _e || _e.renderNextFrame());
+      }
       pickIcon(point) {
         const frameCache = this.getFrameCache(),
           {
@@ -21066,7 +21150,7 @@
             f: y
           } = this.globalTransMatrix;
         let pickIcon;
-        return frameCache.icons.forEach(icon => {
+        return frameCache.icons.forEach((icon, key) => {
           var _a, _b;
           const bounds = icon.AABBBounds.clone();
           bounds.translate(icon._marginArray[3], icon._marginArray[0]), bounds.containsPoint({
@@ -22712,7 +22796,8 @@
         });
       }
       pauseRender() {
-        this._skipRender = -1;
+        let sr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+        this._skipRender = sr;
       }
       resumeRender() {
         this._skipRender = 0;
@@ -23019,8 +23104,7 @@
       }
       pick(x, y) {
         if ("released" === this.releaseStatus) return;
-        this.pickerService || (this.pickerService = container.get(PickerService));
-        const result = this.pickerService.pick(this.children, new Point(x, y), {
+        const result = this.getPickerService().pick(this.children, new Point(x, y), {
           bounds: this.AABBBounds
         });
         return !(!(null == result ? void 0 : result.graphic) && !(null == result ? void 0 : result.group)) && result;
@@ -23105,6 +23189,9 @@
       resumeTriggerEvent() {
         this._eventSystem && this._eventSystem.resumeTriggerEvent();
       }
+      getPickerService() {
+        return this.pickerService || (this.pickerService = container.get(PickerService)), this.pickerService;
+      }
     }
 
     function createStage(params) {
@@ -30367,7 +30454,7 @@
     }
     function richTextAttributeTransform(attributes) {
       var _a, _b;
-      return attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0, attributes.maxWidth = attributes.maxLineWidth, attributes.textConfig = attributes.text.text || attributes.text, attributes;
+      return isValid$1(attributes.maxLineWidth) && (attributes.maxWidth = attributes.maxLineWidth, delete attributes.maxLineWidth), attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0, attributes.textConfig = attributes.text.text || attributes.text, attributes;
     }
     function htmlAttributeTransform(attributes) {
       const {
@@ -30484,6 +30571,8 @@
             zIndex: 1
           }, "group");
         let symbol,
+          tagX = -parsedPadding[3],
+          tagY = -parsedPadding[0],
           tagWidth = parsedPadding[1] + parsedPadding[3],
           tagHeight = parsedPadding[0] + parsedPadding[2],
           textX = 0,
@@ -30518,25 +30607,7 @@
             x: textX,
             y: 0
           });
-          textShape = group.createOrUpdateChild("tag-text", richTextAttrs, "richtext");
-          const {
-              visible: bgVisible
-            } = panel,
-            backgroundStyle = __rest$d(panel, ["visible"]);
-          if (visible && isBoolean$1(bgVisible)) {
-            const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
-              visible: bgVisible && !!text,
-              x: textShape.AABBBounds.x1 - parsedPadding[1],
-              y: textShape.AABBBounds.y1 - parsedPadding[0],
-              width: textShape.AABBBounds.width() + (parsedPadding[1] + parsedPadding[3]),
-              height: textShape.AABBBounds.height() + (parsedPadding[0] + parsedPadding[2])
-            }), "rect");
-            if (isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), backgroundStyle.customShape) {
-              const customShape = backgroundStyle.customShape;
-              bgRect.pathProxy = attrs => customShape(textShape.attribute, attrs, new CustomPath2D());
-            }
-            this._bgRect = bgRect;
-          }
+          textShape = group.createOrUpdateChild("tag-text", richTextAttrs, "richtext"), tagWidth += textShape.AABBBounds.width(), tagHeight += textShape.AABBBounds.height(), tagX += textShape.AABBBounds.x1, tagY += textShape.AABBBounds.y1;
         } else {
           const textAttrs = Object.assign(Object.assign({
             text: isObject$2(text) && "type" in text && "text" === text.type ? text.text : text,
@@ -30558,11 +30629,9 @@
             textAlign: textAlign,
             textBaseline: textBaseline
           } = textStyle;
-          (isValid$1(minWidth) || isValid$1(maxWidth)) && (isValid$1(minWidth) && tagWidth < minWidth && (tagWidth = minWidth), isValid$1(maxWidth) && tagWidth > maxWidth && (tagWidth = maxWidth, textShape.setAttribute("maxLineWidth", maxWidth - parsedPadding[1] - parsedPadding[2])));
-          let x = 0,
-            y = 0,
-            flag = 0;
-          "left" === textAlign || "start" === textAlign ? flag = 1 : "right" === textAlign || "end" === textAlign ? flag = -1 : "center" === textAlign && (flag = 0), flag ? flag < 0 ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : flag > 0 && group.setAttribute("x", parsedPadding[3]) : (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2));
+          (isValid$1(minWidth) || isValid$1(maxWidth)) && (isValid$1(minWidth) && tagWidth < minWidth && (tagWidth = minWidth), isValid$1(maxWidth) && tagWidth > maxWidth && (tagWidth = maxWidth, textShape.setAttribute("maxLineWidth", maxWidth - parsedPadding[1] - parsedPadding[2]))), tagX = 0, tagY = 0;
+          let flag = 0;
+          "left" === textAlign || "start" === textAlign ? flag = 1 : "right" === textAlign || "end" === textAlign ? flag = -1 : "center" === textAlign && (flag = 0), flag ? flag < 0 ? (tagX -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : flag > 0 && group.setAttribute("x", parsedPadding[3]) : (tagX -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2));
           const shouldRight = "right" === containerTextAlign || "end" === containerTextAlign,
             shouldLeft = "left" === containerTextAlign || "start" === containerTextAlign;
           if ((containerTextAlign ? "center" === containerTextAlign : textAlwaysCenter) && flag) {
@@ -30606,25 +30675,25 @@
               });
             }
           }
-          "middle" === textBaseline ? (y -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (y -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
-          const {
-              visible: bgVisible
-            } = panel,
-            backgroundStyle = __rest$d(panel, ["visible"]);
-          if (visible && isBoolean$1(bgVisible)) {
-            const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
-              visible: bgVisible && !!text,
-              x: x,
-              y: y,
-              width: tagWidth,
-              height: tagHeight
-            }), "rect");
-            if (isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), backgroundStyle.customShape) {
-              const customShape = backgroundStyle.customShape;
-              bgRect.pathProxy = attrs => customShape(textShape.attribute, attrs, new CustomPath2D());
-            }
-            this._bgRect = bgRect;
+          "middle" === textBaseline ? (tagY -= tagHeight / 2, symbol && symbol.setAttribute("y", 0)) : "bottom" === textBaseline ? (tagY -= tagHeight, symbol && symbol.setAttribute("y", -textHeight / 2), group.setAttribute("y", -parsedPadding[2])) : "top" === textBaseline && (group.setAttribute("y", parsedPadding[0]), symbol && symbol.setAttribute("y", textHeight / 2));
+        }
+        const {
+            visible: bgVisible
+          } = panel,
+          backgroundStyle = __rest$d(panel, ["visible"]);
+        if (visible && isBoolean$1(bgVisible)) {
+          const bgRect = this.createOrUpdateChild("tag-panel", Object.assign(Object.assign({}, backgroundStyle), {
+            visible: bgVisible && !!text,
+            width: tagWidth,
+            height: tagHeight,
+            x: tagX,
+            y: tagY
+          }), "rect");
+          if (isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel), backgroundStyle.customShape) {
+            const customShape = backgroundStyle.customShape;
+            bgRect.pathProxy = attrs => customShape(this, attrs, new CustomPath2D());
           }
+          this._bgRect = bgRect;
         }
         this._textShape = textShape, this._symbol = symbol, this.resetStates();
       }
@@ -31858,7 +31927,10 @@
             } = text.attribute;
           if (line.customShape) {
             const customShape = line.customShape;
-            lineGraphic.pathProxy = attrs => customShape(text.attribute, attrs, new CustomPath2D());
+            lineGraphic.pathProxy = attrs => customShape({
+              text: text,
+              baseMark: baseMark
+            }, attrs, new CustomPath2D());
           }
           return baseMark && baseMark.attribute.fill && lineGraphic.setAttribute("stroke", baseMark.attribute.fill), this.attribute.line && !isEmpty(this.attribute.line.style) && lineGraphic.setAttributes(this.attribute.line.style), this._setStatesOfLabelLine(lineGraphic), lineGraphic;
         }
@@ -32252,7 +32324,7 @@
             default:
               if (this._isCollectionBase) {
                 const point = this._idToPoint.get(text.attribute.id);
-                !point || text.animates && text.animates.has("label-animate") || !relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, null === (_c = this.stage) || void 0 === _c ? void 0 : _c.pickerService) || (text.animate({
+                !point || text.animates && text.animates.has("label-animate") || !relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, null === (_c = this.stage) || void 0 === _c ? void 0 : _c.getPickerService()) || (text.animate({
                   onStart: onStart
                 }).wait(delay).to(to, duration, easing), labelLine && labelLine.animate().wait(delay).to(to, duration, easing));
               } else detail.animationState.isFirstFrameOfStep && (text.animate({
@@ -32519,7 +32591,7 @@
     };
     class ArcInfo {
       constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
-        this.refDatum = refDatum, this.center = center, this.outerCenter = outerCenter, this.quadrant = quadrant, this.radian = radian, this.middleAngle = middleAngle, this.innerRadius = innerRadius, this.outerRadius = outerRadius, this.circleCenter = circleCenter, this.labelVisible = !0, this.labelLimit = 0;
+        this.refDatum = refDatum, this.center = center, this.outerCenter = outerCenter, this.quadrant = quadrant, this.radian = radian, this.middleAngle = middleAngle, this.innerRadius = innerRadius, this.outerRadius = outerRadius, this.circleCenter = circleCenter, this.labelVisible = !0;
       }
       getLabelBounds() {
         return this.labelPosition && this.labelSize ? {
@@ -32555,7 +32627,7 @@
         };
       }
       _layout(texts) {
-        var _a;
+        var _a, _b, _c;
         if (!texts || !texts.length) return;
         const labels = super._layout(texts),
           textBoundsArray = labels.map(label => this.getGraphicBounds(label)),
@@ -32584,11 +32656,10 @@
               x: basedArc.labelPosition.x,
               y: basedArc.labelPosition.y,
               angle: basedArc.angle,
-              maxLineWidth: basedArc.labelLimit,
               points: basedArc.pointA && basedArc.pointB && basedArc.pointC ? [basedArc.pointA, basedArc.pointB, basedArc.pointC] : void 0,
               line: basedArc.labelLine
             };
-            "richtext" === labels[i].type && (labelAttribute.width = basedArc.labelLimit), labels[i].setAttributes(labelAttribute);
+            "richtext" === labels[i].type ? labelAttribute.width = null !== (_b = basedArc.labelLimit) && void 0 !== _b ? _b : labels[i].attribute.width : labelAttribute.maxLineWidth = null !== (_c = basedArc.labelLimit) && void 0 !== _c ? _c : labels[i].attribute.maxLineWidth, labels[i].setAttributes(labelAttribute);
           }
         }
         return labels;
@@ -32768,12 +32839,14 @@
           default:
             cx = pointB.x + flag * this._line2MinLength;
         }
-        labelWidth = Math.max(this._ellipsisWidth, labelWidth), arc.labelLimit = labelWidth, arc.pointC = {
+        labelWidth = Math.max(this._ellipsisWidth, labelWidth);
+        const needAdjustLimit = labelWidth < arc.labelSize.width - 1;
+        arc.labelLimit = needAdjustLimit ? labelWidth : null, arc.pointC = {
           x: cx,
           y: labelPosition.y
         };
         const align = this._computeAlign(arc, attribute),
-          targetCenterOffset = getAlignOffset(align) * (arc.labelLimit < arc.labelSize.width ? arc.labelLimit : arc.labelSize.width);
+          targetCenterOffset = getAlignOffset(align) * (needAdjustLimit ? labelWidth : arc.labelSize.width);
         "edge" === labelLayoutAlign ? (labelPosition.x = (flag > 0 ? plotLayout_x2 : plotLayout_x1) - flag * targetCenterOffset + flag * this._alignOffset, arc.pointC.x += flag * this._alignOffset) : labelPosition.x = cx + flag * (this._alignOffset + spaceWidth + targetCenterOffset);
       }
       _computeAlign(arc, attribute) {
@@ -33473,34 +33546,10 @@
       zIndex: 1
     };
 
-    const clampRadian = function () {
-      let angle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      if (angle < 0) for (; angle < 0;) angle += tau$1;else if (angle > 0) for (; angle > tau$1;) angle -= tau$1;
-      return angle;
-    };
-    function isInRange(a, min, max) {
-      return !isLess(a, min, 0, 1e-6) && !isGreater(a, max, 0, 1e-6);
-    }
-    function getCircleLabelPosition(tickPosition, tickVector, text, style) {
-      const labelBounds = getTextBounds(Object.assign({
-          text: text
-        }, style)),
-        width = labelBounds.width(),
-        height = labelBounds.height(),
-        angle = clampRadian(Math.atan2(tickVector[1], tickVector[0])) - Math.PI,
-        PI_3_4 = 3 * Math.PI / 4,
-        PI_1_4 = Math.PI / 4,
-        PI_1_2 = Math.PI / 2,
-        baseX = tickPosition.x;
-      let dx = 0;
-      dx = isInRange(angle, -PI_3_4, -PI_1_4) ? ((angle + PI_3_4) / PI_1_2 - .5) * width : isInRange(angle, PI_1_4, PI_3_4) ? (.5 - (angle - PI_1_4) / PI_1_2) * width : Math.cos(angle) >= 0 ? .5 * width : .5 * -width;
-      const x = baseX - dx,
-        baseY = tickPosition.y;
-      let dy = 0;
-      dy = isInRange(angle, -PI_3_4, -PI_1_4) ? .5 * -height : isInRange(angle, PI_1_4, PI_3_4) ? .5 * height : Math.cos(angle) >= 0 ? (.5 - (PI_1_4 - angle) / PI_1_2) * height : (.5 - clampRadian(angle - PI_3_4) / PI_1_2) * height;
+    function getCircleLabelPosition(tickPosition, tickVector) {
       return {
-        x: x,
-        y: baseY - dy
+        x: tickPosition.x + tickVector[0],
+        y: tickPosition.y + tickVector[1]
       };
     }
     function getAxisBreakSymbolAttrs() {
@@ -33543,13 +33592,13 @@
         baseline: baseline
       };
     }
-    function getPolarAngleLabelPosition(angle, center, radius, labelOffset, inside, text, style) {
+    function getPolarAngleLabelPosition(angle, center, radius, labelOffset, inside) {
       const point = polarToCartesian({
           x: 0,
           y: 0
         }, radius, angle),
         labelPoint = getVerticalCoord(point, getCircleVerticalVector(labelOffset, point, center, inside));
-      return getCircleLabelPosition(labelPoint, getCircleVerticalVector(labelOffset || 1, labelPoint, center, inside), text, style);
+      return getCircleLabelPosition(labelPoint, getCircleVerticalVector(labelOffset || 1, labelPoint, center, inside));
     }
     function getCirclePoints(center, count, radius, startAngle, endAngle) {
       const points = [],
@@ -33741,10 +33790,6 @@
       getVerticalCoord(point, offset, inside) {
         return getVerticalCoord(point, this.getVerticalVector(offset, inside, point));
       }
-      getTextAlign(vector) {
-        let align = "center";
-        return isNumberClose(vector[0], 0) ? isNumberClose(vector[1], 0) ? Object.is(vector[1], -0) ? align = "start" : Object.is(vector[0], -0) && (align = "end") : align = "center" : vector[0] > 0 ? align = "start" : vector[0] < 0 && (align = "end"), align;
-      }
       getTickLineItems() {
         const {
             tick: tick
@@ -34348,6 +34393,10 @@
         const axisLineGroup = new Segment(lineAttrs);
         axisLineGroup.name = AXIS_ELEMENT_NAME.line, axisLineGroup.id = this._getNodeId("line"), container.add(axisLineGroup);
       }
+      getTextAlign(vector) {
+        let align = "center";
+        return isNumberClose(vector[0], 0) ? isNumberClose(vector[1], 0) ? Object.is(vector[1], -0) ? align = "start" : Object.is(vector[0], -0) && (align = "end") : align = "center" : vector[0] > 0 ? align = "start" : vector[0] < 0 && (align = "end"), align;
+      }
       getTitleAttribute() {
         var _a, _b, _c;
         const _d = this.attribute.title,
@@ -34672,6 +34721,70 @@
       }
     }
 
+    function findSiblingLabels(labels, selfIndex) {
+      const len = labels.length;
+      return {
+        prevLabel: selfIndex >= 1 ? labels[selfIndex - 1] : labels[len - 1],
+        nextLabel: selfIndex < len - 1 ? labels[selfIndex + 1] : labels[0]
+      };
+    }
+    function adjustMaxLineWidth(label, maxLineWidth, ellipsis) {
+      var _a;
+      label.setAttributes({
+        maxLineWidth: maxLineWidth,
+        ellipsis: null !== (_a = label.attribute.ellipsis) && void 0 !== _a ? _a : ellipsis
+      });
+    }
+    function adjustMaxHeight(labels, selfIndex, bounds) {
+      const siblings = [];
+      if (labels.length >= 3) {
+        const {
+          prevLabel: prevLabel,
+          nextLabel: nextLabel
+        } = findSiblingLabels(labels, selfIndex);
+        siblings.push(prevLabel, nextLabel);
+      } else 2 === labels.length && siblings.push(labels[0 === selfIndex ? 1 : 0]);
+      const label = labels[selfIndex];
+      let heightLimit = Math.min(Math.abs(label.attribute.y - bounds.y1), Math.abs(label.attribute.y - bounds.y2));
+      siblings.forEach(sibling => {
+        heightLimit = Math.min(heightLimit, Math.abs(sibling.attribute.y - label.attribute.y));
+      }), heightLimit > 0 && label.setAttributes({
+        whiteSpace: "normal",
+        heightLimit: heightLimit
+      });
+    }
+    function circleAutoLimit(labels, config) {
+      const {
+        ellipsis: ellipsis,
+        inside: inside,
+        bounds: bounds,
+        autoWrap: autoWrap,
+        center: center
+      } = config;
+      inside || labels.forEach((label, index) => {
+        const {
+            x: x,
+            y: y
+          } = label.attribute,
+          b = label.AABBBounds;
+        if (isNumberClose(x, center.x)) {
+          if (y > bounds.y2 || y < bounds.y1) return void adjustMaxLineWidth(label, 0, ellipsis);
+          const boxWidth = bounds.x2 - bounds.x1;
+          if (labels.length >= 3) {
+            const {
+              prevLabel: prevLabel,
+              nextLabel: nextLabel
+            } = findSiblingLabels(labels, index);
+            let leftX = prevLabel.attribute.x,
+              rightX = nextLabel.attribute.x;
+            leftX > rightX && (leftX = nextLabel.attribute.x, rightX = prevLabel.attribute.x);
+            const maxWidth = leftX === rightX ? boxWidth : x >= leftX && x <= rightX ? rightX - leftX : Math.min(Math.abs(leftX - x), Math.abs(rightX - x));
+            label.AABBBounds.width() > maxWidth && adjustMaxLineWidth(label, maxWidth, ellipsis);
+          } else label.AABBBounds.width() > boxWidth && adjustMaxLineWidth(label, boxWidth, ellipsis);
+        } else x > center.x && b.x2 > bounds.x2 ? (adjustMaxLineWidth(label, bounds.x2 - x, ellipsis), autoWrap && adjustMaxHeight(labels, index, bounds)) : x < center.x && b.x1 < bounds.x1 && (adjustMaxLineWidth(label, x - bounds.x1, ellipsis), autoWrap && adjustMaxHeight(labels, index, bounds));
+      });
+    }
+
     var __rest$4 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -34803,21 +34916,71 @@
         }
         return subTickLineItems;
       }
-      getTextBaseline(vector) {
-        let base = "middle";
-        return isNumberClose(vector[1], 0) ? base = "middle" : vector[1] > 0 && vector[1] > Math.abs(vector[0]) ? base = "top" : vector[1] < 0 && Math.abs(vector[1]) > Math.abs(vector[0]) && (base = "bottom"), base;
-      }
       beforeLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
-      handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
+      handleLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {
+        if (isEmpty(labelShapes)) return;
+        const {
+            inside: inside,
+            radius: radius,
+            center: center,
+            width: width,
+            height: height,
+            label: label,
+            orient: orient
+          } = this.attribute,
+          bounds = width && height ? {
+            x1: 0,
+            y1: 0,
+            x2: width,
+            y2: height
+          } : {
+            x1: center.x - radius,
+            y1: center.y - radius,
+            x2: center.x + radius,
+            y2: center.y + radius
+          },
+          {
+            layoutFunc: layoutFunc,
+            autoLimit: autoLimit,
+            limitEllipsis: limitEllipsis,
+            autoHide: autoHide$1,
+            autoHideMethod: autoHideMethod,
+            autoHideSeparation: autoHideSeparation,
+            autoWrap: autoWrap
+          } = label;
+        isFunction$1(layoutFunc) ? layoutFunc(labelShapes, labelData, layer, this) : ((autoLimit || autoWrap) && circleAutoLimit(labelShapes, {
+          inside: inside,
+          autoWrap: autoWrap,
+          bounds: bounds,
+          ellipsis: limitEllipsis,
+          center: center
+        }), autoHide$1 && autoHide(labelShapes, {
+          orient: orient,
+          method: autoHideMethod,
+          separation: autoHideSeparation
+        }));
+      }
       afterLabelsOverlap(labelShapes, labelData, labelContainer, layer, layerCount) {}
+      getTextBaseline(vector) {
+        return Math.abs(vector[1] / vector[0]) < .3 ? "middle" : vector[1] < 0 ? "bottom" : vector[1] > 0 ? "top" : "middle";
+      }
       getLabelAlign(vector, inside, angle) {
-        return {
+        return isNumberClose(vector[0], 0) ? {
+          textAlign: "center",
+          textBaseline: vector[1] > 0 ? "top" : "bottom"
+        } : vector[0] < 0 ? {
+          textAlign: "right",
+          textBaseline: this.getTextBaseline(vector)
+        } : vector[0] > 0 ? {
+          textAlign: "left",
+          textBaseline: this.getTextBaseline(vector)
+        } : {
           textAlign: "center",
           textBaseline: "middle"
         };
       }
       getLabelPosition(point, vector, text, style) {
-        return getCircleLabelPosition(point, vector, text, style);
+        return point;
       }
     }
     CircleAxis.defaultAttributes = DEFAULT_AXIS_THEME, mixin(CircleAxis, CircleAxisMixin);
@@ -36161,32 +36324,33 @@
         } = op,
         radius = null == getRadius ? void 0 : getRadius(),
         labelAngle = null !== (_a = labelStyle.angle) && void 0 !== _a ? _a : 0,
-        textMeasure = initTextMeasure$1(labelStyle),
-        labelBoundsList = domain.map(v => {
-          var _a, _b;
-          const str = labelFormatter ? labelFormatter(v) : `${v}`,
-            {
-              width: width,
-              height: height
-            } = textMeasure.quickMeasure(str),
-            textWidth = Math.max(width, MIN_TICK_GAP),
-            textHeight = Math.max(height, MIN_TICK_GAP),
-            angle = scale.scale(v);
-          let textX = 0,
-            textY = 0;
-          const orient_align = null !== (_a = labelStyle.textAlign) && void 0 !== _a ? _a : "center",
-            orient_baseline = null !== (_b = labelStyle.textBaseline) && void 0 !== _b ? _b : "middle",
-            {
-              x: x,
-              y: y
-            } = getPolarAngleLabelPosition(angle, {
-              x: 0,
-              y: 0
-            }, radius, labelOffset, inside, str, labelStyle);
-          textX = x + ("right" === orient_align ? -textWidth : "center" === orient_align ? -textWidth / 2 : 0), textY = y + ("bottom" === orient_baseline ? -textHeight : "middle" === orient_baseline ? -textHeight / 2 : 0);
-          return new AABBBounds().set(textX, textY, textX + textWidth, textY + textHeight).rotate(labelAngle, textX + textWidth / 2, textY + textHeight / 2);
-        });
-      return labelBoundsList;
+        textMeasure = initTextMeasure$1(labelStyle);
+      return domain.map(v => {
+        const str = labelFormatter ? labelFormatter(v) : `${v}`,
+          {
+            width: width,
+            height: height
+          } = textMeasure.quickMeasure(str),
+          textWidth = Math.max(width, MIN_TICK_GAP),
+          textHeight = Math.max(height, MIN_TICK_GAP),
+          angle = scale.scale(v),
+          center = {
+            x: 0,
+            y: 0
+          };
+        let textX = 0,
+          textY = 0;
+        const orient = {
+            align: labelStyle.textAlign,
+            baseline: labelStyle.textBaseline
+          },
+          {
+            x: x,
+            y: y
+          } = getPolarAngleLabelPosition(angle, center, radius, labelOffset, inside);
+        orient.align || (isNumberClose(x, center.x) ? orient.baseline || (orient.baseline = y > center.y ? "top" : "bottom") : x > center.x ? orient.align = "left" : x < center.x && (orient.align = "right")), textX = x + ("right" === orient.align ? -textWidth : "left" === orient.align ? 0 : -textWidth / 2), textY = y + ("bottom" === orient.baseline ? -textHeight : "top" === orient.baseline ? 0 : -textHeight / 2);
+        return new AABBBounds().set(textX, textY, textX + textWidth, textY + textHeight).rotate(labelAngle, textX + textWidth / 2, textY + textHeight / 2);
+      });
     };
     const polarAngleAxisDiscreteTicks = (scale, op) => {
       const {
@@ -36946,6 +37110,7 @@
         return !1;
       }
       setTextAttr(startTextBounds, endTextBounds) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const {
             startTextStyle: startTextStyle,
             endTextStyle: endTextStyle
@@ -36985,10 +37150,10 @@
           y: position.y + height / 2
         }, startTextAlignStyle = {
           textAlign: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "left" : "right",
-          textBaseline: "middle"
+          textBaseline: null !== (_b = null === (_a = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _a ? void 0 : _a.textBaseline) && void 0 !== _b ? _b : "middle"
         }, endTextAlignStyle = {
           textAlign: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "right" : "left",
-          textBaseline: "middle"
+          textBaseline: null !== (_d = null === (_c = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _c ? void 0 : _c.textBaseline) && void 0 !== _d ? _d : "middle"
         }) : (startTextPosition = {
           x: position.x + width / 2,
           y: position.y + start * height
@@ -36996,10 +37161,10 @@
           x: position.x + width / 2,
           y: position.y + end * height
         }, startTextAlignStyle = {
-          textAlign: "center",
+          textAlign: null !== (_f = null === (_e = null == restStartTextStyle ? void 0 : restStartTextStyle.textStyle) || void 0 === _e ? void 0 : _e.textAlign) && void 0 !== _f ? _f : "center",
           textBaseline: this.isTextOverflow(componentBoundsLike, startTextBounds, "start") ? "top" : "bottom"
         }, endTextAlignStyle = {
-          textAlign: "center",
+          textAlign: null !== (_h = null === (_g = null == restEndTextStyle ? void 0 : restEndTextStyle.textStyle) || void 0 === _g ? void 0 : _g.textAlign) && void 0 !== _h ? _h : "center",
           textBaseline: this.isTextOverflow(componentBoundsLike, endTextBounds, "end") ? "bottom" : "top"
         }), this._startText = this.maybeAddLabel(this._container, merge$2({}, restStartTextStyle, {
           text: startTextValue,
@@ -42844,6 +43009,9 @@
         }
         return seats.map(entry => entry / digits);
     }
+    function isValidPoint(p) {
+        return isValidNumber$1(p.x) && isValidNumber$1(p.y);
+    }
 
     function eachSeries(regions, callback, filter) {
         let flag = false;
@@ -44212,11 +44380,13 @@
         },
         word: {
             style: {
+                fontWeight: null,
                 fontSize: null
             }
         },
         fillingWord: {
             style: {
+                fontWeight: null,
                 fontSize: null
             }
         },
@@ -48415,12 +48585,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const NAME_PREFIX = "@";
     const ID_PREFIX = "#";
 
-    function getExtendedEvents(view, event, item, type, source) {
+    function getExtendedEvents(view, event, type, source) {
+      var _a, _b;
       if (source === EVENT_SOURCE_WINDOW) {
         const e = event.changedTouches ? event.changedTouches[0] : event;
         point(e);
       }
-      return event.element = item, event;
+      let element = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey];
+      if (!element && source === EVENT_SOURCE_VIEW) {
+        let target = event.target;
+        const rootGraphic = null === (_b = view.rootMark) || void 0 === _b ? void 0 : _b.graphicItem;
+        for (; (null == target ? void 0 : target.parent) && target.parent !== rootGraphic;) if (target = target.parent, target[BridgeElementKey]) {
+          element = target[BridgeElementKey];
+          break;
+        }
+      }
+      return event.element = element, event;
     }
 
     class Signal extends GrammarBase {
@@ -48844,12 +49024,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       init(stage, parameters) {
         var _b, _c, _d, _e, _f;
         if (this._delegateEvent || (this._delegateEvent = (event, type) => {
-          var _a;
-          const activeElement = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey];
-          if ((null == activeElement ? void 0 : activeElement.mark) === this) {
-            const extendedEvt = getExtendedEvents(this.view, event, activeElement, type, EVENT_SOURCE_VIEW);
-            this.emitGrammarEvent(type, extendedEvt, activeElement);
-          }
+          const extendedEvt = getExtendedEvents(this.view, event, type, EVENT_SOURCE_VIEW),
+            activeElement = event.element;
+          (null == activeElement ? void 0 : activeElement.mark) === this && this.emitGrammarEvent(type, extendedEvt, activeElement);
         }, this.initEvent()), null === (_b = this.initAnimate) || void 0 === _b || _b.call(this, this.spec), !this.group) {
           const group = getGrammarOutput(this.spec.group, parameters);
           this.group = group, group && group.appendChild(this);
@@ -50226,10 +50403,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           const size = _this._getContainerSize();
           size && _this.resize(size.width, size.height);
         }, 100), this.delegateEvent = (event, type) => {
-          var _a;
-          const activeElement = null === (_a = event.target) || void 0 === _a ? void 0 : _a[BridgeElementKey],
-            extendedEvt = getExtendedEvents(this, event, activeElement, type, EVENT_SOURCE_VIEW);
-          this.emit(type, extendedEvt, activeElement);
+          const extendedEvt = getExtendedEvents(this, event, type, EVENT_SOURCE_VIEW);
+          this.emit(type, extendedEvt, event.element);
         }, this.handleProgressiveFrame = () => {
           this._progressiveMarks.length && this._progressiveMarks.forEach(mark => {
             mark.isDoingProgressive() && mark.evaluateProgressive();
@@ -50613,7 +50788,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           var _b;
           const matched = 1 === diff.prev.length && 1 === diff.next.length && diff.prev[0].markType === diff.next[0].markType,
             enableMarkMorphConfig = diff.prev.every(mark => mark.getMorphConfig().morph) && diff.next.every(mark => mark.getMorphConfig().morph);
-          runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll ? null === (_b = this.addMorphMarks) || void 0 === _b || _b.call(this, {
+          this.morph && (runningConfig.morph && enableMarkMorphConfig || runningConfig.morphAll) ? null === (_b = this.addMorphMarks) || void 0 === _b || _b.call(this, {
             prev: diff.prev,
             next: diff.next
           }) : matched && runningConfig.reuse && (diff.next[0].reuse(diff.prev[0]), diff.prev[0].detachAll(), diff.prev[0].clear(), this._cachedGrammars.unrecord(diff.prev[0]));
@@ -50706,7 +50881,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       resize(width, height) {
         let render = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !0;
         let needDataflow = !1;
-        return width !== this.width() && (needDataflow = !0, this.updateSignal(SIGNAL_WIDTH, width)), height !== this.height() && (needDataflow = !0, this.updateSignal(SIGNAL_HEIGHT, height)), needDataflow && (render ? this.evaluate() : this._dataflow.evaluate()), this;
+        return width !== this.width() && (needDataflow = !0, this.updateSignal(SIGNAL_WIDTH, width)), height !== this.height() && (needDataflow = !0, this.updateSignal(SIGNAL_HEIGHT, height)), needDataflow && (render ? this.evaluate({
+          morph: !1
+        }) : this._dataflow.evaluate()), this;
       }
       _resizeRenderer() {
         const width = this.width(),
@@ -50793,7 +50970,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (this._progressiveMarks && this._progressiveMarks.some(mark => mark.isDoingProgressive())) {
           const raf = vglobal.getRequestAnimationFrame();
           this._progressiveRafId = raf(this.handleProgressiveFrame);
-        } else this._progressiveMarks && this._progressiveMarks.every(mark => mark.canAnimateAfterProgressive()) ? this.animate.animate() : this._progressiveMarks && (this._progressiveMarks = null);
+        } else this._progressiveMarks && this.animate && this._progressiveMarks.every(mark => mark.canAnimateAfterProgressive()) ? this.animate.animate() : this._progressiveMarks && (this._progressiveMarks = null);
       }
       clearProgressive() {
         if (this._progressiveRafId) {
@@ -55108,15 +55285,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         discreteLegend: 'legend',
         continuousLegend: 'legend',
         colorLegend: 'legend',
-        sizeLegend: 'legend',
-        label: 'label',
-        markLine: 'markLine',
-        markArea: 'markArea',
-        markPoint: 'markPoint',
-        polarMarkLine: 'polarMarkLine',
-        polarMarkArea: 'polarMarkArea',
-        polarMarkPoint: 'polarMarkPoint',
-        geoMarkPoint: 'geoMarkPoint'
+        sizeLegend: 'legend'
     };
     class EventDispatcher {
         constructor(vchart, compiler) {
@@ -57812,12 +57981,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         compileMarks(group) {
             this.getMarks().forEach(m => {
                 var _a;
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this
-                    }
-                }).layout((group, children, parentLayoutBounds, options) => {
+                m.compile({ group, context: { model: this } });
+                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.layout((group, children, parentLayoutBounds, options) => {
                 });
             });
         }
@@ -58862,12 +59027,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setSupport3d(support3d) {
             this._support3d = support3d;
         }
-        getFacet() {
-            return this._facet;
-        }
-        setFacet(facet) {
-            this._facet = facet;
-        }
         getInteractive() {
             return this._interactive;
         }
@@ -59031,7 +59190,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.compileState();
             this.compileEncode();
             this.compileAnimation();
-            this.compileContext();
+            this.compileContext(option === null || option === void 0 ? void 0 : option.context);
             this.compileTransform();
         }
         _initProduct(group) {
@@ -59047,14 +59206,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return `${this.name}_${this.id}`;
         }
         compileData() {
-            var _a;
             if (isNil$1(this._data)) {
                 return;
             }
             this._data.compile();
             const dataProduct = this._data.getProduct();
             if (isValid$1(this._product) && isValid$1(dataProduct)) {
-                this._product.join(dataProduct, this.key, undefined, (_a = this._groupKey) !== null && _a !== void 0 ? _a : this._facet);
+                this._product.join(dataProduct, this.key, undefined, this.getGroupKey());
             }
         }
         updateStaticEncode() {
@@ -59073,7 +59231,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (this._unCompileChannel[key]) {
                     return;
                 }
-                if (this._option.noSeparateStyle || isStateAttrChangeable(key, normalStyle, this.getFacet())) {
+                if (this._option.noSeparateStyle || isStateAttrChangeable(key, normalStyle, this.getGroupKey())) {
                     updateStyles[key] = {
                         callback: this.compileCommonAttributeCallback(key, 'normal'),
                         dependency: [this.stateKeyToSignalName('markUpdateRank')]
@@ -59147,16 +59305,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
         }
-        compileContext() {
+        compileContext(extraContext) {
             const config = {
                 interactive: this.getInteractive(),
                 zIndex: this.getZIndex(),
-                context: {
-                    markId: this.id,
-                    modelId: this.model.id,
-                    markUserId: this._userId,
-                    modelUserId: this.model.userId
-                },
+                context: Object.assign({ markId: this.id, modelId: this.model.id, markUserId: this._userId, modelUserId: this.model.userId }, extraContext),
                 skipTheme: this.getSkipTheme(),
                 support3d: this.getSupport3d(),
                 enableSegments: !!this._enableSegments,
@@ -59919,7 +60072,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._dataSet;
         }
         constructor(spec, options) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             this.id = createID();
             this._userEvents = [];
             this._autoSize = true;
@@ -59934,9 +60087,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
             this._observer = null;
             this._context = {};
-            this._onResize = debounce((...args) => {
-                this._doResize();
-            }, 100);
+            this._doResize = () => {
+                const { width, height } = this.getCurrentSize();
+                if (this._currentSize.width !== width || this._currentSize.height !== height) {
+                    this._currentSize = { width, height };
+                    this.resizeSync(width, height);
+                }
+            };
             this._renderSync = (option = {}) => {
                 var _a;
                 const self = this;
@@ -59951,6 +60108,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 var _a, _b;
                 const lastSpec = this._spec;
                 const result = {
+                    changeBackground: false,
                     reTransformSpec: false,
                     change: false,
                     reMake: false,
@@ -59985,7 +60143,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
             this._option = merge$2(this._option, { animation: spec.animation !== false }, options);
             this._onError = (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError;
-            const _g = this._option, { dom, renderCanvas, mode, stage, poptip } = _g, restOptions = __rest$e(_g, ["dom", "renderCanvas", "mode", "stage", "poptip"]);
+            const _j = this._option, { dom, renderCanvas, mode, stage, poptip } = _j, restOptions = __rest$e(_j, ["dom", "renderCanvas", "mode", "stage", "poptip"]);
             const isTrueBrowseEnv = isTrueBrowser(mode);
             if (isTrueBrowseEnv) {
                 registerBrowserEnv();
@@ -60026,6 +60184,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._bindVGrammarViewEvent();
             this._initChartPlugin();
             InstanceManager.registerInstance(this);
+            (_h = (_g = this._option.performanceHook) === null || _g === void 0 ? void 0 : _g.afterCreateVChart) === null || _h === void 0 ? void 0 : _h.call(_g, this);
         }
         _setNewSpec(spec, forceMerge) {
             if (!spec) {
@@ -60116,13 +60275,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         _bindResizeEvent() {
-            var _a;
+            var _a, _b;
             if (this._autoSize) {
+                this._onResize = throttle(this._doResize, (_a = this._option.resizeDelay) !== null && _a !== void 0 ? _a : 100);
                 if (this._container) {
                     const ResizeObserverWindow = window.ResizeObserver;
                     if (ResizeObserverWindow) {
                         this._observer = new ResizeObserverWindow(this._onResize);
-                        (_a = this._observer) === null || _a === void 0 ? void 0 : _a.observe(this._container);
+                        (_b = this._observer) === null || _b === void 0 ? void 0 : _b.observe(this._container);
                     }
                 }
                 window.addEventListener('resize', this._onResize);
@@ -60149,13 +60309,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 height: (_d = (_c = this._currentSize) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : DEFAULT_CHART_HEIGHT
             });
         }
-        _doResize() {
-            const { width, height } = this.getCurrentSize();
-            if (this._currentSize.width !== width || this._currentSize.height !== height) {
-                this._currentSize = { width, height };
-                this.resizeSync(width, height);
-            }
-        }
         _initDataSet(dataSet) {
             if (dataSet instanceof DataSet) {
                 this._dataSet = dataSet;
@@ -60198,7 +60351,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._beforeRender(option);
         }
         _reCompile(updateResult, morphConfig) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             if (updateResult.reMake) {
                 this._releaseData();
                 this._initDataSet();
@@ -60227,8 +60380,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     (_h = this._compiler) === null || _h === void 0 ? void 0 : _h.setBackground(this._getBackground());
                 }
                 if (updateResult.reCompile) {
-                    (_j = this._compiler) === null || _j === void 0 ? void 0 : _j.clear({ chart: this._chart, vChart: this }, !this._option.animation || !this._spec.animation);
-                    (_k = this._compiler) === null || _k === void 0 ? void 0 : _k.compile({ chart: this._chart, vChart: this }, {});
+                    (_j = this._compiler) === null || _j === void 0 ? void 0 : _j.clear({ chart: this._chart, vChart: this }, ((_k = this._option) === null || _k === void 0 ? void 0 : _k.animation) === false || ((_l = this._spec) === null || _l === void 0 ? void 0 : _l.animation) === false);
+                    (_m = this._compiler) === null || _m === void 0 ? void 0 : _m.compile({ chart: this._chart, vChart: this }, {});
                 }
                 if (updateResult.reSize) {
                     const { width, height } = this.getCurrentSize();
@@ -60250,9 +60403,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._initChartSpec(this._spec, 'render');
             }
             this._chartPluginApply('onBeforeInitChart', this._spec, actionSource);
-            (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeInitializeChart) === null || _b === void 0 ? void 0 : _b.call(_a);
+            (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeInitializeChart) === null || _b === void 0 ? void 0 : _b.call(_a, this);
             this._initChart(this._spec);
-            (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterInitializeChart) === null || _d === void 0 ? void 0 : _d.call(_c);
+            (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterInitializeChart) === null || _d === void 0 ? void 0 : _d.call(_c, this);
             if (!this._chart || !this._compiler) {
                 return false;
             }
@@ -61143,7 +61296,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.12.4";
+    const version = "1.12.6";
 
     const addVChartProperty = (data, op) => {
         const context = op.beforeCall();
@@ -61539,6 +61692,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         data: true
     };
     const defaultSeriesCompileCheckKeys = {
+        invalidType: true,
         animation: true,
         animationAppear: true,
         animationEnter: true,
@@ -62004,16 +62158,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.stack = true;
             }
         }
-        _addMarkLabelSpec(spec, markName, labelSpecKey = 'label', styleHandlerName = 'initLabelMarkStyle', hasAnimation, head) {
+        _addMarkLabelSpec(spec, markName, labelSpecKey = 'label', styleHandlerName = 'initLabelMarkStyle', hasAnimation = true, head) {
             if (!spec) {
                 return;
             }
             const labels = array(spec[labelSpecKey]);
             labels.forEach(labelSpec => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c;
                 if (labelSpec && labelSpec.visible) {
-                    const animationEnabled = (_d = (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.animation) !== null && _b !== void 0 ? _b : spec.animation) !== null && _c !== void 0 ? _c : labelSpec.animation) !== null && _d !== void 0 ? _d : true;
-                    this.addLabelSpec(markName, Object.assign(Object.assign({}, labelSpec), { animation: animationEnabled && hasAnimation, getStyleHandler: (series) => { var _a; return (_a = series[styleHandlerName]) === null || _a === void 0 ? void 0 : _a.bind(series); } }), head);
+                    const { animation = true, animationUpdate: labelAnimationUpdate = true, animationEnter: labelAnimationEnter = true, animationExit: labelAnimationExit = true } = labelSpec;
+                    const { animationUpdate = true, animationEnter = true, animationExit = true } = spec;
+                    const animationEnabled = (_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.animation) !== null && _b !== void 0 ? _b : spec.animation) !== null && _c !== void 0 ? _c : labelSpec.animation;
+                    const labelAnimationEnabled = !!animationEnabled && !!hasAnimation;
+                    this.addLabelSpec(markName, Object.assign(Object.assign({}, labelSpec), { animation: labelAnimationEnabled ? animation : false, animationUpdate: labelAnimationEnabled && animationUpdate && labelAnimationUpdate ? animationUpdate : false, animationEnter: labelAnimationEnabled && animationEnter && labelAnimationEnter ? animationEnter : false, animationExit: labelAnimationEnabled && animationEnter && labelAnimationExit ? animationExit : false, getStyleHandler: (series) => { var _a; return (_a = series[styleHandlerName]) === null || _a === void 0 ? void 0 : _a.bind(series); } }), head);
                 }
             });
         }
@@ -62128,13 +62285,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setSeriesField(field) {
             if (isValid$1(field)) {
                 this._seriesField = field;
-                this.getMarks()
-                    .filter(m => {
-                    return m.getDataView() === this.getViewData();
-                })
-                    .forEach(m => {
-                    m.setFacet(this._seriesField);
-                });
             }
         }
         getGroups() {
@@ -62533,7 +62683,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _createExtensionMark(spec, parentMark, namePrefix, index, options) {
             var _a;
-            const mark = this._createMark({ type: spec.type, name: `${namePrefix}_${index}` }, {
+            const mark = this._createMark({ type: spec.type, name: isValid$1(spec.name) ? `${spec.name}` : `${namePrefix}_${index}` }, {
                 skipBeforeLayouted: true,
                 markSpec: spec,
                 parent: parentMark,
@@ -62546,6 +62696,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!mark) {
                 return;
             }
+            if (isValid$1(spec.id)) {
+                mark.setUserId(spec.id);
+            }
             if (options.hasAnimation) {
                 const config = animationConfig({}, userAnimationConfig(spec.type, spec, this._markAttributeContext));
                 mark.setAnimationConfig(config);
@@ -62793,8 +62946,34 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         initTooltip() {
             this._tooltipHelper = new BaseSeriesTooltipHelper(this);
         }
+        _compareExtensionMarksSpec(newMarks, prevMarks, compareResult) {
+            if (newMarks.length !== prevMarks.length ||
+                prevMarks.some((prev, index) => {
+                    return prev.type !== newMarks[index].type || prev.id !== newMarks[index].id;
+                })) {
+                compareResult.reMake = true;
+            }
+            else if (prevMarks.some((prev, index) => {
+                return prev.visible !== newMarks[index].visible;
+            })) {
+                compareResult.reCompile = true;
+            }
+        }
+        _compareLabelSpec(newLabels, prevLabels, compareResult) {
+            if (newLabels.length !== prevLabels.length ||
+                prevLabels.some((prev, index) => {
+                    return prev.labelLayout !== newLabels[index].labelLayout;
+                })) {
+                compareResult.reMake = true;
+            }
+            else if (!compareResult.reCompile &&
+                prevLabels.some((prev, index) => {
+                    return !isEqual(prev, newLabels[index]);
+                })) {
+                compareResult.reCompile = true;
+            }
+        }
         _compareSpec(spec, prevSpec, ignoreCheckKeys) {
-            var _a, _b;
             const result = super._compareSpec(spec, prevSpec);
             const currentKeys = Object.keys(prevSpec || {}).sort();
             const nextKeys = Object.keys(spec || {}).sort();
@@ -62802,36 +62981,30 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 result.reMake = true;
                 return result;
             }
-            ignoreCheckKeys = Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), defaultSeriesCompileCheckKeys), ignoreCheckKeys);
-            ignoreCheckKeys.invalidType = true;
-            if (spec.invalidType !== prevSpec.invalidType) {
-                result.reCompile = true;
-            }
-            ignoreCheckKeys.extensionMark = true;
-            if (array(spec.extensionMark).length !== array(prevSpec.extensionMark).length ||
-                ((_a = prevSpec.extensionMark) === null || _a === void 0 ? void 0 : _a.some((mark, index) => mark.type !== spec.extensionMark[index].type || mark.id !== spec.extensionMark[index].id))) {
-                result.reMake = true;
-            }
+            const ignores = Object.assign(Object.assign(Object.assign(Object.assign({}, defaultSeriesIgnoreCheckKeys), defaultSeriesCompileCheckKeys), ignoreCheckKeys), { extensionMark: true, label: true, totalLabel: true });
+            this._compareExtensionMarksSpec(array(spec.extensionMark), array(prevSpec.extensionMark), result);
+            !result.reMake && this._compareLabelSpec(array(spec.label), array(prevSpec.label), result);
+            !result.reMake &&
+                this._compareLabelSpec(array(spec.totalLabel), array(prevSpec.totalLabel), result);
             if (result.reMake) {
                 return result;
             }
-            if ((_b = prevSpec.extensionMark) === null || _b === void 0 ? void 0 : _b.some((mark, index) => mark.visible !== spec.extensionMark[index].visible)) {
-                result.reCompile = true;
-            }
-            if (this._marks.getMarks().some(m => {
-                var _a, _b;
-                ignoreCheckKeys[m.name] = true;
-                return ((_a = prevSpec[m.name]) === null || _a === void 0 ? void 0 : _a.visible) !== ((_b = spec[m.name]) === null || _b === void 0 ? void 0 : _b.visible);
-            })) {
+            if (!result.reCompile &&
+                this._marks.getMarks().some(m => {
+                    var _a, _b;
+                    ignores[m.name] = true;
+                    return ((_a = prevSpec[m.name]) === null || _a === void 0 ? void 0 : _a.visible) !== ((_b = spec[m.name]) === null || _b === void 0 ? void 0 : _b.visible);
+                })) {
                 result.reCompile = true;
             }
-            if (currentKeys.some((k) => {
-                return defaultSeriesCompileCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
-            })) {
+            if (!result.reCompile &&
+                currentKeys.some((k) => {
+                    return defaultSeriesCompileCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
+                })) {
                 result.reCompile = true;
             }
             if (currentKeys.some((k) => {
-                return !ignoreCheckKeys[k] && !isEqual(spec[k], prevSpec[k]);
+                return !ignores[k] && !isEqual(spec[k], prevSpec[k]);
             })) {
                 result.reMake = true;
                 return result;
@@ -64343,6 +64516,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return {};
     }
+    const getSpecInfo = (chartSpec, specKey, compType, filter) => {
+        if (isNil$1(chartSpec[specKey])) {
+            return undefined;
+        }
+        const isArraySpec = isArray$1(chartSpec[specKey]);
+        const spec = isArraySpec ? chartSpec[specKey] : [chartSpec[specKey]];
+        const specInfos = [];
+        spec.forEach((s, i) => {
+            if (s && (!filter || filter(s))) {
+                specInfos.push({
+                    spec: s,
+                    specPath: isArraySpec ? [specKey, i] : [specKey],
+                    specInfoPath: ['component', specKey, i],
+                    type: compType
+                });
+            }
+        });
+        return specInfos;
+    };
 
     const DEFAULT_TITLE_STYLE = {
         left: {
@@ -64694,13 +64886,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         compileMarks(group) {
             this.getMarks().forEach(m => {
-                var _a;
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this
-                    }
-                });
+                m.compile({ group, context: { model: this } });
             });
         }
         reAppendComponents() {
@@ -64995,11 +65181,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
             return result;
         }
-        _delegateAxisContainerEvent(component) {
-            if (component.listenerCount('*') === 0) {
-                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
-            }
-        }
         _getAxisAttributes() {
             const spec = this._spec;
             const axisAttrs = {
@@ -65594,7 +65775,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                                 this.pluginService && plugin.onDidLayoutVertical && plugin.onDidLayoutVertical(this.pluginService, this);
                             });
                         }
-                        this._delegateAxisContainerEvent(product.getGroupGraphicItem());
                         if (this._unitText) {
                             const { x, y } = this.getLayoutStartPoint();
                             const pos = isXAxis(this._orient)
@@ -65846,7 +66026,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 },
                 items,
                 verticalLimitSize: this._verticalLimitSize,
-                verticalMinSize
+                verticalMinSize,
+                label: {
+                    overflowLimitLength: this._getLabelOverflowLimit(isX)
+                }
             };
             if (!ignoreGrid) {
                 attrs.grid = {
@@ -65990,6 +66173,35 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getNeedClearVRenderComponents() {
             return this._unitText ? [this._unitText] : [];
         }
+        _getLabelOverflowLimit(isX) {
+            var _a, _b;
+            if (isX && ((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.visible) !== false && ((_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.autoLimit) === true) {
+                const axesComponents = this._option.getComponentsByKey('axes');
+                const relativeRegions = this.getRegions();
+                const relativeAxes = axesComponents.filter(item => {
+                    const orient = item.getOrient();
+                    return ((orient === 'left' || orient === 'right') &&
+                        item.getRegions().some(region => relativeRegions.includes(region)));
+                });
+                let leftLimitLength = 0;
+                let rightLimitLength = 0;
+                const startX = this.getLayoutStartPoint().x;
+                const endX = startX + this.getLayoutRect().width;
+                relativeAxes.forEach(axis => {
+                    const relativeStartX = axis.getLayoutStartPoint().x;
+                    if (axis.getOrient() === 'left' && relativeStartX === startX) {
+                        const leftAxisWidth = axis.getLayoutRect().width;
+                        leftLimitLength = Math.max(leftLimitLength, leftAxisWidth);
+                    }
+                    else if (relativeStartX === endX) {
+                        const rightAxisWidth = axis.getLayoutRect().width;
+                        rightLimitLength = Math.max(rightLimitLength, rightAxisWidth);
+                    }
+                });
+                return { left: leftLimitLength, right: rightLimitLength };
+            }
+            return undefined;
+        }
     }
     CartesianAxis.type = ComponentTypeEnum.cartesianAxis;
     CartesianAxis.specKey = 'axes';
@@ -68091,13 +68303,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!this._backgroundMark) {
                 return;
             }
-            this._backgroundMark.compile();
-            (_a = this._backgroundMark
-                .getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                context: {
-                    model: this
-                }
-            }).layout(() => {
+            this._backgroundMark.compile({ context: { model: this } });
+            (_a = this._backgroundMark.getProduct()) === null || _a === void 0 ? void 0 : _a.layout(() => {
             });
         }
         compileRegions() {
@@ -68574,13 +68781,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             otherComponents.forEach(C => {
                 var _a;
-                (_a = C.getSpecInfo(chartSpec, chartSpecInfo)) === null || _a === void 0 ? void 0 : _a.forEach(info => {
+                (_a = (C.getSpecInfo ? C.getSpecInfo(chartSpec, chartSpecInfo) : getSpecInfo(chartSpec, C.specKey, C.type))) === null || _a === void 0 ? void 0 : _a.forEach(info => {
                     results.push(callbackfn(C, info, chartSpecInfo));
                 });
             });
-            (_c = tooltip === null || tooltip === void 0 ? void 0 : tooltip.getSpecInfo(chartSpec, chartSpecInfo)) === null || _c === void 0 ? void 0 : _c.forEach(info => {
-                results.push(callbackfn(tooltip, info, chartSpecInfo));
-            });
+            if (tooltip) {
+                (_c = getSpecInfo(chartSpec, tooltip.specKey, tooltip.type)) === null || _c === void 0 ? void 0 : _c.forEach(info => {
+                    results.push(callbackfn(tooltip, info, chartSpecInfo));
+                });
+            }
             return results;
         }
         transformSeriesSpec(spec) {
@@ -72270,15 +72479,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             ? (_c = series.getXAxisHelper()) === null || _c === void 0 ? void 0 : _c.isInverse()
             : (_d = series.getYAxisHelper()) === null || _d === void 0 ? void 0 : _d.isInverse();
         let position = originPosition;
-        if (isString$1(originPosition) && originPosition === 'outside') {
-            position = (data) => {
-                const { data: datum } = data;
+        position = (datum) => {
+            var _a;
+            const { data } = datum;
+            const labelPosition = (_a = (typeof labelSpec.position === 'function'
+                ? labelSpec.position(data)
+                : labelSpec.position)) !== null && _a !== void 0 ? _a : 'outside';
+            if (labelPosition === 'outside') {
                 const dataField = series.getMeasureField()[0];
                 const positionMap = { vertical: ['top', 'bottom'], horizontal: ['right', 'left'] };
-                const index = ((datum === null || datum === void 0 ? void 0 : datum[dataField]) >= 0 && isInverse) || ((datum === null || datum === void 0 ? void 0 : datum[dataField]) < 0 && !isInverse) ? 1 : 0;
+                const index = ((data === null || data === void 0 ? void 0 : data[dataField]) >= 0 && isInverse) || ((data === null || data === void 0 ? void 0 : data[dataField]) < 0 && !isInverse) ? 1 : 0;
                 return positionMap[direction][index];
-            };
-        }
+            }
+            return labelPosition;
+        };
         let overlap;
         if (labelSpec.overlap === false) {
             overlap = false;
@@ -73929,8 +74143,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isNil$1(angleValue) || isNil$1(radiusValue) || !this.angleAxisHelper || !this.radiusAxisHelper) {
                 return { x: Number.NaN, y: Number.NaN };
             }
-            const angle = this.angleAxisHelper.dataToPosition(array(angleValue));
             const radius = this.radiusAxisHelper.dataToPosition(array(radiusValue));
+            if (radius < 0) {
+                if (this._invalidType === 'break' || this._invalidType === 'link') {
+                    return { x: Number.NaN, y: Number.NaN };
+                }
+                else if (this._invalidType === 'zero') {
+                    return this.angleAxisHelper.center();
+                }
+            }
+            const angle = this.angleAxisHelper.dataToPosition(array(angleValue));
             return this.angleAxisHelper.coordToPoint({ angle, radius });
         }
         dataToPosition(datum, checkInViewData) {
@@ -74403,7 +74625,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         y: chartSpec === null || chartSpec === void 0 ? void 0 : chartSpec.centerY
                     }
                     : undefined,
-            outerRadius: (_f = (_e = (_d = spec.radius) !== null && _d !== void 0 ? _d : chartSpec.outerRadius) !== null && _e !== void 0 ? _e : chartSpec.radius) !== null && _f !== void 0 ? _f : POLAR_DEFAULT_RADIUS,
+            outerRadius: (_f = (_e = (_d = spec.outerRadius) !== null && _d !== void 0 ? _d : spec.radius) !== null && _e !== void 0 ? _e : chartSpec.outerRadius) !== null && _f !== void 0 ? _f : chartSpec.radius,
             layoutRadius: chartSpec.layoutRadius
         };
     };
@@ -74982,30 +75204,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._groupScales;
         }
         static getSpecInfo(chartSpec) {
-            const axesSpec = chartSpec[this.specKey];
-            if (!axesSpec) {
+            if (!chartSpec[this.specKey]) {
                 return null;
             }
-            if (!isArray$1(axesSpec)) {
-                if (!isValidPolarAxis(axesSpec)) {
-                    return null;
-                }
-                const { axisType, componentName, startAngle, endAngle, center, outerRadius, layoutRadius } = getPolarAxisInfo(axesSpec, chartSpec);
-                axesSpec.center = center;
-                axesSpec.startAngle = startAngle;
-                axesSpec.endAngle = endAngle;
-                axesSpec.outerRadius = outerRadius;
-                axesSpec.type = axisType;
-                axesSpec.layoutRadius = layoutRadius;
-                return [
-                    {
-                        spec: axesSpec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: componentName
-                    }
-                ];
-            }
+            const isArraySpec = isArray$1(chartSpec[this.specKey]);
+            const axesSpec = isArraySpec ? chartSpec[this.specKey] : [chartSpec[this.specKey]];
             const specInfos = [];
             let angleAxisIndex;
             let radiusAxisIndex;
@@ -75024,7 +75227,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 s.layoutRadius = layoutRadius;
                 const info = {
                     spec: s,
-                    specPath: [this.specKey, i],
+                    specPath: isArraySpec ? [this.specKey, i] : [this.specKey],
                     specInfoPath: ['component', this.specKey, i],
                     type: componentName
                 };
@@ -75130,17 +75333,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             return Object.assign(Object.assign({}, super._tickTransformOption()), { noDecimal: (_a = this._tick) === null || _a === void 0 ? void 0 : _a.noDecimals, startAngle: this.startAngle, labelOffset: getAxisLabelOffset(this._spec), getRadius: () => this.getOuterRadius(), inside: this._spec.inside });
         }
-        afterCompile() {
-            var _a;
-            const product = (_a = this._axisMark) === null || _a === void 0 ? void 0 : _a.getProduct();
-            if (product) {
-                product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                    if (this._isLayout === false) {
-                        this._delegateAxisContainerEvent(product.getGroupGraphicItem());
-                    }
-                });
-            }
-        }
         updateScaleRange() {
             const prevRange = this._scale.range();
             let newRange;
@@ -75226,29 +75418,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return polarToCartesian(center, point.radius, point.angle);
         }
         pointToCoord(point) {
-            const { x: centerX, y: centerY } = this.getCenter();
-            let dx = point.x - centerX;
-            let dy = point.y - centerY;
+            const center = this.getCenter();
             const startAngle = this._startAngle;
             const endAngle = this._endAngle;
-            const radius = Math.sqrt(dx * dx + dy * dy);
-            dx /= radius;
-            dy /= radius;
-            let radian = Math.atan2(dy, dx);
-            if (radian < startAngle) {
-                while (radian <= startAngle) {
-                    radian += Math.PI * 2;
-                }
-            }
-            if (radian > endAngle) {
-                while (radian >= endAngle) {
-                    radian -= Math.PI * 2;
-                }
-            }
-            return {
-                radius,
-                angle: radian
-            };
+            return cartesianToPolar(point, center, startAngle, endAngle);
         }
         getOuterRadius() {
             return this.computeLayoutOuterRadius();
@@ -75300,7 +75473,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 innerRadius, startAngle: this._startAngle, endAngle: this._endAngle, sides: ((_c = (_b = (_a = this._getRelatedAxis(this._option.radiusAxisIndex)) === null || _a === void 0 ? void 0 : _a.getSpec()) === null || _b === void 0 ? void 0 : _b.grid) === null || _c === void 0 ? void 0 : _c.smooth)
                     ? undefined
                     : this.getScale().domain().length });
-            const attrs = Object.assign(Object.assign({}, commonAttrs), { title: {
+            const attrs = Object.assign(Object.assign(Object.assign({}, commonAttrs), this.getRefLayoutRect()), { title: {
                     text: this._spec.title.text || this._dataFieldText
                 }, items, orient: 'angle' });
             if (this._spec.grid.visible) {
@@ -75605,23 +75778,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class PolarPointUpdate extends ACustomAnimate {
         constructor(from, to, duration, easing, params) {
             super(from, to, duration, easing, params);
-            const pointToCoord = this.params.pointToCoord;
-            const coordToPoint = this.params.coordToPoint;
-            if (!isFunction$1(pointToCoord) || !isFunction$1(coordToPoint)) {
+            this._center = to.center;
+            this._prevCenter = from.center;
+            if (!this._center || !this._prevCenter) {
                 this.valid = false;
             }
-            this._pointToCoord = pointToCoord;
-            this._coordToPoint = coordToPoint;
         }
         getEndProps() {
             if (this.valid === false) {
                 return {};
             }
-            return this._coordToPoint({ angle: this._toAngle, radius: this._toRadius });
+            return polarToCartesian(this._center, this._toRadius, this._toAngle);
         }
         onBind() {
-            const { angle: fromAngle, radius: fromRadius } = this._pointToCoord(this.from);
-            const { angle: toAngle, radius: toRadius } = this._pointToCoord(this.to);
+            const { angle: fromAngle, radius: fromRadius } = cartesianToPolar(this.from, this._prevCenter);
+            const { angle: toAngle, radius: toRadius } = cartesianToPolar(this.to, this._center);
             if (!isValidNumber$1(toAngle * toRadius)) {
                 this.valid = false;
             }
@@ -75643,12 +75814,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const { x, y } = this.getEndProps();
                 out.x = x;
                 out.y = y;
+                out.center = this._center;
             }
             else {
-                const { x, y } = this._coordToPoint({
-                    angle: this._fromAngle + (this._toAngle - this._fromAngle) * ratio,
-                    radius: this._fromRadius + (this._toRadius - this._fromRadius) * ratio
-                });
+                const { x, y } = polarToCartesian({
+                    x: this._prevCenter.x + (this._center.x - this._prevCenter.x) * ratio,
+                    y: this._prevCenter.y + (this._center.y - this._prevCenter.y) * ratio
+                }, this._fromRadius + (this._toRadius - this._fromRadius) * ratio, this._fromAngle + (this._toAngle - this._fromAngle) * ratio);
                 out.x = x;
                 out.y = y;
             }
@@ -75657,46 +75829,50 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class PolarTagPointsUpdate extends TagPointsUpdate {
         constructor(from, to, duration, easing, params) {
             super(from, to, duration, easing, params);
-            const pointToCoord = this.params.pointToCoord;
-            const coordToPoint = this.params.coordToPoint;
-            this._pointToCoord = pointToCoord;
-            this._coordToPoint = coordToPoint;
+            this._center = to.center;
+            this._prevCenter = from.center;
         }
         onUpdate(end, ratio, out) {
             this.points = this.points.map((point, index) => {
                 const newPoint = this.polarPointInterpolation(this.interpolatePoints[index][0], this.interpolatePoints[index][1], ratio);
+                if (end) {
+                    out.center = this._center;
+                }
                 newPoint.context = point.context;
                 return newPoint;
             });
             out.points = this.points;
         }
+        _interpolationSinglePoint(pointA, pointB, ratio) {
+            if (!isValidPoint(pointA) && !isValidPoint(pointB)) {
+                return pointB;
+            }
+            const polarPointA = cartesianToPolar(pointA, this._prevCenter);
+            const polarPointB = cartesianToPolar(pointB, this._center);
+            let angleA = normalizeAngle(polarPointA.angle);
+            let angleB = normalizeAngle(polarPointB.angle);
+            if (!isValidNumber$1(angleA) && isValidNumber$1(angleB)) {
+                angleA = angleB;
+            }
+            if (isValidNumber$1(angleA) && !isValidNumber$1(angleB)) {
+                angleB = angleA;
+            }
+            const angle = angleA + (angleB - angleA) * ratio;
+            const radius = polarPointA.radius + (polarPointB.radius - polarPointA.radius) * ratio;
+            return polarToCartesian({
+                x: this._prevCenter.x + (this._center.x - this._prevCenter.x) * ratio,
+                y: this._prevCenter.y + (this._center.y - this._prevCenter.y) * ratio
+            }, radius, angle);
+        }
         polarPointInterpolation(pointA, pointB, ratio) {
-            const polarPointA0 = this._pointToCoord(pointA);
-            const polarPointA1 = this._pointToCoord({ x: pointA.x1, y: pointA.y1 });
-            let angleA0 = normalizeAngle(polarPointA0.angle);
-            let angleA1 = normalizeAngle(polarPointA1.angle);
-            const polarPointB0 = this._pointToCoord(pointB);
-            const polarPointB1 = this._pointToCoord({ x: pointB.x1, y: pointB.y1 });
-            let angleB0 = normalizeAngle(polarPointB0.angle);
-            let angleB1 = normalizeAngle(polarPointB1.angle);
-            if (!isValidNumber$1(angleA0) && isValidNumber$1(angleB0)) {
-                angleA0 = angleB0;
-            }
-            if (isValidNumber$1(angleA0) && !isValidNumber$1(angleB0)) {
-                angleB0 = angleA0;
-            }
-            if (!isValidNumber$1(angleA1) && isValidNumber$1(angleB1)) {
-                angleA1 = angleB1;
-            }
-            if (isValidNumber$1(angleA1) && !isValidNumber$1(angleB1)) {
-                angleB1 = angleA1;
-            }
-            const angle0 = angleA0 + (angleB0 - angleA0) * ratio;
-            const radius0 = polarPointA0.radius + (polarPointB0.radius - polarPointA0.radius) * ratio;
-            const angle1 = angleA1 + (angleB1 - angleA1) * ratio;
-            const radius1 = polarPointA1.radius + (polarPointB1.radius - polarPointA1.radius) * ratio;
-            const { x, y } = this._coordToPoint({ angle: angle0, radius: radius0 });
-            const { x: x1, y: y1 } = this._coordToPoint({ angle: angle1, radius: radius1 });
+            const { x, y } = this._interpolationSinglePoint(pointA, pointB, ratio);
+            const { x: x1, y: y1 } = this._interpolationSinglePoint({
+                x: pointA.x1,
+                y: pointA.y1
+            }, {
+                x: pointB.x1,
+                y: pointB.y1
+            }, ratio);
             const point = new Point(x, y, x1, y1);
             point.defined = pointB.defined;
             return point;
@@ -75777,10 +75953,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 disappear: preset === 'clipIn' ? undefined : radarPresetAnimation(params, preset, 'out'),
                 update: [
                     {
-                        options: { excludeChannels: ['points', 'defined'] }
+                        options: { excludeChannels: ['points', 'defined', 'center'] }
                     },
                     {
-                        channel: ['points'],
+                        channel: ['points', 'center'],
                         custom: PolarTagPointsUpdate,
                         customParameters: params,
                         duration: DEFAULT_ANIMATION_CONFIG.update.duration,
@@ -75796,10 +75972,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             disappear: preset === 'clipIn' ? undefined : radarSymbolPresetAnimation(params, preset, 'out'),
             update: [
                 {
-                    options: { excludeChannels: ['x', 'y'] }
+                    options: { excludeChannels: ['x', 'y', 'center'] }
                 },
                 {
-                    channel: ['x', 'y'],
+                    channel: ['x', 'y', 'center'],
                     custom: PolarPointUpdate,
                     customParameters: params,
                     duration: DEFAULT_ANIMATION_CONFIG.update.duration,
@@ -75849,10 +76025,21 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initAreaMarkStyle();
             this.initLineMarkStyle();
             this.initSymbolMarkStyle();
+            [this._lineMark, this._symbolMark, this._areaMark].forEach(mark => {
+                if (mark) {
+                    this.setMarkStyle(mark, {
+                        center: () => {
+                            var _a;
+                            return (_a = this.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.center();
+                        }
+                    });
+                }
+            });
         }
         initAreaMark(progressive, isSeriesMark) {
             var _a, _b;
             this._areaMark = this._createMark(RadarSeries.mark.area, {
+                groupKey: this._seriesField,
                 progressive,
                 isSeriesMark,
                 customShape: (_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.customShape,
@@ -75919,9 +76106,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const rect = this.getLayoutRect();
                     return Math.min(rect.width, rect.height);
                 },
-                startAngle: isValid$1(this._spec.startAngle) ? degreeToRadian(this._spec.startAngle) : POLAR_START_RADIAN,
-                pointToCoord: (point) => { var _a; return (_a = this.angleAxisHelper) === null || _a === void 0 ? void 0 : _a.pointToCoord(point); },
-                coordToPoint: (coord) => this.angleAxisHelper.coordToPoint(coord)
+                startAngle: isValid$1(this._spec.startAngle) ? degreeToRadian(this._spec.startAngle) : POLAR_START_RADIAN
             };
             const appearPreset = ((_c = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset) !== null && _c !== void 0 ? _c : 'clipIn');
             if (appearPreset === 'clipIn') {
@@ -76124,14 +76309,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 level: TransformLevel.dotObjFlat
             }, false);
         }
-        setSeriesField(field) {
-            if (isValid$1(field)) {
-                this._seriesField = field;
-                this.getMarksInType(["line", "area"]).forEach(m => {
-                    m.setFacet(this._seriesField);
-                });
-            }
-        }
         getStatisticFields() {
             return [{ key: this._fieldY[0], operations: ['values'], customize: this._xDimensionStatisticsDomain }];
         }
@@ -77617,7 +77794,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._wordMark.getProduct().transform(wordCloudTransforms);
         }
         _getCommonTransformOptions() {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f;
             const { width, height } = this._region.getLayoutRect();
             const wordSpec = (_a = this._spec.word) !== null && _a !== void 0 ? _a : {};
             const wordStyleSpec = (_b = wordSpec.style) !== null && _b !== void 0 ? _b : {};
@@ -77637,13 +77814,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 fontSize: this._valueField ? { field: this._valueField } : this._fontSizeRange[0],
                 fontSizeRange: this._fontSizeRange === 'auto' ? null : this._fontSizeRange,
                 padding: (_e = (_d = this._spec.word) === null || _d === void 0 ? void 0 : _d.padding) !== null && _e !== void 0 ? _e : DEFAULT_FONT_PADDING,
-                fontFamily: (_g = (_f = this._spec.fontFamilyField) !== null && _f !== void 0 ? _f : wordStyleSpec.fontFamily) !== null && _g !== void 0 ? _g : this._defaultFontFamily,
-                fontWeight: this._spec.fontWeightField
+                fontFamily: isValid$1(this._spec.fontFamilyField)
+                    ? { field: this._spec.fontFamilyField }
+                    : (_f = wordStyleSpec.fontFamily) !== null && _f !== void 0 ? _f : this._defaultFontFamily,
+                fontWeight: isValid$1(this._spec.fontWeightField)
                     ? { field: this._spec.fontWeightField }
-                    : this._valueField
-                        ? this._calculateFontWeight
-                        : wordStyleSpec.fontWeight,
-                fontStyle: (_h = this._spec.fontStyleField) !== null && _h !== void 0 ? _h : wordStyleSpec.fontStyle
+                    : isValid$1(wordStyleSpec.fontWeight)
+                        ? wordStyleSpec.fontWeight
+                        : isValid$1(this._valueField)
+                            ? this._calculateFontWeight
+                            : 'normal',
+                fontStyle: isValid$1(this._spec.fontStyleField) ? { field: this._spec.fontStyleField } : wordStyleSpec.fontStyle
             };
         }
         _wordCloudTransformOption() {
@@ -77651,10 +77832,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return Object.assign(Object.assign({}, this._getCommonTransformOptions()), { layoutType: this._wordCloudConfig.layoutMode, rotate: this._rotateAngles, randomVisible: (_a = this._spec.random) !== null && _a !== void 0 ? _a : DEFAULT_RANDOM, clip: this._wordCloudConfig.drawOutOfBound === 'clip', shrink: this._wordCloudConfig.zoomToFit.shrink, enlarge: this._wordCloudConfig.zoomToFit.enlarge, minFontSize: this._wordCloudConfig.zoomToFit.fontSizeLimitMin, progressiveTime: this._wordCloudConfig.progressiveTime, progressiveStep: this._wordCloudConfig.progressiveStep, repeatFill: this._wordCloudConfig.zoomToFit.repeat });
         }
         _wordCloudShapeTransformOption() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f;
             const fillingWordStyleSpec = (_b = (_a = this._spec.fillingWord) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
             const wordCloudShapeConfig = (_c = this._wordCloudShapeConfig) !== null && _c !== void 0 ? _c : {};
-            return Object.assign(Object.assign(Object.assign({}, wordCloudShapeConfig), this._getCommonTransformOptions()), { rotateList: this._rotateAngles, fillingRotateList: wordCloudShapeConfig.fillingRotateAngles, fillingFontFamily: (_e = (_d = wordCloudShapeConfig.fillingFontFamilyField) !== null && _d !== void 0 ? _d : fillingWordStyleSpec.fontFamily) !== null && _e !== void 0 ? _e : this._defaultFontFamily, fillingPadding: (_g = (_f = this._spec.fillingWord) === null || _f === void 0 ? void 0 : _f.padding) !== null && _g !== void 0 ? _g : DEFAULT_FONT_PADDING, fillingFontStyle: (_h = wordCloudShapeConfig.fillingFontStyleField) !== null && _h !== void 0 ? _h : fillingWordStyleSpec.fontStyle, fillingFontWeight: (_j = wordCloudShapeConfig.fillingFontWeightField) !== null && _j !== void 0 ? _j : fillingWordStyleSpec.fontWeight });
+            return Object.assign(Object.assign(Object.assign({}, wordCloudShapeConfig), this._getCommonTransformOptions()), { rotateList: this._rotateAngles, fillingRotateList: wordCloudShapeConfig.fillingRotateAngles, fillingFontFamily: isValid$1(wordCloudShapeConfig.fillingFontFamilyField)
+                    ? { field: wordCloudShapeConfig.fillingFontFamilyField }
+                    : (_d = fillingWordStyleSpec.fontFamily) !== null && _d !== void 0 ? _d : this._defaultFontFamily, fillingPadding: (_f = (_e = this._spec.fillingWord) === null || _e === void 0 ? void 0 : _e.padding) !== null && _f !== void 0 ? _f : DEFAULT_FONT_PADDING, fillingFontStyle: isValid$1(wordCloudShapeConfig.fillingFontStyleField)
+                    ? { field: wordCloudShapeConfig.fillingFontStyleField }
+                    : fillingWordStyleSpec.fontStyle, fillingFontWeight: isValid$1(wordCloudShapeConfig.fillingFontWeightField)
+                    ? {
+                        field: wordCloudShapeConfig.fillingFontWeightField
+                    }
+                    : fillingWordStyleSpec.fontWeight });
         }
         getStatisticFields() {
             const fields = [];
@@ -77820,7 +78009,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             maxFailCount = Math.min(this.options.maxFailCount, this.originalData.length);
           for (; i < this.data.length && this.failCount < maxFailCount;) {
             const drawn = this.layoutWord(i);
-            if (curWordTryCount++, (drawn || curWordTryCount >= maxSingleWordTryCount) && (i++, curWordTryCount = 0, this.failCount = drawn ? 0 : this.failCount + 1), this.progressiveIndex = i, this.exceedTime()) break;
+            if (curWordTryCount++, (drawn || curWordTryCount > maxSingleWordTryCount) && (i++, curWordTryCount = 0, this.failCount = drawn ? 0 : this.failCount + 1), this.progressiveIndex = i, this.exceedTime()) break;
             i === this.data.length && this.failCount < maxFailCount && this.options.repeatFill && this.canRepeat() && (this.data = [...this.data, ...this.originalData.map(entry => Object.assign(Object.assign({}, entry), {
               isFill: !0
             }))], this.isTryRepeatFill = !0);
@@ -88891,35 +89080,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.name = ComponentTypeEnum.discreteLegend;
         }
         static getSpecInfo(chartSpec) {
-            const legendSpec = chartSpec[this.specKey];
-            if (!legendSpec) {
-                return undefined;
-            }
-            if (!isArray$1(legendSpec)) {
-                if (!legendSpec.type || legendSpec.type === 'discrete') {
-                    return [
-                        {
-                            spec: legendSpec,
-                            specPath: [this.specKey],
-                            specInfoPath: ['component', this.specKey, 0],
-                            type: ComponentTypeEnum.discreteLegend
-                        }
-                    ];
-                }
-                return undefined;
-            }
-            const specInfos = [];
-            legendSpec.forEach((s, i) => {
-                if (!s.type || s.type === 'discrete') {
-                    specInfos.push({
-                        spec: s,
-                        specPath: [this.specKey, i],
-                        specInfoPath: ['component', this.specKey, i],
-                        type: ComponentTypeEnum.discreteLegend
-                    });
-                }
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return !s.type || s.type === 'discrete';
             });
-            return specInfos;
         }
         init(option) {
             super.init(option);
@@ -89220,35 +89383,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     const SIZE = [2, 10];
     class ContinuousLegend extends BaseLegend {
         static getSpecInfo(chartSpec) {
-            const legendSpec = chartSpec[this.specKey];
-            if (!legendSpec) {
-                return undefined;
-            }
-            if (!isArray$1(legendSpec)) {
-                if (isContinuousLegend(legendSpec.type)) {
-                    return [
-                        {
-                            spec: legendSpec,
-                            specPath: [this.specKey],
-                            specInfoPath: ['component', this.specKey, 0],
-                            type: legendSpec.type === 'color' ? ComponentTypeEnum.colorLegend : ComponentTypeEnum.sizeLegend
-                        }
-                    ];
-                }
-                return undefined;
-            }
-            const specInfos = [];
-            legendSpec.forEach((s, i) => {
-                if (isContinuousLegend(s.type)) {
-                    specInfos.push({
-                        spec: s,
-                        specPath: [this.specKey, i],
-                        specInfoPath: ['component', this.specKey, i],
-                        type: s.type === 'color' ? ComponentTypeEnum.colorLegend : ComponentTypeEnum.sizeLegend
-                    });
-                }
+            const infos = getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return isContinuousLegend(s.type);
             });
-            return specInfos;
+            if (infos) {
+                infos.forEach(info => {
+                    info.type = info.spec.type === 'color' ? ComponentTypeEnum.colorLegend : ComponentTypeEnum.sizeLegend;
+                });
+            }
+            return infos;
         }
         constructor(spec, options) {
             super(spec, options);
@@ -90649,32 +90792,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return 1;
             };
         }
-        static getSpecInfo(chartSpec) {
-            const tooltipSpec = chartSpec[this.specKey];
-            if (!tooltipSpec) {
-                return null;
-            }
-            if (!isArray$1(tooltipSpec)) {
-                return [
-                    {
-                        spec: tooltipSpec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: ComponentTypeEnum.tooltip
-                    }
-                ];
-            }
-            const specInfos = [];
-            tooltipSpec.forEach((s, i) => {
-                specInfos.push({
-                    spec: s,
-                    specPath: [this.specKey, i],
-                    specInfoPath: ['component', this.specKey, i],
-                    type: ComponentTypeEnum.tooltip
-                });
-            });
-            return specInfos;
-        }
         isTooltipShown() {
             return this._isTooltipShown;
         }
@@ -91611,36 +91728,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class CartesianCrossHair extends BaseCrossHair {
         static getSpecInfo(chartSpec) {
-            const crosshairSpec = chartSpec[this.specKey];
-            if (isNil$1(crosshairSpec)) {
-                return undefined;
-            }
-            if (!isArray$1(crosshairSpec)) {
-                if ((crosshairSpec.xField && crosshairSpec.xField.visible !== false) ||
-                    (crosshairSpec.yField && crosshairSpec.yField.visible !== false)) {
-                    return [
-                        {
-                            spec: crosshairSpec,
-                            specPath: [this.specKey],
-                            specInfoPath: ['component', this.specKey, 0],
-                            type: ComponentTypeEnum.cartesianCrosshair
-                        }
-                    ];
-                }
-                return undefined;
-            }
-            const specInfos = [];
-            crosshairSpec.forEach((s, i) => {
-                if ((s.xField && s.xField.visible !== false) || (s.yField && s.yField.visible !== false)) {
-                    specInfos.push({
-                        spec: s,
-                        specPath: [this.specKey, i],
-                        specInfoPath: ['component', this.specKey, i],
-                        type: ComponentTypeEnum.cartesianCrosshair
-                    });
-                }
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return (s.xField && s.xField.visible !== false) || (s.yField && s.yField.visible !== false);
             });
-            return specInfos;
         }
         constructor(spec, options) {
             super(spec, options);
@@ -92107,36 +92197,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class PolarCrossHair extends BaseCrossHair {
         static getSpecInfo(chartSpec) {
-            const crosshairSpec = chartSpec[this.specKey];
-            if (isNil$1(crosshairSpec)) {
-                return undefined;
-            }
-            if (!isArray$1(crosshairSpec)) {
-                if ((crosshairSpec.categoryField && crosshairSpec.categoryField.visible !== false) ||
-                    (crosshairSpec.valueField && crosshairSpec.valueField.visible !== false)) {
-                    return [
-                        {
-                            spec: crosshairSpec,
-                            specPath: [this.specKey],
-                            specInfoPath: ['component', this.specKey, 0],
-                            type: ComponentTypeEnum.polarCrosshair
-                        }
-                    ];
-                }
-                return undefined;
-            }
-            const specInfos = [];
-            crosshairSpec.forEach((s, i) => {
-                if ((s.categoryField && s.categoryField.visible !== false) || (s.valueField && s.valueField.visible !== false)) {
-                    specInfos.push({
-                        spec: s,
-                        specPath: [this.specKey, i],
-                        specInfoPath: ['component', this.specKey, i],
-                        type: ComponentTypeEnum.polarCrosshair
-                    });
-                }
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return (s.categoryField && s.categoryField.visible !== false) || (s.valueField && s.valueField.visible !== false);
             });
-            return specInfos;
         }
         constructor(spec, options) {
             super(spec, options);
@@ -93248,32 +93311,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     class DataZoom extends DataFilterBaseComponent {
-        static getSpecInfo(chartSpec) {
-            const compSpec = chartSpec[this.specKey];
-            if (isNil$1(compSpec)) {
-                return undefined;
-            }
-            if (!isArray$1(compSpec)) {
-                return [
-                    {
-                        spec: compSpec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: ComponentTypeEnum.dataZoom
-                    }
-                ];
-            }
-            const specInfos = [];
-            compSpec.forEach((s, i) => {
-                specInfos.push({
-                    spec: s,
-                    specPath: [this.specKey, i],
-                    specInfoPath: ['component', this.specKey, i],
-                    type: ComponentTypeEnum.dataZoom
-                });
-            });
-            return specInfos;
-        }
         constructor(spec, options) {
             var _a;
             super(spec, options);
@@ -93625,32 +93662,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     class ScrollBar extends DataFilterBaseComponent {
-        static getSpecInfo(chartSpec) {
-            const compSpec = chartSpec[this.specKey];
-            if (isNil$1(compSpec)) {
-                return undefined;
-            }
-            if (!isArray$1(compSpec)) {
-                return [
-                    {
-                        spec: compSpec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: ComponentTypeEnum.scrollBar
-                    }
-                ];
-            }
-            const specInfos = [];
-            compSpec.forEach((s, i) => {
-                specInfos.push({
-                    spec: s,
-                    specPath: [this.specKey, i],
-                    specInfoPath: ['component', this.specKey, i],
-                    type: ComponentTypeEnum.scrollBar
-                });
-            });
-            return specInfos;
-        }
         constructor(spec, options) {
             var _a;
             super(spec, options);
@@ -93829,35 +93840,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._activeDatum = null;
         }
         static getSpecInfo(chartSpec) {
-            if (this.type !== Indicator.type) {
-                return null;
-            }
-            const indicatorSpec = chartSpec[this.specKey];
-            if (!isArray$1(indicatorSpec)) {
-                if (indicatorSpec.visible === false) {
-                    return [];
-                }
-                return [
-                    {
-                        spec: indicatorSpec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: ComponentTypeEnum.indicator
-                    }
-                ];
-            }
-            const specInfos = [];
-            indicatorSpec.forEach((s, i) => {
-                if (s && s.visible !== false) {
-                    specInfos.push({
-                        spec: s,
-                        specPath: [this.specKey, i],
-                        specInfoPath: ['component', this.specKey, i],
-                        type: ComponentTypeEnum.indicator
-                    });
-                }
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return s && s.visible !== false;
             });
-            return specInfos;
         }
         created() {
             super.created();
@@ -94754,34 +94739,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return 'cartesian';
         }
         static getSpecInfo(chartSpec) {
-            const markerSpec = chartSpec[this.specKey];
-            if (isEmpty(markerSpec)) {
-                return undefined;
-            }
-            if (!isArray$1(markerSpec) &&
-                markerSpec.visible !== false &&
-                this._getMarkerCoordinateType(markerSpec) === this.coordinateType) {
-                return [
-                    {
-                        spec: markerSpec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: this.type
-                    }
-                ];
-            }
-            const specInfos = [];
-            array(markerSpec).forEach((m, i) => {
-                if (m.visible !== false && this._getMarkerCoordinateType(m) === this.coordinateType) {
-                    specInfos.push({
-                        spec: m,
-                        specPath: [this.specKey, i],
-                        specInfoPath: ['component', this.specKey, i],
-                        type: this.type
-                    });
-                }
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return s.visible !== false && this._getMarkerCoordinateType(s) === this.coordinateType;
             });
-            return specInfos;
         }
         created() {
             super.created();
@@ -95449,32 +95409,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._layout && (this._layout.layoutOrient = this._orient);
         }
         static getSpecInfo(chartSpec) {
-            const titleSpec = chartSpec[this.specKey];
-            if (!titleSpec || titleSpec.visible === false) {
-                return null;
-            }
-            if (!isArray$1(titleSpec)) {
-                return [
-                    {
-                        spec: titleSpec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: ComponentTypeEnum.title
-                    }
-                ];
-            }
-            const specInfos = [];
-            titleSpec.forEach((s, i) => {
-                if (s.visible !== false) {
-                    specInfos.push({
-                        spec: s,
-                        specPath: [this.specKey, i],
-                        specInfoPath: ['component', this.specKey, i],
-                        type: ComponentTypeEnum.title
-                    });
-                }
+            return getSpecInfo(chartSpec, this.specKey, ComponentTypeEnum.title, (s) => {
+                return s.visible !== false;
             });
-            return specInfos;
         }
         onRender(ctx) {
         }
@@ -96084,20 +96021,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         set layoutOrient(v) {
             this._orient = v;
         }
-        static getSpecInfo(chartSpec) {
-            const playerSpec = chartSpec[this.specKey];
-            if (isNil$1(playerSpec)) {
-                return null;
-            }
-            return [
-                {
-                    spec: playerSpec,
-                    specPath: [this.specKey],
-                    specInfoPath: ['component', this.specKey, 0],
-                    type: ComponentTypeEnum.player
-                }
-            ];
-        }
         setAttrFromSpec() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             super.setAttrFromSpec();
@@ -96261,11 +96184,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getNeedClearVRenderComponents() {
             return [];
         }
-        _delegateLabelEvent(component) {
-            if (component.listenerCount('*') === 0) {
-                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
-            }
-        }
     }
     BaseLabelComponent.type = ComponentTypeEnum.label;
 
@@ -96376,18 +96294,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.event.off(HOOK_EVENT.AFTER_MARK_RENDER_END, enableAnimation);
             };
         }
-        afterCompile() {
-            this._labelComponentMap.forEach((info, component) => {
-                const product = component.getProduct();
-                if (product) {
-                    product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                        if (this._isLayout === false) {
-                            this._delegateLabelEvent(product.getGroupGraphicItem());
-                        }
-                    });
-                }
-            });
-        }
         _initTextMark() {
             if (!this._labelInfoMap) {
                 this._labelInfoMap = new Map();
@@ -96562,7 +96468,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         compileMarks() {
             this.getMarks().forEach(m => {
-                var _a;
                 const labelInfo = this._labelComponentMap.get(m)();
                 let group;
                 if (isArray$1(labelInfo)) {
@@ -96571,13 +96476,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 else {
                     group = labelInfo.series.getRegion().getGroupMark().getProduct();
                 }
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this,
-                        labelInfo
-                    }
-                });
+                m.compile({ group, context: { model: this, labelInfo } });
             });
         }
         getVRenderComponents() {
@@ -96636,6 +96535,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initTextMark();
             this._initLabelComponent();
         }
+        reInit(spec) {
+            super.reInit(spec);
+            this._initTextMark();
+        }
         _initTextMark() {
             var _a;
             const series = this._getSeries();
@@ -96671,18 +96574,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._marks.addMark(component);
             }
         }
-        afterCompile() {
-            this._marks.forEach((componentMark, index) => {
-                const product = componentMark.getProduct();
-                if (product) {
-                    product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                        if (this._isLayout === false) {
-                            this._delegateLabelEvent(product.getGroupGraphicItem());
-                        }
-                    });
-                }
-            });
-        }
         updateLayoutAttribute() {
             super.updateLayoutAttribute();
             const series = this._getSeries();
@@ -96724,14 +96615,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         compileMarks() {
             this.getMarks().forEach(m => {
-                var _a;
                 const group = this._regions[0].getGroupMark().getProduct();
-                m.compile({ group });
-                (_a = m.getProduct()) === null || _a === void 0 ? void 0 : _a.configure({
-                    context: {
-                        model: this
-                    }
-                });
+                m.compile({ group, context: { model: this } });
             });
         }
         getVRenderComponents() {
@@ -97076,18 +96961,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         static getSpecInfo(chartSpec) {
-            const brushSpec = chartSpec[this.specKey];
-            if (isNil$1(brushSpec) || brushSpec.visible === false) {
-                return undefined;
-            }
-            return [
-                {
-                    spec: brushSpec,
-                    specPath: [this.specKey],
-                    specInfoPath: ['component', this.specKey, 0],
-                    type: ComponentTypeEnum.brush
-                }
-            ];
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return s.visible !== false;
+            });
         }
         created() {
             super.created();
@@ -97606,30 +97482,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutZIndex = LayoutZIndex.CustomMark;
             this.layoutLevel = LayoutLevel.CustomMark;
         }
-        static getSpecInfo(chartSpec) {
-            const spec = chartSpec[this.specKey];
-            if (!spec) {
-                return null;
-            }
-            if (!isArray$1(spec)) {
-                return [
-                    {
-                        spec,
-                        specPath: [this.specKey],
-                        specInfoPath: ['component', this.specKey, 0],
-                        type: ComponentTypeEnum.customMark
-                    }
-                ];
-            }
-            return spec.map((specItem, i) => {
-                return {
-                    spec: specItem,
-                    specPath: [this.specKey, i],
-                    specInfoPath: ['component', this.specKey, i],
-                    type: ComponentTypeEnum.customMark
-                };
-            });
-        }
         created() {
             super.created();
             this.initMarks();
@@ -97673,7 +97525,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             const mark = this._createMark({
                 type: spec.type,
-                name: `${namePrefix}_${index}`
+                name: isValid$1(spec.name) ? `${spec.name}` : `${namePrefix}_${index}`
             }, {
                 skipBeforeLayouted: true,
                 attributeContext: this._getMarkAttributeContext(),
@@ -97683,6 +97535,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (!mark) {
                 return;
             }
+            if (isValid$1(spec.id)) {
+                mark.setUserId(spec.id);
+            }
             if (options.hasAnimation && spec.animation) {
                 const config = animationConfig({}, userAnimationConfig(spec.type, spec, this._markAttributeContext));
                 mark.setAnimationConfig(config);
@@ -97731,21 +97586,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onRender(ctx) {
         }
-        afterCompile() {
-            this.getMarks().forEach(mark => {
-                const product = mark.getProduct();
-                if (product) {
-                    product.addEventListener(HOOK_EVENT.AFTER_ELEMENT_ENCODE, () => {
-                        if (this._isLayout === false) {
-                            const component = product.getGroupGraphicItem();
-                            if ((component === null || component === void 0 ? void 0 : component.listenerCount('*')) === 0) {
-                                component.addEventListener('*', ((event, type) => this._delegateEvent(component, event, type)));
-                            }
-                        }
-                    });
-                }
-            });
-        }
         _getMarkAttributeContext() {
             return {
                 vchart: this._option.globalInstance,
@@ -97973,18 +97813,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._activeDatum = [];
         }
         static getSpecInfo(chartSpec) {
-            const labelSpec = chartSpec[this.specKey];
-            if (!labelSpec || !labelSpec.visible || isValid$1(labelSpec.series)) {
-                return null;
-            }
-            return [
-                {
-                    spec: labelSpec,
-                    specPath: [this.specKey],
-                    specInfoPath: ['component', this.specKey, 0],
-                    type: ComponentTypeEnum.mapLabel
-                }
-            ];
+            return getSpecInfo(chartSpec, this.specKey, this.type, (s) => {
+                return s.visible && isValid$1(s.seriesId);
+            });
         }
         setAttrFromSpec() {
             var _a, _b, _c, _d;
@@ -101157,9 +100988,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             };
         }
-        afterCompile() {
-            super.afterCompile();
-        }
         _beforeInit() {
             if (this._dataSet) {
                 registerDataSetInstanceTransform(this._dataSet, 'stackSplit', stackSplit);