@visactor/vchart 1.7.0-alpha.1 → 1.7.0

package/build/index.js

@@ -707,12 +707,26 @@
         return val[val.length - 1];
       }
     }
-    function maxInArray(arr) {
-      if (arr && isArray$1(arr)) return arr.reduce((prev, curr) => Math.max(prev, curr), -1 / 0);
-    }
-    function minInArray(arr) {
-      if (arr && isArray$1(arr)) return arr.reduce((prev, curr) => Math.min(prev, curr), 1 / 0);
-    }
+    const maxInArray = (arr, compareFn) => {
+      var _a;
+      if (0 === arr.length) return;
+      let max = arr[0];
+      for (let i = 1; i < arr.length; i++) {
+        const value = arr[i];
+        (null !== (_a = null == compareFn ? void 0 : compareFn(value, max)) && void 0 !== _a ? _a : value - max > 0) && (max = value);
+      }
+      return max;
+    };
+    const minInArray = (arr, compareFn) => {
+      var _a;
+      if (0 === arr.length) return;
+      let min = arr[0];
+      for (let i = 1; i < arr.length; i++) {
+        const value = arr[i];
+        (null !== (_a = null == compareFn ? void 0 : compareFn(value, min)) && void 0 !== _a ? _a : value - min < 0) && (min = value);
+      }
+      return min;
+    };
     function arrayEqual(a, b) {
       if (!isArray$1(a) || !isArray$1(b)) return !1;
       if (a.length !== b.length) return !1;
@@ -991,6 +1005,10 @@
       return isNil$1(val) ? new Date(NaN) : new Date(Math.round(val));
     }
 
+    function substitute(str, o) {
+      return str && o ? str.replace(/\\?\{([^{}]+)\}/g, (match, name) => "\\" === match.charAt(0) ? match.slice(1) : void 0 === o[name] ? "" : o[name]) : str;
+    }
+
     const epsilon$1 = 1e-12;
     const pi$1 = Math.PI;
     const halfPi$2 = pi$1 / 2;
@@ -999,8 +1017,8 @@
     const abs$1 = Math.abs;
     const atan2$1 = Math.atan2;
     const cos$1 = Math.cos;
-    const max$2 = Math.max;
-    const min$2 = Math.min;
+    const max$1 = Math.max;
+    const min$1 = Math.min;
     const sin$1 = Math.sin;
     const sqrt$3 = Math.sqrt;
     const pow$1 = Math.pow;
@@ -7282,7 +7300,9 @@
                 r0 = r1 - wholeLength;
               this._wholeRange = [r0, r1];
             }
-            "rangeFactorStart" === changeProperty && this._rangeFactorStart + rangeFactorSize <= 1 ? this._rangeFactorEnd = this._rangeFactorStart + rangeFactorSize : "rangeFactorEnd" === changeProperty && this._rangeFactorEnd - rangeFactorSize >= 0 ? this._rangeFactorStart = this._rangeFactorEnd - rangeFactorSize : this._rangeFactorStart + rangeFactorSize <= 1 ? this._rangeFactorEnd = this._rangeFactorStart + rangeFactorSize : this._rangeFactorEnd - rangeFactorSize >= 0 ? this._rangeFactorStart = this._rangeFactorEnd - rangeFactorSize : (this._rangeFactorStart = 0, this._rangeFactorEnd = rangeFactorSize);
+            const canAlignStart = this._rangeFactorStart + rangeFactorSize <= 1,
+              canAlignEnd = this._rangeFactorEnd - rangeFactorSize >= 0;
+            "rangeFactorStart" === changeProperty && canAlignStart ? this._rangeFactorEnd = this._rangeFactorStart + rangeFactorSize : "rangeFactorEnd" === changeProperty && canAlignEnd ? this._rangeFactorStart = this._rangeFactorEnd - rangeFactorSize : range[0] <= range[1] ? canAlignStart ? this._rangeFactorEnd = this._rangeFactorStart + rangeFactorSize : canAlignEnd ? this._rangeFactorStart = this._rangeFactorEnd - rangeFactorSize : (this._rangeFactorStart = 0, this._rangeFactorEnd = rangeFactorSize) : canAlignEnd ? this._rangeFactorStart = this._rangeFactorEnd - rangeFactorSize : canAlignStart ? this._rangeFactorEnd = this._rangeFactorStart + rangeFactorSize : (this._rangeFactorStart = 1 - rangeFactorSize, this._rangeFactorEnd = 1);
           } else this._rangeFactorStart = 0, this._rangeFactorEnd = rangeFactorSize, this._wholeRange = [range[0], range[0] + wholeLength];
           return this._wholeRange;
         }
@@ -10366,8 +10386,8 @@
         return direction === Direction$2.ROW ? abs$1(this.p0.x - this.p3.x) : direction === Direction$2.COLUMN ? abs$1(this.p0.y - this.p3.y) : 0;
       }
       getAngleAt(t) {
-        const minT = max$2(t - .01, 0),
-          maxT = min$2(t + .01, 1),
+        const minT = max$1(t - .01, 0),
+          maxT = min$1(t + .01, 1),
           minP = this.getPointAt(minT),
           maxP = this.getPointAt(maxT);
         return atan2$1(maxP.y - minP.y, maxP.x - minP.x);
@@ -12745,7 +12765,7 @@
       return "mouse" === pointerType || "pen" === pointerType;
     }
     class EventManager {
-      constructor(root) {
+      constructor(root, config) {
         this.dispatch = new EventEmitter(), this.mappingState = {
           trackingData: {}
         }, this.eventPool = new Map(), this.onPointerDown = (from, target) => {
@@ -12811,6 +12831,7 @@
           }
           this.cursor = "";
         }, this.onPointerUp = (from, target) => {
+          var _a;
           if (!(from instanceof FederatedPointerEvent)) return void console.warn("EventManager cannot map a non-pointer event as a pointer event");
           const now = clock.now(),
             e = this.createPointerEvent(from, from.type, target);
@@ -12840,7 +12861,7 @@
               timeStamp: now
             });
             const clickHistory = trackingData.clicksByButton[from.button];
-            clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < 200 ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && this.dispatchEvent(clickEvent, "tap"), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
+            clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < (null !== (_a = this._config.clickInterval) && void 0 !== _a ? _a : 200) ? ++clickHistory.clickCount : clickHistory.clickCount = 1, clickHistory.target = clickEvent.target, clickHistory.timeStamp = now, clickEvent.detail = clickHistory.clickCount, isMouseLike(clickEvent.pointerType) ? (this.dispatchEvent(clickEvent, "click"), 2 === clickHistory.clickCount && this.dispatchEvent(clickEvent, "dblclick")) : "touch" === clickEvent.pointerType && this.dispatchEvent(clickEvent, "tap"), this.dispatchEvent(clickEvent, "pointertap"), this.freeEvent(clickEvent);
           }
           this.freeEvent(e);
         }, this.onPointerUpOutside = (from, target) => {
@@ -12858,7 +12879,9 @@
           if (!(from instanceof FederatedWheelEvent)) return void console.warn("EventManager cannot map a non-wheel event as a wheel event");
           const wheelEvent = this.createWheelEvent(from, target);
           this.dispatchEvent(wheelEvent), this.freeEvent(wheelEvent);
-        }, this.rootTarget = root, this.mappingTable = {}, this.addEventMapping("pointerdown", this.onPointerDown), this.addEventMapping("pointermove", this.onPointerMove), this.addEventMapping("pointerout", this.onPointerOut), this.addEventMapping("pointerleave", this.onPointerOut), this.addEventMapping("pointerover", this.onPointerOver), this.addEventMapping("pointerup", this.onPointerUp), this.addEventMapping("pointerupoutside", this.onPointerUpOutside), this.addEventMapping("wheel", this.onWheel);
+        }, this.rootTarget = root, this.mappingTable = {}, this._config = Object.assign({
+          clickInterval: 200
+        }, config), this.addEventMapping("pointerdown", this.onPointerDown), this.addEventMapping("pointermove", this.onPointerMove), this.addEventMapping("pointerout", this.onPointerOut), this.addEventMapping("pointerleave", this.onPointerOut), this.addEventMapping("pointerover", this.onPointerOver), this.addEventMapping("pointerup", this.onPointerUp), this.addEventMapping("pointerupoutside", this.onPointerUpOutside), this.addEventMapping("wheel", this.onWheel);
       }
       addEventMapping(type, fn) {
         this.mappingTable[type] || (this.mappingTable[type] = []), this.mappingTable[type].push({
@@ -13042,9 +13065,12 @@
           rootNode: rootNode,
           global: global,
           viewport: viewport,
-          autoPreventDefault = !1
+          autoPreventDefault = !1,
+          clickInterval: clickInterval
         } = params;
-        this.manager = new EventManager(rootNode), this.globalObj = global, this.supportsPointerEvents = global.supportsPointerEvents, this.supportsTouchEvents = global.supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
+        this.manager = new EventManager(rootNode, {
+          clickInterval: clickInterval
+        }), this.globalObj = global, this.supportsPointerEvents = global.supportsPointerEvents, this.supportsTouchEvents = global.supportsTouchEvents, this.supportsMouseEvents = global.supportsMouseEvents, this.applyStyles = global.applyStyles, this.autoPreventDefault = autoPreventDefault, this.eventsAdded = !1, this.viewport = viewport, this.rootPointerEvent = new FederatedPointerEvent(), this.rootWheelEvent = new FederatedWheelEvent(), this.cursorStyles = {
           default: "inherit",
           pointer: "pointer"
         }, this.resolution = resolution, this.setTargetElement(targetElement);
@@ -13543,7 +13569,7 @@
       afterAll(list) {
         let maxT = -1 / 0;
         return list.forEach(a => {
-          maxT = max$2(a.getDuration(), maxT);
+          maxT = max$1(a.getDuration(), maxT);
         }), this._startTime = maxT, this;
       }
       parallel(animate) {
@@ -15321,7 +15347,7 @@
 
     const tempMatrix = new Matrix(),
       tempBounds$1 = new AABBBounds();
-    const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "lineCap", "lineJoin", "miterLimit", "scaleX", "scaleY", "angle", "anchor"];
+    const GRAPHIC_UPDATE_TAG_KEY = ["lineWidth", "scaleX", "scaleY", "angle", "anchor", "visible"];
     const tempConstantXYKey = ["x", "y"],
       tempConstantScaleXYKey = ["scaleX", "scaleY"],
       tempConstantAngleKey = ["angle"],
@@ -16892,19 +16918,19 @@
               by = yore - oc[1],
               kc = 1 / sin$1(acos$1((ax * bx + ay * by) / (sqrt$3(ax * ax + ay * ay) * sqrt$3(bx * bx + by * by))) / 2),
               lc = sqrt$3(oc[0] * oc[0] + oc[1] * oc[1]);
-            limitedIcr = min$2(maxInnerCornerRadius, (innerRadius - lc) / (kc - 1)), limitedOcr = min$2(maxOuterCornerRadius, (outerRadius - lc) / (kc + 1));
+            limitedIcr = min$1(maxInnerCornerRadius, (innerRadius - lc) / (kc - 1)), limitedOcr = min$1(maxOuterCornerRadius, (outerRadius - lc) / (kc + 1));
           }
         }
         if (outerDeltaAngle < .001) partStroke && (partStroke[3] || partStroke[1]) && context.moveTo(cx + xors, cy + yors), collapsedToLine = !0;else if (limitedOcr > epsilon$1) {
-          const cornerRadiusStart = min$2(outerCornerRadiusStart, limitedOcr),
-            cornerRadiusEnd = min$2(outerCornerRadiusEnd, limitedOcr),
+          const cornerRadiusStart = min$1(outerCornerRadiusStart, limitedOcr),
+            cornerRadiusEnd = min$1(outerCornerRadiusEnd, limitedOcr),
             t0 = cornerTangents(xirs, yirs, xors, yors, outerRadius, cornerRadiusStart, Number(clockwise)),
             t1 = cornerTangents(xore, yore, xire, yire, outerRadius, cornerRadiusEnd, Number(clockwise));
           limitedOcr < maxOuterCornerRadius && cornerRadiusStart === cornerRadiusEnd ? !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), context.arc(cx + t0.cx, cy + t0.cy, limitedOcr, atan2$1(t0.y01, t0.x01), atan2$1(t1.y01, t1.x01), !clockwise)) : context.moveTo(cx + t0.cx + limitedOcr * cos$1(atan2$1(t1.y01, t1.x01)), cy + t0.cy + limitedOcr * sin$1(atan2$1(t1.y01, t1.x01))) : !partStroke || partStroke[0] ? (context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), cornerRadiusStart > 0 && context.arc(cx + t0.cx, cy + t0.cy, cornerRadiusStart, atan2$1(t0.y01, t0.x01), atan2$1(t0.y11, t0.x11), !clockwise), context.arc(cx, cy, outerRadius, atan2$1(t0.cy + t0.y11, t0.cx + t0.x11), atan2$1(t1.cy + t1.y11, t1.cx + t1.x11), !clockwise), cornerRadiusEnd > 0 && context.arc(cx + t1.cx, cy + t1.cy, cornerRadiusEnd, atan2$1(t1.y11, t1.x11), atan2$1(t1.y01, t1.x01), !clockwise)) : cornerRadiusEnd > 0 ? context.moveTo(cx + t1.cx + cornerRadiusEnd * cos$1(atan2$1(t1.y01, t1.x01)), cy + t1.cy + cornerRadiusEnd * sin$1(atan2$1(t1.y01, t1.x01))) : context.moveTo(cx + xore, cy + outerRadius * sin$1(outerEndAngle));
         } else !partStroke || partStroke[0] ? (context.moveTo(cx + xors, cy + yors), context.arc(cx, cy, outerRadius, outerStartAngle, outerEndAngle, !clockwise)) : context.moveTo(cx + outerRadius * cos$1(outerEndAngle), cy + outerRadius * sin$1(outerEndAngle));
         if (!(innerRadius > epsilon$1) || innerDeltaAngle < .001) !partStroke || partStroke[1] ? context.lineTo(cx + xire, cy + yire) : context.moveTo(cx + xire, cy + yire), collapsedToLine = !0;else if (limitedIcr > epsilon$1) {
-          const cornerRadiusStart = min$2(innerCornerRadiusStart, limitedIcr),
-            cornerRadiusEnd = min$2(innerCornerRadiusEnd, limitedIcr),
+          const cornerRadiusStart = min$1(innerCornerRadiusStart, limitedIcr),
+            cornerRadiusEnd = min$1(innerCornerRadiusEnd, limitedIcr),
             t0 = cornerTangents(xire, yire, xore, yore, innerRadius, -cornerRadiusEnd, Number(clockwise)),
             t1 = cornerTangents(xors, yors, xirs, yirs, innerRadius, -cornerRadiusStart, Number(clockwise));
           if (!partStroke || partStroke[1] ? context.lineTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01) : context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), limitedIcr < maxInnerCornerRadius && cornerRadiusStart === cornerRadiusEnd) {
@@ -17582,7 +17608,7 @@
         if (width = 0, !this.shouldUpdateShape() && this.cache) {
           this.cache.verticalList.forEach(item => {
             const w = item.reduce((a, b) => a + b.width, 0);
-            width = max$2(w, width);
+            width = max$1(w, width);
           });
           const dx = textDrawOffsetX(textAlign, width),
             height = this.cache.verticalList.length * lineHeight,
@@ -17618,7 +17644,7 @@
           });
         }), this.cache.verticalList = verticalLists, this.clearUpdateShapeTag(), this.cache.verticalList.forEach(item => {
           const w = item.reduce((a, b) => a + b.width, 0);
-          width = max$2(w, width);
+          width = max$1(w, width);
         });
         const dx = textDrawOffsetX(textAlign, width),
           height = this.cache.verticalList.length * lineHeight,
@@ -18310,9 +18336,7 @@
             cacheList = [];
           path.forEach(item => {
             const cache = new CustomPath2D().fromString(item.d),
-              attribute = {
-                fill: "black"
-              };
+              attribute = {};
             SVG_PARSE_ATTRIBUTE_MAP_KEYS.forEach(k => {
               item[k] && (attribute[SVG_PARSE_ATTRIBUTE_MAP[k]] = item[k]);
             }), cacheList.push({
@@ -18322,13 +18346,13 @@
           });
           const width = b.width(),
             height = b.height(),
-            scale = 1 / max$2(width, height);
+            scale = 1 / max$1(width, height);
           return cacheList.forEach(cache => cache.path.transform(0, 0, scale, scale)), this._parsedPath = new CustomSymbolClass(symbolType, cacheList, !0), Symbol.userSymbolMap[symbolType] = this._parsedPath, this._parsedPath;
         }
         const cache = new CustomPath2D().fromString(symbolType),
           width = cache.bounds.width(),
           height = cache.bounds.height(),
-          scale = 1 / max$2(width, height);
+          scale = 1 / max$1(width, height);
         return cache.transform(0, 0, scale, scale), this._parsedPath = new CustomSymbolClass(symbolType, cache), Symbol.userSymbolMap[symbolType] = this._parsedPath, this._parsedPath;
       }
       doUpdateAABBBounds(full) {
@@ -18510,7 +18534,7 @@
           {
             width = rectTheme.width,
             height = rectTheme.width,
-            length = min$2(rectTheme.width, rectTheme.height)
+            length = min$1(rectTheme.width, rectTheme.height)
           } = this.attribute;
         for (let i = 0; i < CUBE_VERTICES.length; i++) {
           const v = CUBE_VERTICES[i];
@@ -19229,7 +19253,7 @@
       doUpdateFrameCache() {
         var _a;
         const {
-            textConfig: textConfig,
+            textConfig = [],
             maxWidth: maxWidth,
             maxHeight: maxHeight,
             width: width,
@@ -19737,9 +19761,9 @@
             if (kList[i] === kList[j]) {
               find = !0;
               const d1 = PointService.distancePP(pointsMap[i].p, pointsMap[i + 1].p);
-              pointsMap[i].d = d1, pointsMap[i + 1].d = d1, maxD = max$2(maxD, d1);
+              pointsMap[i].d = d1, pointsMap[i + 1].d = d1, maxD = max$1(maxD, d1);
               const d2 = PointService.distancePP(pointsMap[j].p, pointsMap[j + 1].p);
-              pointsMap[j].d = d2, pointsMap[j + 1].d = d2, maxD = max$2(maxD, d2);
+              pointsMap[j].d = d2, pointsMap[j + 1].d = d2, maxD = max$1(maxD, d2);
             }
             if (find) break;
           }
@@ -20145,6 +20169,7 @@
         return renderCommandList(path.commandList, boundsContext, 0, 0), !0;
       }
       updateRectAABBBounds(attribute, rectTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, rectTheme, aabbBounds, graphic)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds, graphic)) {
           const {
             width = rectTheme.width,
@@ -20175,11 +20200,12 @@
         return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, groupTheme, !1, graphic), aabbBounds;
       }
       updateGlyphAABBBounds(attribute, theme, aabbBounds, graphic) {
-        return graphic.getSubGraphic().forEach(node => {
+        return this._validCheck(attribute, theme, aabbBounds, graphic) ? (graphic.getSubGraphic().forEach(node => {
           aabbBounds.union(node.AABBBounds);
-        }), aabbBounds;
+        }), aabbBounds) : aabbBounds;
       }
       updateRichTextAABBBounds(attribute, richtextTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, richtextTheme, aabbBounds, graphic)) return aabbBounds;
         if (!graphic) return aabbBounds;
         const {
           width = richtextTheme.width,
@@ -20227,6 +20253,7 @@
         return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, graphic), aabbBounds;
       }
       updateTextAABBBounds(attribute, textTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, textTheme, aabbBounds, graphic)) return aabbBounds;
         if (!graphic) return aabbBounds;
         const {
           text = textTheme.text
@@ -20248,6 +20275,7 @@
         return this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix), aabbBounds;
       }
       updatePathAABBBounds(attribute, pathTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, pathTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || this.updatePathAABBBoundsImprecise(attribute, pathTheme, aabbBounds, graphic);
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -20292,6 +20320,7 @@
         return tb1.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), tb2.setValue(aabbBounds.x1, aabbBounds.y1, aabbBounds.x2, aabbBounds.y2), this.transformAABBBounds(attribute, aabbBounds, arcTheme, !1, graphic), aabbBounds;
       }
       updatePolygonAABBBounds(attribute, polygonTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, polygonTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || this.updatePolygonAABBBoundsImprecise(attribute, polygonTheme, aabbBounds, graphic);
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -20310,6 +20339,7 @@
         }), aabbBounds;
       }
       updateLineAABBBounds(attribute, lineTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, lineTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (attribute.segments ? this.updateLineAABBBoundsBySegments(attribute, lineTheme, aabbBounds, graphic) : this.updateLineAABBBoundsByPoints(attribute, lineTheme, aabbBounds, graphic));
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -20340,6 +20370,7 @@
         }), b;
       }
       updateAreaAABBBounds(attribute, areaTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, areaTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (attribute.segments ? this.updateAreaAABBBoundsBySegments(attribute, areaTheme, aabbBounds, graphic) : this.updateAreaAABBBoundsByPoints(attribute, areaTheme, aabbBounds, graphic));
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -20372,6 +20403,7 @@
         }), b;
       }
       updateCircleAABBBounds(attribute, circleTheme, aabbBounds, full, graphic) {
+        if (!this._validCheck(attribute, circleTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (full ? this.updateCircleAABBBoundsImprecise(attribute, circleTheme, aabbBounds, graphic) : this.updateCircleAABBBoundsAccurate(attribute, circleTheme, aabbBounds, graphic));
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -20394,6 +20426,7 @@
         return endAngle - startAngle > pi2 - epsilon$1 ? aabbBounds.set(-radius, -radius, radius, radius) : circleBounds(startAngle, endAngle, radius, aabbBounds), aabbBounds;
       }
       updateArcAABBBounds(attribute, arcTheme, aabbBounds, full, graphic) {
+        if (!this._validCheck(attribute, arcTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (full ? this.updateArcAABBBoundsImprecise(attribute, arcTheme, aabbBounds, graphic) : this.updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds, graphic));
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -20431,6 +20464,7 @@
         return outerRadius <= epsilon$1 ? aabbBounds.set(0, 0, 0, 0) : Math.abs(endAngle - startAngle) > pi2 - epsilon$1 ? aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius) : (circleBounds(startAngle, endAngle, outerRadius, aabbBounds), circleBounds(startAngle, endAngle, innerRadius, aabbBounds)), aabbBounds;
       }
       updateSymbolAABBBounds(attribute, symbolTheme, aabbBounds, full, graphic) {
+        if (!this._validCheck(attribute, symbolTheme, aabbBounds, graphic)) return aabbBounds;
         this.updatePathProxyAABBBounds(aabbBounds, graphic) || (full ? this.updateSymbolAABBBoundsImprecise(attribute, symbolTheme, aabbBounds, graphic) : this.updateSymbolAABBBoundsAccurate(attribute, symbolTheme, aabbBounds, graphic));
         const tb1 = this.tempAABBBounds1,
           tb2 = this.tempAABBBounds2;
@@ -20460,6 +20494,7 @@
         return graphic.getParsedPath().bounds(size, aabbBounds), aabbBounds;
       }
       updateImageAABBBounds(attribute, imageTheme, aabbBounds, graphic) {
+        if (!this._validCheck(attribute, imageTheme, aabbBounds, graphic)) return aabbBounds;
         if (!this.updatePathProxyAABBBounds(aabbBounds, graphic)) {
           const {
             width = imageTheme.width,
@@ -20498,6 +20533,14 @@
         }
         this.combindShadowAABBBounds(aabbBounds, graphic), transformBoundsWithMatrix(aabbBounds, aabbBounds, graphic.transMatrix);
       }
+      _validCheck(attribute, theme, aabbBounds, graphic) {
+        if (!graphic) return !0;
+        if (!graphic.valid) return aabbBounds.clear(), !1;
+        const {
+          visible = theme.visible
+        } = attribute;
+        return !!visible || (aabbBounds.clear(), !1);
+      }
     };
     DefaultGraphicService = __decorate$1B([injectable(), __param$P(0, inject(GraphicCreator)), __param$P(1, inject(ContributionProvider)), __param$P(1, named(RectBoundsContribution)), __param$P(2, inject(ContributionProvider)), __param$P(2, named(SymbolBoundsContribution)), __param$P(3, inject(ContributionProvider)), __param$P(3, named(CircleBoundsContribution)), __param$P(4, inject(ContributionProvider)), __param$P(4, named(ArcBoundsContribution)), __param$P(5, inject(ContributionProvider)), __param$P(5, named(PathBoundsContribution)), __metadata$13("design:paramtypes", [Object, Object, Object, Object, Object, Object])], DefaultGraphicService);
 
@@ -20815,12 +20858,12 @@
               by = yore - oc[1],
               kc = 1 / sin$1(acos$1((ax * bx + ay * by) / (sqrt$3(ax * ax + ay * ay) * sqrt$3(bx * bx + by * by))) / 2),
               lc = sqrt$3(oc[0] * oc[0] + oc[1] * oc[1]);
-            limitedIcr = min$2(maxInnerCornerRadius, (innerRadius - lc) / (kc - 1)), limitedOcr = min$2(maxOuterCornerRadius, (outerRadius - lc) / (kc + 1));
+            limitedIcr = min$1(maxInnerCornerRadius, (innerRadius - lc) / (kc - 1)), limitedOcr = min$1(maxOuterCornerRadius, (outerRadius - lc) / (kc + 1));
           }
         }
         if (limitedOcr > epsilon$1) {
-          const cornerRadiusStart = min$2(outerCornerRadiusStart, limitedOcr),
-            cornerRadiusEnd = min$2(outerCornerRadiusEnd, limitedOcr),
+          const cornerRadiusStart = min$1(outerCornerRadiusStart, limitedOcr),
+            cornerRadiusEnd = min$1(outerCornerRadiusEnd, limitedOcr),
             t0 = cornerTangents(xirs, yirs, xors, yors, outerRadius, cornerRadiusStart, Number(clockwise)),
             t1 = cornerTangents(xore, yore, xire, yire, outerRadius, cornerRadiusEnd, Number(clockwise));
           if (limitedOcr < maxOuterCornerRadius && cornerRadiusStart === cornerRadiusEnd) context.moveTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), context.arc(cx + t0.cx, cy + t0.cy, limitedOcr, atan2$1(t0.y01, t0.x01), atan2$1(t1.y01, t1.x01), !clockwise);else {
@@ -20830,8 +20873,8 @@
           }
         } else context.moveTo(cx + xors, cy + yors);
         if (!(innerRadius > epsilon$1) || innerDeltaAngle < .001) context.lineTo(cx + xire, cy + yire), collapsedToLine = !0;else if (limitedIcr > epsilon$1) {
-          const cornerRadiusStart = min$2(innerCornerRadiusStart, limitedIcr),
-            cornerRadiusEnd = min$2(innerCornerRadiusEnd, limitedIcr),
+          const cornerRadiusStart = min$1(innerCornerRadiusStart, limitedIcr),
+            cornerRadiusEnd = min$1(innerCornerRadiusEnd, limitedIcr),
             t0 = cornerTangents(xire, yire, xore, yore, innerRadius, -cornerRadiusEnd, Number(clockwise)),
             t1 = cornerTangents(xors, yors, xirs, yirs, innerRadius, -cornerRadiusStart, Number(clockwise));
           if (context.lineTo(cx + t0.cx + t0.x01, cy + t0.cy + t0.y01), limitedIcr < maxInnerCornerRadius && cornerRadiusStart === cornerRadiusEnd) {
@@ -21048,7 +21091,7 @@
             needMoveTo = !0;
             continue;
           }
-          needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min$2(_p, 1), params), needMoveTo = !1;
+          needMoveTo && path.moveTo(curve.p0.x + offsetX, curve.p0.y + offsetY, offsetZ), drawSegItem$1(path, curve, min$1(_p, 1), params), needMoveTo = !1;
         }
       }
     }
@@ -21229,7 +21272,7 @@
               if (skip) return;
               const curSegLength = cache.getLength(),
                 _cr = (totalDrawLength - drawedLengthUntilLast) / curSegLength;
-              drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, segments[index], [lineAttribute, line.attribute], min$2(_cr, 1), clipRangeByDimension, x, y, line, fillCb, strokeCb));
+              drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, !!fill, !!stroke, fillOpacity, strokeOpacity, segments[index], [lineAttribute, line.attribute], min$1(_cr, 1), clipRangeByDimension, x, y, line, fillCb, strokeCb));
             });
           }
         } else this.drawSegmentItem(context, line.cache, !!fill, !!stroke, fillOpacity, strokeOpacity, line.attribute, lineAttribute, clipRange, clipRangeByDimension, x, y, line, fillCb, strokeCb);
@@ -21515,7 +21558,7 @@
               if (skip) return;
               const curSegLength = cache.top.getLength(),
                 _cr = (totalDrawLength - drawedLengthUntilLast) / curSegLength;
-              drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], min$2(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb));
+              drawedLengthUntilLast += curSegLength, _cr > 0 && (skip = this.drawSegmentItem(context, cache, doFill, fillOpacity, doStroke, strokeOpacity, segments[index], [areaAttribute, area.attribute], min$1(_cr, 1), x, y, z, area, drawContext, fillCb, strokeCb));
             });
           }
         } else this.drawSegmentItem(context, area.cacheArea, doFill, fillOpacity, doStroke, strokeOpacity, area.attribute, areaAttribute, clipRange, x, y, z, area, drawContext, fillCb, strokeCb);
@@ -21795,10 +21838,20 @@
           const p = context.project(x, y, z),
             camera = context.camera;
           context.camera = null, !1 === parsedPath.draw(context, size, p.x, p.y, void 0, (p, a) => {
-            a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY), context.stroke()));
+            var _a, _b, _c;
+            if (symbol._parsedPath.svgCache) {
+              const obj = Object.assign({}, a);
+              obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.fill) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
+            }
+            a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
           }) && context.closePath(), context.camera = camera;
         } else !1 === parsedPath.draw(context, size, x, y, z, (p, a) => {
-          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY), context.stroke()));
+          var _a, _b, _c;
+          if (symbol._parsedPath.svgCache) {
+            const obj = Object.assign({}, a);
+            obj.fill = null !== (_a = a.fill) && void 0 !== _a ? _a : symbol.attribute.fill, obj.opacity = null !== (_b = a.opacity) && void 0 !== _b ? _b : symbol.attribute.opacity, obj.fillOpacity = symbol.attribute.fillOpacity, obj.stroke = null !== (_c = a.stroke) && void 0 !== _c ? _c : symbol.attribute.stroke, a = obj;
+          }
+          a.fill && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : (context.setCommonStyle(symbol, a, originX - x, originY - y, symbolAttribute), context.fill())), a.stroke && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : (context.setStrokeStyle(symbol, a, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke()));
         }) && context.closePath();
         context.setShadowBlendStyle && context.setShadowBlendStyle(symbol, symbol.attribute, symbolAttribute), this.beforeRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb), doFill && !parsedPath.isSvg && (fillCb ? fillCb(context, symbol.attribute, symbolAttribute) : fVisible && (context.setCommonStyle(symbol, symbol.attribute, originX - x, originY - y, symbolAttribute), context.fill())), doStroke && !parsedPath.isSvg && (strokeCb ? strokeCb(context, symbol.attribute, symbolAttribute) : sVisible && (context.setStrokeStyle(symbol, symbol.attribute, (originX - x) / scaleX, (originY - y) / scaleY, symbolAttribute), context.stroke())), this.afterRenderStep(symbol, context, x, y, doFill, doStroke, fVisible, sVisible, symbolAttribute, drawContext, fillCb, strokeCb);
       }
@@ -21904,7 +21957,7 @@
             let totalW = 0;
             verticalList.forEach(verticalData => {
               const _w = verticalData.reduce((a, b) => a + (b.width || 0), 0);
-              totalW = max$2(_w, totalW);
+              totalW = max$1(_w, totalW);
             });
             let offsetY = 0,
               offsetX = 0;
@@ -22172,7 +22225,7 @@
           let repeat = 0;
           if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
             const pattern = context.createPattern(res.data, repeatStr[repeat]);
-            context.fillStyle = pattern, context.fillRect(x, y, width, height);
+            context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
           } else context.drawImage(res.data, x, y, width, height);
           needRestore && context.restore();
         }
@@ -23169,7 +23222,7 @@
               graphic.add(g);
             });
           } else result = pickerService.pickGroup(graphic, point, params.parentMatrix, pickParams);
-          return context.camera = null, pickParams.in3dInterceptor = !1, result;
+          return context.camera = null, pickParams.in3dInterceptor = !1, context.restore(), result;
         }
         return context.restore(), null;
       }
@@ -25262,7 +25315,7 @@
       }
       computeColor(normal, color) {
         const lightDir = this.formatedDir,
-          brightness = min$2(max$2((normal[0] * lightDir[0] + normal[1] * lightDir[1] + normal[2] * lightDir[2]) * (1 - this.ambient / 2), 0) + this.ambient, 1);
+          brightness = min$1(max$1((normal[0] * lightDir[0] + normal[1] * lightDir[1] + normal[2] * lightDir[2]) * (1 - this.ambient / 2), 0) + this.ambient, 1);
         let colorArray;
         colorArray = isString$1(color) ? ColorStore.Get(color, ColorType.Color1) : color;
         const lightColorArray = this.colorRgb;
@@ -25474,7 +25527,7 @@
           canvasId: params.canvas
         } : {
           main: !0
-        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, this.global.supportEvent && (this.eventSystem = new EventSystem({
+        })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, this.global.supportEvent && (this.eventSystem = new EventSystem(Object.assign({
           targetElement: this.window,
           resolution: this.window.dpr || this.global.devicePixelRatio,
           rootNode: this,
@@ -25494,7 +25547,7 @@
               return this.viewBox.height();
             }
           }
-        })), params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), this.optmize(params.optimize), this._background && isString$1(this._background) && this.setAttributes({
+        }, params.event))), params.autoRender && this.enableAutoRender(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), this._beforeRender = params.beforeRender, this._afterRender = params.afterRender, this.ticker = params.ticker || defaultTicker, this.supportInteractiveLayer = !1 !== params.interactiveLayer, this.timeline = new DefaultTimeline(), this.ticker.addTimeline(this.timeline), this.timeline.pause(), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
           background: this._background
         });
       }
@@ -26598,8 +26651,8 @@
         scaleTicks = scale.ticks(count);
       } else if (op.sampling) {
         const fontSize = (null !== (_a = op.labelStyle.fontSize) && void 0 !== _a ? _a : 12) + 2,
-          rangeStart = Math.min(...range),
-          rangeEnd = Math.max(...range);
+          rangeStart = minInArray(range),
+          rangeEnd = maxInArray(range);
         if (domain.length <= rangeSize / fontSize) {
           const incrementUnit = (rangeEnd - rangeStart) / domain.length,
             labelBoundsList = getOneDimensionalLabelBounds(scale, domain, op, isHorizontal),
@@ -26699,8 +26752,8 @@
         const domain = scale.domain(),
           range = scale.range(),
           labelBoundsList = getPolarAngleLabelBounds(scale, domain, op),
-          rangeStart = Math.min(...range),
-          rangeEnd = Math.max(...range),
+          rangeStart = minInArray(range),
+          rangeEnd = maxInArray(range),
           incrementUnit = Math.abs(rangeEnd - rangeStart) * (radius + labelOffset) / domain.length,
           {
             step: step,
@@ -26800,7 +26853,7 @@
     function outOfBounds(bounds, x, y) {
         return bounds.x1 > x || bounds.x2 < x || bounds.y1 > y || bounds.y2 < y;
     }
-    function min$1(data, field) {
+    function min(data, field) {
         const dataArray = [];
         data.forEach(d => {
             const value = +d[field];
@@ -26813,7 +26866,7 @@
         }
         return minInArray(dataArray);
     }
-    function max$1(data, field) {
+    function max(data, field) {
         const dataArray = [];
         data.forEach(d => {
             const value = +d[field];
@@ -26867,8 +26920,8 @@
     }
     function regression(data, fieldX, fieldY) {
         const { predict } = regressionLinear(data, datum => datum[fieldX], datum => datum[fieldY]);
-        const x1 = min$1(data, fieldX);
-        const x2 = max$1(data, fieldX);
+        const x1 = min(data, fieldX);
+        const x2 = max(data, fieldX);
         const predict1 = predict(x1);
         const predict2 = predict(x2);
         return [
@@ -27214,7 +27267,7 @@
 
     const newTokenToLegacyToken = {
         primaryFontColor: 'titleFontColor',
-        secondaryFontColor: 'labelFontColor',
+        tertiaryFontColor: 'labelFontColor',
         axisLabelFontColor: 'axisFontColor',
         axisMarkerFontColor: 'labelReverseFontColor',
         dataZoomHandleStrokeColor: 'dataZoomHandlerStrokeColor',
@@ -27227,7 +27280,7 @@
     };
     const legacyTokenToNewToken = {
         titleFontColor: 'primaryFontColor',
-        labelFontColor: 'secondaryFontColor',
+        labelFontColor: 'tertiaryFontColor',
         axisFontColor: 'axisLabelFontColor',
         labelReverseFontColor: 'axisMarkerFontColor',
         dataZoomHandlerStrokeColor: 'dataZoomHandleStrokeColor',
@@ -28256,6 +28309,7 @@
     const DefaultAnimationStartTime = 0;
     const DefaultAnimationDuration = 1e3;
     const DefaultAnimationDelay = 0;
+    const DefaultAnimationDelayAfter = 0;
     const DefaultAnimationLoop = !1;
     const DefaultAnimationOneByOne = !1;
     const DefaultAnimationEasing = "quintInOut";
@@ -28642,7 +28696,7 @@
           path2d = null !== (_b = pathNode.attribute.path) && void 0 !== _b ? _b : new CustomPath2D();
         let x, y;
         path2d.clear();
-        const maxSize = isNumber$2(size) ? size : max$2(size[0], size[1]);
+        const maxSize = isNumber$2(size) ? size : max$1(size[0], size[1]);
         for (let i = 0, len = points.length; i < len; i += 4) x = points[i], y = points[i + 1], path2d.arc(x, y, maxSize / 2, 0, 2 * Math.PI), path2d.closePath();
         const pathAttrs = Object.assign({}, this.attribute, {
           path: path2d,
@@ -28732,7 +28786,7 @@
         }
       }],
       [GrammarMarkType.line]: [{
-        channels: ["x", "y", "defined", "enableSegments"],
+        channels: ["x", "y", "defined"],
         transform: (graphicAttributes, nextAttrs, storedAttrs) => {
           graphicAttributes.x = 0, graphicAttributes.y = 0;
         }
@@ -28897,11 +28951,11 @@
       initGraphicItem() {
         let attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         if (this.graphicItem) return;
-        const attrs = Object.assign({}, attributes);
-        this.graphicItem = this.mark.addGraphicItem(attrs, this.groupKey), this.graphicItem && (this.graphicItem[BridgeElementKey] = this, this.mark.markType !== GrammarMarkType.component && (this.graphicItem.onBeforeAttributeUpdate = attributes => {
+        const attrTransforms = this.mark.getAttributeTransforms();
+        this.graphicItem = this.mark.addGraphicItem(attrTransforms ? {} : attributes, this.groupKey), this.graphicItem && (this.graphicItem[BridgeElementKey] = this, attrTransforms && (this.graphicItem.onBeforeAttributeUpdate = attributes => {
           if (!this.mark) return attributes;
-          return transformAttributes(this.mark.getAttributeTransforms(), attributes, this);
-        }, this.graphicItem.setAttributes(this.graphicItem.attribute)), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes)));
+          return transformAttributes(attrTransforms, attributes, this);
+        }, this.graphicItem.setAttributes(attributes)), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes)));
       }
       updateGraphicItem(config) {
         if (!this.graphicItem) return;
@@ -28956,14 +29010,13 @@
         this.states = newStateValues, !isCollectionMark && isStateChanged && this.diffState === DiffState.unChange && (this.diffState = DiffState.update);
       }
       encodeGraphic(attrs) {
-        var _a, _b;
-        this.coordinateTransformEncode(this.items), !isNil$1(null == attrs ? void 0 : attrs.enableSegments) && (null === (_b = null === (_a = this.items) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.nextAttrs) && (this.items[0].nextAttrs.enableSegments = attrs.enableSegments);
+        this.coordinateTransformEncode(this.items);
         const graphicAttributes = this.transformElementItems(this.items, this.mark.markType);
         attrs && Object.assign(graphicAttributes, attrs), this.graphicItem ? (this.graphicItem.clearStates(), this.graphicItem.states = {}, this.graphicItem.stateProxy = null, this.applyGraphicAttributes(graphicAttributes)) : this.initGraphicItem(graphicAttributes), this.diffState !== DiffState.enter && this.diffState !== DiffState.update || !this.states.length || this.useStates(this.states), this.mark.markType === GrammarMarkType.shape && (this.graphicItem.datum = this.items[0].datum), this.items.forEach(item => {
           item.nextAttrs = {};
-        }), this._setCutomizedShape();
+        }), this._setCustomizedShape();
       }
-      _setCutomizedShape() {
+      _setCustomizedShape() {
         var _a;
         if (!this.graphicItem) return;
         const setCustomizedShape = null === (_a = this.mark.getSpec()) || void 0 === _a ? void 0 : _a.setCustomizedShape;
@@ -28976,7 +29029,7 @@
           updateEncoder = encoders[BuiltInEncodeNames.update],
           enterEncoder = encoders[BuiltInEncodeNames.enter],
           exitEncoder = encoders[BuiltInEncodeNames.exit],
-          onlyFullEncodeFirst = this.mark.isLargeMode();
+          onlyFullEncodeFirst = this.mark.isLargeMode() || isCollectionMark && !this.mark.getSpec().enableSegments;
         this.diffState === DiffState.enter ? (enterEncoder && invokeEncoderToItems(this, items, enterEncoder, parameters, onlyFullEncodeFirst), updateEncoder && invokeEncoderToItems(this, items, updateEncoder, parameters, onlyFullEncodeFirst)) : this.diffState === DiffState.update ? ((isCollectionMark && enterEncoder || isReentered) && invokeEncoderToItems(this, items, enterEncoder, parameters, onlyFullEncodeFirst), updateEncoder && invokeEncoderToItems(this, items, updateEncoder, parameters, onlyFullEncodeFirst)) : this.diffState === DiffState.exit && exitEncoder && (isReentered && invokeEncoderToItems(this, items, enterEncoder, parameters, onlyFullEncodeFirst), invokeEncoderToItems(this, items, exitEncoder, parameters, onlyFullEncodeFirst));
       }
       coordinateTransformEncode(items) {
@@ -29031,14 +29084,14 @@
         return diffResult;
       }
       transformElementItems(items, markType, computePoints) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         const item = items[0];
         if (!item.nextAttrs || 0 === Object.keys(item.nextAttrs).length) return {};
         let nextAttrs = null == item ? void 0 : item.nextAttrs;
         if (items && items.length && isNil$1(null === (_a = item.nextAttrs) || void 0 === _a ? void 0 : _a.points) && (!0 === computePoints || isValidPointsChannel(Object.keys(item.nextAttrs), this.mark.markType)) && isPointsMarkType(markType)) {
           const lastPoints = this.getGraphicAttribute("points", !1),
             lastSegments = this.getGraphicAttribute("segments", !1),
-            enableSegments = null !== (_b = item.nextAttrs.enableSegments) && void 0 !== _b ? _b : this.getGraphicAttribute("enableSegments", !1),
+            enableSegments = this.mark.getSpec().enableSegments,
             itemNextAttrs = items.map(item => item.nextAttrs),
             isProgressive = this.mark.isProgressive();
           if (nextAttrs = Object.assign({}, nextAttrs), delete nextAttrs.x, delete nextAttrs.y, markType === GrammarMarkType.line || markType === GrammarMarkType.area) {
@@ -29047,7 +29100,7 @@
               const points = linePoints && 0 !== linePoints.length ? linePoints : getLinePointsFromSegments(lastSegments),
                 segments = getLineSegmentConfigs(itemNextAttrs, points, this);
               segments ? (nextAttrs.segments = segments, nextAttrs.points = null) : (nextAttrs.segments = null, nextAttrs.points = points);
-            } else isProgressive ? nextAttrs.segments = (null !== (_e = null === (_d = null === (_c = this.graphicItem) || void 0 === _c ? void 0 : _c.attribute) || void 0 === _d ? void 0 : _d.segments) && void 0 !== _e ? _e : []).concat([{
+            } else isProgressive ? nextAttrs.segments = (null !== (_d = null === (_c = null === (_b = this.graphicItem) || void 0 === _b ? void 0 : _b.attribute) || void 0 === _c ? void 0 : _c.segments) && void 0 !== _d ? _d : []).concat([{
               points: linePoints
             }]) : (nextAttrs.points = linePoints, nextAttrs.segments = null);
           } else markType === GrammarMarkType.largeRects ? nextAttrs.points = getLargeRectsPoints(items, !0, lastPoints) : markType === GrammarMarkType.largeSymbols && (nextAttrs.points = getLargeSymbolsPoints(items, !0, lastPoints));
@@ -29449,18 +29502,22 @@
       {
         Color: Color
       } = ColorUtil;
-    function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors) {
+    function labelSmartInvert(foregroundColorOrigin, backgroundColorOrogin, textType, contrastRatiosThreshold, alternativeColors, mode) {
       if ("string" != typeof foregroundColorOrigin || "string" != typeof backgroundColorOrogin) return foregroundColorOrigin;
       const foregroundColor = new Color(foregroundColorOrigin).toHex(),
         backgroundColor = new Color(backgroundColorOrogin).toHex();
-      return contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold) ? foregroundColor : improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors);
+      return contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, mode) ? foregroundColor : improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode);
     }
-    function improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors) {
+    function improveContrastReverse(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode) {
       const alternativeColorPalletes = [];
       alternativeColors && (alternativeColors instanceof Array ? alternativeColorPalletes.push(...alternativeColors) : alternativeColorPalletes.push(alternativeColors)), alternativeColorPalletes.push(...defaultAlternativeColors);
-      for (const alternativeColor of alternativeColorPalletes) if (foregroundColor !== alternativeColor && contrastAccessibilityChecker(alternativeColor, backgroundColor, textType, contrastRatiosThreshold)) return alternativeColor;
+      for (const alternativeColor of alternativeColorPalletes) if (foregroundColor !== alternativeColor && contrastAccessibilityChecker(alternativeColor, backgroundColor, textType, contrastRatiosThreshold, mode)) return alternativeColor;
     }
-    function contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold) {
+    function contrastAccessibilityChecker(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, mode) {
+      if ("lightness" === mode) {
+        const backgroundColorLightness = Color.getColorBrightness(new Color(backgroundColor));
+        return Color.getColorBrightness(new Color(foregroundColor)) < .5 ? backgroundColorLightness >= .5 : backgroundColorLightness < .5;
+      }
       return contrastRatiosThreshold ? contrastRatios(foregroundColor, backgroundColor) > contrastRatiosThreshold : "largeText" === textType ? contrastRatios(foregroundColor, backgroundColor) > 3 : contrastRatios(foregroundColor, backgroundColor) > 4.5;
     }
     function contrastRatios(foregroundColor, backgroundColor) {
@@ -29534,6 +29591,12 @@
       [StateValue.hover]: {},
       [StateValue.hoverReverse]: {}
     };
+    const DEFAULT_HTML_TEXT_SPEC = {
+      container: "",
+      width: 30,
+      height: 30,
+      style: {}
+    };
 
     const initTextMeasure$1 = (textSpec, option, useNaiveCanvas) => new TextMeasure(Object.assign({
       defaultFontParams: {
@@ -29580,7 +29643,7 @@
         super(merge$1({}, Tag.defaultAttributes, attributes)), this.name = "tag";
       }
       render() {
-        var _a;
+        var _a, _b, _c;
         const {
             text = "",
             textStyle = {},
@@ -29591,7 +29654,8 @@
             maxWidth: maxWidth,
             padding = 4,
             visible: visible,
-            state: state
+            state: state,
+            type: type
           } = this.attribute,
           parsedPadding = normalizePadding$1(padding),
           group = this.createOrUpdateChild("tag-content", {
@@ -29621,46 +29685,97 @@
             y: maxSize / 2
           }), "symbol"), isEmpty(null == state ? void 0 : state.shape) || (symbol.states = state.shape), shapeVisible && (symbolPlaceWidth = maxSize + space);
         }
-        tagWidth += symbolPlaceWidth, textX += symbolPlaceWidth;
-        const textAttrs = Object.assign(Object.assign({
-          text: text,
-          visible: isValid$1(text) && !1 !== visible,
-          lineHeight: null == textStyle ? void 0 : textStyle.fontSize
-        }, textStyle), {
-          x: textX,
-          y: 0
-        });
-        isNil$1(textAttrs.lineHeight) && (textAttrs.lineHeight = textAttrs.fontSize);
-        const textShape = group.createOrUpdateChild("tag-text", textAttrs, "text");
-        isEmpty(null == state ? void 0 : state.text) || (textShape.states = state.text);
-        const textBounds = measureTextSize(textAttrs.text, textStyle),
-          textWidth = textBounds.width,
-          textHeight = textBounds.height;
-        tagWidth += textWidth;
-        const size = null !== (_a = shape.size) && void 0 !== _a ? _a : 10,
-          maxSize = isNumber$2(size) ? size : Math.max(size[0], size[1]);
-        tagHeight += Math.max(textHeight, (null == shape ? void 0 : shape.visible) ? maxSize : 0);
-        const {
-          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;
-        "center" === textAlign ? (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2)) : "right" === textAlign || "end" === textAlign ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : "left" !== textAlign && "start" !== textAlign || group.setAttribute("x", parsedPadding[3]), "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$7(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");
-          isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+        let textShape;
+        if (tagWidth += symbolPlaceWidth, textX += symbolPlaceWidth, "rich" === type) {
+          const richTextAttrs = Object.assign(Object.assign({
+            textConfig: text,
+            visible: isValid$1(text) && !1 !== visible
+          }, textStyle), {
+            x: textX,
+            y: 0,
+            width: null !== (_a = textStyle.width) && void 0 !== _a ? _a : 0,
+            height: null !== (_b = textStyle.height) && void 0 !== _b ? _b : 0
+          });
+          textShape = group.createOrUpdateChild("tag-text", richTextAttrs, "richtext");
+          const {
+              visible: bgVisible
+            } = panel,
+            backgroundStyle = __rest$7(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,
+              y: textShape.AABBBounds.y1,
+              width: textShape.AABBBounds.width(),
+              height: textShape.AABBBounds.height()
+            }), "rect");
+            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+          }
+        } else if ("html" === type) {
+          const richTextAttrs = Object.assign(Object.assign({
+            textConfig: [],
+            visible: isValid$1(text) && !1 !== visible,
+            html: Object.assign(Object.assign({
+              dom: text
+            }, DEFAULT_HTML_TEXT_SPEC), textStyle)
+          }, textStyle), {
+            x: textX,
+            y: 0
+          });
+          textShape = group.createOrUpdateChild("tag-text", richTextAttrs, "richtext");
+          const {
+              visible: bgVisible
+            } = panel,
+            backgroundStyle = __rest$7(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,
+              y: textShape.AABBBounds.y1,
+              width: textShape.AABBBounds.width(),
+              height: textShape.AABBBounds.height()
+            }), "rect");
+            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+          }
+        } else {
+          const textAttrs = Object.assign(Object.assign({
+            text: text,
+            visible: isValid$1(text) && !1 !== visible,
+            lineHeight: null == textStyle ? void 0 : textStyle.fontSize
+          }, textStyle), {
+            x: textX,
+            y: 0
+          });
+          isNil$1(textAttrs.lineHeight) && (textAttrs.lineHeight = textStyle.fontSize), textShape = group.createOrUpdateChild("tag-text", textAttrs, "text"), isEmpty(null == state ? void 0 : state.text) || (textShape.states = state.text);
+          const textBounds = measureTextSize(textAttrs.text, textStyle),
+            textWidth = textBounds.width,
+            textHeight = textBounds.height;
+          tagWidth += textWidth;
+          const size = null !== (_c = shape.size) && void 0 !== _c ? _c : 10,
+            maxSize = isNumber$2(size) ? size : Math.max(size[0], size[1]);
+          tagHeight += Math.max(textHeight, (null == shape ? void 0 : shape.visible) ? maxSize : 0);
+          const {
+            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;
+          "center" === textAlign ? (x -= tagWidth / 2, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth / 2), group.setAttribute("x", -symbolPlaceWidth / 2)) : "right" === textAlign || "end" === textAlign ? (x -= tagWidth, symbol && symbol.setAttribute("x", (symbol.attribute.x || 0) - textWidth), group.setAttribute("x", -parsedPadding[1] - symbolPlaceWidth)) : "left" !== textAlign && "start" !== textAlign || group.setAttribute("x", parsedPadding[3]), "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$7(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");
+            isEmpty(null == state ? void 0 : state.panel) || (bgRect.states = state.panel);
+          }
         }
       }
     }
@@ -29757,7 +29872,7 @@
           contentHeight = contentBounds.height(),
           contentWidth = contentBounds.width();
         contentVisible && (height += contentHeight);
-        let popTipWidth = max$2(titleWidth + parsedPadding[1] + parsedPadding[3], contentWidth + parsedPadding[1] + parsedPadding[3]);
+        let popTipWidth = max$1(titleWidth + parsedPadding[1] + parsedPadding[3], contentWidth + parsedPadding[1] + parsedPadding[3]);
         popTipWidth > maxWidth ? popTipWidth = maxWidth : popTipWidth < minWidth && (popTipWidth = minWidth);
         let poptipHeight = parsedPadding[0] + parsedPadding[2] + height;
         const {
@@ -30833,6 +30948,19 @@
         state && !isEmpty(state) && (target.states = state);
       }
       _createLabelText(attributes) {
+        var _a, _b;
+        if ("rich" === attributes.textType) {
+          attributes.textConfig = attributes.text, attributes.width = null !== (_a = attributes.width) && void 0 !== _a ? _a : 0, attributes.height = null !== (_b = attributes.height) && void 0 !== _b ? _b : 0;
+          const text = createRichText(attributes);
+          return this._bindEvent(text), this._setStatesOfText(text), text;
+        }
+        if ("html" === attributes.textType) {
+          attributes.textConfig = [], attributes.html = Object.assign(Object.assign({
+            dom: attributes.text
+          }, DEFAULT_HTML_TEXT_SPEC), attributes);
+          const text = createRichText(attributes);
+          return this._bindEvent(text), this._setStatesOfText(text), text;
+        }
         const text = createText(attributes);
         return this._bindEvent(text), this._setStatesOfText(text), text;
       }
@@ -30889,11 +31017,12 @@
             }, textStyle), textData),
             text = this._createLabelText(labelAttribute),
             textBounds = this.getGraphicBounds(text),
-            graphicBounds = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(textData.id)) : this.getGraphicBounds(baseMark, {
+            actualPosition = isFunction$1(position) ? position(textData) : position,
+            graphicBounds = this._isCollectionBase ? this.getGraphicBounds(null, this._idToPoint.get(textData.id), actualPosition) : this.getGraphicBounds(baseMark, {
               x: textData.x,
               y: textData.y
-            }),
-            textLocation = this.labeling(textBounds, graphicBounds, isFunction$1(position) ? position(textData) : position, offset);
+            }, actualPosition),
+            textLocation = this.labeling(textBounds, graphicBounds, actualPosition, offset);
           textLocation && (labelAttribute.x = textLocation.x, labelAttribute.y = textLocation.y, text.setAttributes(textLocation)), labels.push(text);
         }
         return labels;
@@ -30960,7 +31089,12 @@
               dx = 0,
               dy = 0
             } = clampText(text, bmpTool.width, bmpTool.height);
-            if ((0 !== dx || 0 !== dy) && canPlace(bmpTool, bitmap, {
+            if (0 === dx && 0 === dy) {
+              if (canPlace(bmpTool, bitmap, text.AABBBounds)) {
+                bitmap.setRange(boundToRange(bmpTool, text.AABBBounds, !0)), result.push(text);
+                continue;
+              }
+            } else if (canPlace(bmpTool, bitmap, {
               x1: text.AABBBounds.x1 + dx,
               x2: text.AABBBounds.x2 + dx,
               y1: text.AABBBounds.y1 + dy,
@@ -31120,7 +31254,8 @@
           {
             textType: textType,
             contrastRatiosThreshold: contrastRatiosThreshold,
-            alternativeColors: alternativeColors
+            alternativeColors: alternativeColors,
+            mode: mode
           } = option,
           fillStrategy = null !== (_a = option.fillStrategy) && void 0 !== _a ? _a : "invertBase",
           strokeStrategy = null !== (_b = option.strokeStrategy) && void 0 !== _b ? _b : "base",
@@ -31134,7 +31269,7 @@
             backgroundColor = baseMark.attribute.fill,
             foregroundColor = label.attribute.fill,
             baseColor = backgroundColor,
-            invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors),
+            invertColor = labelSmartInvert(foregroundColor, backgroundColor, textType, contrastRatiosThreshold, alternativeColors, mode),
             similarColor = contrastAccessibilityChecker(invertColor, brightColor) ? brightColor : darkColor;
           if (outsideEnable) {
             const fill = smartInvertStrategy(fillStrategy, baseColor, invertColor, similarColor);
@@ -31159,7 +31294,7 @@
               if (0 === label.attribute.lineWidth) continue;
               if (label.attribute.stroke) {
                 label.setAttributes({
-                  fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors)
+                  fill: labelSmartInvert(label.attribute.fill, label.attribute.stroke, textType, contrastRatiosThreshold, alternativeColors, mode)
                 });
                 continue;
               }
@@ -31311,12 +31446,10 @@
       }
       getGraphicBounds(graphic) {
         let point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
         var _a;
-        if ("line" !== graphic.type) return super.getGraphicBounds(graphic, point);
-        const {
-            position = "end"
-          } = this.attribute,
-          points = (null === (_a = null == graphic ? void 0 : graphic.attribute) || void 0 === _a ? void 0 : _a.points) || [point],
+        if (!graphic || "line" !== graphic.type) return super.getGraphicBounds(graphic, point);
+        const points = (null === (_a = null == graphic ? void 0 : graphic.attribute) || void 0 === _a ? void 0 : _a.points) || [point],
           index = "start" === position ? 0 : points.length - 1;
         return {
           x1: points[index].x,
@@ -31875,41 +32008,16 @@
       pickable: !1
     };
 
-    class LineDataLabel extends LabelBase {
-      constructor(attributes) {
-        super(merge$1({}, LineDataLabel.defaultAttributes, attributes)), this.name = "line-data-label";
-      }
-      labeling(textBounds, graphicBounds) {
-        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "top";
-        let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-        return labelingPoint(textBounds, graphicBounds, position, offset);
-      }
-    }
-    LineDataLabel.defaultAttributes = {
-      textStyle: {
-        fontSize: 12,
-        fill: "#000",
-        textAlign: "center",
-        textBaseline: "middle",
-        boundsPadding: [-1, 0, -1, 0]
-      },
-      position: "top",
-      offset: 5,
-      pickable: !1
-    };
-
     class AreaLabel extends LabelBase {
       constructor(attributes) {
         super(merge$1({}, AreaLabel.defaultAttributes, attributes)), this.name = "line-label";
       }
       getGraphicBounds(graphic) {
         let point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
         var _a;
         if ("area" !== graphic.type) return super.getGraphicBounds(graphic, point);
-        const {
-            position = "end"
-          } = this.attribute,
-          points = (null === (_a = null == graphic ? void 0 : graphic.attribute) || void 0 === _a ? void 0 : _a.points) || [point],
+        const points = (null === (_a = null == graphic ? void 0 : graphic.attribute) || void 0 === _a ? void 0 : _a.points) || [point],
           index = "start" === position ? 0 : points.length - 1;
         return {
           x1: points[index].x,
@@ -31937,6 +32045,29 @@
       pickable: !1
     };
 
+    class LineDataLabel extends LabelBase {
+      constructor(attributes) {
+        super(merge$1({}, LineDataLabel.defaultAttributes, attributes)), this.name = "line-data-label";
+      }
+      labeling(textBounds, graphicBounds) {
+        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "top";
+        let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+        return labelingPoint(textBounds, graphicBounds, position, offset);
+      }
+    }
+    LineDataLabel.defaultAttributes = {
+      textStyle: {
+        fontSize: 12,
+        fill: "#000",
+        textAlign: "center",
+        textBaseline: "middle",
+        boundsPadding: [-1, 0, -1, 0]
+      },
+      position: "top",
+      offset: 5,
+      pickable: !1
+    };
+
     const labelComponentMap = {
       rect: RectLabel,
       symbol: SymbolLabel,
@@ -32387,17 +32518,19 @@
           textAlign = "center",
           textBaseline = "middle";
         return data.forEach((item, index) => {
-          var _a, _b;
-          const labelStyle = this._getLabelAttribute(item, index, data, layer),
-            text = createText(labelStyle);
-          if (text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_a = this.attribute.label) || void 0 === _a ? void 0 : _a.state)) text.states = DEFAULT_STATES$2;else {
+          var _a, _b, _c, _d;
+          const labelStyle = this._getLabelAttribute(item, index, data, layer);
+          let text;
+          if ("rich" === labelStyle.type ? (labelStyle.textConfig = labelStyle.text, labelStyle.width = null !== (_a = labelStyle.width) && void 0 !== _a ? _a : 0, labelStyle.height = null !== (_b = labelStyle.height) && void 0 !== _b ? _b : 0, text = createRichText(labelStyle)) : "html" === labelStyle.type ? (labelStyle.textConfig = [], labelStyle.html = Object.assign(Object.assign({
+            dom: labelStyle.text
+          }, DEFAULT_HTML_TEXT_SPEC), labelStyle), text = createRichText(labelStyle)) : text = createText(labelStyle), text.name = AXIS_ELEMENT_NAME.label, text.id = this._getNodeId(`layer${layer}-label-${item.id}`), isEmpty(null === (_c = this.attribute.label) || void 0 === _c ? void 0 : _c.state)) text.states = DEFAULT_STATES$2;else {
             const labelState = merge$1({}, DEFAULT_STATES$2, this.attribute.label.state);
             Object.keys(labelState).forEach(key => {
               isFunction$1(labelState[key]) && (labelState[key] = labelState[key](item, index, data, layer));
             }), text.states = labelState;
           }
           labelGroup.add(text);
-          const angle = null !== (_b = labelStyle.angle) && void 0 !== _b ? _b : 0;
+          const angle = null !== (_d = labelStyle.angle) && void 0 !== _d ? _d : 0;
           maxTextWidth = Math.max(maxTextWidth, text.AABBBounds.width()), maxTextHeight = Math.max(maxTextHeight, text.AABBBounds.height()), angle && (maxTextWidth = Math.abs(maxTextWidth * Math.cos(angle)), maxTextHeight = Math.abs(maxTextHeight * Math.sin(angle))), textAlign = labelStyle.textAlign, textBaseline = labelStyle.textBaseline;
         }), this.axisLabelLayerSize[layer] = {
           width: maxTextWidth,
@@ -32519,9 +32652,11 @@
           {
             space = 4,
             inside = !1,
-            formatMethod: formatMethod
+            formatMethod: formatMethod,
+            type = "text",
+            text: text
           } = _g,
-          tagAttributes = __rest$5(_g, ["space", "inside", "formatMethod"]);
+          tagAttributes = __rest$5(_g, ["space", "inside", "formatMethod", "type", "text"]);
         let offset = space,
           tickLength = 0;
         (null === (_a = this.attribute.tick) || void 0 === _a ? void 0 : _a.visible) && (null === (_b = this.attribute.tick) || void 0 === _b ? void 0 : _b.inside) === inside && (tickLength = (null === (_c = this.attribute.tick) || void 0 === _c ? void 0 : _c.length) || 4), (null === (_d = this.attribute.subTick) || void 0 === _d ? void 0 : _d.visible) && (null === (_e = this.attribute.subTick) || void 0 === _e ? void 0 : _e.inside) === inside && (tickLength = Math.max(tickLength, (null === (_f = this.attribute.subTick) || void 0 === _f ? void 0 : _f.length) || 2)), offset += tickLength;
@@ -32529,7 +32664,7 @@
         layer > 0 && (0 === axisVector[1] ? offset += (this.axisLabelLayerSize[layer - 1].height + get$1(this.attribute, "label.space", 4)) * layer : offset += (this.axisLabelLayerSize[layer - 1].width + get$1(this.attribute, "label.space", 4)) * layer);
         const point = this.getVerticalCoord(tickDatum.point, offset, inside),
           vector = this.getVerticalVector(offset, inside, point),
-          text = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
+          textContent = formatMethod ? formatMethod(`${tickDatum.label}`, tickDatum, index, tickData, layer) : tickDatum.label;
         let {
           style: textStyle
         } = tagAttributes;
@@ -32540,9 +32675,10 @@
           value: tickDatum.rawValue,
           index: tickDatum.index,
           layer: layer
-        })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, text, textStyle)), {
-          text: text,
-          lineHeight: null == textStyle ? void 0 : textStyle.fontSize
+        })), Object.assign(Object.assign(Object.assign({}, this.getLabelPosition(point, vector, textContent, textStyle)), {
+          text: null != text ? text : textContent,
+          lineHeight: null == textStyle ? void 0 : textStyle.fontSize,
+          type: type
         }), textStyle);
       }
       getLabelPosition(point, vector, text, style) {
@@ -33111,7 +33247,7 @@
           titleSpacing = 0;
         const axisLineWidth = (null == line ? void 0 : line.visible) ? null !== (_b = line.style.lineWidth) && void 0 !== _b ? _b : 1 : 0,
           tickLength = (null == tick ? void 0 : tick.visible) ? null !== (_c = tick.length) && void 0 !== _c ? _c : 4 : 0;
-        if (null == title ? void 0 : title.visible) {
+        if ((null == title ? void 0 : title.visible) && "string" == typeof title.text) {
           titleHeight = measureTextSize(title.text, title.textStyle).height;
           const padding = normalizePadding$1(title.padding);
           titleSpacing = title.space + padding[0] + padding[2];
@@ -35587,7 +35723,7 @@
             y: -focusSize / 2 - 1,
             strokeBoundsBuffer: 0
           }, focusIconStyle), {
-            visible: !1,
+            visible: !0,
             pickMode: "imprecise",
             boundsPadding: parsedPadding
           })), this._appendDataToShape(focusShape, LEGEND_ELEMENT_NAME.focus, item, itemGroup), focusSpace = focusSize;
@@ -35633,7 +35769,7 @@
           innerGroupHeight = innerGroupBounds.height(),
           itemGroupWidth = isValid$1(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3],
           itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
-        return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), itemGroup;
+        return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, focusShape && focusShape.setAttribute("visible", !1), innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), itemGroup;
       }
       _renderPager(isHorizontal) {
         const renderStartY = this._title ? this._title.AABBBounds.height() + get$1(this.attribute, "title.space", 8) : 0,
@@ -36650,9 +36786,11 @@
         super(merge$1({}, Title.defaultAttributes, attributes)), this.name = "title";
       }
       render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55;
         const {
+            textType: textType,
             text: text,
+            subtextType: subtextType,
             textStyle: textStyle,
             subtext: subtext,
             subtextStyle: subtextStyle,
@@ -36672,8 +36810,8 @@
             y: parsedPadding[0],
             zIndex: 1
           }, "group");
-        if (!1 !== (null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.visible) && !1 !== (null == textStyle ? void 0 : textStyle.visible)) if (textStyle && isValid$1(null == textStyle ? void 0 : textStyle.character)) {
-          const attr = {
+        if (!1 !== (null === (_a = this.attribute) || void 0 === _a ? void 0 : _a.visible) && !1 !== (null == textStyle ? void 0 : textStyle.visible)) if ("rich" === textType || isValid$1(textStyle.character)) {
+          const attr = Object.assign({
             x: null !== (_b = textStyle.x) && void 0 !== _b ? _b : 0,
             y: null !== (_c = textStyle.y) && void 0 !== _c ? _c : 0,
             width: null !== (_e = null !== (_d = textStyle.width) && void 0 !== _d ? _d : width) && void 0 !== _e ? _e : 0,
@@ -36682,68 +36820,100 @@
             wordBreak: null !== (_j = textStyle.wordBreak) && void 0 !== _j ? _j : "break-word",
             maxHeight: textStyle.maxHeight,
             maxWidth: textStyle.maxWidth,
-            textConfig: textStyle.character
-          };
+            textConfig: null !== (_k = textStyle.character) && void 0 !== _k ? _k : text
+          }, textStyle);
+          this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
+        } else if ("html" === textType) {
+          const attr = Object.assign({
+            html: Object.assign(Object.assign({
+              dom: text
+            }, DEFAULT_HTML_TEXT_SPEC), textStyle),
+            x: null !== (_l = textStyle.x) && void 0 !== _l ? _l : 0,
+            y: null !== (_m = textStyle.y) && void 0 !== _m ? _m : 0,
+            width: null !== (_p = null !== (_o = textStyle.width) && void 0 !== _o ? _o : width) && void 0 !== _p ? _p : 0,
+            height: null !== (_r = null !== (_q = textStyle.height) && void 0 !== _q ? _q : height) && void 0 !== _r ? _r : 0,
+            ellipsis: null === (_s = textStyle.ellipsis) || void 0 === _s || _s,
+            wordBreak: null !== (_t = textStyle.wordBreak) && void 0 !== _t ? _t : "break-word",
+            maxHeight: textStyle.maxHeight,
+            maxWidth: textStyle.maxWidth,
+            textConfig: []
+          }, textStyle);
           this._mainTitle = group.createOrUpdateChild("mainTitle", attr, "richtext");
         } else isValid$1(text) && (this._mainTitle = group.createOrUpdateChild("mainTitle", Object.assign(Object.assign({
           text: [text]
         }, textStyle), {
-          maxLineWidth: null !== (_k = null == textStyle ? void 0 : textStyle.maxLineWidth) && void 0 !== _k ? _k : width,
+          maxLineWidth: null !== (_u = null == textStyle ? void 0 : textStyle.maxLineWidth) && void 0 !== _u ? _u : width,
           heightLimit: null == textStyle ? void 0 : textStyle.heightLimit,
           lineClamp: null == textStyle ? void 0 : textStyle.lineClamp,
-          ellipsis: null === (_l = null == textStyle ? void 0 : textStyle.ellipsis) || void 0 === _l || _l,
+          ellipsis: null === (_v = null == textStyle ? void 0 : textStyle.ellipsis) || void 0 === _v || _v,
           x: 0,
           y: 0
         }), "wrapText"));
-        const maintextHeight = this._mainTitle ? null === (_m = this._mainTitle) || void 0 === _m ? void 0 : _m.AABBBounds.height() : 0,
-          maintextWidth = this._mainTitle ? null === (_o = this._mainTitle) || void 0 === _o ? void 0 : _o.AABBBounds.width() : 0;
-        if (!1 !== (null === (_p = this.attribute) || void 0 === _p ? void 0 : _p.visible) && !1 !== (null == subtextStyle ? void 0 : subtextStyle.visible)) if (subtextStyle && isValid$1(null == subtextStyle ? void 0 : subtextStyle.character)) {
-          const attr = {
-            x: null !== (_q = subtextStyle.x) && void 0 !== _q ? _q : 0,
-            y: null !== (_r = subtextStyle.y) && void 0 !== _r ? _r : maintextHeight,
-            width: null !== (_t = null !== (_s = subtextStyle.width) && void 0 !== _s ? _s : width) && void 0 !== _t ? _t : 0,
-            height: null !== (_v = null !== (_u = subtextStyle.height) && void 0 !== _u ? _u : height) && void 0 !== _v ? _v : 0,
-            ellipsis: null === (_w = subtextStyle.ellipsis) || void 0 === _w || _w,
-            wordBreak: null !== (_x = subtextStyle.wordBreak) && void 0 !== _x ? _x : "break-word",
+        const maintextHeight = this._mainTitle ? null === (_w = this._mainTitle) || void 0 === _w ? void 0 : _w.AABBBounds.height() : 0,
+          maintextWidth = this._mainTitle ? null === (_x = this._mainTitle) || void 0 === _x ? void 0 : _x.AABBBounds.width() : 0;
+        if (!1 !== (null === (_y = this.attribute) || void 0 === _y ? void 0 : _y.visible) && !1 !== (null == subtextStyle ? void 0 : subtextStyle.visible)) if ("rich" === subtextType || isValid$1(subtextStyle.character)) {
+          const attr = Object.assign({
+            x: null !== (_z = subtextStyle.x) && void 0 !== _z ? _z : 0,
+            y: null !== (_0 = subtextStyle.y) && void 0 !== _0 ? _0 : 0,
+            width: null !== (_2 = null !== (_1 = subtextStyle.width) && void 0 !== _1 ? _1 : width) && void 0 !== _2 ? _2 : 0,
+            height: null !== (_4 = null !== (_3 = subtextStyle.height) && void 0 !== _3 ? _3 : height) && void 0 !== _4 ? _4 : 0,
+            ellipsis: null === (_5 = subtextStyle.ellipsis) || void 0 === _5 || _5,
+            wordBreak: null !== (_6 = subtextStyle.wordBreak) && void 0 !== _6 ? _6 : "break-word",
             maxHeight: subtextStyle.maxHeight,
             maxWidth: subtextStyle.maxWidth,
-            textConfig: subtextStyle.character
-          };
+            textConfig: null !== (_7 = subtextStyle.character) && void 0 !== _7 ? _7 : subtext
+          }, subtextStyle);
+          this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
+        } else if ("html" === subtextType) {
+          const attr = Object.assign({
+            html: Object.assign(Object.assign({
+              dom: subtext
+            }, DEFAULT_HTML_TEXT_SPEC), subtextStyle),
+            x: null !== (_8 = subtextStyle.x) && void 0 !== _8 ? _8 : 0,
+            y: null !== (_9 = subtextStyle.y) && void 0 !== _9 ? _9 : 0,
+            width: null !== (_11 = null !== (_10 = subtextStyle.width) && void 0 !== _10 ? _10 : width) && void 0 !== _11 ? _11 : 0,
+            height: null !== (_13 = null !== (_12 = subtextStyle.height) && void 0 !== _12 ? _12 : height) && void 0 !== _13 ? _13 : 0,
+            ellipsis: null === (_14 = subtextStyle.ellipsis) || void 0 === _14 || _14,
+            wordBreak: null !== (_15 = subtextStyle.wordBreak) && void 0 !== _15 ? _15 : "break-word",
+            maxHeight: subtextStyle.maxHeight,
+            maxWidth: subtextStyle.maxWidth,
+            textConfig: []
+          }, subtextStyle);
           this._subTitle = group.createOrUpdateChild("subTitle", attr, "richtext");
         } else isValid$1(subtext) && (this._subTitle = group.createOrUpdateChild("subTitle", Object.assign(Object.assign({
           text: [subtext]
         }, subtextStyle), {
-          maxLineWidth: null !== (_y = null == subtextStyle ? void 0 : subtextStyle.maxLineWidth) && void 0 !== _y ? _y : width,
+          maxLineWidth: null !== (_16 = null == subtextStyle ? void 0 : subtextStyle.maxLineWidth) && void 0 !== _16 ? _16 : width,
           heightLimit: null == subtextStyle ? void 0 : subtextStyle.heightLimit,
           lineClamp: null == subtextStyle ? void 0 : subtextStyle.lineClamp,
-          ellipsis: null === (_z = null == subtextStyle ? void 0 : subtextStyle.ellipsis) || void 0 === _z || _z,
+          ellipsis: null === (_17 = null == subtextStyle ? void 0 : subtextStyle.ellipsis) || void 0 === _17 || _17,
           x: 0,
           y: maintextHeight
         }), "wrapText"));
-        const subtextHeight = this._subTitle ? null === (_0 = this._subTitle) || void 0 === _0 ? void 0 : _0.AABBBounds.height() : 0,
-          subtextWidth = this._subTitle ? null === (_1 = this._subTitle) || void 0 === _1 ? void 0 : _1.AABBBounds.width() : 0;
+        const subtextHeight = this._subTitle ? null === (_18 = this._subTitle) || void 0 === _18 ? void 0 : _18.AABBBounds.height() : 0,
+          subtextWidth = this._subTitle ? null === (_19 = this._subTitle) || void 0 === _19 ? void 0 : _19.AABBBounds.width() : 0;
         let titleWidth = Math.max(maintextWidth, subtextWidth),
-          titleHeight = maintextHeight + (null !== (_2 = null == subtextStyle ? void 0 : subtextStyle.height) && void 0 !== _2 ? _2 : subtextHeight);
-        if (isValid$1(width) && (titleWidth = width, null === (_3 = this._mainTitle) || void 0 === _3 || _3.setAttribute("maxLineWidth", width), null === (_4 = this._subTitle) || void 0 === _4 || _4.setAttribute("maxLineWidth", width)), isValid$1(height) && (titleHeight = height), isValid$1(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$1(maxWidth) && (null === (_5 = this._mainTitle) || void 0 === _5 || _5.setAttribute("maxLineWidth", maxWidth), null === (_6 = this._subTitle) || void 0 === _6 || _6.setAttribute("maxLineWidth", maxWidth), null === (_7 = this._mainTitle) || void 0 === _7 || _7.setAttribute("maxWidth", maxWidth), null === (_8 = this._subTitle) || void 0 === _8 || _8.setAttribute("maxWidth", maxWidth), titleWidth > maxWidth && (titleWidth = maxWidth)), isValid$1(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$1(maxHeight) && (null === (_9 = this._mainTitle) || void 0 === _9 || _9.setAttribute("maxHeight", maxHeight), null === (_10 = this._subTitle) || void 0 === _10 || _10.setAttribute("maxHeight", maxHeight - maintextHeight), titleHeight > maxHeight && (titleHeight = maxHeight)), group.attribute.width = titleWidth, group.attribute.height = titleHeight, group.attribute.boundsPadding = parsedPadding, isValid$1(align) || isValid$1(null == textStyle ? void 0 : textStyle.align)) {
+          titleHeight = maintextHeight + (null !== (_20 = null == subtextStyle ? void 0 : subtextStyle.height) && void 0 !== _20 ? _20 : subtextHeight);
+        if (isValid$1(width) && (titleWidth = width, null === (_21 = this._mainTitle) || void 0 === _21 || _21.setAttribute("maxLineWidth", width), null === (_22 = this._subTitle) || void 0 === _22 || _22.setAttribute("maxLineWidth", width)), isValid$1(height) && (titleHeight = height), isValid$1(minWidth) && titleWidth < minWidth && (titleWidth = minWidth), isValid$1(maxWidth) && (null === (_23 = this._mainTitle) || void 0 === _23 || _23.setAttribute("maxLineWidth", maxWidth), null === (_24 = this._subTitle) || void 0 === _24 || _24.setAttribute("maxLineWidth", maxWidth), null === (_25 = this._mainTitle) || void 0 === _25 || _25.setAttribute("maxWidth", maxWidth), null === (_26 = this._subTitle) || void 0 === _26 || _26.setAttribute("maxWidth", maxWidth), titleWidth > maxWidth && (titleWidth = maxWidth)), isValid$1(minHeight) && titleHeight < minHeight && (titleHeight = minHeight), isValid$1(maxHeight) && (null === (_27 = this._mainTitle) || void 0 === _27 || _27.setAttribute("maxHeight", maxHeight), null === (_28 = this._subTitle) || void 0 === _28 || _28.setAttribute("maxHeight", maxHeight - maintextHeight), titleHeight > maxHeight && (titleHeight = maxHeight)), group.attribute.width = titleWidth, group.attribute.height = titleHeight, group.attribute.boundsPadding = parsedPadding, isValid$1(align) || isValid$1(null == textStyle ? void 0 : textStyle.align)) {
           const mainTitleAlign = (null == textStyle ? void 0 : textStyle.align) ? null == textStyle ? void 0 : textStyle.align : align,
-            mainTitleWidth = null !== (_11 = null == textStyle ? void 0 : textStyle.width) && void 0 !== _11 ? _11 : maintextWidth;
-          "left" === mainTitleAlign ? (null === (_12 = this._mainTitle) || void 0 === _12 || _12.setAttribute("x", 0), null === (_13 = this._mainTitle) || void 0 === _13 || _13.setAttribute("textAlign", "left")) : "center" === mainTitleAlign ? (null === (_14 = this._mainTitle) || void 0 === _14 || _14.setAttribute("x", mainTitleWidth / 2), null === (_15 = this._mainTitle) || void 0 === _15 || _15.setAttribute("textAlign", "center")) : "right" === mainTitleAlign && (null === (_16 = this._mainTitle) || void 0 === _16 || _16.setAttribute("x", mainTitleWidth), null === (_17 = this._mainTitle) || void 0 === _17 || _17.setAttribute("textAlign", "right"));
+            mainTitleWidth = null !== (_29 = null == textStyle ? void 0 : textStyle.width) && void 0 !== _29 ? _29 : maintextWidth;
+          "left" === mainTitleAlign ? (null === (_30 = this._mainTitle) || void 0 === _30 || _30.setAttribute("x", 0), null === (_31 = this._mainTitle) || void 0 === _31 || _31.setAttribute("textAlign", "left")) : "center" === mainTitleAlign ? (null === (_32 = this._mainTitle) || void 0 === _32 || _32.setAttribute("x", mainTitleWidth / 2), null === (_33 = this._mainTitle) || void 0 === _33 || _33.setAttribute("textAlign", "center")) : "right" === mainTitleAlign && (null === (_34 = this._mainTitle) || void 0 === _34 || _34.setAttribute("x", mainTitleWidth), null === (_35 = this._mainTitle) || void 0 === _35 || _35.setAttribute("textAlign", "right"));
         }
         if (isValid$1(verticalAlign) || isValid$1(null == textStyle ? void 0 : textStyle.verticalAlign)) {
           const mainTitleVerticalAlign = (null == textStyle ? void 0 : textStyle.verticalAlign) ? null == textStyle ? void 0 : textStyle.verticalAlign : verticalAlign,
             mainTitleHeight = (null == textStyle ? void 0 : textStyle.height) ? null == textStyle ? void 0 : textStyle.height : titleHeight;
-          "top" === mainTitleVerticalAlign ? (null === (_18 = this._mainTitle) || void 0 === _18 || _18.setAttribute("y", 0), null === (_19 = this._mainTitle) || void 0 === _19 || _19.setAttribute("textBaseline", "top")) : "middle" === mainTitleVerticalAlign ? (null === (_20 = this._mainTitle) || void 0 === _20 || _20.setAttribute("y", mainTitleHeight / 2), null === (_21 = this._mainTitle) || void 0 === _21 || _21.setAttribute("textBaseline", "middle")) : "bottom" === mainTitleVerticalAlign && (null === (_22 = this._mainTitle) || void 0 === _22 || _22.setAttribute("y", mainTitleHeight), null === (_23 = this._mainTitle) || void 0 === _23 || _23.setAttribute("textBaseline", "bottom"));
+          "top" === mainTitleVerticalAlign ? (null === (_36 = this._mainTitle) || void 0 === _36 || _36.setAttribute("y", 0), null === (_37 = this._mainTitle) || void 0 === _37 || _37.setAttribute("textBaseline", "top")) : "middle" === mainTitleVerticalAlign ? (null === (_38 = this._mainTitle) || void 0 === _38 || _38.setAttribute("y", mainTitleHeight / 2), null === (_39 = this._mainTitle) || void 0 === _39 || _39.setAttribute("textBaseline", "middle")) : "bottom" === mainTitleVerticalAlign && (null === (_40 = this._mainTitle) || void 0 === _40 || _40.setAttribute("y", mainTitleHeight), null === (_41 = this._mainTitle) || void 0 === _41 || _41.setAttribute("textBaseline", "bottom"));
         }
         if (isValid$1(align) || isValid$1(null == subtextStyle ? void 0 : subtextStyle.align)) {
           const subTitleAlign = (null == subtextStyle ? void 0 : subtextStyle.align) ? null == subtextStyle ? void 0 : subtextStyle.align : align,
-            subTitleWidth = null !== (_24 = null == subtextStyle ? void 0 : subtextStyle.width) && void 0 !== _24 ? _24 : subtextWidth;
-          "left" === subTitleAlign ? (null === (_25 = this._subTitle) || void 0 === _25 || _25.setAttribute("x", 0), null === (_26 = this._subTitle) || void 0 === _26 || _26.setAttribute("textAlign", "left")) : "center" === subTitleAlign ? (null === (_27 = this._subTitle) || void 0 === _27 || _27.setAttribute("x", subTitleWidth / 2), null === (_28 = this._subTitle) || void 0 === _28 || _28.setAttribute("textAlign", "center")) : "right" === subTitleAlign && (null === (_29 = this._subTitle) || void 0 === _29 || _29.setAttribute("x", subTitleWidth), null === (_30 = this._subTitle) || void 0 === _30 || _30.setAttribute("textAlign", "right"));
+            subTitleWidth = null !== (_42 = null == subtextStyle ? void 0 : subtextStyle.width) && void 0 !== _42 ? _42 : subtextWidth;
+          "left" === subTitleAlign ? (null === (_43 = this._subTitle) || void 0 === _43 || _43.setAttribute("x", 0), null === (_44 = this._subTitle) || void 0 === _44 || _44.setAttribute("textAlign", "left")) : "center" === subTitleAlign ? (null === (_45 = this._subTitle) || void 0 === _45 || _45.setAttribute("x", subTitleWidth / 2), null === (_46 = this._subTitle) || void 0 === _46 || _46.setAttribute("textAlign", "center")) : "right" === subTitleAlign && (null === (_47 = this._subTitle) || void 0 === _47 || _47.setAttribute("x", subTitleWidth), null === (_48 = this._subTitle) || void 0 === _48 || _48.setAttribute("textAlign", "right"));
         }
         if (isValid$1(verticalAlign) || isValid$1(null == textStyle ? void 0 : textStyle.verticalAlign)) {
           const subTitleVerticalAlign = (null == subtextStyle ? void 0 : subtextStyle.verticalAlign) ? null == subtextStyle ? void 0 : subtextStyle.verticalAlign : verticalAlign,
             subTitleYStart = maintextHeight,
-            subTitleHeight = null !== (_31 = null == subtextStyle ? void 0 : subtextStyle.height) && void 0 !== _31 ? _31 : 0;
-          "top" === subTitleVerticalAlign ? (null === (_32 = this._subTitle) || void 0 === _32 || _32.setAttribute("y", subTitleYStart), null === (_33 = this._subTitle) || void 0 === _33 || _33.setAttribute("textBaseline", "top")) : "middle" === subTitleVerticalAlign ? (null === (_34 = this._subTitle) || void 0 === _34 || _34.setAttribute("y", subTitleYStart + subTitleHeight / 2), null === (_35 = this._subTitle) || void 0 === _35 || _35.setAttribute("textBaseline", "middle")) : "bottom" === subTitleVerticalAlign && (null === (_36 = this._subTitle) || void 0 === _36 || _36.setAttribute("y", subTitleYStart + subTitleHeight), null === (_37 = this._subTitle) || void 0 === _37 || _37.setAttribute("textBaseline", "bottom"));
+            subTitleHeight = null !== (_49 = null == subtextStyle ? void 0 : subtextStyle.height) && void 0 !== _49 ? _49 : 0;
+          "top" === subTitleVerticalAlign ? (null === (_50 = this._subTitle) || void 0 === _50 || _50.setAttribute("y", subTitleYStart), null === (_51 = this._subTitle) || void 0 === _51 || _51.setAttribute("textBaseline", "top")) : "middle" === subTitleVerticalAlign ? (null === (_52 = this._subTitle) || void 0 === _52 || _52.setAttribute("y", subTitleYStart + subTitleHeight / 2), null === (_53 = this._subTitle) || void 0 === _53 || _53.setAttribute("textBaseline", "middle")) : "bottom" === subTitleVerticalAlign && (null === (_54 = this._subTitle) || void 0 === _54 || _54.setAttribute("y", subTitleYStart + subTitleHeight), null === (_55 = this._subTitle) || void 0 === _55 || _55.setAttribute("textBaseline", "bottom"));
         }
       }
     };
@@ -36796,7 +36966,7 @@
         super(...arguments), this.name = "indicator";
       }
       render() {
-        var _a;
+        var _a, _b, _c;
         const {
             visible: visible,
             title: title,
@@ -36813,7 +36983,24 @@
         if (!0 !== visible) return void (group && group.hideAll());
         if (isValid$1(title)) if (!1 !== title.visible) {
           const titleStyle = merge$1({}, get$1(DEFAULT_INDICATOR_THEME, "title.style"), title.style);
-          this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({}, titleStyle), {
+          "rich" === titleStyle.type ? this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({
+            textConfig: titleStyle.text
+          }, titleStyle), {
+            visible: title.visible,
+            x: 0,
+            y: 0,
+            width: null !== (_a = titleStyle.width) && void 0 !== _a ? _a : 0,
+            height: null !== (_b = titleStyle.height) && void 0 !== _b ? _b : 0
+          }), "richtext") : "html" === titleStyle.type ? this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({
+            textConfig: [],
+            html: Object.assign(Object.assign({
+              dom: titleStyle.text
+            }, DEFAULT_HTML_TEXT_SPEC), titleStyle)
+          }, titleStyle), {
+            visible: title.visible,
+            x: 0,
+            y: 0
+          }), "richtext") : this._title = group.createOrUpdateChild("indicator-title", Object.assign(Object.assign({}, titleStyle), {
             lineHeight: isValid$1(titleStyle.lineHeight) ? titleStyle.lineHeight : titleStyle.fontSize,
             visible: title.visible,
             x: 0,
@@ -36830,15 +37017,33 @@
             contentComponents = [];
           let lastContentHeight = 0;
           contents.forEach((contentItem, i) => {
+            var _a, _b;
             if (!1 !== contentItem.visible) {
-              const contentStyle = merge$1({}, get$1(DEFAULT_INDICATOR_THEME, "content.style"), contentItem.style),
-                contentComponent = group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({}, contentStyle), {
-                  lineHeight: isValid$1(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize,
-                  visible: contentItem.visible,
-                  x: 0,
-                  y: titleHeight + titleSpace + lastContentHeight
-                }), "text");
-              contentItem.autoFit && isValidNumber$1(limit) && this._setAutoFit(limit, contentComponent, contentItem), contentItem.autoLimit && isValidNumber$1(limitRatio) && contentComponent.setAttribute("maxLineWidth", limit), contentComponents.push(contentComponent);
+              const contentStyle = merge$1({}, get$1(DEFAULT_INDICATOR_THEME, "content.style"), contentItem.style);
+              let contentComponent;
+              contentComponent = "rich" === contentStyle.type ? group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({
+                textConfig: contentStyle.text
+              }, contentStyle), {
+                visible: title.visible,
+                x: 0,
+                y: titleHeight + titleSpace + lastContentHeight,
+                width: null !== (_a = contentStyle.width) && void 0 !== _a ? _a : 0,
+                height: null !== (_b = contentStyle.height) && void 0 !== _b ? _b : 0
+              }), "richtext") : "html" === contentStyle.type ? group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({
+                textConfig: [],
+                html: Object.assign(Object.assign({
+                  dom: contentStyle.text
+                }, DEFAULT_HTML_TEXT_SPEC), contentStyle)
+              }, contentStyle), {
+                visible: title.visible,
+                x: 0,
+                y: titleHeight + titleSpace + lastContentHeight
+              }), "richtext") : group.createOrUpdateChild("indicator-content-" + i, Object.assign(Object.assign({}, contentStyle), {
+                lineHeight: isValid$1(contentStyle.lineHeight) ? contentStyle.lineHeight : contentStyle.fontSize,
+                visible: contentItem.visible,
+                x: 0,
+                y: titleHeight + titleSpace + lastContentHeight
+              }), "text"), contentItem.autoFit && isValidNumber$1(limit) && this._setAutoFit(limit, contentComponent, contentItem), contentItem.autoLimit && isValidNumber$1(limitRatio) && contentComponent.setAttribute("maxLineWidth", limit), contentComponents.push(contentComponent);
               const contentSpace = (null == contentItem ? void 0 : contentItem.space) ? contentItem.space : 0;
               lastContentHeight += contentComponent.AABBBounds.height() + contentSpace;
             } else {
@@ -36847,7 +37052,7 @@
             }
           }), this._content = contentComponents;
         }
-        const totalHeight = null !== (_a = null == group ? void 0 : group.AABBBounds.height()) && void 0 !== _a ? _a : 0;
+        const totalHeight = null !== (_c = null == group ? void 0 : group.AABBBounds.height()) && void 0 !== _c ? _c : 0;
         group.setAttribute("y", size.height / 2 - totalHeight / 2), group.setAttribute("x", size.width / 2);
       }
       _setAutoFit(limit, indicatorItem, indicatorItemSpec) {
@@ -37075,7 +37280,7 @@
         super(merge$1({}, BasePlayer.defaultAttributes, attributes)), this._data = [], this._layoutInfo = {}, this._updateSliderAttrs = () => {
           var _a, _b, _c;
           let handlerSize;
-          isValidNumber$1(this._handlerStyle.size) ? handlerSize = this._handlerStyle.size : this._handlerStyle.size && this._handlerStyle.size.length && (handlerSize = max$2(this._handlerStyle.size[0], this._handlerStyle.size[1]));
+          isValidNumber$1(this._handlerStyle.size) ? handlerSize = this._handlerStyle.size : this._handlerStyle.size && this._handlerStyle.size.length && (handlerSize = max$1(this._handlerStyle.size[0], this._handlerStyle.size[1]));
           const attrs = {
             visible: this._sliderVisible,
             min: this._minIndex,
@@ -37181,7 +37386,7 @@
           railSectionLength = null !== (_a = isHorizontal$1(this._orient) ? this._railStyle.height : this._railStyle.width) && void 0 !== _a ? _a : RailDefaultSize[1],
           controllerPx = controllers.reduce((len, controller) => {
             const size = controller.style.size,
-              maxSize = isNumber$2(size) ? size : max$2(size[0], size[1]);
+              maxSize = isNumber$2(size) ? size : max$1(size[0], size[1]);
             return len + controller.space + maxSize;
           }, 0),
           sliderPx = this._sliderVisible ? (isHorizontal$1(this._orient) ? null === (_b = this._size) || void 0 === _b ? void 0 : _b.width : null === (_c = this._size) || void 0 === _c ? void 0 : _c.height) - controllerPx : 0,
@@ -37194,7 +37399,7 @@
                   size: size
                 }
               } = controller,
-              maxSize = isNumber$2(size) ? size : max$2(size[0], size[1]);
+              maxSize = isNumber$2(size) ? size : max$1(size[0], size[1]);
             return this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), {
               size: maxSize,
               x: isHorizontal$1(this._orient) ? px + space : (this._size.width - maxSize) / 2,
@@ -37213,7 +37418,7 @@
                 size: size
               }
             } = controller,
-            maxSize = isNumber$2(size) ? size : max$2(size[0], size[1]);
+            maxSize = isNumber$2(size) ? size : max$1(size[0], size[1]);
           return this._layoutInfo[key] = Object.assign(Object.assign({}, this._layoutInfo[key]), {
             size: maxSize,
             x: isHorizontal$1(this._orient) ? px + space : (this._size.width - maxSize) / 2,
@@ -37723,7 +37928,7 @@
         textBaseline: textBaseline,
         text: text
       } = attr;
-      return {
+      return Array.isArray(text) ? {
         width: width,
         height: height,
         wordBreak: wordBreak,
@@ -37733,6 +37938,14 @@
         textConfig: array(text).map(text => Object.assign(Object.assign({}, attr), {
           text: text
         }))
+      } : {
+        width: width,
+        height: height,
+        wordBreak: wordBreak,
+        textAlign: textAlign,
+        textBaseline: textBaseline,
+        singleLine: !1,
+        textConfig: text.text
       };
     };
 
@@ -37806,6 +38019,7 @@
         super(merge$1({}, Tooltip.defaultAttributes, attributes)), this.name = "tooltip";
       }
       render() {
+        var _a;
         const {
           visible: visible,
           content: content,
@@ -37831,12 +38045,26 @@
           symbolType: "circle"
         }, titleAttr.shape, {
           visible: isVisible(titleAttr) && isVisible(titleAttr.shape)
-        }), "symbol"), titleAttr.value.multiLine ? this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild("tooltip-title-value", Object.assign({
+        }), "symbol"), "object" != typeof titleAttr.value.text || null === titleAttr.value.text || "rich" !== titleAttr.value.text.type && "html" !== titleAttr.value.text.type ? titleAttr.value.multiLine ? this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild("tooltip-title-value", Object.assign({
           visible: isVisible(titleAttr) && isVisible(titleAttr.value)
         }, getRichTextAttribute(titleAttr.value)), "richtext") : this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild("tooltip-title-value", Object.assign({
-          text: "",
+          text: null !== (_a = titleAttr.value.text) && void 0 !== _a ? _a : "",
           visible: isVisible(titleAttr) && isVisible(titleAttr.value)
-        }, titleAttr.value), "text");
+        }, titleAttr.value), "text") : "rich" === titleAttr.value.text.type ? this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild("tooltip-title-value", Object.assign({
+          visible: isVisible(titleAttr) && isVisible(titleAttr.value)
+        }, getRichTextAttribute(titleAttr.value)), "richtext") : "html" === titleAttr.value.text.type && (this._tooltipTitle = this._tooltipTitleContainer.createOrUpdateChild("tooltip-title-value", Object.assign({
+          html: Object.assign(Object.assign({
+            dom: titleAttr.value.text.text
+          }, DEFAULT_HTML_TEXT_SPEC), titleAttr.value),
+          visible: isVisible(titleAttr) && isVisible(titleAttr.value),
+          width: titleAttr.value.width,
+          height: titleAttr.value.height,
+          wordBreak: titleAttr.value.wordBreak,
+          textAlign: titleAttr.value.textAlign,
+          textBaseline: titleAttr.value.textBaseline,
+          singleLine: !1,
+          textConfig: []
+        }, titleAttr.value), "richtext"));
         const titlePaddingLeft = isVisible(titleAttr.shape) ? titleAttr.shape.size + titleAttr.shape.spacing : 0,
           {
             textAlign: textAlign,
@@ -37851,7 +38079,7 @@
           this._tooltipContent.setAttribute("x", padding[3]), this._tooltipContent.setAttribute("y", padding[0] + titleHeight);
           let lastYPos = 0;
           content.forEach((item, i) => {
-            var _a;
+            var _a, _b, _c;
             const itemAttr = Tooltip.getContentAttr(this.attribute, i);
             if (!isVisible(itemAttr)) return;
             const itemGroupName = `tooltip-content-${i}`,
@@ -37871,11 +38099,20 @@
                 visible: !0
               }, getRichTextAttribute(itemAttr.key)), {
                 textBaseline: "top"
-              }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
-                visible: !0
+              }), "richtext") : "object" != typeof itemAttr.key.text || null === itemAttr.key.text || "rich" !== itemAttr.key.text.type && "html" !== itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
+                visible: !0,
+                text: null !== (_b = itemAttr.key.text) && void 0 !== _b ? _b : ""
               }, itemAttr.key), {
                 textBaseline: "top"
-              }), "text");
+              }), "text") : "rich" === itemAttr.key.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+                visible: !0
+              }, getRichTextAttribute(itemAttr.key)), {
+                textBaseline: "top"
+              }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
+                html: Object.assign(Object.assign({
+                  dom: itemAttr.key.text.text
+                }, DEFAULT_HTML_TEXT_SPEC), itemAttr.key)
+              }, "richtext");
               const {
                 textAlign: textAlign
               } = itemAttr.key;
@@ -37887,11 +38124,24 @@
                 visible: !0
               }, getRichTextAttribute(itemAttr.value)), {
                 textBaseline: "top"
-              }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
-                visible: !0
+              }), "richtext") : "object" != typeof itemAttr.value.text || null === itemAttr.value.text || "rich" !== itemAttr.value.text.type && "html" !== itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+                visible: !0,
+                text: null !== (_c = itemAttr.value.text) && void 0 !== _c ? _c : ""
               }, itemAttr.value), {
                 textBaseline: "top"
-              }), "text");
+              }), "text") : "rich" === itemAttr.value.text.type ? itemGroup.createOrUpdateChild(`${itemGroupName}-value`, Object.assign(Object.assign({
+                visible: !0
+              }, getRichTextAttribute(itemAttr.value)), {
+                textBaseline: "top"
+              }), "richtext") : itemGroup.createOrUpdateChild(`${itemGroupName}-value`, {
+                html: Object.assign({
+                  dom: itemAttr.value.text.text,
+                  container: "",
+                  width: 30,
+                  height: 30,
+                  style: {}
+                }, itemAttr.value)
+              }, "richtext");
               let textAlign = "right";
               isValid$1(itemAttr.value.textAlign) ? textAlign = itemAttr.value.textAlign : isVisible(itemAttr.key) || (textAlign = "left"), element.setAttribute("textAlign", textAlign), "center" === textAlign ? element.setAttribute("x", x + valueWidth / 2) : "right" === textAlign || "end" === textAlign ? element.setAttribute("x", x + valueWidth) : element.setAttribute("x", x), x += valueWidth, element.setAttribute("y", 0), itemGroup.add(element);
             }
@@ -37942,7 +38192,7 @@
             visible: titleHasShape = !1,
             symbolType: titleShapeType = ""
           } = null != titleShape ? titleShape : {};
-        if (isValid$1(titleValue)) {
+        if (isValid$1(titleValue) && "object" != typeof titleAttr.value.text) {
           const {
             width: width,
             height: height
@@ -38835,7 +39085,7 @@
     class Gesture extends EventEmitter {
       constructor(element) {
         let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         super(), this.cachedEvents = [], this.startPoints = [], this.processEvent = {}, this.throttleTimer = 0, this.emitThrottles = [], this.onStart = ev => {
           this.reset(), this.startTime = clock.now();
           const {
@@ -38923,13 +39173,14 @@
                 velocity > this.config.swipe.velocity && distance > this.config.swipe.threshold && (endEvent.velocity = velocity, endEvent.direction = calcDirection(prevMovePoint, lastMovePoint), this.triggerEvent("swipe", endEvent));
               }
             }
+            now - this.lastTapTime < this.config.tap.interval ? this.tapCount++ : this.tapCount = 1, this.lastTapTime = now, 1 === this.tapCount ? this.triggerEvent("tap", endEvent) : 2 === this.tapCount && (this.triggerEvent("doubletap", endEvent), this.tapCount = 0);
           }
           for (let i = 0, len = cachedEvents.length; i < len; i++) if (cachedEvents[i].pointerId === endEvent.pointerId) {
             cachedEvents.splice(i, 1), startPoints.splice(i, 1);
             break;
           }
           this.reset(), cachedEvents.length > 0 && this.onStart();
-        }, this.element = element, this.config = {
+        }, this.element = element, this.tapCount = 0, this.lastTapTime = 0, this.config = {
           press: {
             time: null !== (_b = null === (_a = null == config ? void 0 : config.press) || void 0 === _a ? void 0 : _a.time) && void 0 !== _b ? _b : 251,
             threshold: null !== (_d = null === (_c = null == config ? void 0 : config.press) || void 0 === _c ? void 0 : _c.threshold) && void 0 !== _d ? _d : 9
@@ -38937,6 +39188,9 @@
           swipe: {
             threshold: null !== (_f = null === (_e = null == config ? void 0 : config.swipe) || void 0 === _e ? void 0 : _e.threshold) && void 0 !== _f ? _f : 10,
             velocity: null !== (_h = null === (_g = null == config ? void 0 : config.swipe) || void 0 === _g ? void 0 : _g.velocity) && void 0 !== _h ? _h : .3
+          },
+          tap: {
+            interval: null !== (_k = null === (_j = null == config ? void 0 : config.tap) || void 0 === _j ? void 0 : _j.interval) && void 0 !== _k ? _k : 300
           }
         }, this.initEvents();
       }
@@ -40979,6 +41233,7 @@
       }
       contains(polygon, point, params) {
         if (!polygon.AABBBounds.contains(point.x, point.y)) return !1;
+        if ("imprecise" === polygon.attribute.pickMode) return !0;
         const {
           pickContext: pickContext
         } = null != params ? params : {};
@@ -43414,7 +43669,7 @@
       }), fieldData;
     }
     function parseScaleDataTypeValue(fieldData, scale, sort, filterNumber) {
-      return sort && fieldData.sort(sort), isContinuous(scale.type) ? (filterNumber && fieldData.filter(entry => isNumber$2(entry)), [Math.min.apply(null, fieldData), Math.max.apply(null, fieldData)]) : fieldData;
+      return sort && fieldData.sort(sort), isContinuous(scale.type) ? (filterNumber && fieldData.filter(entry => isNumber$2(entry)), [minInArray(fieldData), maxInArray(fieldData)]) : fieldData;
     }
     function configureScale(spec, scale, parameters) {
       if (isScaleDataType(spec.domain) ? scale.domain(parseScaleDataTypeValue(parseFieldData(spec.domain, parameters), scale, spec.domain.sort, !0), !0) : isMultiScaleDataType(spec.domain) ? scale.domain(parseScaleDataTypeValue(parseMultiFieldData(spec.domain, parameters), scale, spec.domain.sort, !0), !0) : scale.domain(invokeFunctionType(spec.domain, parameters, scale), !0), "identity" !== spec.type) if (isScaleDataType(spec.range)) scale.range(parseScaleDataTypeValue(parseFieldData(spec.range, parameters), scale), !0);else if (isMultiScaleDataType(spec.range)) scale.range(parseScaleDataTypeValue(parseMultiFieldData(spec.range, parameters), scale), !0);else if (isScaleCoordinateType(spec.range)) {
@@ -43763,12 +44018,10 @@
         };
       }
       _generateGlyphItems(markType, items, additionalAttributes) {
-        var _a;
-        const nextAttrs = null === (_a = items[0]) || void 0 === _a ? void 0 : _a.nextAttrs,
-          glyphItems = items.map(item => Object.assign({}, item, {
-            nextAttrs: additionalAttributes
-          }));
-        return CollectionMarkType.includes(markType) && nextAttrs.enableSegments && glyphItems.forEach((glyphItem, index) => {
+        const glyphItems = items.map(item => Object.assign({}, item, {
+          nextAttrs: additionalAttributes
+        }));
+        return CollectionMarkType.includes(markType) && this.mark.getSpec().enableSegments && glyphItems.forEach((glyphItem, index) => {
           glyphItem.nextAttrs = Object.assign({}, items[index].nextAttrs, additionalAttributes);
         }), glyphItems;
       }
@@ -44123,6 +44376,7 @@
       }
       animateTimeSlice(graphicAnimate, timeSlice, animationParameters, parameters) {
         const delay = timeSlice.delay,
+          delayAfter = timeSlice.delayAfter,
           duration = timeSlice.duration,
           effects = timeSlice.effects;
         if (delay > 0 && graphicAnimate.wait(delay), effects.length < 0) graphicAnimate.wait(duration);else {
@@ -44141,11 +44395,12 @@
           }).filter(animate => !isNil$1(animate));
           1 === customAnimates.length ? graphicAnimate.play(customAnimates[0]) : graphicAnimate.play(new AnimateGroup(duration, customAnimates));
         }
+        delayAfter > 0 && graphicAnimate.wait(delayAfter);
       }
     }
 
     function transformToTimelineConfig(animationConfig) {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       if (isNil$1(animationConfig.timeSlices)) {
         const typeConfig = animationConfig;
         return {
@@ -44157,11 +44412,12 @@
           timeSlices: [{
             duration: null !== (_e = typeConfig.duration) && void 0 !== _e ? _e : DefaultAnimationDuration,
             delay: null !== (_f = typeConfig.delay) && void 0 !== _f ? _f : DefaultAnimationDelay,
+            delayAfter: null !== (_g = typeConfig.delayAfter) && void 0 !== _g ? _g : DefaultAnimationDelayAfter,
             effects: [{
               type: typeConfig.type,
               channel: typeConfig.channel,
               custom: typeConfig.custom,
-              easing: null !== (_g = typeConfig.easing) && void 0 !== _g ? _g : DefaultAnimationEasing,
+              easing: null !== (_h = typeConfig.easing) && void 0 !== _h ? _h : DefaultAnimationEasing,
               customParameters: typeConfig.customParameters,
               options: typeConfig.options
             }]
@@ -44170,16 +44426,17 @@
       }
       const formattedTimeSlices = array(animationConfig.timeSlices).filter(timeSlice => timeSlice.effects && array(timeSlice.effects).filter(effect => effect.channel || effect.type).length);
       if (formattedTimeSlices.length) return {
-        startTime: null !== (_h = animationConfig.startTime) && void 0 !== _h ? _h : DefaultAnimationStartTime,
+        startTime: null !== (_j = animationConfig.startTime) && void 0 !== _j ? _j : DefaultAnimationStartTime,
         totalTime: animationConfig.totalTime,
-        oneByOne: null !== (_j = animationConfig.oneByOne) && void 0 !== _j ? _j : DefaultAnimationOneByOne,
-        loop: null !== (_k = animationConfig.loop) && void 0 !== _k ? _k : DefaultAnimationLoop,
-        controlOptions: merge$1({}, DefaultAnimationControlOptions, null !== (_l = animationConfig.controlOptions) && void 0 !== _l ? _l : {}),
+        oneByOne: null !== (_k = animationConfig.oneByOne) && void 0 !== _k ? _k : DefaultAnimationOneByOne,
+        loop: null !== (_l = animationConfig.loop) && void 0 !== _l ? _l : DefaultAnimationLoop,
+        controlOptions: merge$1({}, DefaultAnimationControlOptions, null !== (_m = animationConfig.controlOptions) && void 0 !== _m ? _m : {}),
         timeSlices: formattedTimeSlices.map(timeSlice => {
-          var _a;
+          var _a, _b;
           return {
             duration: timeSlice.duration,
             delay: null !== (_a = timeSlice.delay) && void 0 !== _a ? _a : DefaultAnimationDelay,
+            delayAfter: null !== (_b = timeSlice.delayAfter) && void 0 !== _b ? _b : DefaultAnimationDelayAfter,
             effects: array(timeSlice.effects).filter(effect => effect.channel || effect.type).map(effect => {
               var _a;
               return {
@@ -44446,6 +44703,7 @@
         timeline.timeSlices.forEach(timeSlice => {
           var _a;
           const delay = invokeAnimateSpec(timeSlice.delay, element, parameters),
+            delayAfter = invokeAnimateSpec(timeSlice.delayAfter, element, parameters),
             duration = null !== (_a = invokeAnimateSpec(timeSlice.duration, element, parameters)) && void 0 !== _a ? _a : totalTime / elementCount,
             effects = array(timeSlice.effects).map(effect => Object.assign({}, effect, {
               customParameters: invokeAnimateSpec(effect.customParameters, element, parameters)
@@ -44453,8 +44711,9 @@
           timeSlices.push({
             effects: effects,
             duration: duration,
-            delay: delay
-          }), loopTime += delay + duration;
+            delay: delay,
+            delayAfter: delayAfter
+          }), loopTime += delay + duration + delayAfter;
         });
         const oneByOneDelay = isNumber$2(oneByOne) ? oneByOne : !0 === oneByOne ? loopTime : 0;
         return {
@@ -44563,7 +44822,7 @@
       reuse(grammar) {
         if (grammar.grammarType !== this.grammarType) return this;
         const mark = grammar;
-        return this.markType = mark.markType, this.coord = mark.coord, this.elementMap = mark.elementMap, this.elements = mark.elements, this.elementMap.forEach(element => element.mark = this), this.differ = mark.differ, this.animate = mark.animate, this.animate.mark = this, this.context = mark.context, this.graphicItem = mark.graphicItem, this.graphicIndex = mark.graphicIndex, this.graphicParent = mark.graphicParent, this.needClear = mark.needClear, this.isUpdated = mark.isUpdated, this;
+        return this.markType = mark.markType, this.coord = mark.coord, this.elementMap = mark.elementMap, this.elements = mark.elements, this.elementMap.forEach(element => element.mark = this), this.differ = mark.differ, this.animate = mark.animate, this.animate.mark = this, this._context = mark._context, this.graphicItem = mark.graphicItem, this.graphicIndex = mark.graphicIndex, this.graphicParent = mark.graphicParent, this.needClear = mark.needClear, this.isUpdated = mark.isUpdated, this;
       }
       needLayout() {
         return !isNil$1(this.spec.layout);
@@ -44658,13 +44917,16 @@
         return nextTransforms && (this.attach(nextTransforms.refs), this.transforms = nextTransforms.transforms), this.spec.transform = transforms, this.commit(), this;
       }
       configure(config) {
-        const keys = ["clip", "zIndex", "interactive", "context", "setCustomizedShape", "large", "largeThreshold", "progressiveStep", "progressiveThreshold", "support3d", "morph", "morphKey", "morphElementKey", "attributeTransforms", "skipTheme"];
+        const keys = ["clip", "zIndex", "interactive", "context", "setCustomizedShape", "large", "largeThreshold", "progressiveStep", "progressiveThreshold", "support3d", "morph", "morphKey", "morphElementKey", "attributeTransforms", "skipTheme", "enableSegments"];
         return null === config ? (keys.forEach(key => {
           isNil$1(this.spec[key]) || (this.spec[key] = void 0);
         }), this) : (keys.forEach(key => {
           isNil$1(config[key]) || (this.spec[key] = config[key]);
         }), this);
       }
+      context(context) {
+        return this.spec.context = context, this._context = context, this;
+      }
       isCollectionMark() {
         return CollectionMarkType.includes(this.markType);
       }
@@ -44735,7 +44997,7 @@
         this.graphicIndex = markIndex;
       }
       update(spec) {
-        this.context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || (spec.animation && this.animate.updateConfig(spec.animation), this.animate.updateState(spec.animationState)), this.markType !== GrammarMarkType.group ? (isNil$1(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$1(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), this.elementMap.forEach(element => {
+        this._context = this.spec.context, this.isUpdated = !0, this.renderContext.progressive || (spec.animation && this.animate.updateConfig(spec.animation), this.animate.updateState(spec.animationState)), this.markType !== GrammarMarkType.group ? (isNil$1(spec.zIndex) || this.graphicItem.setAttribute("zIndex", spec.zIndex), isNil$1(spec.clip) || this.graphicItem.setAttribute("clip", spec.clip), this.elementMap.forEach(element => {
           element.updateGraphicItem({
             interactive: spec.interactive
           });
@@ -45009,6 +45271,9 @@
         var _a;
         return null !== (_a = this.spec.attributeTransforms) && void 0 !== _a ? _a : transformsByType[this.markType];
       }
+      getContext() {
+        return this._context;
+      }
       needSkipBeforeLayout() {
         var _a, _b;
         if (!0 === (null === (_a = this.spec.layout) || void 0 === _a ? void 0 : _a.skipBeforeLayouted)) return !0;
@@ -45441,10 +45706,10 @@
             p1 = polarToCartesian$2(origin, this.outerRadius, angles[i]);
           xs.push(p0.x), xs.push(p1.x), ys.push(p0.y), ys.push(p1.y);
         }
-        const minX = Math.min.apply(null, xs),
-          minY = Math.min.apply(null, ys),
-          maxX = Math.max.apply(null, xs),
-          maxY = Math.max.apply(null, ys);
+        const minX = minInArray(xs),
+          minY = minInArray(ys),
+          maxX = maxInArray(xs),
+          maxY = maxInArray(ys);
         this.startPoint = {
           x: minX,
           y: minY
@@ -48592,16 +48857,10 @@
       if (0 === arr.length) return 0;
       return sum(arr) / arr.length;
     }
-    function min(arr) {
-      return Math.min(...arr);
-    }
-    function max(arr) {
-      return Math.max(...arr);
-    }
 
     const samplerMap = {
-      min: min,
-      max: max,
+      min: minInArray,
+      max: maxInArray,
       average: average,
       sum: sum
     };
@@ -51772,7 +52031,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     function stackTotal(stackData, valueField) {
         if ('values' in stackData && stackData.values.length) {
             const total = sum$1(stackData.values, valueField);
-            const percent = max$1(stackData.values, STACK_FIELD_END_PERCENT);
+            const percent = max(stackData.values, STACK_FIELD_END_PERCENT);
             stackData.values.forEach(v => {
                 v[STACK_FIELD_TOTAL] = total;
                 v[STACK_FIELD_TOTAL_PERCENT] = percent;
@@ -52204,8 +52463,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     const angleStandardize = (angle, range) => {
         const unit = Math.PI * 2;
-        const min = Math.min(...range);
-        const max = Math.max(...range);
+        const min = minInArray(range);
+        const max = maxInArray(range);
         if (angle < min) {
             angle += Math.ceil((min - angle) / unit) * unit;
         }
@@ -53470,7 +53729,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (source === exports.Event_Source_Type.chart) {
                 const wrappedCallback = function (event, element) {
                     var _a, _b, _c;
-                    const context = (_b = (_a = element === null || element === void 0 ? void 0 : element.mark) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : {};
+                    const context = (_b = (_a = element === null || element === void 0 ? void 0 : element.mark) === null || _a === void 0 ? void 0 : _a.getContext()) !== null && _b !== void 0 ? _b : {};
                     const modelId = isValid$1(context.modelId) ? context.modelId : null;
                     const markId = isValid$1(context.markId) ? context.markId : null;
                     const modelUserId = isValid$1(context.modelUserId) ? context.modelUserId : null;
@@ -53793,6 +54052,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         resultA.reSize = resultA.reSize || resultB.reSize;
         return resultA;
     }
+    function getTrimPaddingConfig(chartType, spec) {
+        if (chartType === 'line' ||
+            chartType === 'area' ||
+            (chartType === 'common' && spec.series.every(item => item.type === 'area' || item.type === 'line'))) {
+            return {
+                paddingInner: 1,
+                paddingOuter: 0
+            };
+        }
+        return {
+            paddingOuter: 0
+        };
+    }
 
     var STATE_VALUE_ENUM;
     (function (STATE_VALUE_ENUM) {
@@ -56379,6 +56651,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         setProgressiveConfig(config) {
             this._progressiveConfig = config;
         }
+        setCustomizedShapeCallback(callback) {
+            this._setCustomizedShape = callback;
+        }
+        setEnableSegments(enable) {
+            this._enableSegments = enable;
+        }
         constructor(option, name, model) {
             super(option);
             this.grammarType = GrammarType.mark;
@@ -56560,7 +56838,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     modelUserId: this.model.userId
                 },
                 skipTheme: this.getSkipTheme(),
-                support3d: this.getSupport3d()
+                support3d: this.getSupport3d(),
+                enableSegments: !!this._enableSegments
             };
             if (this._progressiveConfig) {
                 config.progressiveStep = this._progressiveConfig.progressiveStep;
@@ -56573,6 +56852,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 config.morphKey = this._morphKey;
                 config.morphElementKey = this._morphElementKey;
             }
+            if (this._setCustomizedShape) {
+                config.setCustomizedShape = this._setCustomizedShape;
+            }
             this._product.configure(config);
         }
         compileSignal() {
@@ -58348,7 +58630,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.7.0-alpha.1";
+    const version = "1.7.0";
 
     class ChartData {
         get dataList() {
@@ -59804,36 +60086,37 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!spec.axes) {
                     spec.axes = [];
                 }
-                spec.region.forEach((r) => {
-                    const haxAxes = { x: false, y: false, z: false };
-                    spec.axes.forEach((axis) => {
-                        const { orient } = axis;
-                        if (orient === 'top' || orient === 'bottom') {
-                            haxAxes.x = true;
-                        }
-                        if (orient === 'left' || orient === 'right') {
-                            haxAxes.y = true;
-                        }
-                        if (orient === 'z') {
-                            haxAxes.z = true;
-                        }
-                    });
-                    if (!haxAxes.x) {
-                        spec.axes.push({
-                            orient: 'bottom'
-                        });
+                const haxAxes = { x: false, y: false, z: false };
+                spec.axes.forEach((axis) => {
+                    const { orient } = axis;
+                    if (orient === 'top' || orient === 'bottom') {
+                        haxAxes.x = true;
                     }
-                    if (!haxAxes.y) {
-                        spec.axes.push({
-                            orient: 'left'
-                        });
+                    if (orient === 'left' || orient === 'right') {
+                        haxAxes.y = true;
                     }
-                    if (spec.zField && !haxAxes.z) {
-                        spec.axes.push({
-                            orient: 'z'
-                        });
+                    if (orient === 'z') {
+                        haxAxes.z = true;
+                    }
+                    if (get$1(axis, 'trimPadding')) {
+                        mergeSpec(axis, getTrimPaddingConfig(this.type, spec));
                     }
                 });
+                if (!haxAxes.x) {
+                    spec.axes.push({
+                        orient: 'bottom'
+                    });
+                }
+                if (!haxAxes.y) {
+                    spec.axes.push({
+                        orient: 'left'
+                    });
+                }
+                if (spec.zField && !haxAxes.z) {
+                    spec.axes.push({
+                        orient: 'z'
+                    });
+                }
             }
             const defaultSeriesSpec = this._getDefaultSeriesSpec(spec);
             if (!spec.series || spec.series.length === 0) {
@@ -60302,16 +60585,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const methods = {
         min: (arr) => {
-            return arr.length ? Math.min.apply(null, arr) : 0;
+            return arr.length ? minInArray(arr.map(n => n * 1)) : 0;
         },
         max: (arr) => {
-            return arr.length ? Math.max.apply(null, arr) : 0;
+            return arr.length ? maxInArray(arr.map(n => n * 1)) : 0;
         },
         'array-min': (arr) => {
-            return arr.length ? Math.min.apply(null, arr) : 0;
+            return arr.length ? minInArray(arr.map(n => n * 1)) : 0;
         },
         'array-max': (arr) => {
-            return arr.length ? Math.max.apply(null, arr) : 0;
+            return arr.length ? maxInArray(arr.map(n => n * 1)) : 0;
         },
         values: (arr) => {
             const map = {};
@@ -61062,11 +61345,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const mark = this._createMark({ type: spec.type, name: `${namePrefix}_${index}` }, {
                 markSpec: spec,
                 parent: parentMark,
-                dataView: false
+                dataView: false,
+                customShape: spec === null || spec === void 0 ? void 0 : spec.customShape
             });
             if (!mark) {
                 return;
             }
+            const config = animationConfig({}, userAnimationConfig(spec.type, spec, this._markAttributeContext));
+            mark.setAnimationConfig(config);
             if (spec.type === 'group') {
                 namePrefix = `${namePrefix}_${index}`;
                 (_a = spec.children) === null || _a === void 0 ? void 0 : _a.forEach((s, i) => {
@@ -61409,7 +61695,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _createMark(markInfo, option = {}) {
             var _a, _b, _c, _d;
-            const { key, groupKey, skipBeforeLayouted, themeSpec = {}, markSpec, dataView, dataProductId, parent, isSeriesMark, depend, label, progressive, support3d = this._spec.support3d || !!this._spec.zField, morph = false } = option;
+            const { key, groupKey, skipBeforeLayouted, themeSpec = {}, markSpec, dataView, dataProductId, parent, isSeriesMark, depend, label, progressive, support3d = this._spec.support3d || !!this._spec.zField, morph = false, customShape } = option;
             const m = super._createMark(markInfo, {
                 key: key !== null && key !== void 0 ? key : this._getDataIdKey(),
                 support3d,
@@ -61453,6 +61739,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!isNil$1(groupKey)) {
                     m.setGroupKey(groupKey);
                 }
+                if (customShape) {
+                    m.setCustomizedShapeCallback(customShape);
+                }
                 this.initMarkStyleWithSpec(m, mergeSpec({}, themeSpec, markSpec || spec[m.name]));
             }
             return m;
@@ -62000,18 +62289,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initLineMark(progressive, isSeriesMark) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             this._lineMark = this._createMark(lineLikeSeriesMark.line, {
                 defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 isSeriesMark: isSeriesMark !== null && isSeriesMark !== void 0 ? isSeriesMark : true,
-                progressive
+                progressive,
+                customShape: (_a = this._spec.line) === null || _a === void 0 ? void 0 : _a.customShape
             });
-            const isPointVisible = ((_a = this._spec.point) === null || _a === void 0 ? void 0 : _a.visible) !== false && ((_c = (_b = this._spec.point) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.visible) !== false;
+            const isPointVisible = ((_b = this._spec.point) === null || _b === void 0 ? void 0 : _b.visible) !== false && ((_d = (_c = this._spec.point) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.visible) !== false;
             if (!isPointVisible && this._lineMark) {
                 this._lineMark.setLabelSpec(this._preprocessLabelSpec(this._spec.label, this.initLabelMarkStyle));
             }
-            if (this._lineMark && ((_d = this._spec.lineLabel) === null || _d === void 0 ? void 0 : _d.visible)) {
+            if (this._lineMark && ((_e = this._spec.lineLabel) === null || _e === void 0 ? void 0 : _e.visible)) {
                 this._lineMark.addLabelSpec(this._preprocessLabelSpec(this._spec.lineLabel, this.initLineLabelMarkStyle), true);
             }
             return this._lineMark;
@@ -62086,7 +62376,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initSymbolMark(progressive, isSeriesMark) {
-            var _a;
+            var _a, _b, _c;
             if (((_a = this._spec.point) === null || _a === void 0 ? void 0 : _a.visible) !== false) {
                 this._symbolMark = this._createMark(lineLikeSeriesMark.point, {
                     morph: shouldMarkDoMorph(this._spec, lineLikeSeriesMark.point.name),
@@ -62094,7 +62384,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     groupKey: this._seriesField,
                     label: this._preprocessLabelSpec(this._spec.label),
                     progressive,
-                    isSeriesMark: !!isSeriesMark
+                    isSeriesMark: !!isSeriesMark,
+                    customShape: (_b = this._spec.point) === null || _b === void 0 ? void 0 : _b.customShape
                 });
             }
             if (this._spec.activePoint === true) {
@@ -62104,7 +62395,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     morph: false,
                     groupKey: this._seriesField,
                     isSeriesMark: false,
-                    dataView: activeData
+                    dataView: activeData,
+                    customShape: (_c = this._spec.point) === null || _c === void 0 ? void 0 : _c.customShape
                 });
                 this._symbolActiveMark.setVisible(false);
             }
@@ -62256,7 +62548,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this.setAttribute(attr, styleConverter, state, level, stateStyle);
             });
             if (enableSegments) {
-                this.setAttribute('enableSegments', true, state, level, stateStyle);
+                this.setEnableSegments(enableSegments);
             }
         }
     }
@@ -62414,9 +62706,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.type = TextMark.type;
         }
         _getDefaultStyle() {
-            const defaultStyle = Object.assign(Object.assign({}, super._getDefaultStyle()), { angle: 0, textAlign: 'center', lineWidth: 0 });
+            const defaultStyle = Object.assign(Object.assign({}, super._getDefaultStyle()), { angle: 0, textAlign: 'center', lineWidth: 0, textConfig: [] });
             return defaultStyle;
         }
+        _initProduct(group) {
+            const view = this.getVGrammarView();
+            const id = this.getProductId();
+            if (this.getStyle('textType') === 'rich') {
+                this._product = view.mark(GrammarMarkType.richtext, group !== null && group !== void 0 ? group : view.rootMark).id(id);
+            }
+            else {
+                this._product = view.mark(GrammarMarkType.text, group !== null && group !== void 0 ? group : view.rootMark).id(id);
+            }
+            this._compiledProductId = id;
+        }
     }
     TextMark.type = MarkTypeEnum.text;
 
@@ -62535,7 +62838,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             areaSpec.visible = !(!isAreaVisible && !isLineVisible);
         }
         initMark() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const progressive = {
                 progressiveStep: this._spec.progressiveStep,
                 progressiveThreshold: this._spec.progressiveThreshold,
@@ -62549,12 +62852,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 groupKey: this._seriesField,
                 defaultMorphElementKey: this.getDimensionField()[0],
                 progressive,
-                isSeriesMark: isAreaVisible && seriesMark !== 'point'
+                isSeriesMark: isAreaVisible && seriesMark !== 'point',
+                customShape: (_h = this._spec.area) === null || _h === void 0 ? void 0 : _h.customShape
             });
-            if (this._areaMark && ((_j = (_h = this._spec) === null || _h === void 0 ? void 0 : _h.areaLabel) === null || _j === void 0 ? void 0 : _j.visible)) {
+            if (this._areaMark && ((_k = (_j = this._spec) === null || _j === void 0 ? void 0 : _j.areaLabel) === null || _k === void 0 ? void 0 : _k.visible)) {
                 this._areaMark.addLabelSpec(this._preprocessLabelSpec(this._spec.areaLabel, this.initLineLabelMarkStyle), true);
             }
-            if (!isPointVisible && this._areaMark && ((_k = this._spec.label) === null || _k === void 0 ? void 0 : _k.visible)) {
+            if (!isPointVisible && this._areaMark && ((_l = this._spec.label) === null || _l === void 0 ? void 0 : _l.visible)) {
                 this._areaMark.addLabelSpec(this._preprocessLabelSpec(this._spec.label));
             }
             this.initSymbolMark(progressive, seriesMark === 'point');
@@ -62846,6 +63150,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._bandPosition = 0;
         }
         initMark() {
+            var _a;
             const progressive = {
                 progressiveStep: this._spec.progressiveStep,
                 progressiveThreshold: this._spec.progressiveThreshold,
@@ -62859,16 +63164,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 groupKey: this._seriesField,
                 isSeriesMark: true,
                 label: this._preprocessLabelSpec(this._spec.label),
-                progressive
+                progressive,
+                customShape: (_a = this._spec.bar) === null || _a === void 0 ? void 0 : _a.customShape
             });
         }
         _initBarBackgroundMark(progressive) {
-            var _a;
+            var _a, _b;
             if ((_a = this._spec.barBackground) === null || _a === void 0 ? void 0 : _a.visible) {
                 this._barBackgroundMark = this._createMark(BarSeries.mark.barBackground, {
                     dataView: this._barBackgroundViewData.getDataView(),
                     dataProductId: this._barBackgroundViewData.getProductId(),
-                    progressive
+                    progressive,
+                    customShape: (_b = this._spec.barBackground) === null || _b === void 0 ? void 0 : _b.customShape
                 });
             }
         }
@@ -63513,6 +63820,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }, 'shape');
         }
         initMark() {
+            var _a;
             const progressive = {
                 progressiveStep: this._spec.progressiveStep,
                 progressiveThreshold: this._spec.progressiveThreshold,
@@ -63525,7 +63833,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 groupKey: this._seriesField,
                 label: this._preprocessLabelSpec(this._spec.label),
                 progressive,
-                isSeriesMark: true
+                isSeriesMark: true,
+                customShape: (_a = this._spec.point) === null || _a === void 0 ? void 0 : _a.customShape
             });
         }
         initMarkStyle() {
@@ -66060,6 +66369,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._viewDataLabel = new SeriesData(this._option, viewDataLabel);
         }
         initMark() {
+            var _a;
             this._pieMark = this._createMark(Object.assign(Object.assign({}, BasePieSeries.mark.pie), { name: this._pieMarkName, type: this._pieMarkType }), {
                 morph: shouldMarkDoMorph(this._spec, this._pieMarkName),
                 defaultMorphElementKey: this._seriesField,
@@ -66067,7 +66377,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 groupKey: this._seriesField,
                 skipBeforeLayouted: true,
                 isSeriesMark: true,
-                label: this._preprocessLabelSpec(this._spec.label)
+                label: this._preprocessLabelSpec(this._spec.label),
+                customShape: (_a = this._spec.pie) === null || _a === void 0 ? void 0 : _a.customShape
             });
         }
         initMarkStyle() {
@@ -66632,12 +66943,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initRoseMarkStyle();
         }
         initRoseMark() {
+            var _a;
             this._roseMark = this._createMark(RoseSeries.mark.rose, {
                 morph: shouldMarkDoMorph(this._spec, RoseSeries.mark.rose.name),
                 defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 isSeriesMark: true,
-                label: this._preprocessLabelSpec(this._spec.label)
+                label: this._preprocessLabelSpec(this._spec.label),
+                customShape: (_a = this._spec.rose) === null || _a === void 0 ? void 0 : _a.customShape
             });
         }
         getRoseAngle() {
@@ -67030,9 +67343,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.initSymbolMarkStyle();
         }
         initAreaMark(progressive, isSeriesMark) {
+            var _a;
             this._areaMark = this._createMark(RadarSeries.mark.area, {
                 progressive,
-                isSeriesMark
+                isSeriesMark,
+                customShape: (_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.customShape
             });
         }
         initAreaMarkStyle() {
@@ -67199,7 +67514,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         transformSpec(spec) {
             super.transformSpec(spec);
-            if (isArray$1(spec.series)) {
+            if (spec.series && spec.series.length) {
                 const defaultSeriesSpec = this._getDefaultSeriesSpec(spec);
                 spec.series.forEach((s) => {
                     if (!this.isValidSeries(s.type)) {
@@ -67212,6 +67527,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     });
                 });
             }
+            if (spec.axes && spec.axes.length) {
+                spec.axes.forEach((axis) => {
+                    if (get$1(axis, 'trimPadding')) {
+                        mergeSpec(axis, getTrimPaddingConfig(this.type, spec));
+                    }
+                });
+            }
         }
     }
     CommonChart.type = ChartTypeEnum.common;
@@ -68745,9 +69067,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initProgressMarkStyle();
         }
         _initProgressMark() {
+            var _a;
             this._progressMark = this._createMark(CircularProgressSeries.mark.progress, {
                 parent: this._arcGroupMark,
-                isSeriesMark: true
+                isSeriesMark: true,
+                customShape: (_a = this._spec.progress) === null || _a === void 0 ? void 0 : _a.customShape
             });
             return this._progressMark;
         }
@@ -68777,8 +69101,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._progressMark && this._tooltipHelper.activeTriggerSet.mark.add(this._progressMark);
         }
         _initTrackMark() {
+            var _a;
             this._trackMark = this._createMark(CircularProgressSeries.mark.track, {
-                parent: this._arcGroupMark
+                parent: this._arcGroupMark,
+                customShape: (_a = this._spec.track) === null || _a === void 0 ? void 0 : _a.customShape
             });
             return this._trackMark;
         }
@@ -71590,7 +71916,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             hasPlaced: !1
           };
         }),
-        wordsMaxFontSize = Math.max(...words.map(word => word.fontSize));
+        wordsMaxFontSize = maxInArray(words.map(word => word.fontSize));
       words.forEach(word => word.weight = word.fontSize / wordsMaxFontSize), words.sort((a, b) => b.weight - a.weight);
       const {
         fillingWords: fillingWords,
@@ -72240,7 +72566,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMark() {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             this._funnelMark = this._createMark(Object.assign(Object.assign({}, FunnelSeries.mark.funnel), { name: this._funnelMarkName, type: this._funnelMarkType }), {
                 themeSpec: (_a = this._theme) === null || _a === void 0 ? void 0 : _a.funnel,
                 morph: shouldMarkDoMorph(this._spec, this._funnelMarkName),
@@ -72248,23 +72574,25 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 key: this._seriesField,
                 groupKey: this._seriesField,
                 isSeriesMark: true,
-                label: this._preprocessLabelSpec(this._spec.label)
+                label: this._preprocessLabelSpec(this._spec.label),
+                customShape: (_b = this._spec.funnel) === null || _b === void 0 ? void 0 : _b.customShape
             });
             if (this._spec.isTransform) {
                 this._funnelTransformMark = this._createMark(Object.assign(Object.assign({}, FunnelSeries.mark.transform), { name: this._transformMarkName, type: this._transformMarkType }), {
-                    themeSpec: (_b = this._theme) === null || _b === void 0 ? void 0 : _b.transform,
+                    themeSpec: (_c = this._theme) === null || _c === void 0 ? void 0 : _c.transform,
                     key: this._seriesField,
                     skipBeforeLayouted: false,
                     dataView: this._viewDataTransform.getDataView(),
                     dataProductId: this._viewDataTransform.getProductId(),
-                    label: this._preprocessLabelSpec(this._spec.transformLabel)
+                    label: this._preprocessLabelSpec(this._spec.transformLabel),
+                    customShape: (_d = this._spec.transform) === null || _d === void 0 ? void 0 : _d.customShape
                 });
             }
-            if ((_d = (_c = this._spec) === null || _c === void 0 ? void 0 : _c.outerLabel) === null || _d === void 0 ? void 0 : _d.visible) {
-                const { line } = (_e = this._spec.outerLabel) !== null && _e !== void 0 ? _e : {};
-                const { line: lineTheme } = (_g = (_f = this._theme) === null || _f === void 0 ? void 0 : _f.outerLabel) !== null && _g !== void 0 ? _g : {};
+            if ((_f = (_e = this._spec) === null || _e === void 0 ? void 0 : _e.outerLabel) === null || _f === void 0 ? void 0 : _f.visible) {
+                const { line } = (_g = this._spec.outerLabel) !== null && _g !== void 0 ? _g : {};
+                const { line: lineTheme } = (_j = (_h = this._theme) === null || _h === void 0 ? void 0 : _h.outerLabel) !== null && _j !== void 0 ? _j : {};
                 this._funnelOuterLabelMark.label = this._createMark(FunnelSeries.mark.outerLabel, {
-                    themeSpec: (_h = this._theme) === null || _h === void 0 ? void 0 : _h.outerLabel,
+                    themeSpec: (_k = this._theme) === null || _k === void 0 ? void 0 : _k.outerLabel,
                     key: this._seriesField,
                     markSpec: this._spec.outerLabel,
                     skipBeforeLayouted: true
@@ -72994,9 +73322,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initProgressMarkStyle();
         }
         _initProgressMark() {
+            var _a;
             this._progressMark = this._createMark(LinearProgressSeries.mark.progress, {
                 isSeriesMark: true,
-                parent: this._progressGroupMark
+                parent: this._progressGroupMark,
+                customShape: (_a = this._spec.progress) === null || _a === void 0 ? void 0 : _a.customShape
             });
             return this._progressMark;
         }
@@ -73046,8 +73376,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _initTrackMark() {
+            var _a;
             this._trackMark = this._createMark(LinearProgressSeries.mark.track, {
-                parent: this._progressGroupMark
+                parent: this._progressGroupMark,
+                customShape: (_a = this._spec.track) === null || _a === void 0 ? void 0 : _a.customShape
             });
             return this._trackMark;
         }
@@ -73488,7 +73820,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._stack = false;
         }
         initMark() {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             this._initBarBackgroundMark();
             const labelPosition = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.position;
             this._barMark = this._createMark(RangeColumnSeries.mark.bar, {
@@ -73496,17 +73828,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
                 label: labelPosition === PositionEnum.bothEnd ? undefined : this._preprocessLabelSpec(this._spec.label),
-                isSeriesMark: true
+                isSeriesMark: true,
+                customShape: (_b = this._spec.bar) === null || _b === void 0 ? void 0 : _b.customShape
             });
-            if (((_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.visible) !== false && labelPosition === PositionEnum.bothEnd) {
-                if (((_d = (_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.minLabel) === null || _d === void 0 ? void 0 : _d.visible) !== false) {
+            if (((_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.visible) !== false && labelPosition === PositionEnum.bothEnd) {
+                if (((_e = (_d = this._spec.label) === null || _d === void 0 ? void 0 : _d.minLabel) === null || _e === void 0 ? void 0 : _e.visible) !== false) {
                     this._minLabelMark = this._createMark(RangeColumnSeries.mark.minLabel, {
-                        markSpec: (_e = this._spec.label) === null || _e === void 0 ? void 0 : _e.minLabel
+                        markSpec: (_f = this._spec.label) === null || _f === void 0 ? void 0 : _f.minLabel
                     });
                 }
-                if (((_g = (_f = this._spec.label) === null || _f === void 0 ? void 0 : _f.maxLabel) === null || _g === void 0 ? void 0 : _g.visible) !== false) {
+                if (((_h = (_g = this._spec.label) === null || _g === void 0 ? void 0 : _g.maxLabel) === null || _h === void 0 ? void 0 : _h.visible) !== false) {
                     this._maxLabelMark = this._createMark(RangeColumnSeries.mark.maxLabel, {
-                        markSpec: (_h = this._spec.label) === null || _h === void 0 ? void 0 : _h.maxLabel
+                        markSpec: (_j = this._spec.label) === null || _j === void 0 ? void 0 : _j.maxLabel
                     });
                 }
             }
@@ -73735,7 +74068,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     const getInnerMostElements = (element) => {
         const updateElements = element.mark.elements.filter(e => e.diffState === DiffState.update);
-        const minDepth = Math.min(...updateElements.map(e => { var _a; return (_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a[0].depth; }));
+        const minDepth = minInArray(updateElements.map(e => { var _a; return (_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a[0].depth; }));
         return updateElements.filter(e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a[0].depth) === minDepth; });
     };
 
@@ -73743,8 +74076,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (isEmpty(elements)) {
             return [startAngle, endAngle];
         }
-        const minStartAngle = Math.min(...elements.map(m => m.getGraphicAttribute('startAngle', false)));
-        const maxEndAngle = Math.max(...elements.map(m => m.getGraphicAttribute('endAngle', false)));
+        const minStartAngle = minInArray(elements.map(m => m.getGraphicAttribute('startAngle', false) * 1));
+        const maxEndAngle = maxInArray(elements.map(m => m.getGraphicAttribute('endAngle', false) * 1));
         return [minStartAngle, maxEndAngle];
     };
     const sunburstEnter = (params) => {
@@ -73783,8 +74116,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
 
     const computeInnerAngleRange = (elements) => {
-        const minStartAngle = Math.min(...elements.map(m => m.getGraphicAttribute('startAngle', false)));
-        const maxEndAngle = Math.max(...elements.map(m => m.getGraphicAttribute('endAngle', false)));
+        const minStartAngle = minInArray(elements.map(m => m.getGraphicAttribute('startAngle', false) * 1));
+        const maxEndAngle = maxInArray(elements.map(m => m.getGraphicAttribute('endAngle', false) * 1));
         return [minStartAngle, maxEndAngle];
     };
     const sunburstExit = (params) => {
@@ -74833,11 +75166,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initLabelMarkStyle();
         }
         _initArcMark() {
+            var _a;
             if (this._sunburst.visible === false) {
                 return;
             }
             const sunburstMark = this._createMark(SunburstSeries.mark.sunburst, {
-                isSeriesMark: true
+                isSeriesMark: true,
+                customShape: (_a = this._spec.sunburst) === null || _a === void 0 ? void 0 : _a.customShape
             });
             this._sunburstMark = sunburstMark;
             this._trigger.registerMark(this._sunburstMark);
@@ -75160,12 +75495,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._initLabelMarkStyle();
         }
         _initCirclePackingMark() {
-            var _a;
+            var _a, _b;
             if (((_a = this._circlePacking) === null || _a === void 0 ? void 0 : _a.visible) === false) {
                 return;
             }
             const circlePacking = this._createMark(CirclePackingSeries.mark.circlePacking, {
-                isSeriesMark: true
+                isSeriesMark: true,
+                customShape: (_b = this._spec.circlePacking) === null || _b === void 0 ? void 0 : _b.customShape
             });
             this._circlePackingMark = circlePacking;
             this._trigger.registerMark(circlePacking);
@@ -75549,8 +75885,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             ]);
         }
         initMark() {
-            var _a, _b;
-            const nonLeafMark = this._createMark(TreemapSeries.mark.nonLeaf, { isSeriesMark: true });
+            var _a, _b, _c, _d;
+            const nonLeafMark = this._createMark(TreemapSeries.mark.nonLeaf, {
+                isSeriesMark: true,
+                customShape: (_a = this._spec.nonLeaf) === null || _a === void 0 ? void 0 : _a.customShape
+            });
             if (nonLeafMark) {
                 nonLeafMark.setTransform([
                     {
@@ -75563,7 +75902,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._trigger.registerMark(nonLeafMark);
                 this._nonLeafMark = nonLeafMark;
             }
-            const leafMark = this._createMark(TreemapSeries.mark.leaf, { isSeriesMark: true });
+            const leafMark = this._createMark(TreemapSeries.mark.leaf, {
+                isSeriesMark: true,
+                customShape: (_b = this._spec.leaf) === null || _b === void 0 ? void 0 : _b.customShape
+            });
             if (leafMark) {
                 leafMark.setTransform([
                     {
@@ -75576,7 +75918,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._leafMark = leafMark;
                 this._trigger.registerMark(leafMark);
             }
-            if ((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.visible) {
+            if ((_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.visible) {
                 const textMark = this._createMark(TreemapSeries.mark.label, {
                     skipBeforeLayouted: false
                 });
@@ -75593,7 +75935,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._trigger.registerMark(textMark);
                 }
             }
-            if ((_b = this._spec.nonLeafLabel) === null || _b === void 0 ? void 0 : _b.visible) {
+            if ((_d = this._spec.nonLeafLabel) === null || _d === void 0 ? void 0 : _d.visible) {
                 const textMark = this._createMark(TreemapSeries.mark.nonLeafLabel);
                 if (textMark) {
                     textMark.setTransform([
@@ -76088,17 +76430,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         LabelRule["stackLabel"] = "stackLabel";
         LabelRule["line"] = "line";
     })(LabelRule || (LabelRule = {}));
-    function textAttribute(labelInfo, datum, formatMethod) {
+    function textAttribute(labelInfo, datum, formatMethod, formatter) {
+        var _a;
         const { labelMark, series } = labelInfo;
         const field = series.getMeasureField()[0];
-        const textAttribute = { text: datum[field], data: datum };
+        const textAttribute = { text: datum[field], data: datum, textType: (_a = labelInfo.labelSpec.textType) !== null && _a !== void 0 ? _a : 'text' };
         const attributes = Object.keys(labelMark.stateStyle.normal);
         for (const key of attributes) {
             const attr = labelMark.getAttribute(key, datum);
             textAttribute[key] = attr;
-            if (key === 'text' && formatMethod) {
-                textAttribute[key] = formatMethod(textAttribute[key], datum, { series });
+        }
+        if (formatMethod) {
+            textAttribute.text = formatMethod(textAttribute.text, datum, { series });
+        }
+        if (formatter) {
+            if (series.type === 'pie') {
+                datum._percent_ = (datum[ARC_RATIO] * 100).toFixed(2) + '%';
+            }
+            else if (datum[STACK_FIELD_END_PERCENT]) {
+                datum._percent_ = (datum[STACK_FIELD_END_PERCENT] * 100).toFixed(2) + '%';
             }
+            textAttribute.text = substitute(formatter, datum);
         }
         return textAttribute;
     }
@@ -76441,16 +76793,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._totalData.updateData();
         }
         initMark() {
-            var _a;
+            var _a, _b;
             super.initMark();
             const leaderLine = this._createMark(WaterfallSeries.mark.leaderLine, {
-                key: 'index'
+                key: 'index',
+                customShape: (_a = this._spec.leaderLine) === null || _a === void 0 ? void 0 : _a.customShape
             });
             if (leaderLine) {
                 this._leaderLineMark = leaderLine;
                 leaderLine.setDataView(this._totalData.getDataView(), this._totalData.getProductId());
             }
-            if ((_a = this._spec.stackLabel) === null || _a === void 0 ? void 0 : _a.visible) {
+            if ((_b = this._spec.stackLabel) === null || _b === void 0 ? void 0 : _b.visible) {
                 this._barMark.addLabelSpec(this._preprocessLabelSpec(this._spec.stackLabel));
             }
         }
@@ -77287,7 +77640,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
           this.options.divideNodeValueToLink && isNil$1(link.value) && invalidLinks.push(linkElement), links.push(linkElement), nodeMap[link.source].sourceLinks.push(linkElement), nodeMap[link.target].targetLinks.push(linkElement);
         }), this.options.divideNodeValueToLink && invalidLinks.length && invalidLinks.forEach(link => {
           const values = [calcDivideValue(nodeMap[link.source]), calcDivideValue(nodeMap[link.target], !0)].filter(entry => !isNil$1(entry));
-          values.length && (link.value = Math.min.apply(null, values));
+          values.length && (link.value = minInArray(values));
         }), this.options.linkSortBy) for (let i = 0, len = nodes.length; i < len; i++) nodes[i].sourceLinks.sort(this.options.linkSortBy), nodes[i].targetLinks.sort(this.options.linkSortBy);
         return this.options.dropIsolatedNode && (nodes = nodes.filter(node => node.targetLinks.length || node.sourceLinks.length)), {
           nodes: nodes,
@@ -78511,12 +78864,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initMark() {
-            var _a;
+            var _a, _b, _c;
             const nodeMark = this._createMark(SankeySeries.mark.node, {
                 isSeriesMark: true,
                 key: DEFAULT_DATA_INDEX,
                 dataView: this._nodesSeriesData.getDataView(),
-                dataProductId: this._nodesSeriesData.getProductId()
+                dataProductId: this._nodesSeriesData.getProductId(),
+                customShape: (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.customShape
             });
             if (nodeMark) {
                 nodeMark.setZIndex(this._nodeLayoutZIndex);
@@ -78525,12 +78879,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const linkMark = this._createMark(SankeySeries.mark.link, {
                 key: DEFAULT_DATA_INDEX,
                 dataView: this._linksSeriesData.getDataView(),
-                dataProductId: this._linksSeriesData.getProductId()
+                dataProductId: this._linksSeriesData.getProductId(),
+                customShape: (_b = this._spec.link) === null || _b === void 0 ? void 0 : _b.customShape
             });
             if (linkMark) {
                 this._linkMark = linkMark;
             }
-            if ((_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.visible) {
+            if ((_c = this._spec.label) === null || _c === void 0 ? void 0 : _c.visible) {
                 const labelMark = this._createMark(SankeySeries.mark.label, {
                     key: DEFAULT_DATA_INDEX,
                     dataView: this._nodesSeriesData.getDataView(),
@@ -79051,10 +79406,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.type = exports.SeriesTypeEnum.rangeArea;
         }
         initMark() {
+            var _a;
             this._areaMark = this._createMark(RangeAreaSeries.mark.area, {
                 defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
-                isSeriesMark: true
+                isSeriesMark: true,
+                customShape: (_a = this._spec.area) === null || _a === void 0 ? void 0 : _a.customShape
             });
         }
         initMarkStyle() {
@@ -79202,6 +79559,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.setFieldValue(this._spec.valueField);
         }
         initMark() {
+            var _a, _b;
             const progressive = {
                 progressiveStep: this._spec.progressiveStep,
                 progressiveThreshold: this._spec.progressiveThreshold,
@@ -79213,10 +79571,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 defaultMorphElementKey: this.getDimensionField()[0],
                 isSeriesMark: true,
                 label: this._preprocessLabelSpec(this._spec.label),
-                progressive
+                progressive,
+                customShape: (_a = this._spec.cell) === null || _a === void 0 ? void 0 : _a.customShape
             });
             this._backgroundMark = this._createMark(HeatmapSeries.mark.cellBackground, {
-                progressive
+                progressive,
+                customShape: (_b = this._spec.cellBackground) === null || _b === void 0 ? void 0 : _b.customShape
             });
         }
         initMarkStyle() {
@@ -79606,11 +79966,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         initMark() {
+            var _a, _b;
             const nodePointMark = this._createMark(CorrelationSeries.mark.nodePoint, {
                 groupKey: this._seriesField,
                 label: this._preprocessLabelSpec(this._spec.label),
                 isSeriesMark: true,
-                key: DEFAULT_DATA_INDEX
+                key: DEFAULT_DATA_INDEX,
+                customShape: (_a = this._spec.nodePoint) === null || _a === void 0 ? void 0 : _a.customShape
             });
             if (nodePointMark) {
                 nodePointMark.setZIndex(exports.LayoutZIndex.Node);
@@ -79628,7 +79990,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 label: this._preprocessLabelSpec(this._spec.centerLabel),
                 key: DEFAULT_DATA_INDEX,
                 dataView: this._centerSeriesData.getDataView(),
-                dataProductId: this._centerSeriesData.getProductId()
+                dataProductId: this._centerSeriesData.getProductId(),
+                customShape: (_b = this._spec.centerPoint) === null || _b === void 0 ? void 0 : _b.customShape
             });
             if (centerPointMark) {
                 centerPointMark.setZIndex(exports.LayoutZIndex.Node);
@@ -80279,7 +80642,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 specIndex: this._seriesIndex
             });
             if (groups.length !== 0) {
-                const depth = Math.max(...groups.map(g => g.fields.length));
+                const depth = maxInArray(groups.map(g => g.fields.length));
                 for (let i = 1; i < depth; i++) {
                     const scale = this._scale.clone();
                     this._scales.push(scale);
@@ -80378,31 +80741,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         : transformToGraphic(spec.subTick.style),
                     state: transformStateStyle(spec.subTick.state)
                 },
-                title: {
-                    visible: spec.title.visible,
-                    position: spec.title.position,
-                    space: spec.title.space,
-                    autoRotate: false,
-                    angle: titleAngle ? degreeToRadian(titleAngle) : null,
-                    textStyle: mergeSpec({}, titleTextStyle, transformToGraphic(spec.title.style)),
-                    padding: spec.title.padding,
-                    shape: {
+                title: Object.assign({ visible: spec.title.visible, position: spec.title.position, space: spec.title.space, autoRotate: false, angle: titleAngle ? degreeToRadian(titleAngle) : null, textStyle: mergeSpec({}, titleTextStyle, transformToGraphic(spec.title.style)), padding: spec.title.padding, shape: {
                         visible: (_b = spec.title.shape) === null || _b === void 0 ? void 0 : _b.visible,
                         space: (_c = spec.title.shape) === null || _c === void 0 ? void 0 : _c.space,
                         style: transformToGraphic((_d = spec.title.shape) === null || _d === void 0 ? void 0 : _d.style)
-                    },
-                    background: {
+                    }, background: {
                         visible: (_e = spec.title.background) === null || _e === void 0 ? void 0 : _e.visible,
                         style: transformToGraphic((_f = spec.title.background) === null || _f === void 0 ? void 0 : _f.style)
-                    },
-                    state: {
+                    }, state: {
                         text: transformStateStyle(spec.title.state),
                         shape: transformStateStyle((_g = spec.title.shape) === null || _g === void 0 ? void 0 : _g.state),
                         background: transformStateStyle((_h = spec.title.background) === null || _h === void 0 ? void 0 : _h.state)
-                    },
-                    pickable: ((_j = spec.title.style) === null || _j === void 0 ? void 0 : _j.pickable) !== false,
-                    childrenPickable: ((_k = spec.title.style) === null || _k === void 0 ? void 0 : _k.pickable) !== false
-                },
+                    }, pickable: ((_j = spec.title.style) === null || _j === void 0 ? void 0 : _j.pickable) !== false, childrenPickable: ((_k = spec.title.style) === null || _k === void 0 ? void 0 : _k.pickable) !== false }, spec.title),
                 panel: {
                     visible: (_l = spec.background) === null || _l === void 0 ? void 0 : _l.visible,
                     style: transformToGraphic((_m = spec.background) === null || _m === void 0 ? void 0 : _m.style),
@@ -83048,21 +83398,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     const measureTooltipText = (text, style) => {
         var _a;
-        text = (text !== null && text !== void 0 ? text : '').toString();
         let textLines;
-        if (style.multiLine) {
-            textLines = text.split('\n');
-            textLines = textLines.map((line, i) => (i < textLines.length - 1 ? line + '\n' : line));
+        let textConfig;
+        if (!((text === null || text === void 0 ? void 0 : text.type) === 'rich' || (text === null || text === void 0 ? void 0 : text.type) === 'html')) {
+            text = (text !== null && text !== void 0 ? text : '').toString();
+            if (style.multiLine) {
+                textLines = text.split('\n');
+                textLines = textLines.map((line, i) => (i < textLines.length - 1 ? line + '\n' : line));
+            }
+            else {
+                textLines = [text];
+            }
+            textConfig = textLines.map(line => (Object.assign(Object.assign({}, style), { text: line })));
         }
         else {
-            textLines = [text];
+            textConfig = text.text;
+            textLines = text;
         }
         const bound = getRichTextBounds({
             wordBreak: (_a = style.wordBreak) !== null && _a !== void 0 ? _a : 'break-word',
             maxWidth: style.maxWidth ? style.maxWidth : undefined,
             width: 0,
             height: 0,
-            textConfig: textLines.map(line => (Object.assign(Object.assign({}, style), { text: line })))
+            textConfig: textConfig
         });
         return {
             width: bound.width(),
@@ -83594,10 +83952,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 return itemAttrs;
             });
-            maxKeyWidth = keyWidths.length ? Math.max(...keyWidths) : 0;
-            maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? Math.max(...adaptiveKeyWidths) : 0;
-            maxValueWidth = valueWidths.length ? Math.max(...valueWidths) : 0;
-            maxShapeWidth = shapeWidths.length ? Math.max(...shapeWidths) + shapeStyle.spacing : 0;
+            maxKeyWidth = keyWidths.length ? maxInArray(keyWidths) : 0;
+            maxAdaptiveKeyWidth = adaptiveKeyWidths.length ? maxInArray(adaptiveKeyWidths) : 0;
+            maxValueWidth = valueWidths.length ? maxInArray(valueWidths) : 0;
+            maxShapeWidth = shapeWidths.length ? maxInArray(shapeWidths) + shapeStyle.spacing : 0;
             contentMaxWidth = Math.max(maxShapeWidth + maxKeyWidth + keyStyle.spacing + maxValueWidth + valueStyle.spacing, maxShapeWidth + maxAdaptiveKeyWidth, contentMaxWidth);
             attributes.hasContentShape = !!shapeWidths.length;
             attributes.keyWidth = maxKeyWidth;
@@ -87092,6 +87450,56 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
         }
+        _isReverse() {
+            const axis = this._relatedAxisComponent;
+            if (!axis) {
+                return false;
+            }
+            const axisScale = axis.getScale();
+            const axisSpec = axis.getSpec();
+            return axisScale.range()[0] > axisScale.range()[1] && (!axisSpec.inverse || this._isHorizontal);
+        }
+        _updateRangeFactor(tag, label) {
+            const axis = this._relatedAxisComponent;
+            const axisScale = axis.getScale();
+            const reverse = this._isReverse();
+            const newRangeFactor = reverse ? [1 - this._end, 1 - this._start] : [this._start, this._end];
+            if (reverse) {
+                switch (tag) {
+                    case 'startHandler':
+                        axisScale.rangeFactorEnd(newRangeFactor[1]);
+                        break;
+                    case 'endHandler':
+                        axisScale.rangeFactorStart(newRangeFactor[0]);
+                        break;
+                    default:
+                        axisScale.rangeFactorStart(newRangeFactor[0], true);
+                        axisScale.rangeFactorEnd(newRangeFactor[1]);
+                }
+            }
+            else {
+                switch (tag) {
+                    case 'startHandler':
+                        axisScale.rangeFactorStart(newRangeFactor[0]);
+                        break;
+                    case 'endHandler':
+                        axisScale.rangeFactorEnd(newRangeFactor[1]);
+                        break;
+                    default:
+                        axisScale.rangeFactorEnd(newRangeFactor[1], true);
+                        axisScale.rangeFactorStart(newRangeFactor[0]);
+                }
+            }
+            const newFactor = axisScale.rangeFactor();
+            if (newFactor) {
+                this._start = reverse ? 1 - newFactor[1] : newFactor[0];
+                this._end = reverse ? 1 - newFactor[0] : newFactor[1];
+            }
+            else {
+                this._start = 0;
+                this._end = 1;
+            }
+        }
         get visible() {
             return this._visible;
         }
@@ -87129,43 +87537,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             axisScale.maxBandwidth('auto');
                             axisScale.minBandwidth('auto');
                         }
-                        const reverse = axisScale.range()[0] > axisScale.range()[1] && (!axisSpec.inverse || this._isHorizontal);
-                        const newRangeFactor = reverse ? [1 - this._end, 1 - this._start] : [this._start, this._end];
-                        if (reverse) {
-                            switch (tag) {
-                                case 'startHandler':
-                                    axisScale.rangeFactorEnd(newRangeFactor[1]);
-                                    break;
-                                case 'endHandler':
-                                    axisScale.rangeFactorStart(newRangeFactor[0]);
-                                    break;
-                                default:
-                                    axisScale.rangeFactorStart(newRangeFactor[0], true);
-                                    axisScale.rangeFactorEnd(newRangeFactor[1]);
-                            }
-                        }
-                        else {
-                            switch (tag) {
-                                case 'startHandler':
-                                    axisScale.rangeFactorStart(newRangeFactor[0]);
-                                    break;
-                                case 'endHandler':
-                                    axisScale.rangeFactorEnd(newRangeFactor[1]);
-                                    break;
-                                default:
-                                    axisScale.rangeFactorEnd(newRangeFactor[1], true);
-                                    axisScale.rangeFactorStart(newRangeFactor[0]);
-                            }
-                        }
-                        const newFactor = axisScale.rangeFactor();
-                        if (newFactor) {
-                            this._start = reverse ? 1 - newFactor[1] : newFactor[0];
-                            this._end = reverse ? 1 - newFactor[0] : newFactor[1];
-                        }
-                        else {
-                            this._start = 0;
-                            this._end = 1;
-                        }
+                        this._updateRangeFactor(tag, 'zoomChange');
                         (_b = (_a = this._component) === null || _a === void 0 ? void 0 : _a.setStartAndEnd) === null || _b === void 0 ? void 0 : _b.call(_a, this._start, this._end);
                         axis.effect.scaleUpdate();
                     }
@@ -87346,7 +87718,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _computeDomainOfStateScale(isContinuous) {
             const domain = this._data.getLatestData().map((d) => d[this._stateField]);
             if (isContinuous) {
-                return domain.length ? [Math.min.apply(null, domain), Math.max.apply(null, domain)] : [-Infinity, Infinity];
+                const domainNum = domain.map((n) => n * 1);
+                return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [-Infinity, Infinity];
             }
             return domain;
         }
@@ -87466,7 +87839,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _statePointToData(state) {
             const scale = this._stateScale;
             let range = scale.range();
-            if (!this._isHorizontal && isContinuous(scale.type)) {
+            if (this._isReverse()) {
                 range = range.slice().reverse();
             }
             const posInRange = range[0] + (range[1] - range[0]) * state;
@@ -87540,8 +87913,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const domain = this._computeDomainOfStateScale(isContinuousScale);
                 this._stateScale = scale.clone();
                 if (isContinuousScale) {
+                    const domainNum = domain.map((n) => n * 1);
                     this._stateScale
-                        .domain(domain.length ? [Math.min.apply(null, domain), Math.max.apply(null, domain)] : [0, 1], true)
+                        .domain(domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : [0, 1], true)
                         .range(defaultRange);
                 }
                 else {
@@ -87637,11 +88011,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             super.updateLayoutAttribute();
         }
+        onLayoutStart(layoutRect, viewRect, ctx) {
+            super.onLayoutStart(layoutRect, viewRect, ctx);
+            const isShown = this._autoUpdate(layoutRect);
+            const sizeKey = this._isHorizontal ? 'height' : 'width';
+            this.layout.setLayoutRect({
+                [sizeKey]: isShown ? this[`_${sizeKey}`] : 0
+            }, {
+                [sizeKey]: exports.AttributeLevel.Built_In
+            });
+        }
         getBoundsInRect(rect) {
-            const isShown = this._autoUpdate(rect);
-            if (!isShown) {
-                return { x1: 0, y1: 0, x2: 0, y2: 0 };
-            }
             const result = { x1: this.getLayoutStartPoint().x, y1: this.getLayoutStartPoint().y, x2: 0, y2: 0 };
             if (this._isHorizontal) {
                 result.y2 = result.y1 + this._height;
@@ -87671,7 +88051,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return undefined;
         }
         _autoUpdate(rect) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             if (!this._auto) {
                 this._cacheVisibility = undefined;
                 return true;
@@ -87680,37 +88060,38 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const axisSpec = axis === null || axis === void 0 ? void 0 : axis.getSpec();
             const axisScale = axis === null || axis === void 0 ? void 0 : axis.getScale();
             const bandSizeResult = this._getAxisBandSize(axisSpec);
+            if (isDiscrete(axisScale.type) &&
+                (rect === null || rect === void 0 ? void 0 : rect.height) === ((_a = this._cacheRect) === null || _a === void 0 ? void 0 : _a.height) &&
+                (rect === null || rect === void 0 ? void 0 : rect.width) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.width) &&
+                this._fixedBandSize === (bandSizeResult === null || bandSizeResult === void 0 ? void 0 : bandSizeResult.bandSize)) {
+                return this._cacheVisibility;
+            }
             let isShown = true;
-            if (this._isHorizontal) {
+            if (this._isHorizontal && (rect === null || rect === void 0 ? void 0 : rect.width) !== ((_c = this._cacheRect) === null || _c === void 0 ? void 0 : _c.width)) {
                 axisScale.range(axisSpec.inverse ? [rect.width, 0] : [0, rect.width]);
             }
-            else {
+            else if ((rect === null || rect === void 0 ? void 0 : rect.height) !== ((_d = this._cacheRect) === null || _d === void 0 ? void 0 : _d.height)) {
                 axisScale.range(axisSpec.inverse ? [0, rect.height] : [rect.height, 0]);
             }
+            this._cacheRect = {
+                width: rect === null || rect === void 0 ? void 0 : rect.width,
+                height: rect === null || rect === void 0 ? void 0 : rect.height
+            };
+            this._fixedBandSize = bandSizeResult === null || bandSizeResult === void 0 ? void 0 : bandSizeResult.bandSize;
             if (isDiscrete(axisScale.type)) {
-                if ((rect === null || rect === void 0 ? void 0 : rect.height) === ((_a = this._cacheRect) === null || _a === void 0 ? void 0 : _a.height) &&
-                    (rect === null || rect === void 0 ? void 0 : rect.width) === ((_b = this._cacheRect) === null || _b === void 0 ? void 0 : _b.width) &&
-                    this._fixedBandSize === (bandSizeResult === null || bandSizeResult === void 0 ? void 0 : bandSizeResult.bandSize)) {
-                    return this._cacheVisibility;
-                }
-                this._cacheRect = rect;
                 if (bandSizeResult && (this._start || this._end)) {
-                    axisScale.rangeFactor([this._start, this._end]);
+                    this._updateRangeFactor(null, 'auto');
                 }
-                let [start, end] = (_c = axisScale.rangeFactor()) !== null && _c !== void 0 ? _c : [];
+                const [start, end] = (_e = axisScale.rangeFactor()) !== null && _e !== void 0 ? _e : [];
                 if (isNil$1(start) && isNil$1(end)) {
-                    start = 0;
-                    end = 1;
                     isShown = false;
                 }
                 else {
                     isShown = !(start === 0 && end === 1);
                 }
-                this._start = start;
-                this._end = end;
             }
             else {
-                const [start, end] = (_d = axisScale.rangeFactor()) !== null && _d !== void 0 ? _d : [this._start, this._end];
+                const [start, end] = (_f = axisScale.rangeFactor()) !== null && _f !== void 0 ? _f : [this._start, this._end];
                 isShown = !(start === 0 && end === 1);
             }
             this.setStartAndEnd(this._start, this._end);
@@ -87883,7 +88264,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _computeDomainOfValueScale() {
             const domain = this._data.getLatestData().map((d) => d[this._valueField]);
-            return domain.length ? [Math.min.apply(null, domain), Math.max.apply(null, domain)] : null;
+            const domainNum = domain.map((n) => n * 1);
+            return domain.length ? [minInArray(domainNum), maxInArray(domainNum)] : null;
         }
         _computeMiddleHandlerSize() {
             var _a, _b, _c, _d;
@@ -88399,11 +88781,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const markerMin = (_data, opt) => {
         const data = _data[0].latestData;
-        return min$1(data, opt.field);
+        return min(data, opt.field);
     };
     const markerMax = (_data, opt) => {
         const data = _data[0].latestData;
-        return max$1(data, opt.field);
+        return max(data, opt.field);
     };
     function markerSum(_data, opt) {
         const data = _data[0].latestData;
@@ -88560,8 +88942,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (!autoRange) {
             return false;
         }
-        const min = Math.min(...domain);
-        const max = Math.max(...domain);
+        const domainNum = domain.map((n) => n * 1);
+        const min = minInArray(domainNum);
+        const max = maxInArray(domainNum);
         if (datum < min || datum > max) {
             return true;
         }
@@ -89213,25 +89596,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             };
         }
         _getTitleAttrs() {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const realWidth = Math.max(0, (_a = this._spec.width) !== null && _a !== void 0 ? _a : this.getLayoutRect().width);
-            return {
-                text: (_b = this._spec.text) !== null && _b !== void 0 ? _b : '',
-                subtext: (_c = this._spec.subtext) !== null && _c !== void 0 ? _c : '',
-                x: (_d = this._spec.x) !== null && _d !== void 0 ? _d : 0,
-                y: (_e = this._spec.y) !== null && _e !== void 0 ? _e : 0,
-                width: realWidth,
-                height: this._spec.height,
-                minWidth: this._spec.minWidth,
-                maxWidth: this._spec.maxWidth,
-                minHeight: this._spec.minHeight,
-                maxHeight: this._spec.maxHeight,
-                padding: this._spec.innerPadding,
-                align: (_f = this._spec.align) !== null && _f !== void 0 ? _f : 'left',
-                verticalAlign: (_g = this._spec.verticalAlign) !== null && _g !== void 0 ? _g : 'top',
-                textStyle: Object.assign({ width: realWidth }, this._spec.textStyle),
-                subtextStyle: Object.assign({ width: realWidth }, this._spec.subtextStyle)
-            };
+            return Object.assign(Object.assign({}, pickWithout(this._spec, ['padding'])), { textType: (_b = this._spec.textType) !== null && _b !== void 0 ? _b : 'text', text: (_c = this._spec.text) !== null && _c !== void 0 ? _c : '', subtextType: (_d = this._spec.subtextType) !== null && _d !== void 0 ? _d : 'text', subtext: (_e = this._spec.subtext) !== null && _e !== void 0 ? _e : '', x: (_f = this._spec.x) !== null && _f !== void 0 ? _f : 0, y: (_g = this._spec.y) !== null && _g !== void 0 ? _g : 0, width: realWidth, height: this._spec.height, minWidth: this._spec.minWidth, maxWidth: this._spec.maxWidth, minHeight: this._spec.minHeight, maxHeight: this._spec.maxHeight, padding: this._spec.innerPadding, align: (_h = this._spec.align) !== null && _h !== void 0 ? _h : 'left', verticalAlign: (_j = this._spec.verticalAlign) !== null && _j !== void 0 ? _j : 'top', textStyle: Object.assign({ width: realWidth }, this._spec.textStyle), subtextStyle: Object.assign({ width: realWidth }, this._spec.subtextStyle) });
         }
         _createOrUpdateTitleComponent(attrs) {
             if (this._titleComponent) {
@@ -89856,7 +90223,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.event.on('afterElementEncode', eventParams => {
                 var _a;
                 const mark = eventParams.item;
-                if (this._option.getChart().getLayoutTag() === false && ((_a = mark.context) === null || _a === void 0 ? void 0 : _a.model) === this) {
+                if (this._option.getChart().getLayoutTag() === false && ((_a = mark.getContext()) === null || _a === void 0 ? void 0 : _a.model) === this) {
                     this._delegateLabelEvent(mark.getGroupGraphicItem());
                 }
             });
@@ -90000,7 +90367,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     const { labelSpec, labelMark } = labelInfos[params.labelIndex];
                     return labelMark.skipEncode
                         ? { data: datum }
-                        : textAttribute(labelInfos[params.labelIndex], datum, labelSpec.formatMethod);
+                        : textAttribute(labelInfos[params.labelIndex], datum, labelSpec.formatMethod, labelSpec.formatter);
                 }
             })
                 .size(() => labelInfos[0].series.getRegion().getLayoutRect());