@visactor/vchart 1.6.2 → 1.6.4

package/build/index.js

@@ -2063,9 +2063,15 @@
             baseline: baseline,
             textBaseline = null != baseline ? baseline : "middle",
             ellipsis: ellipsis,
-            limit: limit,
-            lineHeight = fontSize
+            limit: limit
           } = this._userSpec;
+        let {
+          lineHeight = fontSize
+        } = this._userSpec;
+        if (isString$1(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
+          const scale = Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100;
+          lineHeight = fontSize * scale;
+        }
         return {
           fontStyle: fontStyle,
           fontVariant: fontVariant,
@@ -2134,6 +2140,7 @@
         return this._measureReduce(text, this._measureWithNaiveCanvas.bind(this));
       }
       _measureWithNaiveCanvas(text) {
+        var _a;
         if (!this.initContext()) return this._quickMeasureWithoutCanvas(text);
         const metrics = this._context.measureText(text),
           {
@@ -2142,7 +2149,7 @@
           } = this.textSpec;
         return {
           width: metrics.width,
-          height: null != lineHeight ? lineHeight : fontSize
+          height: null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize
         };
       }
       quickMeasure(text) {
@@ -2164,6 +2171,7 @@
         return this._measureReduce(text, this._quickMeasureWithoutCanvas.bind(this));
       }
       _quickMeasureWithoutCanvas(text) {
+        var _a;
         const totalSize = {
             width: 0,
             height: 0
@@ -2177,9 +2185,10 @@
             size = ["F", "W"].includes(eastAsianCharacterInfo(char)) ? 1 : .53;
           totalSize.width += size * fontSize;
         }
-        return totalSize.height = null != lineHeight ? lineHeight : fontSize, totalSize;
+        return totalSize.height = null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize, totalSize;
       }
       _measureReduce(text, processor) {
+        var _a;
         const {
             fontSize: fontSize,
             lineHeight: lineHeight
@@ -2193,7 +2202,7 @@
           const textArr = text.filter(isValid$1).map(s => s.toString());
           return 0 === textArr.length ? defaultResult : 1 === textArr.length ? processor(textArr[0]) : {
             width: textArr.reduce((maxWidth, cur) => Math.max(maxWidth, processor(cur).width), 0),
-            height: textArr.length * ((null != lineHeight ? lineHeight : fontSize) + 1) + 1
+            height: textArr.length * ((null !== (_a = lineHeight) && void 0 !== _a ? _a : fontSize) + 1) + 1
           };
         }
         return processor(text.toString());
@@ -6421,7 +6430,7 @@
     }
 
     function couldBeValidNumber(v) {
-        if (isNil$1(v)) {
+        if (v === null || v === undefined || v === '') {
             return false;
         }
         if (isNumber$2(v)) {
@@ -10936,7 +10945,10 @@
       direction: "horizontal",
       wordBreak: "break-all",
       ignoreBuf: !1,
-      verticalMode: 0
+      verticalMode: 0,
+      whiteSpace: "no-wrap",
+      heightLimit: 1 / 0,
+      lineClamp: 1 / 0
     };
     const DefaultStyle = Object.assign(Object.assign(Object.assign({
       opacity: 1,
@@ -13729,6 +13741,12 @@
     }
     RafBasedSTO.TimeOut = 1e3 / 60;
     const rafBasedSto = new RafBasedSTO();
+    const calculateLineHeight = (lineHeight, fontSize) => {
+      if (isString$1(lineHeight) && "%" === lineHeight[lineHeight.length - 1]) {
+        return fontSize * (Number.parseFloat(lineHeight.substring(0, lineHeight.length - 1)) / 100);
+      }
+      return lineHeight;
+    };
 
     class IncreaseCount extends ACustomAnimate {
       constructor(from, to, duration, easing, params) {
@@ -16967,7 +16985,7 @@
       }
     }
 
-    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", ...GRAPHIC_UPDATE_TAG_KEY];
+    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", ...GRAPHIC_UPDATE_TAG_KEY];
     let Text$1 = class Text extends Graphic {
       get font() {
         const textTheme = getTheme$1(this).text;
@@ -17025,315 +17043,14 @@
           paddingArray = parsePadding(boundsPadding);
         return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
       }
-      updateSingallineAABBBounds(text) {
-        const textTheme = getTheme$1(this).text,
-          {
-            direction = textTheme.direction
-          } = this.attribute;
-        return "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
-      }
-      updateMultilineAABBBounds(text) {
-        const textTheme = getTheme$1(this).text,
-          {
-            direction = textTheme.direction
-          } = this.attribute;
-        return "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
-      }
-      updateHorizontalSinglelineAABBBounds(text) {
-        var _a, _b;
-        const textTheme = getTheme$1(this).text,
-          textMeasure = application.graphicUtil.textMeasure;
-        let width, str;
-        const attribute = this.attribute,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            ellipsis = textTheme.ellipsis,
-            textAlign = textTheme.textAlign,
-            textBaseline = textTheme.textBaseline,
-            fontFamily = textTheme.fontFamily,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            wordBreak = textTheme.wordBreak,
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
-          {
-            lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf
-          } = attribute;
-        if (!this.shouldUpdateShape() && this.cache) {
-          width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
-          const dx = textDrawOffsetX(textAlign, width),
-            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-          return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        if (Number.isFinite(maxLineWidth)) {
-          if (ellipsis) {
-            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-              data = textMeasure.clipTextWithSuffix(text.toString(), {
-                fontSize: fontSize,
-                fontWeight: fontWeight,
-                fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1);
-            str = data.str, width = data.width;
-          } else {
-            const data = textMeasure.clipText(text.toString(), {
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              fontFamily: fontFamily
-            }, maxLineWidth, !1);
-            str = data.str, width = data.width;
-          }
-          this.cache.clipedText = str, this.cache.clipedWidth = width;
-        } else width = textMeasure.measureTextWidth(text.toString(), {
-          fontSize: fontSize,
-          fontWeight: fontWeight,
-          fontFamily: fontFamily
-        }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width);
-        let lh = lineHeight;
-        application.global && application.global.isSafari() && (lh += .2 * fontSize);
-        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
-        return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      getBaselineMapAlign() {
-        return Text.baselineMapAlign;
-      }
-      getAlignMapBaseline() {
-        return Text.alignMapBaseline;
-      }
-      updateVerticalSinglelineAABBBounds(text) {
-        var _a, _b, _c;
-        const textTheme = getTheme$1(this).text,
-          textMeasure = application.graphicUtil.textMeasure;
-        let width;
-        const attribute = this.attribute,
-          {
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : 2,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            ellipsis = textTheme.ellipsis,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            fontFamily = textTheme.fontFamily,
-            stroke = textTheme.stroke,
-            lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf,
-            lineWidth = textTheme.lineWidth,
-            verticalMode = textTheme.verticalMode
-          } = attribute;
-        let {
-          textAlign = textTheme.textAlign,
-          textBaseline = textTheme.textBaseline
-        } = attribute;
-        if (!verticalMode) {
-          const t = textAlign;
-          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
-        }
-        if (!this.shouldUpdateShape() && this.cache) {
-          width = this.cache.clipedWidth;
-          const dx = textDrawOffsetX(textAlign, width),
-            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-          return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        let verticalList = [verticalLayout(text.toString())];
-        if (Number.isFinite(maxLineWidth)) {
-          if (ellipsis) {
-            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-              data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
-                fontSize: fontSize,
-                fontWeight: fontWeight,
-                fontFamily: fontFamily
-              }, maxLineWidth, strEllipsis, !1);
-            verticalList = [data.verticalList], width = data.width;
-          } else {
-            const data = textMeasure.clipTextVertical(verticalList[0], {
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              fontFamily: fontFamily
-            }, maxLineWidth, !1);
-            verticalList = [data.verticalList], width = data.width;
-          }
-          this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-        } else width = 0, verticalList[0].forEach(t => {
-          const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          });
-          width += w, t.width = w;
-        }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
-        this.clearUpdateShapeTag();
-        const dx = textDrawOffsetX(textAlign, width),
-          dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
-        return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      updateHorizontalMultilineAABBBounds(text) {
-        var _a;
-        const textTheme = getTheme$1(this).text,
-          attribute = this.attribute,
-          {
-            fontFamily = textTheme.fontFamily,
-            textAlign = textTheme.textAlign,
-            textBaseline = textTheme.textBaseline,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            lineHeight = attribute.lineHeight || attribute.fontSize || textTheme.fontSize,
-            ellipsis = textTheme.ellipsis,
-            maxLineWidth: maxLineWidth,
-            stroke = textTheme.stroke,
-            lineWidth = textTheme.lineWidth,
-            wordBreak = textTheme.wordBreak
-          } = attribute;
-        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
-          const bbox = this.cache.layoutData.bbox;
-          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        const textMeasure = application.graphicUtil.textMeasure,
-          layoutData = new CanvasTextLayout(fontFamily, {
-            fontSize: fontSize,
-            fontWeight: fontWeight,
-            fontFamily: fontFamily
-          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth),
-          {
-            bbox: bbox
-          } = layoutData;
-        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      updateVerticalMultilineAABBBounds(text) {
-        var _a, _b, _c;
-        const textTheme = getTheme$1(this).text,
-          textMeasure = application.graphicUtil.textMeasure;
-        let width;
-        const attribute = this.attribute,
-          {
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : 2,
-          {
-            maxLineWidth = textTheme.maxLineWidth,
-            ellipsis = textTheme.ellipsis,
-            fontFamily = textTheme.fontFamily,
-            fontSize = textTheme.fontSize,
-            fontWeight = textTheme.fontWeight,
-            stroke = textTheme.stroke,
-            lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf,
-            lineWidth = textTheme.lineWidth,
-            verticalMode = textTheme.verticalMode
-          } = attribute;
-        let {
-          textAlign = textTheme.textAlign,
-          textBaseline = textTheme.textBaseline
-        } = attribute;
-        if (!verticalMode) {
-          const t = textAlign;
-          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
-        }
-        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);
-          });
-          const dx = textDrawOffsetX(textAlign, width),
-            height = this.cache.verticalList.length * lineHeight,
-            dy = textLayoutOffsetY(textBaseline, height, fontSize);
-          return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-        }
-        const verticalLists = text.map(str => verticalLayout(str.toString()));
-        verticalLists.forEach((verticalData, i) => {
-          if (Number.isFinite(maxLineWidth)) {
-            if (ellipsis) {
-              const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
-                data = textMeasure.clipTextWithSuffixVertical(verticalData, {
-                  fontSize: fontSize,
-                  fontWeight: fontWeight,
-                  fontFamily: fontFamily
-                }, maxLineWidth, strEllipsis, !1);
-              verticalLists[i] = data.verticalList, width = data.width;
-            } else {
-              const data = textMeasure.clipTextVertical(verticalData, {
-                fontSize: fontSize,
-                fontWeight: fontWeight,
-                fontFamily: fontFamily
-              }, maxLineWidth, !1);
-              verticalLists[i] = data.verticalList, width = data.width;
-            }
-          } else width = 0, verticalData.forEach(t => {
-            const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
-              fontSize: fontSize,
-              fontWeight: fontWeight,
-              fontFamily: fontFamily
-            });
-            width += w, t.width = w;
-          });
-        }), 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);
-        });
-        const dx = textDrawOffsetX(textAlign, width),
-          height = this.cache.verticalList.length * lineHeight,
-          dy = textLayoutOffsetY(textBaseline, height, fontSize);
-        return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
-      }
-      tryUpdateOBBBounds() {
-        throw new Error("暂不支持");
-      }
-      getDefaultAttribute(name) {
-        return getTheme$1(this).text[name];
-      }
-      needUpdateTags(keys) {
-        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
-        return super.needUpdateTags(keys, k);
-      }
-      needUpdateTag(key) {
-        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
-        return super.needUpdateTag(key, k);
-      }
-      clone() {
-        return new Text(Object.assign({}, this.attribute));
-      }
-      getNoWorkAnimateAttr() {
-        return Text.NOWORK_ANIMATE_ATTR;
-      }
-    };
-    Text$1.NOWORK_ANIMATE_ATTR = Object.assign({
-      ellipsis: 1,
-      wordBreak: 1,
-      direction: 1,
-      textAlign: 1,
-      textBaseline: 1,
-      fontFamily: 1,
-      fontWeight: 1
-    }, NOWORK_ANIMATE_ATTR), Text$1.baselineMapAlign = {
-      top: "left",
-      bottom: "right",
-      middle: "center"
-    }, Text$1.alignMapBaseline = {
-      left: "top",
-      right: "bottom",
-      center: "middle"
-    };
-
-    const WRAP_TEXT_UPDATE_TAG_KEY = ["heightLimit", "lineClamp"];
-    class WrapText extends Text$1 {
-      _isValid() {
-        const {
-          text: text
-        } = this.attribute;
-        return isArray$1(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
-      }
-      updateMultilineAABBBounds(text) {
-        var _a, _b, _c;
+      updateWrapAABBBounds(text) {
+        var _a, _b, _c, _d;
         const textTheme = getTheme$1(this).text,
           {
             fontFamily = textTheme.fontFamily,
             textAlign = textTheme.textAlign,
             textBaseline = textTheme.textBaseline,
             fontSize = textTheme.fontSize,
-            lineHeight = this.attribute.lineHeight || this.attribute.fontSize || textTheme.fontSize,
             ellipsis = textTheme.ellipsis,
             maxLineWidth: maxLineWidth,
             stroke = textTheme.stroke,
@@ -17344,8 +17061,9 @@
             heightLimit = 0,
             lineClamp: lineClamp
           } = this.attribute,
+          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
           buf = ignoreBuf ? 0 : 2;
-        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
           const bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
         }
@@ -17355,7 +17073,7 @@
             fontWeight: fontWeight,
             fontFamily: fontFamily
           }, textMeasure),
-          lines = text.map(l => l.toString()),
+          lines = isArray$1(text) ? text.map(l => l.toString()) : [text.toString()],
           linesLayout = [],
           bboxWH = [0, 0];
         let lineCountLimit = 1 / 0;
@@ -17375,7 +17093,406 @@
             if ("" !== str && "" === clip.str) {
               if (ellipsis) {
                 const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
-                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
+              } else clip.str = "", clip.width = 0;
+              needCut = !1;
+            }
+            if (linesLayout.push({
+              str: clip.str,
+              width: clip.width
+            }), clip.str.length === str.length) ;else if (needCut) {
+              const newStr = str.substring(clip.str.length);
+              lines.splice(i + 1, 0, newStr);
+            }
+          }
+          let maxWidth = 0;
+          linesLayout.forEach(layout => {
+            maxWidth = Math.max(maxWidth, layout.width);
+          }), bboxWH[0] = maxWidth;
+        } else {
+          let width,
+            text,
+            lineWidth = 0;
+          for (let i = 0, len = lines.length; i < len; i++) {
+            if (i === lineCountLimit - 1) {
+              const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1);
+              linesLayout.push({
+                str: clip.str,
+                width: clip.width
+              }), lineWidth = Math.max(lineWidth, clip.width);
+              break;
+            }
+            text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
+              str: text,
+              width: width
+            });
+          }
+          bboxWH[0] = lineWidth;
+        }
+        bboxWH[1] = linesLayout.length * (lineHeight + buf);
+        const bbox = {
+          xOffset: 0,
+          yOffset: 0,
+          width: bboxWH[0],
+          height: bboxWH[1]
+        };
+        layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
+        const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
+      updateSingallineAABBBounds(text) {
+        const textTheme = getTheme$1(this).text,
+          {
+            direction = textTheme.direction
+          } = this.attribute;
+        return "horizontal" === direction ? this.updateHorizontalSinglelineAABBBounds(text) : this.updateVerticalSinglelineAABBBounds(text);
+      }
+      updateMultilineAABBBounds(text) {
+        const textTheme = getTheme$1(this).text,
+          {
+            direction = textTheme.direction
+          } = this.attribute;
+        return "horizontal" === direction ? this.updateHorizontalMultilineAABBBounds(text) : this.updateVerticalMultilineAABBBounds(text);
+      }
+      updateHorizontalSinglelineAABBBounds(text) {
+        var _a, _b;
+        const textTheme = getTheme$1(this).text,
+          textMeasure = application.graphicUtil.textMeasure;
+        let width, str;
+        const attribute = this.attribute,
+          {
+            maxLineWidth = textTheme.maxLineWidth,
+            ellipsis = textTheme.ellipsis,
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline,
+            fontFamily = textTheme.fontFamily,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            stroke = textTheme.stroke,
+            lineWidth = textTheme.lineWidth,
+            wordBreak = textTheme.wordBreak,
+            ignoreBuf = textTheme.ignoreBuf,
+            whiteSpace = textTheme.whiteSpace
+          } = attribute;
+        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
+        const buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
+          textFontSize = attribute.fontSize || textTheme.fontSize,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, textFontSize)) && void 0 !== _a ? _a : textFontSize + buf;
+        if (!this.shouldUpdateShape() && this.cache) {
+          width = null !== (_b = this.cache.clipedWidth) && void 0 !== _b ? _b : 0;
+          const dx = textDrawOffsetX(textAlign, width),
+            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+          return this._AABBBounds.set(dx, dy, dx + width, dy + lineHeight), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        if (Number.isFinite(maxLineWidth)) {
+          if (ellipsis) {
+            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+              data = textMeasure.clipTextWithSuffix(text.toString(), {
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                fontFamily: fontFamily
+              }, maxLineWidth, strEllipsis, !1);
+            str = data.str, width = data.width;
+          } else {
+            const data = textMeasure.clipText(text.toString(), {
+              fontSize: fontSize,
+              fontWeight: fontWeight,
+              fontFamily: fontFamily
+            }, maxLineWidth, !1);
+            str = data.str, width = data.width;
+          }
+          this.cache.clipedText = str, this.cache.clipedWidth = width;
+        } else width = textMeasure.measureTextWidth(text.toString(), {
+          fontSize: fontSize,
+          fontWeight: fontWeight,
+          fontFamily: fontFamily
+        }), this.cache.clipedText = text.toString(), this.cache.clipedWidth = width;
+        this.clearUpdateShapeTag();
+        const dx = textDrawOffsetX(textAlign, width);
+        let lh = lineHeight;
+        application.global && application.global.isSafari() && (lh += .2 * fontSize);
+        const dy = textLayoutOffsetY(textBaseline, lh, fontSize, buf);
+        return this._AABBBounds.set(dx, dy, dx + width, dy + lh), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
+      getBaselineMapAlign() {
+        return Text.baselineMapAlign;
+      }
+      getAlignMapBaseline() {
+        return Text.alignMapBaseline;
+      }
+      updateVerticalSinglelineAABBBounds(text) {
+        var _a, _b, _c;
+        const textTheme = getTheme$1(this).text,
+          textMeasure = application.graphicUtil.textMeasure;
+        let width;
+        const attribute = this.attribute,
+          {
+            ignoreBuf = textTheme.ignoreBuf
+          } = attribute,
+          buf = ignoreBuf ? 0 : 2,
+          {
+            maxLineWidth = textTheme.maxLineWidth,
+            ellipsis = textTheme.ellipsis,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            fontFamily = textTheme.fontFamily,
+            stroke = textTheme.stroke,
+            lineWidth = textTheme.lineWidth,
+            verticalMode = textTheme.verticalMode
+          } = attribute,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+        let {
+          textAlign = textTheme.textAlign,
+          textBaseline = textTheme.textBaseline
+        } = attribute;
+        if (!verticalMode) {
+          const t = textAlign;
+          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+        }
+        if (!this.shouldUpdateShape() && this.cache) {
+          width = this.cache.clipedWidth;
+          const dx = textDrawOffsetX(textAlign, width),
+            dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+          return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        let verticalList = [verticalLayout(text.toString())];
+        if (Number.isFinite(maxLineWidth)) {
+          if (ellipsis) {
+            const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+              data = textMeasure.clipTextWithSuffixVertical(verticalList[0], {
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                fontFamily: fontFamily
+              }, maxLineWidth, strEllipsis, !1);
+            verticalList = [data.verticalList], width = data.width;
+          } else {
+            const data = textMeasure.clipTextVertical(verticalList[0], {
+              fontSize: fontSize,
+              fontWeight: fontWeight,
+              fontFamily: fontFamily
+            }, maxLineWidth, !1);
+            verticalList = [data.verticalList], width = data.width;
+          }
+          this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+        } else width = 0, verticalList[0].forEach(t => {
+          const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          });
+          width += w, t.width = w;
+        }), this.cache.verticalList = verticalList, this.cache.clipedWidth = width;
+        this.clearUpdateShapeTag();
+        const dx = textDrawOffsetX(textAlign, width),
+          dy = textLayoutOffsetY(textBaseline, lineHeight, fontSize);
+        return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
+      updateHorizontalMultilineAABBBounds(text) {
+        var _a, _b;
+        const textTheme = getTheme$1(this).text,
+          attribute = this.attribute,
+          {
+            fontFamily = textTheme.fontFamily,
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            ellipsis = textTheme.ellipsis,
+            maxLineWidth: maxLineWidth,
+            stroke = textTheme.stroke,
+            lineWidth = textTheme.lineWidth,
+            whiteSpace = textTheme.whiteSpace
+          } = attribute,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : attribute.fontSize || textTheme.fontSize;
+        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
+        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+          const bbox = this.cache.layoutData.bbox;
+          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const textMeasure = application.graphicUtil.textMeasure,
+          layoutData = new CanvasTextLayout(fontFamily, {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, textMeasure).GetLayoutByLines(text, textAlign, textBaseline, lineHeight, !0 === ellipsis ? textTheme.ellipsis : ellipsis || void 0, !1, maxLineWidth),
+          {
+            bbox: bbox
+          } = layoutData;
+        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
+      updateVerticalMultilineAABBBounds(text) {
+        var _a, _b, _c;
+        const textTheme = getTheme$1(this).text,
+          textMeasure = application.graphicUtil.textMeasure;
+        let width;
+        const attribute = this.attribute,
+          {
+            ignoreBuf = textTheme.ignoreBuf
+          } = attribute,
+          buf = ignoreBuf ? 0 : 2,
+          {
+            maxLineWidth = textTheme.maxLineWidth,
+            ellipsis = textTheme.ellipsis,
+            fontFamily = textTheme.fontFamily,
+            fontSize = textTheme.fontSize,
+            fontWeight = textTheme.fontWeight,
+            stroke = textTheme.stroke,
+            lineWidth = textTheme.lineWidth,
+            verticalMode = textTheme.verticalMode
+          } = attribute,
+          lineHeight = null !== (_a = calculateLineHeight(attribute.lineHeight, attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf;
+        let {
+          textAlign = textTheme.textAlign,
+          textBaseline = textTheme.textBaseline
+        } = attribute;
+        if (!verticalMode) {
+          const t = textAlign;
+          textAlign = null !== (_b = Text.baselineMapAlign[textBaseline]) && void 0 !== _b ? _b : "left", textBaseline = null !== (_c = Text.alignMapBaseline[t]) && void 0 !== _c ? _c : "top";
+        }
+        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);
+          });
+          const dx = textDrawOffsetX(textAlign, width),
+            height = this.cache.verticalList.length * lineHeight,
+            dy = textLayoutOffsetY(textBaseline, height, fontSize);
+          return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const verticalLists = text.map(str => verticalLayout(str.toString()));
+        verticalLists.forEach((verticalData, i) => {
+          if (Number.isFinite(maxLineWidth)) {
+            if (ellipsis) {
+              const strEllipsis = !0 === ellipsis ? textTheme.ellipsis : ellipsis,
+                data = textMeasure.clipTextWithSuffixVertical(verticalData, {
+                  fontSize: fontSize,
+                  fontWeight: fontWeight,
+                  fontFamily: fontFamily
+                }, maxLineWidth, strEllipsis, !1);
+              verticalLists[i] = data.verticalList, width = data.width;
+            } else {
+              const data = textMeasure.clipTextVertical(verticalData, {
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                fontFamily: fontFamily
+              }, maxLineWidth, !1);
+              verticalLists[i] = data.verticalList, width = data.width;
+            }
+          } else width = 0, verticalData.forEach(t => {
+            const w = t.direction === TextDirection.HORIZONTAL ? fontSize : textMeasure.measureTextWidth(t.text, {
+              fontSize: fontSize,
+              fontWeight: fontWeight,
+              fontFamily: fontFamily
+            });
+            width += w, t.width = w;
+          });
+        }), 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);
+        });
+        const dx = textDrawOffsetX(textAlign, width),
+          height = this.cache.verticalList.length * lineHeight,
+          dy = textLayoutOffsetY(textBaseline, height, fontSize);
+        return this._AABBBounds.set(dy, dx, dy + height, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
+      tryUpdateOBBBounds() {
+        throw new Error("暂不支持");
+      }
+      getDefaultAttribute(name) {
+        return getTheme$1(this).text[name];
+      }
+      needUpdateTags(keys) {
+        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
+        return super.needUpdateTags(keys, k);
+      }
+      needUpdateTag(key) {
+        let k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : TEXT_UPDATE_TAG_KEY;
+        return super.needUpdateTag(key, k);
+      }
+      clone() {
+        return new Text(Object.assign({}, this.attribute));
+      }
+      getNoWorkAnimateAttr() {
+        return Text.NOWORK_ANIMATE_ATTR;
+      }
+    };
+    Text$1.NOWORK_ANIMATE_ATTR = Object.assign({
+      ellipsis: 1,
+      wordBreak: 1,
+      direction: 1,
+      textAlign: 1,
+      textBaseline: 1,
+      fontFamily: 1,
+      fontWeight: 1
+    }, NOWORK_ANIMATE_ATTR), Text$1.baselineMapAlign = {
+      top: "left",
+      bottom: "right",
+      middle: "center"
+    }, Text$1.alignMapBaseline = {
+      left: "top",
+      right: "bottom",
+      center: "middle"
+    };
+
+    const WRAP_TEXT_UPDATE_TAG_KEY = ["heightLimit", "lineClamp"];
+    class WrapText extends Text$1 {
+      _isValid() {
+        const {
+          text: text
+        } = this.attribute;
+        return isArray$1(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
+      }
+      updateMultilineAABBBounds(text) {
+        var _a, _b, _c, _d;
+        const textTheme = getTheme$1(this).text,
+          {
+            fontFamily = textTheme.fontFamily,
+            textAlign = textTheme.textAlign,
+            textBaseline = textTheme.textBaseline,
+            fontSize = textTheme.fontSize,
+            ellipsis = textTheme.ellipsis,
+            maxLineWidth: maxLineWidth,
+            stroke = textTheme.stroke,
+            lineWidth = textTheme.lineWidth,
+            wordBreak = textTheme.wordBreak,
+            fontWeight = textTheme.fontWeight,
+            ignoreBuf = textTheme.ignoreBuf,
+            heightLimit = 0,
+            lineClamp: lineClamp
+          } = this.attribute,
+          lineHeight = null !== (_a = calculateLineHeight(this.attribute.lineHeight, this.attribute.fontSize || textTheme.fontSize)) && void 0 !== _a ? _a : this.attribute.fontSize || textTheme.fontSize,
+          buf = ignoreBuf ? 0 : 2;
+        if (!this.shouldUpdateShape() && (null === (_b = this.cache) || void 0 === _b ? void 0 : _b.layoutData)) {
+          const bbox = this.cache.layoutData.bbox;
+          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const textMeasure = application.graphicUtil.textMeasure,
+          layoutObj = new CanvasTextLayout(fontFamily, {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, textMeasure),
+          lines = text.map(l => l.toString()),
+          linesLayout = [],
+          bboxWH = [0, 0];
+        let lineCountLimit = 1 / 0;
+        if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
+          if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
+            const str = lines[i];
+            let needCut = !0;
+            if (i === lineCountLimit - 1) {
+              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
+              linesLayout.push({
+                str: clip.str,
+                width: clip.width
+              });
+              break;
+            }
+            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-word" === wordBreak);
+            if ("" !== str && "" === clip.str) {
+              if (ellipsis) {
+                const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
+                clip.str = null !== (_c = clipEllipsis.str) && void 0 !== _c ? _c : "", clip.width = null !== (_d = clipEllipsis.width) && void 0 !== _d ? _d : 0;
               } else clip.str = "", clip.width = 0;
               needCut = !1;
             }
@@ -17911,6 +18028,13 @@
     builtinSymbols.forEach(symbol => {
       builtinSymbolsMap[symbol.type] = symbol;
     });
+    const builtInSymbolStrMap = {
+      arrowLeft: "M 0.25 -0.5 L -0.25 0 l 0.5 0.5",
+      arrowRight: "M -0.25 -0.5 l 0.5 0.5 l -0.5 0.5",
+      rect: "M -0.5,0.25 L 0.5,0.25 L 0.5,-0.25,L -0.5,-0.25 Z",
+      rectRound: "M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z",
+      roundLine: "M 1.2392 -0.258 L -1.3432 -0.258 C -1.4784 -0.258 -1.588 -0.1436 -1.588 -0.002 c 0 0.1416 0.1096 0.256 0.2448 0.256 l 2.5824 0 c 0.1352 0 0.2448 -0.1144 0.2448 -0.256 C 1.484 -0.1436 1.3744 -0.258 1.2392 -0.258 z"
+    };
 
     const SYMBOL_UPDATE_TAG_KEY = ["symbolType", "size", ...GRAPHIC_UPDATE_TAG_KEY];
     let Symbol$1 = class Symbol extends Graphic {
@@ -17933,13 +18057,14 @@
         return isArray$1(size) ? 2 === size.length && size.every(this._validNumber) : this._validNumber(size);
       }
       doUpdateParsedPath() {
-        const symbolTheme = getTheme$1(this).symbol,
-          {
+        const symbolTheme = getTheme$1(this).symbol;
+        let {
             symbolType = symbolTheme.symbolType
-          } = this.attribute;
-        let path = builtinSymbolsMap[symbolType];
+          } = this.attribute,
+          path = builtinSymbolsMap[symbolType];
         if (path) return this._parsedPath = path, path;
         if (path = Symbol.userSymbolMap[symbolType], path) return this._parsedPath = path, path;
+        symbolType = builtInSymbolStrMap[symbolType] || symbolType;
         if (!0 === isSvg(symbolType)) {
           const parser = new XMLParser(),
             {
@@ -18451,7 +18576,9 @@
 
     class Paragraph {
       constructor(text, newLine, character) {
-        this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic", "number" == typeof character.lineHeight ? this.lineHeight = character.lineHeight > this.fontSize ? character.lineHeight : this.fontSize : this.lineHeight = Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
+        this.fontSize = character.fontSize || 16, this.textBaseline = character.textBaseline || "alphabetic";
+        const lineHeight = calculateLineHeight(character.lineHeight, this.fontSize);
+        this.lineHeight = "number" == typeof lineHeight ? lineHeight > this.fontSize ? lineHeight : this.fontSize : Math.floor(1.2 * this.fontSize), this.height = this.lineHeight;
         const {
           ascent: ascent,
           height: height,
@@ -21496,7 +21623,7 @@
           const t = textAlign;
           textAlign = null !== (_a = text.getBaselineMapAlign()[textBaseline]) && void 0 !== _a ? _a : "left", textBaseline = null !== (_b = text.getAlignMapBaseline()[t]) && void 0 !== _b ? _b : "top";
         }
-        const lineHeight = null !== (_c = text.attribute.lineHeight) && void 0 !== _c ? _c : fontSize,
+        const lineHeight = null !== (_c = calculateLineHeight(text.attribute.lineHeight, fontSize)) && void 0 !== _c ? _c : fontSize,
           data = this.valid(text, textAttribute, fillCb, strokeCb);
         if (!data) return;
         const {
@@ -25137,13 +25264,16 @@
           background: this._background
         });
       }
+      preventRender(prevent) {
+        prevent ? this._skipRender = -1 / 0 : this.params && this.params.optimize && !1 !== this.params.optimize.skipRenderWithOutRange ? this._skipRender = this.window.isVisible() ? 0 : 1 : this._skipRender = 0;
+      }
       optmize(params) {
         this.optmizeRender(null == params ? void 0 : params.skipRenderWithOutRange);
       }
       optmizeRender() {
         let skipRenderWithOutRange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
-        skipRenderWithOutRange && (this._skipRender = this.window.isVisible() ? 0 : 1, this.window.onVisibleChange(visible => {
-          visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1;
+        skipRenderWithOutRange && (this._skipRender = this._skipRender < 0 ? this._skipRender : this.window.isVisible() ? 0 : 1, this.window.onVisibleChange(visible => {
+          this._skipRender < 0 || (visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1);
         }));
       }
       getTimeline() {
@@ -27939,6 +28069,48 @@
         to: {}
       };
     }
+    function updateAnimation(prev, next, animationConfig) {
+      if (!isArray$1(animationConfig)) {
+        const {
+          duration: duration,
+          easing: easing,
+          increaseEffect = !0
+        } = animationConfig;
+        return prev.animate().to(next.attribute, duration, easing), void (increaseEffect && playIncreaseCount(prev, next, duration, easing));
+      }
+      animationConfig.forEach((cfg, i) => {
+        const {
+            duration: duration,
+            easing: easing,
+            increaseEffect = !0,
+            channel: channel
+          } = cfg,
+          {
+            from: from,
+            to: to
+          } = update$1(prev, next, channel, cfg.options);
+        isEmpty(to) || prev.animate().to(to, duration, easing), "text" in from && "text" in to && increaseEffect && playIncreaseCount(prev, next, duration, easing);
+      });
+    }
+    const update$1 = (prev, next, channel, options) => {
+      const from = Object.assign({}, prev.attribute),
+        to = Object.assign({}, next.attribute);
+      return array(null == options ? void 0 : options.excludeChannels).forEach(key => {
+        delete to[key];
+      }), Object.keys(to).forEach(key => {
+        channel && !channel.includes(key) && delete to[key];
+      }), {
+        from: from,
+        to: to
+      };
+    };
+    function playIncreaseCount(prev, next, duration, easing) {
+      prev.attribute.text !== next.attribute.text && isValidNumber$1(Number(prev.attribute.text) * Number(next.attribute.text)) && prev.animate().play(new IncreaseCount({
+        text: prev.attribute.text
+      }, {
+        text: next.attribute.text
+      }, duration, easing));
+    }
     const DefaultLabelAnimation = {
       mode: "same-time",
       duration: 300,
@@ -28116,6 +28288,22 @@
       }
       return points;
     };
+    function labelingLineOrArea(textBounds, graphicBounds) {
+      let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
+      let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      if (!textBounds || !graphicBounds) return;
+      const {
+          x1: x1,
+          x2: x2
+        } = textBounds,
+        width = Math.abs(x2 - x1),
+        anchorX = graphicBounds.x1;
+      let x = anchorX;
+      return "end" === position ? x = anchorX + width / 2 + offset : "start" === position && (x = anchorX - width / 2 - offset), {
+        x: x,
+        y: graphicBounds.y1
+      };
+    }
 
     class LabelBase extends AbstractComponent {
       setBitmap(bitmap) {
@@ -28191,30 +28379,37 @@
         return this._bindEvent(text), this._setStatesOfText(text), text;
       }
       _prepare() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const currentBaseMarks = [];
         let baseMarks;
         if (baseMarks = isFunction$1(this.attribute.getBaseMarks) ? this.attribute.getBaseMarks() : getMarksByName(this.getRootNode(), this.attribute.baseMarkGroupName), baseMarks.forEach(mark => {
           "willRelease" !== mark.releaseStatus && currentBaseMarks.push(mark);
-        }), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), null === (_b = this._idToPoint) || void 0 === _b || _b.clear(), this._baseMarks = currentBaseMarks, this._isCollectionBase = "line" === (null === (_c = null == currentBaseMarks ? void 0 : currentBaseMarks[0]) || void 0 === _c ? void 0 : _c.type) || "area" === (null === (_d = null == currentBaseMarks ? void 0 : currentBaseMarks[0]) || void 0 === _d ? void 0 : _d.type), !currentBaseMarks || 0 === currentBaseMarks.length) return;
+        }), null === (_a = this._idToGraphic) || void 0 === _a || _a.clear(), null === (_b = this._idToPoint) || void 0 === _b || _b.clear(), this._baseMarks = currentBaseMarks, this._isCollectionBase = "line-data" === this.attribute.type, !currentBaseMarks || 0 === currentBaseMarks.length) return;
         const {
           data: data
         } = this.attribute;
-        if (data && 0 !== data.length) if (this._idToGraphic || (this._idToGraphic = new Map()), this._isCollectionBase) {
-          this._idToPoint || (this._idToPoint = new Map());
-          let cur = 0;
-          for (let i = 0; i < currentBaseMarks.length; i++) {
-            const baseMark = currentBaseMarks[i],
-              points = getPointsOfLineArea(baseMark);
-            if (null == points ? void 0 : points.length) for (let j = 0; j < points.length; j++) {
-              const textData = data[cur];
-              textData && points[j] && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${cur}`), this._idToPoint.set(textData.id, points[j]), this._idToGraphic.set(textData.id, baseMark)), cur++;
+        if (data && 0 !== data.length) {
+          if (this._idToGraphic || (this._idToGraphic = new Map()), this._isCollectionBase) {
+            this._idToPoint || (this._idToPoint = new Map());
+            let cur = 0;
+            for (let i = 0; i < currentBaseMarks.length; i++) {
+              const baseMark = currentBaseMarks[i],
+                points = getPointsOfLineArea(baseMark);
+              if (null == points ? void 0 : points.length) for (let j = 0; j < points.length; j++) {
+                const textData = data[cur];
+                textData && points[j] && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${cur}`), this._idToPoint.set(textData.id, points[j]), this._idToGraphic.set(textData.id, baseMark)), cur++;
+              }
             }
+          } else for (let i = 0; i < currentBaseMarks.length; i++) {
+            const textData = data[i],
+              baseMark = currentBaseMarks[i];
+            textData && baseMark && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
           }
-        } else for (let i = 0; i < currentBaseMarks.length; i++) {
-          const textData = data[i],
-            baseMark = currentBaseMarks[i];
-          textData && baseMark && (isValid$1(textData.id) || (textData.id = `vrender-component-${this.name}-${i}`), this._idToGraphic.set(textData.id, baseMark));
+          !1 !== this.attribute.animation && (this._animationConfig = {
+            enter: merge$1({}, DefaultLabelAnimation, this.attribute.animation, null !== (_c = this.attribute.animationEnter) && void 0 !== _c ? _c : {}),
+            exit: merge$1({}, DefaultLabelAnimation, this.attribute.animation, null !== (_d = this.attribute.animationExit) && void 0 !== _d ? _d : {}),
+            update: isArray$1(this.attribute.animationUpdate) ? this.attribute.animationUpdate : merge$1({}, DefaultLabelAnimation, this.attribute.animation, null !== (_e = this.attribute.animationUpdate) && void 0 !== _e ? _e : {})
+          });
         }
       }
       getRelatedGrphic(item) {
@@ -28343,13 +28538,7 @@
         !1 === this._enableAnimation || !1 === this.attribute.animation ? this._renderWithOutAnimation(labels) : this._renderWithAnimation(labels);
       }
       _renderWithAnimation(labels) {
-        var _a, _b, _c, _d, _e;
-        const animationConfig = null !== (_a = this.attribute.animation) && void 0 !== _a ? _a : {},
-          mode = null !== (_b = animationConfig.mode) && void 0 !== _b ? _b : DefaultLabelAnimation.mode,
-          duration = null !== (_c = animationConfig.duration) && void 0 !== _c ? _c : DefaultLabelAnimation.duration,
-          easing = null !== (_d = animationConfig.easing) && void 0 !== _d ? _d : DefaultLabelAnimation.easing,
-          delay = null !== (_e = animationConfig.delay) && void 0 !== _e ? _e : 0,
-          currentTextMap = new Map(),
+        const currentTextMap = new Map(),
           prevTextMap = this._graphicToText || new Map(),
           texts = [];
         labels.forEach((text, index) => {
@@ -28372,32 +28561,26 @@
               } = getAnimationAttributes(text.attribute, "fadeIn");
               this.add(text), labelLine && (this._setStatesOfLabelLine(labelLine), this.add(labelLine)), this._syncStateWithRelatedGraphic(relatedGraphic), relatedGraphic.once("animate-bind", a => {
                 text.setAttributes(from);
-                const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, {
-                  mode: mode,
-                  duration: duration,
-                  easing: easing,
-                  to: to,
-                  delay: delay
-                });
+                const listener = this._afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, this._animationConfig.enter);
                 relatedGraphic.on("afterAttributeUpdate", listener);
               });
             }
           } else if ("update" === state) {
             const prevLabel = prevTextMap.get(textKey);
             prevTextMap.delete(textKey), currentTextMap.set(textKey, prevLabel);
-            const prevText = prevLabel.text;
-            prevText.animate().to(text.attribute, duration, easing), prevLabel.labelLine && prevLabel.labelLine.animate().to(merge$1({}, prevLabel.labelLine.attribute, {
+            const prevText = prevLabel.text,
+              {
+                duration: duration,
+                easing: easing
+              } = this._animationConfig.update;
+            updateAnimation(prevText, text, this._animationConfig.update), prevLabel.labelLine && prevLabel.labelLine.animate().to(merge$1({}, prevLabel.labelLine.attribute, {
               visible: null === (_f = null !== (_d = (null === (_b = null === (_a = text.attribute) || void 0 === _a ? void 0 : _a.line) || void 0 === _b ? void 0 : _b.visible) && (null === (_c = text.attribute) || void 0 === _c ? void 0 : _c.visible)) && void 0 !== _d ? _d : null === (_e = text.attribute) || void 0 === _e ? void 0 : _e.visible) || void 0 === _f || _f,
               points: null === (_g = text.attribute) || void 0 === _g ? void 0 : _g.points
-            }), duration, easing), !1 !== animationConfig.increaseEffect && prevText.attribute.text !== text.attribute.text && isValidNumber$1(Number(prevText.attribute.text) * Number(text.attribute.text)) && prevText.animate().play(new IncreaseCount({
-              text: prevText.attribute.text
-            }, {
-              text: text.attribute.text
-            }, duration, easing));
+            }), duration, easing);
           }
         }), prevTextMap.forEach(label => {
           var _a;
-          null === (_a = label.text) || void 0 === _a || _a.animate().to(getAnimationAttributes(label.text.attribute, "fadeOut").to, duration, easing).onEnd(() => {
+          null === (_a = label.text) || void 0 === _a || _a.animate().to(getAnimationAttributes(label.text.attribute, "fadeOut").to, this._animationConfig.exit.duration, this._animationConfig.exit.easing).onEnd(() => {
             this.removeChild(label.text), (null == label ? void 0 : label.labelLine) && this.removeChild(label.labelLine);
           });
         }), this._graphicToText = currentTextMap;
@@ -28429,12 +28612,11 @@
       _syncStateWithRelatedGraphic(relatedGraphic) {
         this.attribute.syncState && relatedGraphic.on("afterAttributeUpdate", this._handleRelatedGraphicSetState);
       }
-      _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, _ref) {
+      _afterRelatedGraphicAttributeUpdate(text, texts, index, relatedGraphic, to, _ref) {
         let {
           mode: mode,
           duration: duration,
           easing: easing,
-          to: to,
           delay: delay
         } = _ref;
         const listener = event => {
@@ -28445,30 +28627,30 @@
           if (!detail) return {};
           if (!(detail && detail.type === AttributeUpdateType.ANIMATE_UPDATE && detail.animationState && "wait" !== (null === (_a = detail.animationState.step) || void 0 === _a ? void 0 : _a.type))) return {};
           if (detail.type === AttributeUpdateType.ANIMATE_END) return void text.setAttributes(to);
-          const onEnd = () => {
+          const onStart = () => {
             relatedGraphic && (relatedGraphic.onAnimateBind = void 0, relatedGraphic.removeEventListener("afterAttributeUpdate", listener));
           };
           switch (mode) {
             case "after":
               detail.animationState.end && text.animate({
-                onEnd: onEnd
+                onStart: onStart
               }).wait(delay).to(to, duration, easing);
               break;
             case "after-all":
               index === texts.length - 1 && detail.animationState.end && texts.forEach(t => {
                 t.animate({
-                  onEnd: onEnd
+                  onStart: onStart
                 }).wait(delay).to(to, duration, easing);
               });
               break;
             default:
               if (this._isCollectionBase) {
                 const point = this._idToPoint.get(text.attribute.id);
-                !point || text.animates && text.animates.has("label-animate") || !this._baseMarks[0].containsPoint(point.x, point.y, IContainPointMode.LOCAL, null === (_b = this.stage) || void 0 === _b ? void 0 : _b.pickerService) || text.animate({
-                  onEnd: onEnd
+                !point || text.animates && text.animates.has("label-animate") || !relatedGraphic.containsPoint(point.x, point.y, IContainPointMode.LOCAL, null === (_b = this.stage) || void 0 === _b ? void 0 : _b.pickerService) || text.animate({
+                  onStart: onStart
                 }).wait(delay).to(to, duration, easing);
               } else detail.animationState.isFirstFrameOfStep && text.animate({
-                onEnd: onEnd
+                onStart: onStart
               }).wait(delay).to(to, duration, easing);
           }
         };
@@ -28665,6 +28847,45 @@
       pickable: !1
     };
 
+    class LineLabel extends LabelBase {
+      constructor(attributes) {
+        super(merge$1({}, LineLabel.defaultAttributes, attributes)), this.name = "line-label";
+      }
+      getGraphicBounds(graphic) {
+        let point = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        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],
+          index = "start" === position ? 0 : points.length - 1;
+        return {
+          x1: points[index].x,
+          x2: points[index].x,
+          y1: points[index].y,
+          y2: points[index].y
+        };
+      }
+      labeling(textBounds, graphicBounds) {
+        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
+        let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+        return labelingLineOrArea(textBounds, graphicBounds, position, offset);
+      }
+    }
+    LineLabel.defaultAttributes = {
+      textStyle: {
+        fontSize: 12,
+        fill: "#000",
+        textAlign: "center",
+        textBaseline: "middle",
+        boundsPadding: [-1, 0, -1, 0]
+      },
+      position: "end",
+      offset: 6,
+      pickable: !1
+    };
+
     class ArcInfo {
       constructor(refDatum, center, outerCenter, quadrant, radian, middleAngle, innerRadius, outerRadius, circleCenter) {
         this.refDatum = refDatum, this.center = center, this.outerCenter = outerCenter, this.quadrant = quadrant, this.radian = radian, this.middleAngle = middleAngle, this.innerRadius = innerRadius, this.outerRadius = outerRadius, this.circleCenter = circleCenter, this.labelVisible = !0, this.labelLimit = 0;
@@ -29219,10 +29440,51 @@
       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] : {};
+        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],
+          index = "start" === position ? 0 : points.length - 1;
+        return {
+          x1: points[index].x,
+          x2: points[index].x,
+          y1: points[index].y,
+          y2: points[index].y
+        };
+      }
+      labeling(textBounds, graphicBounds) {
+        let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "end";
+        let offset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+        return labelingLineOrArea(textBounds, graphicBounds, position, offset);
+      }
+    }
+    AreaLabel.defaultAttributes = {
+      textStyle: {
+        fontSize: 12,
+        fill: "#000",
+        textAlign: "center",
+        textBaseline: "middle",
+        boundsPadding: [-1, 0, -1, 0]
+      },
+      position: "end",
+      offset: 6,
+      pickable: !1
+    };
+
     const labelComponentMap = {
       rect: RectLabel,
       symbol: SymbolLabel,
       arc: ArcLabel,
+      line: LineLabel,
+      area: AreaLabel,
       "line-data": LineDataLabel
     };
     class DataLabel extends AbstractComponent {
@@ -29230,6 +29492,7 @@
         super(merge$1({}, DataLabel.defaultAttributes, attributes)), this.name = "data-label";
       }
       render() {
+        var _a;
         const {
           dataLabels: dataLabels,
           size: size
@@ -29250,10 +29513,12 @@
             labelComponent = labelComponentMap[dataLabel.type] || LabelBase;
           if (labelComponent) {
             const {
-              baseMarkGroupName: baseMarkGroupName
-            } = dataLabel;
-            let component = this._componentMap.get(baseMarkGroupName);
-            component ? (component.setBitmapTool(tool), component.setBitmap(bitmap), component.setAttributes(dataLabel), currentComponentMap.set(baseMarkGroupName, component)) : (component = new labelComponent(dataLabel), component.setBitmap(bitmap), component.setBitmapTool(tool), this.add(component), currentComponentMap.set(baseMarkGroupName, component));
+                baseMarkGroupName: baseMarkGroupName,
+                type: type
+              } = dataLabel,
+              id = null !== (_a = dataLabel.id) && void 0 !== _a ? _a : `${baseMarkGroupName}-${type}-${i}`;
+            let component = this._componentMap.get(id);
+            component ? (component.setBitmapTool(tool), component.setBitmap(bitmap), component.setAttributes(dataLabel), currentComponentMap.set(id, component)) : (component = new labelComponent(dataLabel), component.setBitmap(bitmap), component.setBitmapTool(tool), this.add(component), currentComponentMap.set(id, component));
           }
         }
         prevComponentMap.forEach((cp, key) => {
@@ -31095,10 +31360,6 @@
     }
     mixin(CircleAxisGrid, CircleAxisMixin);
 
-    var DataZoomActiveTag;
-    !function (DataZoomActiveTag) {
-      DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
-    }(DataZoomActiveTag || (DataZoomActiveTag = {}));
     const DEFAULT_DATA_ZOOM_ATTRIBUTES = {
       orient: "bottom",
       showDetail: "auto",
@@ -31197,6 +31458,11 @@
       }
     };
 
+    var DataZoomActiveTag;
+    !function (DataZoomActiveTag) {
+      DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
+    }(DataZoomActiveTag || (DataZoomActiveTag = {}));
+
     var __rest$1 = undefined && undefined.__rest || function (s, e) {
       var t = {};
       for (var p in s) Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0 && (t[p] = s[p]);
@@ -31231,6 +31497,7 @@
         }, this._statePointToData = state => state, this._onHandlerPointerDown = (e, tag) => {
           e.stopPropagation(), "start" === tag ? (this._activeTag = DataZoomActiveTag.startHandler, this._activeItem = this._startHandler) : "end" === tag ? (this._activeTag = DataZoomActiveTag.endHandler, this._activeItem = this._endHandler) : "middleRect" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerRect) : "middleSymbol" === tag ? (this._activeTag = DataZoomActiveTag.middleHandler, this._activeItem = this._middleHandlerSymbol) : "background" === tag && (this._activeTag = DataZoomActiveTag.background, this._activeItem = this._background), this._activeState = !0, this._activeCache.startPos = this.eventPosToStagePos(e), this._activeCache.lastPos = this.eventPosToStagePos(e);
         }, this._onHandlerPointerMove = e => {
+          var _a;
           e.stopPropagation();
           const {
               start: startAttr,
@@ -31248,7 +31515,7 @@
             start: start,
             end: end
           } = this.state;
-          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), realTime && this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end));
+          this._activeState && (this._activeTag === DataZoomActiveTag.middleHandler ? this.moveZoomWithMiddle((this.state.start + this.state.end) / 2 + dis) : this._activeTag === DataZoomActiveTag.startHandler ? start + dis > end ? (start = end, end = start + dis, this._activeTag = DataZoomActiveTag.endHandler) : start += dis : this._activeTag === DataZoomActiveTag.endHandler && (end + dis < start ? (end = start, start = end + dis, this._activeTag = DataZoomActiveTag.startHandler) : end += dis), this._activeCache.lastPos = pos, brushSelect && this.renderDragMask()), start = Math.min(Math.max(start, 0), 1), end = Math.min(Math.max(end, 0), 1), startAttr === start && endAttr === end || (this.setStateAttr(start, end, !0), realTime && (null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, start, end, this._activeTag)), this._dispatchChangeEvent(start, end));
         };
         const {
             start: start,
@@ -31317,6 +31584,7 @@
         };
       }
       _onHandlerPointerUp(e) {
+        var _a;
         e.preventDefault();
         const {
           start: start,
@@ -31328,7 +31596,7 @@
           const pos = this.eventPosToStagePos(e);
           this.backgroundDragZoom(this._activeCache.startPos, pos);
         }
-        this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), this._updateStateCallback && this._updateStateCallback(this.state.start, this.state.end), this._dispatchChangeEvent(this.state.start, this.state.end));
+        this._activeState = !1, brushSelect && this.renderDragMask(), realTime && start === this.state.start && end === this.state.end || (this.setStateAttr(this.state.start, this.state.end, !0), null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, this.state.start, this.state.end, this._activeTag), this._dispatchChangeEvent(this.state.start, this.state.end));
       }
       _onHandlerPointerEnter(e) {
         e.stopPropagation(), this._showText = !0, this.renderText();
@@ -31720,11 +31988,12 @@
         changeEvent.manager = null === (_a = this.stage) || void 0 === _a ? void 0 : _a.eventSystem.manager, this.dispatchEvent(changeEvent);
       }
       setStartAndEnd(start, end) {
+        var _a;
         const {
           start: startAttr,
           end: endAttr
         } = this.attribute;
-        isValid$1(start) && isValid$1(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), this._updateStateCallback && this._updateStateCallback(start, end), this._dispatchChangeEvent(start, end)));
+        isValid$1(start) && isValid$1(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setStateAttr(start, end, !0), null === (_a = this._updateStateCallback) || void 0 === _a || _a.call(this, start, end, this._activeTag), this._dispatchChangeEvent(start, end)));
       }
       setPreviewData(data) {
         this._previewData = data;
@@ -32689,22 +32958,14 @@
           const target = e.target;
           if (null === (_a = null == target ? void 0 : target.name) || void 0 === _a ? void 0 : _a.startsWith(LEGEND_ELEMENT_NAME.item)) {
             const legendItem = target.delegate;
-            legendItem.hasState(LegendStateValue.selected) ? this._setLegendItemState(legendItem, LegendStateValue.selectedHover, e) : this._setLegendItemState(legendItem, LegendStateValue.unSelectedHover, e);
-            const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
-            focusButton && focusButton.setAttribute("visible", !0), this._dispatchEvent(LegendEvent.legendItemHover, legendItem, e);
-          }
+            if (this._lastActiveItem) {
+              if (this._lastActiveItem.id === legendItem.id) return;
+              this._unHover(this._lastActiveItem, e);
+            }
+            this._hover(legendItem, e);
+          } else this._lastActiveItem && (this._unHover(this._lastActiveItem, e), this._lastActiveItem = null);
         }, this._onUnHover = e => {
-          var _a;
-          const target = e.target;
-          if (null === (_a = null == target ? void 0 : target.name) || void 0 === _a ? void 0 : _a.startsWith(LEGEND_ELEMENT_NAME.item)) {
-            const legendItem = target.delegate;
-            let attributeUpdate = !1;
-            (legendItem.hasState(LegendStateValue.unSelectedHover) || legendItem.hasState(LegendStateValue.selectedHover)) && (attributeUpdate = !0), legendItem.removeState(LegendStateValue.unSelectedHover), legendItem.removeState(LegendStateValue.selectedHover), legendItem.getChildren()[0].getChildren().forEach(child => {
-              attributeUpdate || !child.hasState(LegendStateValue.unSelectedHover) && !child.hasState(LegendStateValue.selectedHover) || (attributeUpdate = !0), child.removeState(LegendStateValue.unSelectedHover), child.removeState(LegendStateValue.selectedHover);
-            });
-            const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
-            focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem, e), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem, e);
-          }
+          this._lastActiveItem && (this._unHover(this._lastActiveItem, e), this._lastActiveItem = null);
         }, this._onClick = e => {
           var _a, _b, _c, _d, _e;
           const target = e.target;
@@ -32806,7 +33067,7 @@
           hover = !0,
           select = !0
         } = this.attribute;
-        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerout", this._onUnHover)), select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
+        hover && (this._itemsContainer.addEventListener("pointermove", this._onHover), this._itemsContainer.addEventListener("pointerleave", this._onUnHover)), select && this._itemsContainer.addEventListener("pointerdown", this._onClick);
       }
       _renderEachItem(item, isSelected, index, items) {
         const {
@@ -32836,7 +33097,7 @@
         }), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup)) : (itemGroup = createGroup(Object.assign({
           x: 0,
           y: 0
-        }, null == background ? void 0 : background.style)), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, null == background ? void 0 : background.state)), itemGroup.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
+        }, null == background ? void 0 : background.style)), this._appendDataToShape(itemGroup, LEGEND_ELEMENT_NAME.item, item, itemGroup, null == background ? void 0 : background.state)), itemGroup.id = `${null != id ? id : label}-${index}`, itemGroup.addState(isSelected ? LegendStateValue.selected : LegendStateValue.unSelected);
         const innerGroup = createGroup({
           x: 0,
           y: 0,
@@ -33010,6 +33271,20 @@
         };
         return this._pager.addEventListener("toPrev", onPaging), this._pager.addEventListener("toNext", onPaging), !0;
       }
+      _hover(legendItem, e) {
+        this._lastActiveItem = legendItem;
+        legendItem.hasState(LegendStateValue.selected) ? this._setLegendItemState(legendItem, LegendStateValue.selectedHover, e) : this._setLegendItemState(legendItem, LegendStateValue.unSelectedHover, e);
+        const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
+        focusButton && focusButton.setAttribute("visible", !0), this._dispatchEvent(LegendEvent.legendItemHover, legendItem, e);
+      }
+      _unHover(legendItem, e) {
+        let attributeUpdate = !1;
+        (legendItem.hasState(LegendStateValue.unSelectedHover) || legendItem.hasState(LegendStateValue.selectedHover)) && (attributeUpdate = !0), legendItem.removeState(LegendStateValue.unSelectedHover), legendItem.removeState(LegendStateValue.selectedHover), legendItem.getChildren()[0].getChildren().forEach(child => {
+          attributeUpdate || !child.hasState(LegendStateValue.unSelectedHover) && !child.hasState(LegendStateValue.selectedHover) || (attributeUpdate = !0), child.removeState(LegendStateValue.unSelectedHover), child.removeState(LegendStateValue.selectedHover);
+        });
+        const focusButton = legendItem.getChildren()[0].find(node => node.name === LEGEND_ELEMENT_NAME.focus, !1);
+        focusButton && focusButton.setAttribute("visible", !1), attributeUpdate && this._dispatchEvent(LegendEvent.legendItemAttributeUpdate, legendItem, e), this._dispatchEvent(LegendEvent.legendItemUnHover, legendItem, e);
+      }
       _setLegendItemState(legendItem, stateName, e) {
         let attributeUpdate = !1;
         legendItem.hasState(stateName) || (attributeUpdate = !0), legendItem.addState(stateName, true), legendItem.getChildren()[0].getChildren().forEach(child => {
@@ -33209,20 +33484,97 @@
       }
     }
 
+    function identity(x) {
+      return x;
+    }
+    const generatePow = exponent => x => x < 0 ? -Math.pow(-x, exponent) : Math.pow(x, exponent);
+    const sqrt$1 = x => x < 0 ? -Math.sqrt(-x) : Math.sqrt(x);
+    const square$1 = x => x < 0 ? -x * x : x * x;
+    const logNegative = x => -Math.log(-x);
+    const expNegative = x => -Math.exp(-x);
+    const pow10 = x => isFinite(x) ? Math.pow(10, x) : x < 0 ? 0 : x;
+    const powp = base => 10 === base ? pow10 : base === Math.E ? Math.exp : x => Math.pow(base, x);
+    const logp = base => base === Math.E ? Math.log : 10 === base ? Math.log10 : 2 === base ? Math.log2 : (base = Math.log(base), x => Math.log(x) / base);
+    const symlog = c => x => Math.sign(x) * Math.log1p(Math.abs(x / c));
+    const symexp = c => x => Math.sign(x) * Math.expm1(Math.abs(x)) * c;
+    function normalize(a, b) {
+      if (a = Number(a), b = Number(b), b -= a) return x => (x - a) / b;
+      const result = Number.isNaN(b) ? NaN : .5;
+      return () => result;
+    }
+    function bimap(domain, range, interpolate) {
+      const d0 = domain[0],
+        d1 = domain[1],
+        r0 = range[0],
+        r1 = range[1];
+      let d0Fuc, r0Fuc;
+      return d1 < d0 ? (d0Fuc = normalize(d1, d0), r0Fuc = interpolate(r1, r0)) : (d0Fuc = normalize(d0, d1), r0Fuc = interpolate(r0, r1)), x => r0Fuc(d0Fuc(x));
+    }
+    function bandSpace$1(count, paddingInner, paddingOuter) {
+      let space;
+      return space = 1 === count ? count + 2 * paddingOuter : count - paddingInner + 2 * paddingOuter, count ? space > 0 ? space : 1 : 0;
+    }
+    function scaleWholeRangeSize$1(count, bandwidth, paddingInner, paddingOuter) {
+      return bandSpace$1(count, paddingInner, paddingOuter) * (bandwidth / (1 - paddingInner));
+    }
+    function calculateBandwidthFromWholeRangeSize(count, wholeSize, paddingInner, paddingOuter, round) {
+      const space = bandSpace$1(count, paddingInner, paddingOuter);
+      let step = wholeSize / Math.max(1, space || 1);
+      round && (step = Math.floor(step));
+      let bandwidth = step * (1 - paddingInner);
+      return round && (bandwidth = Math.round(bandwidth)), bandwidth;
+    }
+    function calculateWholeRangeFromRangeFactor(range, rangeFactor) {
+      const k = (range[1] - range[0]) / (rangeFactor[1] - rangeFactor[0]),
+        b = range[0] - k * rangeFactor[0];
+      return [b, k + b];
+    }
+    function polymap(domain, range, interpolate) {
+      const j = Math.min(domain.length, range.length) - 1,
+        d = new Array(j),
+        r = new Array(j);
+      let i = -1;
+      for (domain[j] < domain[0] && (domain = domain.slice().reverse(), range = range.slice().reverse()); ++i < j;) d[i] = normalize(domain[i], domain[i + 1]), r[i] = interpolate(range[i], range[i + 1]);
+      return function (x) {
+        const i = bisect(domain, x, 1, j) - 1;
+        return r[i](d[i](x));
+      };
+    }
+    const nice = (domain, options) => {
+      const newDomain = domain.slice();
+      let startIndex = 0,
+        endIndex = newDomain.length - 1,
+        x0 = newDomain[startIndex],
+        x1 = newDomain[endIndex];
+      return x1 < x0 && ([startIndex, endIndex] = [endIndex, startIndex], [x0, x1] = [x1, x0]), newDomain[startIndex] = options.floor(x0), newDomain[endIndex] = options.ceil(x1), newDomain;
+    };
+    const niceNumber = function (value) {
+      let round = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
+      const exponent = Math.floor(Math.log10(value)),
+        fraction = value / Math.pow(10, exponent);
+      let niceFraction;
+      return niceFraction = round ? fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10 : fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10, niceFraction * Math.pow(10, exponent);
+    };
+    const restrictNumber = (value, domain) => {
+      let min, max;
+      return domain[0] < domain[1] ? (min = domain[0], max = domain[1]) : (min = domain[1], max = domain[0]), Math.min(Math.max(value, min), max);
+    };
+
     class BaseScale {
+      constructor() {
+        this._rangeFactorStart = null, this._rangeFactorEnd = null;
+      }
       _calculateWholeRange(range) {
-        if (this._wholeRange) return this._wholeRange;
-        if (this._rangeFactor && 2 === range.length) {
-          const k = (range[1] - range[0]) / (this._rangeFactor[1] - this._rangeFactor[0]),
-            b = range[0] - k * this._rangeFactor[0],
-            r0 = b,
-            r1 = k + b;
-          return this._wholeRange = [r0, r1], this._wholeRange;
-        }
-        return range;
+        return this._wholeRange ? this._wholeRange : isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd) && 2 === range.length ? (this._wholeRange = calculateWholeRangeFromRangeFactor(range, [this._rangeFactorStart, this._rangeFactorEnd]), this._wholeRange) : range;
       }
       rangeFactor(_, slience, clear) {
-        return _ ? (2 === _.length && _.every(r => r >= 0 && r <= 1) && (this._wholeRange = null, this._rangeFactor = 0 === _[0] && 1 === _[1] ? null : _), this) : clear ? (this._wholeRange = null, this._rangeFactor = null, this) : this._rangeFactor;
+        return _ ? (2 === _.length && _.every(r => r >= 0 && r <= 1) && (this._wholeRange = null, 0 === _[0] && 1 === _[1] ? (this._rangeFactorStart = null, this._rangeFactorEnd = null) : (this._rangeFactorStart = _[0], this._rangeFactorEnd = _[1])), this) : clear ? (this._wholeRange = null, this._rangeFactorStart = null, this._rangeFactorEnd = null, this) : isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd) ? [this._rangeFactorStart, this._rangeFactorEnd] : null;
+      }
+      rangeFactorStart(_, slience) {
+        return _ ? (_ >= 0 && _ <= 1 && (this._wholeRange = null, 0 !== _ || !isNil$1(this._rangeFactorEnd) && 1 !== this._rangeFactorEnd ? this._rangeFactorStart = _ : (this._rangeFactorStart = null, this._rangeFactorEnd = null)), this) : this._rangeFactorStart;
+      }
+      rangeFactorEnd(_, slience) {
+        return _ ? (_ >= 0 && _ <= 1 && (this._wholeRange = null, 0 !== _ || !isNil$1(this._rangeFactorStart) && 0 !== this._rangeFactorStart ? this._rangeFactorEnd = _ : (this._rangeFactorStart = null, this._rangeFactorEnd = null)), this) : this._rangeFactorEnd;
       }
       generateFishEyeTransform() {
         var _a;
@@ -33271,7 +33623,7 @@
         return new OrdinalScale().domain(this._domain).range(this._ordinalRange).unknown(this._unknown);
       }
       calculateVisibleDomain(range) {
-        if (this._rangeFactor && 2 === range.length) {
+        if (isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd) && 2 === range.length) {
           return [this.invert(range[0]), this.invert(range[1])];
         }
         return this._domain;
@@ -33309,77 +33661,6 @@
       }
     }
 
-    function identity(x) {
-      return x;
-    }
-    const generatePow = exponent => x => x < 0 ? -Math.pow(-x, exponent) : Math.pow(x, exponent);
-    const sqrt$1 = x => x < 0 ? -Math.sqrt(-x) : Math.sqrt(x);
-    const square$1 = x => x < 0 ? -x * x : x * x;
-    const logNegative = x => -Math.log(-x);
-    const expNegative = x => -Math.exp(-x);
-    const pow10 = x => isFinite(x) ? Math.pow(10, x) : x < 0 ? 0 : x;
-    const powp = base => 10 === base ? pow10 : base === Math.E ? Math.exp : x => Math.pow(base, x);
-    const logp = base => base === Math.E ? Math.log : 10 === base ? Math.log10 : 2 === base ? Math.log2 : (base = Math.log(base), x => Math.log(x) / base);
-    const symlog = c => x => Math.sign(x) * Math.log1p(Math.abs(x / c));
-    const symexp = c => x => Math.sign(x) * Math.expm1(Math.abs(x)) * c;
-    function normalize(a, b) {
-      if (a = Number(a), b = Number(b), b -= a) return x => (x - a) / b;
-      const result = Number.isNaN(b) ? NaN : .5;
-      return () => result;
-    }
-    function bimap(domain, range, interpolate) {
-      const d0 = domain[0],
-        d1 = domain[1],
-        r0 = range[0],
-        r1 = range[1];
-      let d0Fuc, r0Fuc;
-      return d1 < d0 ? (d0Fuc = normalize(d1, d0), r0Fuc = interpolate(r1, r0)) : (d0Fuc = normalize(d0, d1), r0Fuc = interpolate(r0, r1)), x => r0Fuc(d0Fuc(x));
-    }
-    function bandSpace$1(count, paddingInner, paddingOuter) {
-      let space;
-      return space = 1 === count ? count + 2 * paddingOuter : count - paddingInner + 2 * paddingOuter, count ? space > 0 ? space : 1 : 0;
-    }
-    function scaleWholeRangeSize$1(count, bandwidth, paddingInner, paddingOuter) {
-      return bandSpace$1(count, paddingInner, paddingOuter) * (bandwidth / (1 - paddingInner));
-    }
-    function calculateBandwidthFromWholeRangeSize(count, wholeSize, paddingInner, paddingOuter, round) {
-      const space = bandSpace$1(count, paddingInner, paddingOuter);
-      let step = wholeSize / Math.max(1, space || 1);
-      round && (step = Math.floor(step));
-      let bandwidth = step * (1 - paddingInner);
-      return round && (bandwidth = Math.round(bandwidth)), bandwidth;
-    }
-    function polymap(domain, range, interpolate) {
-      const j = Math.min(domain.length, range.length) - 1,
-        d = new Array(j),
-        r = new Array(j);
-      let i = -1;
-      for (domain[j] < domain[0] && (domain = domain.slice().reverse(), range = range.slice().reverse()); ++i < j;) d[i] = normalize(domain[i], domain[i + 1]), r[i] = interpolate(range[i], range[i + 1]);
-      return function (x) {
-        const i = bisect(domain, x, 1, j) - 1;
-        return r[i](d[i](x));
-      };
-    }
-    const nice = (domain, options) => {
-      const newDomain = domain.slice();
-      let startIndex = 0,
-        endIndex = newDomain.length - 1,
-        x0 = newDomain[startIndex],
-        x1 = newDomain[endIndex];
-      return x1 < x0 && ([startIndex, endIndex] = [endIndex, startIndex], [x0, x1] = [x1, x0]), newDomain[startIndex] = options.floor(x0), newDomain[endIndex] = options.ceil(x1), newDomain;
-    };
-    const niceNumber = function (value) {
-      let round = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !1;
-      const exponent = Math.floor(Math.log10(value)),
-        fraction = value / Math.pow(10, exponent);
-      let niceFraction;
-      return niceFraction = round ? fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10 : fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10, niceFraction * Math.pow(10, exponent);
-    };
-    const restrictNumber = (value, domain) => {
-      let min, max;
-      return domain[0] < domain[1] ? (min = domain[0], max = domain[1]) : (min = domain[1], max = domain[0]), Math.min(Math.max(value, min), max);
-    };
-
     function ticks$2(start, stop, count, allowExcessive) {
       let reverse;
       const ticks = [];
@@ -33412,10 +33693,10 @@
       constructor(slience) {
         super(), this.type = ScaleEnum.Band, this._range = [0, 1], this._step = void 0, this._bandwidth = void 0, this._isFixed = !1, this._round = !1, this._paddingInner = 0, this._paddingOuter = 0, this._align = .5, this._unknown = void 0, delete this.unknown, this.rescale(slience);
       }
-      rescale(slience) {
+      rescale(slience, changeProperty) {
         if (slience) return this;
         this._wholeRange = null;
-        const wholeRange = this._calculateWholeRange(this._range),
+        const wholeRange = this._calculateWholeRange(this._range, changeProperty),
           n = super.domain().length,
           reverse = wholeRange[1] < wholeRange[0];
         let start = wholeRange[Number(reverse) - 0];
@@ -33425,22 +33706,25 @@
         const values = range(n).map(i => start + this._step * i);
         return super.range(reverse ? values.reverse() : values), this.generateFishEyeTransform(), this;
       }
-      _calculateWholeRange(range) {
-        var _a;
+      _calculateWholeRange(range, changeProperty) {
         if (this._wholeRange) return this._wholeRange;
         if ((this._minBandwidth || this._maxBandwidth) && !this._isBandwidthFixedByUser()) {
-          const autoBandwidth = calculateBandwidthFromWholeRangeSize(super.domain().length, Math.abs(range[1] - range[0]), this._paddingInner, this._paddingOuter, this._round);
+          let wholeSize;
+          if (isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd) && 2 === range.length) {
+            const wholeRange = calculateWholeRangeFromRangeFactor(range, [this._rangeFactorStart, this._rangeFactorEnd]);
+            wholeSize = Math.abs(wholeRange[1] - wholeRange[0]);
+          } else wholeSize = Math.abs(range[1] - range[0]);
+          const autoBandwidth = calculateBandwidthFromWholeRangeSize(super.domain().length, wholeSize, this._paddingInner, this._paddingOuter, this._round);
           autoBandwidth < this._minBandwidth ? (this._bandwidth = this._minBandwidth, this._isFixed = !0) : autoBandwidth > this._maxBandwidth ? (this._bandwidth = this._maxBandwidth, this._isFixed = !0) : (this._bandwidth = autoBandwidth, this._isFixed = !1);
         }
         if (this.isBandwidthFixed()) {
           const wholeLength = scaleWholeRangeSize$1(super.domain().length, this._bandwidth, this._paddingInner, this._paddingOuter),
             rangeFactorSize = Math.min((range[1] - range[0]) / wholeLength, 1);
-          if (null === (_a = this._rangeFactor) || void 0 === _a ? void 0 : _a.length) {
-            const [rangeFactorStart, rangeFactorEnd] = this._rangeFactor,
-              r0 = range[0] - wholeLength * rangeFactorStart,
+          if (isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd)) {
+            const r0 = range[0] - wholeLength * this._rangeFactorStart,
               r1 = r0 + wholeLength;
-            this._wholeRange = [r0, r1], this._rangeFactor = rangeFactorStart + rangeFactorSize <= 1 ? [rangeFactorStart, rangeFactorStart + rangeFactorSize] : rangeFactorEnd - rangeFactorSize >= 0 ? [rangeFactorEnd - rangeFactorSize, rangeFactorEnd] : [0, rangeFactorSize];
-          } else this._rangeFactor = [0, rangeFactorSize], this._wholeRange = [range[0], range[0] + 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);
+          } else this._rangeFactorStart = 0, this._rangeFactorEnd = rangeFactorSize, this._wholeRange = [range[0], range[0] + wholeLength];
           return this._wholeRange;
         }
         return super._calculateWholeRange(range);
@@ -33451,7 +33735,7 @@
       }
       calculateVisibleDomain(range) {
         const domain = this._domain;
-        if (this._rangeFactor && domain.length) {
+        if (isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd) && domain.length) {
           const d0 = this._getInvertIndex(range[0]),
             d1 = this._getInvertIndex(range[1]);
           return domain.slice(Math.min(d0, d1), Math.max(d0, d1) + 1);
@@ -33529,6 +33813,12 @@
       rangeFactor(_, slience) {
         return _ ? (super.rangeFactor(_), this.rescale(slience)) : super.rangeFactor();
       }
+      rangeFactorStart(_, slience) {
+        return _ ? (super.rangeFactorStart(_), this.rescale(slience, "rangeFactorStart")) : super.rangeFactorStart();
+      }
+      rangeFactorEnd(_, slience) {
+        return _ ? (super.rangeFactorEnd(_), this.rescale(slience, "rangeFactorEnd")) : super.rangeFactorEnd();
+      }
       bandwidth(_, slience) {
         return _ ? ("auto" === _ ? (this._bandwidth = void 0, this._isFixed = !1) : (this._bandwidth = _, this._isFixed = !0), this._userBandwidth = _, this.rescale(slience)) : this._bandwidth;
       }
@@ -33579,7 +33869,7 @@
       }
       calculateVisibleDomain(range) {
         var _a;
-        if (this._rangeFactor && 2 === range.length) {
+        if (isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd) && 2 === range.length) {
           return [this.invert(range[0]), this.invert(range[1])];
         }
         return null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain;
@@ -33860,7 +34150,7 @@
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
         let options = arguments.length > 1 ? arguments[1] : undefined;
         var _a;
-        if (this._rangeFactor && (this._rangeFactor[0] > 0 || this._rangeFactor[1] < 1) && 2 === this._range.length || !this._niceType) return this.d3Ticks(count, options);
+        if (isValid$1(this._rangeFactorStart) && isValid$1(this._rangeFactorEnd) && (this._rangeFactorStart > 0 || this._rangeFactorEnd < 1) && 2 === this._range.length || !this._niceType) return this.d3Ticks(count, options);
         const curNiceDomain = null !== (_a = this._niceDomain) && void 0 !== _a ? _a : this._domain,
           originalDomain = this._domain,
           start = curNiceDomain[0],
@@ -33966,7 +34256,7 @@
           }
           2 * z.length < count && (z = ticks$1(u, v, count));
         } else z = ticks$1(i, j, Math.min(j - i, count)).map(this._pows);
-        return r ? z.reverse() : z;
+        return z = z.filter(t => 0 !== t), r ? z.reverse() : z;
       }
       ticks() {
         let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
@@ -33994,7 +34284,7 @@
         } else niceType = "all";
         if (niceType) {
           const niceDomain = nice(originalDomain.slice(), {
-            floor: x => Math.floor(x),
+            floor: x => this._pows(Math.floor(this._logs(x))),
             ceil: x => Math.ceil(x)
           });
           return "min" === niceType ? niceDomain[niceDomain.length - 1] = null !== (_a = niceMinMax[1]) && void 0 !== _a ? _a : niceDomain[niceDomain.length - 1] : "max" === niceType && (niceDomain[0] = null !== (_b = niceMinMax[0]) && void 0 !== _b ? _b : niceDomain[0]), this._niceDomain = niceDomain, this.rescale(), this;
@@ -36324,7 +36614,7 @@
             if (isVisible(itemAttr.shape) && itemGroup.createOrUpdateChild(`${itemGroupName}-shape`, Object.assign({
               visible: !0,
               x: itemAttr.shape.size / 2,
-              y: itemAttr.shape.size / 2 + ((null !== (_a = itemAttr.key.lineHeight) && void 0 !== _a ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2
+              y: itemAttr.shape.size / 2 + ((null !== (_a = calculateLineHeight(itemAttr.key.lineHeight, itemAttr.key.fontSize)) && void 0 !== _a ? _a : itemAttr.key.fontSize) - itemAttr.shape.size) / 2
             }, itemAttr.shape), "symbol"), hasContentShape && (x += itemAttr.shape.size + itemAttr.shape.spacing), isVisible(itemAttr.key)) {
               let element;
               element = itemAttr.key.multiLine ? itemGroup.createOrUpdateChild(`${itemGroupName}-key`, Object.assign(Object.assign({
@@ -37003,7 +37293,7 @@
     function moveToHead(array, idx, start, cmp) {
       let parent, pidx;
       const item = array[idx];
-      for (; idx > start && (pidx = Math.floor((idx - 1) / 2), parent = array[pidx], cmp(item, parent) < 0);) array[idx] = parent, idx = pidx;
+      for (; idx > start && (pidx = Math.floor((idx - 1) / 2), parent = array[pidx], item && parent && cmp(item, parent) < 0);) array[idx] = parent, idx = pidx;
       return array[idx] = item;
     }
     function moveToTail(array, idx, end, cmp) {
@@ -37170,6 +37460,7 @@
       }
       evaluate() {
         return __awaiter$5(this, void 0, void 0, function* () {
+          if (this._isReleased) return;
           if (this._beforeRunner && (yield this.asyncCallback(this._beforeRunner)), !this._committed.length) return this.logger.info("Dataflow invoked, but nothing to do."), !1;
           this._isRunning = !0, this._updateCounter += 1;
           let grammar,
@@ -37179,14 +37470,14 @@
             count = 0;
           this.logger.canLogInfo() && (dt = Date.now(), this.logger.debug(`-- START PROPAGATION (${this._updateCounter}) -----`)), this._beforeEvaluate();
           try {
-            for (; this._heap.size() > 0;) if (grammar = this._heap.pop(), grammar.rank === grammar.qrank) {
+            for (; this._heap.size() > 0 && !this._isReleased;) if (grammar = this._heap.pop(), grammar.rank === grammar.qrank) {
               if (next = grammar.run(), next && next.then && (next = yield next), !this._isRunning) return !1;
               this._logGrammarRunInfo(grammar), this._enqueueTargets(grammar), count += 1;
             } else this._enqueue(grammar);
           } catch (err) {
             this._heap.clear(), error = err;
           }
-          return this._isRunning = !1, this.logger.canLogInfo() && (dt = Date.now() - dt, this.logger.info(`> ${count} grammars; ${dt} ms`)), error ? this.logger.error(error) : this._afterRunner && (yield this.asyncCallback(this._afterRunner)), this._finishFirstRender = !0, !0;
+          return !this._isReleased && (this._isRunning = !1, this.logger.canLogInfo() && (dt = Date.now() - dt, this.logger.info(`> ${count} grammars; ${dt} ms`)), error ? this.logger.error(error) : this._afterRunner && (yield this.asyncCallback(this._afterRunner)), this._finishFirstRender = !0, !0);
         });
       }
       evaluateSync() {
@@ -37208,7 +37499,7 @@
         this._afterRunner = callback;
       }
       release() {
-        this.stop(), this._heap && (this._heap.clear(), this._heap = null), this.logger = null, this._committed = null;
+        this.stop(), this._isReleased = !0, this._heap && (this._heap.clear(), this._heap = null), this.logger = null, this._committed = null;
       }
     }
 
@@ -37553,7 +37844,7 @@
           let scaleX, scaleY;
           return nativeCanvas && (scaleX = rect.width / nativeCanvas.offsetWidth, scaleY = rect.height / nativeCanvas.offsetHeight), {
             x: (x - rect.left) / (isValidNumber$1(scaleX) ? scaleX : 1),
-            y: (y - rect.top) / (isValidNumber$1(scaleY) ? scaleX : 1)
+            y: (y - rect.top) / (isValidNumber$1(scaleY) ? scaleY : 1)
           };
         }
         return {
@@ -39785,7 +40076,7 @@
           width = data.width, height = data.height;
         }
         let dpr = params.dpr;
-        if (!1 === params.canvasControled && (dpr && console.warn("canvasControled为false后，dpr参数将无效"), dpr = null), null == dpr) {
+        if (null == dpr) {
           dpr = null !== (_a = canvas.getContext("2d").pixelRatio) && void 0 !== _a ? _a : canvas.width / width;
         }
         this.canvas = new BrowserCanvas({
@@ -40617,6 +40908,11 @@
           _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
+      measureText(text) {
+        let method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : application.global.measureTextMethod;
+        this.setTransform(1, 0, 0, 1, 0, 0, !0, application.global.devicePixelRatio);
+        return super.measureText(text, method);
+      }
       createPattern(image, repetition) {
         return null;
       }
@@ -41498,10 +41794,14 @@
       toCanvas() {
         return this._stage ? this._stage.toCanvas() : null;
       }
+      preventRender(tag) {
+        this._stage && this._stage.preventRender(tag);
+      }
       release() {
+        var _a;
         this._view.traverseMarkTree(mark => {
           mark.release();
-        }), this._dragController && this._dragController.release(), this._gestureController && this._gestureController.release(), this._stage && this._stage.release(), this._stage = null, this._layer = null, this._dragController = null, this._gestureController = null;
+        }), this._dragController && this._dragController.release(), this._gestureController && this._gestureController.release(), this._stage !== (null === (_a = this._viewOptions) || void 0 === _a ? void 0 : _a.stage) && this._stage.release(), this._stage = null, this._layer = null, this._dragController = null, this._gestureController = null;
       }
       createStage() {
         var _a, _b, _c, _d, _e;
@@ -43440,8 +43740,8 @@
         return null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem) || void 0 === _c ? void 0 : _c.call(_b);
       }
       getBounds() {
-        var _a, _b, _c, _d;
-        return this.graphicItem ? this.graphicItem.AABBBounds : null === (_d = null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem) || void 0 === _c ? void 0 : _c.call(_b)) || void 0 === _d ? void 0 : _d.AABBBounds;
+        var _a, _b, _c;
+        return this.graphicItem ? this.graphicItem.AABBBounds : null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem()) || void 0 === _c ? void 0 : _c.AABBBounds;
       }
       getMorphConfig() {
         var _a;
@@ -45421,6 +45721,11 @@
           "signal" === grammar.grammarType && BuiltInSignalID.includes(grammar.id()) || "mark" === grammar.grammarType && "root" === grammar.id() || this.removeGrammar(grammar);
         }), this;
       }
+      removeAllGraphicItems() {
+        return this.traverseMarkTree(mark => {
+          mark.graphicItem && removeGraphicItem(mark.graphicItem), mark.graphicItem = null;
+        }), this;
+      }
       parseSpec(spec) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (this.emit(HOOK_EVENT.BEFORE_PARSE_VIEW), this._spec = spec, normalizeMarkTree(spec), spec.theme ? this.theme(spec.theme) : this.theme(ThemeManager$1.getDefaultTheme()), spec.width && this.width(spec.width), spec.height && this.height(spec.height), this.padding(null !== (_b = null !== (_a = spec.padding) && void 0 !== _a ? _a : this._options.padding) && void 0 !== _b ? _b : this._theme.padding), !this.width() || !this.height()) {
@@ -45502,9 +45807,15 @@
       setCurrentTheme(theme) {
         let render = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
         return __awaiter$2(this, void 0, void 0, function* () {
-          return this.theme(theme), this.grammars.getAllMarks().forEach(mark => {
-            mark.commit();
-          }), render ? (yield this.evaluate(), this.renderer.render(!0)) : yield this._dataflow.evaluate(), this;
+          if (!this._isReleased) {
+            if (this.theme(theme), this.grammars.getAllMarks().forEach(mark => {
+              mark.commit();
+            }), render) {
+              if (yield this.evaluate(), this._isReleased) return;
+              this.renderer.render(!0);
+            } else yield this._dataflow.evaluate();
+            return this;
+          }
         });
       }
       background(value) {
@@ -45594,7 +45905,8 @@
       }
       runAsync(runningConfig) {
         return __awaiter$2(this, void 0, void 0, function* () {
-          for (; this._running;) yield this._running;
+          if (this._isReleased) return;
+          for (; this._running && (yield this._running, !this._isReleased););
           const clear = () => {
             this._running = null;
           };
@@ -45614,25 +45926,31 @@
         this.emit(HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (this._progressiveMarks || this.animate.animate(), this.renderer.render(immediately), this.handleRenderEnd()), this.emit(HOOK_EVENT.AFTER_DO_RENDER);
       }
       evaluate(runningConfig) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return __awaiter$2(this, void 0, void 0, function* () {
-          const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
-          this.reuseCachedGrammars(normalizedRunningConfig);
-          const grammarWillDetach = this._cachedGrammars.size() > 0;
-          grammarWillDetach && this.detachCachedGrammar();
+          if (this._isReleased) return;
+          const normalizedRunningConfig = normalizeRunningConfig(runningConfig),
+            grammarWillDetach = this._cachedGrammars.size() > 0;
+          grammarWillDetach && (this.reuseCachedGrammars(normalizedRunningConfig), this.detachCachedGrammar());
           const hasResize = this._resizeRenderer(),
             hasUpdate = this._dataflow.hasCommitted();
-          return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), yield this._dataflow.evaluate(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, yield this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!1), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
-            this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
-          }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doPreProgressive(), this) : this;
+          if (!(grammarWillDetach || hasUpdate || this._layoutState || hasResize)) return this;
+          if (this.clearProgressive(), null === (_a = this.renderer) || void 0 === _a || _a.preventRender(!0), yield this._dataflow.evaluate(), !this._isReleased) {
+            if (this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState) {
+              if (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, yield this._dataflow.evaluate(), this._isReleased)) return;
+              this._layoutState = LayoutState.after, (null === (_b = this._layoutMarks) || void 0 === _b ? void 0 : _b.length) && this.handleLayoutEnd();
+            }
+            return null === (_c = this.renderer) || void 0 === _c || _c.preventRender(!1), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!1), null === (_d = this._willMorphMarks) || void 0 === _d || _d.forEach(morphMarks => {
+              this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
+            }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doPreProgressive(), this;
+          }
         });
       }
       evaluateSync(runningConfig) {
         var _a, _b;
-        const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
-        this.reuseCachedGrammars(normalizedRunningConfig);
-        const grammarWillDetach = this._cachedGrammars.size() > 0;
-        grammarWillDetach && this.detachCachedGrammar();
+        const normalizedRunningConfig = normalizeRunningConfig(runningConfig),
+          grammarWillDetach = this._cachedGrammars.size() > 0;
+        grammarWillDetach && (this.reuseCachedGrammars(normalizedRunningConfig), this.detachCachedGrammar());
         const hasResize = this._resizeRenderer(),
           hasUpdate = this._dataflow.hasCommitted();
         return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), this._dataflow.evaluateSync(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, this._dataflow.evaluateSync()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!0), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
@@ -45908,7 +46226,7 @@
       }
       release() {
         var _a, _b, _c;
-        this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
+        this._isReleased = !0, this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
           listener.source.removeEventListener(listener.type, listener.handler);
         }), this._eventListeners = null;
       }
@@ -48454,7 +48772,7 @@
         }
     };
 
-    const sankey$1 = {
+    const sankey = {
         link: {
             style: {
                 fillOpacity: 0.15,
@@ -48531,7 +48849,7 @@
         rangeColumn,
         circlePacking,
         heatmap,
-        sankey: sankey$1,
+        sankey,
         rose,
         boxPlot,
         correlation: correlation$1
@@ -52211,6 +52529,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         renderAsync(morphConfig) {
             var _a;
             return __awaiter$h(this, void 0, void 0, function* () {
+                if (this.isReleased) {
+                    return;
+                }
                 this.initView();
                 if (!this._view) {
                     return Promise.reject('srView init fail');
@@ -56034,28 +56355,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         compileSignal() {
             this.state.compile();
         }
-        _computeAttribute(key, state) {
-            return (datum, opt) => {
-                return undefined;
-            };
-        }
         compileCommonAttributeCallback(key, state) {
             const noAttrTransform = !needAttrTransform(this.type, key);
             const opt = { mark: null, parent: null, element: null };
-            const attrFunctor = this._computeAttribute(key, state);
-            return noAttrTransform
-                ? (datum, element) => {
-                    opt.mark = element.mark;
-                    opt.parent = element.mark.group;
-                    opt.element = element;
-                    return attrFunctor(datum, opt);
-                }
-                : (datum, element) => {
-                    opt.mark = element.mark;
-                    opt.parent = element.mark.group;
-                    opt.element = element;
-                    return attrTransform(this.type, key, attrFunctor(datum, opt));
-                };
+            return (datum, element) => {
+                opt.mark = element.mark;
+                opt.parent = element.mark.group;
+                opt.element = element;
+                if (noAttrTransform) {
+                    return this.getAttribute(key, datum, state, opt);
+                }
+                return attrTransform(this.type, key, this.getAttribute(key, datum, state, opt));
+            };
         }
         compileTransform() {
             var _a;
@@ -56219,7 +56530,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         getAttribute(key, datum, state = 'normal', opt) {
-            return this._computeAttribute(key, state)(datum, opt);
+            return this._computeAttribute(key, datum, state, opt);
         }
         setAttribute(attr, style, state = 'normal', level = 0, stateStyle = this.stateStyle) {
             var _a;
@@ -56273,60 +56584,42 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return style;
         }
-        _computeAttribute(key, state) {
+        _computeAttribute(key, datum, state, opt) {
             var _a;
             let stateStyle = (_a = this.stateStyle[state]) === null || _a === void 0 ? void 0 : _a[key];
             if (!stateStyle) {
                 stateStyle = this.stateStyle.normal[key];
             }
-            const baseValueFunctor = this._computeStateAttribute(stateStyle, key, state);
-            const hasPostProcess = isFunction$1(stateStyle === null || stateStyle === void 0 ? void 0 : stateStyle.postProcess);
-            const hasExCompute = key in this._computeExChannel;
-            if (hasPostProcess && hasExCompute) {
-                const exCompute = this._computeExChannel[key];
-                return (datum, opt) => {
-                    let baseValue = baseValueFunctor(datum, opt);
-                    baseValue = stateStyle.postProcess(baseValue, datum, this._attributeContext, opt, this.getDataView());
-                    return exCompute(key, datum, state, opt, baseValue);
-                };
+            let baseValue = this._computeStateAttribute(stateStyle, key, datum, state, opt);
+            if (isFunction$1(stateStyle === null || stateStyle === void 0 ? void 0 : stateStyle.postProcess)) {
+                baseValue = stateStyle.postProcess(baseValue, datum, this._attributeContext, opt, this.getDataView());
             }
-            else if (hasPostProcess) {
-                return (datum, opt) => {
-                    return stateStyle.postProcess(baseValueFunctor(datum, opt), datum, this._attributeContext, opt, this.getDataView());
-                };
-            }
-            else if (hasExCompute) {
-                const exCompute = this._computeExChannel[key];
-                return (datum, opt) => {
-                    return exCompute(key, datum, state, opt, baseValueFunctor(datum, opt));
-                };
+            if (key in this._computeExChannel) {
+                return this._computeExChannel[key](key, datum, state, opt, baseValue);
             }
-            return baseValueFunctor;
+            return baseValue;
         }
-        _computeStateAttribute(stateStyle, key, state) {
+        _computeStateAttribute(stateStyle, key, datum, state, opt) {
             var _a;
             if (!stateStyle) {
-                return (datum, opt) => undefined;
+                return undefined;
             }
             if (stateStyle.referer) {
-                return stateStyle.referer._computeAttribute(key, state);
+                return stateStyle.referer.getAttribute(key, datum, state, opt);
+            }
+            if (typeof stateStyle.style === 'function') {
+                return stateStyle.style(datum, this._attributeContext, opt, this.getDataView());
             }
             if (GradientType.includes(stateStyle.style.gradient)) {
-                return this._computeGradientAttr(stateStyle.style);
+                return this._computeGradientAttr(stateStyle.style, datum, opt);
             }
             if (['outerBorder', 'innerBorder'].includes(key)) {
-                return this._computeBorderAttr(stateStyle.style);
+                return this._computeBorderAttr(stateStyle.style, datum, opt);
             }
             if (isValidScaleType((_a = stateStyle.style.scale) === null || _a === void 0 ? void 0 : _a.type)) {
-                return (datum, opt) => stateStyle.style.scale.scale(datum[stateStyle.style.field]);
+                return stateStyle.style.scale.scale(datum[stateStyle.style.field]);
             }
-            return (datum, opt) => {
-                var _a;
-                if (typeof stateStyle.style === 'function') {
-                    return (_a = stateStyle.style) === null || _a === void 0 ? void 0 : _a.call(stateStyle, datum, this._attributeContext, opt, this.getDataView());
-                }
-                return stateStyle.style;
-            };
+            return stateStyle.style;
         }
         _initStyle() {
             const defaultStyle = this._getDefaultStyle();
@@ -56363,7 +56656,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
         }
-        _computeGradientAttr(gradientStyle) {
+        _computeGradientAttr(gradientStyle, data, opt) {
             var _a, _b;
             const { gradient, scale, field } = gradientStyle, rest = __rest$8(gradientStyle, ["gradient", "scale", "field"]);
             const markData = this.getDataView();
@@ -56379,42 +56672,49 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             const themeColor = computeActualDataScheme(getDataScheme(this.model.getColorScheme(), this.model.modelType === 'series' ? (_b = (_a = this.model).getSpec) === null || _b === void 0 ? void 0 : _b.call(_a) : undefined), this.model.getDefaultColorDomain());
+            const computeStyle = {};
             const mergedStyle = Object.assign(Object.assign({}, DEFAULT_GRADIENT_CONFIG[gradient]), rest);
-            return (data, opt) => {
-                const computeStyle = {};
-                Object.keys(mergedStyle).forEach(key => {
-                    const value = mergedStyle[key];
-                    if (key === 'stops') {
-                        computeStyle.stops = value.map((stop) => {
-                            const { opacity, color, offset } = stop;
-                            let computeColor = color !== null && color !== void 0 ? color : colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField]);
-                            if (isFunction$1(color)) {
-                                computeColor = color(data, this._attributeContext, opt, markData);
-                            }
-                            if (isValid$1(opacity)) {
-                                computeColor = Color.SetOpacity(computeColor, opacity);
-                            }
-                            return {
-                                offset: isFunction$1(offset) ? offset(data, this._attributeContext, opt, markData) : offset,
-                                color: computeColor || themeColor[0]
-                            };
-                        });
-                    }
-                    else if (isFunction$1(value)) {
-                        computeStyle[key] = value(data, this._attributeContext, opt, markData);
-                    }
-                    else {
-                        computeStyle[key] = value;
-                    }
-                });
-                computeStyle.gradient = gradient;
-                return computeStyle;
-            };
+            Object.keys(mergedStyle).forEach(key => {
+                const value = mergedStyle[key];
+                if (key === 'stops') {
+                    computeStyle.stops = value.map((stop) => {
+                        const { opacity, color, offset } = stop;
+                        let computeColor = color !== null && color !== void 0 ? color : colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField]);
+                        if (isFunction$1(color)) {
+                            computeColor = color(data, this._attributeContext, opt, markData);
+                        }
+                        if (isValid$1(opacity)) {
+                            computeColor = Color.SetOpacity(computeColor, opacity);
+                        }
+                        return {
+                            offset: isFunction$1(offset) ? offset(data, this._attributeContext, opt, markData) : offset,
+                            color: computeColor || themeColor[0]
+                        };
+                    });
+                }
+                else if (isFunction$1(value)) {
+                    computeStyle[key] = value(data, this._attributeContext, opt, markData);
+                }
+                else {
+                    computeStyle[key] = value;
+                }
+            });
+            computeStyle.gradient = gradient;
+            return computeStyle;
         }
-        _computeBorderAttr(borderStyle) {
+        _computeBorderAttr(borderStyle, data, opt) {
             var _a, _b, _c;
             const { scale, field } = borderStyle, mergedStyle = __rest$8(borderStyle, ["scale", "field"]);
             const computeStyle = {};
+            Object.keys(mergedStyle).forEach(key => {
+                const value = mergedStyle[key];
+                if (isFunction$1(value)) {
+                    computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
+                }
+                else {
+                    computeStyle[key] = value;
+                }
+            });
             if (!('stroke' in computeStyle)) {
                 const themeColor = computeActualDataScheme(getDataScheme(this.model.getColorScheme(), this.model.modelType === 'series' ? (_b = (_a = this.model).getSpec) === null || _b === void 0 ? void 0 : _b.call(_a) : undefined), this.model.getDefaultColorDomain());
                 let colorScale = scale;
@@ -56427,52 +56727,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (!colorField) {
                         colorField = globalField;
                     }
-                    return (data, opt) => {
-                        const computeStyle = {};
-                        Object.keys(mergedStyle).forEach(key => {
-                            const value = mergedStyle[key];
-                            if (isFunction$1(value)) {
-                                computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
-                            }
-                            else {
-                                computeStyle[key] = value;
-                            }
-                        });
-                        computeStyle.stroke = (colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField])) || themeColor[0];
-                        return computeStyle;
-                    };
+                    computeStyle.stroke = (colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField])) || themeColor[0];
                 }
             }
             else if (GradientType.includes((_c = mergedStyle.stroke) === null || _c === void 0 ? void 0 : _c.gradient)) {
-                const gradientFunctor = this._computeGradientAttr(mergedStyle.stroke);
-                return (data, opt) => {
-                    const computeStyle = {};
-                    Object.keys(mergedStyle).forEach(key => {
-                        const value = mergedStyle[key];
-                        if (isFunction$1(value)) {
-                            computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
-                        }
-                        else {
-                            computeStyle[key] = value;
-                        }
-                    });
-                    computeStyle.stroke = gradientFunctor(data, opt);
-                    return computeStyle;
-                };
+                computeStyle.stroke = this._computeGradientAttr(mergedStyle.stroke, data, opt);
             }
-            return (data, opt) => {
-                const computeStyle = {};
-                Object.keys(mergedStyle).forEach(key => {
-                    const value = mergedStyle[key];
-                    if (isFunction$1(value)) {
-                        computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
-                    }
-                    else {
-                        computeStyle[key] = value;
-                    }
-                });
-                return computeStyle;
-            };
+            return computeStyle;
         }
     }
 
@@ -56641,6 +56902,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 exit: { type: 'fadeOut' },
                 update: [
                     {
+                        type: 'update',
                         options: { excludeChannels: 'points' }
                     },
                     {
@@ -56990,6 +57252,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         updateCustomConfigAndRerender(modifyConfig, morphConfig) {
             return __awaiter$h(this, void 0, void 0, function* () {
+                if (this._isReleased) {
+                    return this;
+                }
                 const result = modifyConfig();
                 if (!isValid$1(result)) {
                     return this;
@@ -57063,6 +57328,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         renderAsync(morphConfig) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             return __awaiter$h(this, void 0, void 0, function* () {
+                if (this._isReleased) {
+                    return this;
+                }
                 if (!this._chart) {
                     (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeInitializeChart) === null || _b === void 0 ? void 0 : _b.call(_a);
                     this._initChart(this._spec);
@@ -57075,6 +57343,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     (_h = (_g = this._option.performanceHook) === null || _g === void 0 ? void 0 : _g.afterCompileToVGrammar) === null || _h === void 0 ? void 0 : _h.call(_g);
                 }
                 yield ((_j = this._compiler) === null || _j === void 0 ? void 0 : _j.renderAsync(morphConfig));
+                if (this._isReleased) {
+                    return this;
+                }
                 if (this._option.animation) {
                     (_k = this._chart) === null || _k === void 0 ? void 0 : _k.getAllRegions().forEach(region => {
                         var _a;
@@ -57105,6 +57376,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._userEvents = null;
             this._event = null;
             this._eventDispatcher = null;
+            this._isReleased = true;
             InstanceManager.unregisterInstance(this);
         }
         updateData(id, data, options) {
@@ -57371,6 +57643,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._chart.onResize(width, height);
                 (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterResizeWithUpdate) === null || _d === void 0 ? void 0 : _d.call(_c);
                 yield ((_f = (_e = this._compiler).resize) === null || _f === void 0 ? void 0 : _f.call(_e, width, height));
+                if (this._isReleased) {
+                    return this;
+                }
                 this._event.emit(ChartEvent.afterResize, { chart: this._chart });
                 return this;
             });
@@ -57801,7 +58076,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.6.2";
+    const version = "1.6.4";
 
     class ChartData {
         get dataList() {
@@ -59937,7 +60212,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const AnimationStates = ['appear', 'enter', 'update', 'exit', 'disappear', 'normal'];
     function animationConfig(defaultConfig = {}, userConfig, params) {
-        var _a;
         const config = {};
         for (let i = 0; i < AnimationStates.length; i++) {
             const state = AnimationStates[i];
@@ -59954,9 +60228,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             else {
                 defaultStateConfig = [Object.assign(Object.assign({}, DEFAULT_ANIMATION_CONFIG[state]), defaultConfig[state])];
-                if (state === 'exit') {
-                    defaultStateConfig[0].controlOptions = { stopWhenStateChange: true };
-                }
+            }
+            if (state === 'exit') {
+                defaultStateConfig.forEach(exitConfig => {
+                    exitConfig.controlOptions = { stopWhenStateChange: true };
+                });
             }
             if (!(userConfig === null || userConfig === void 0 ? void 0 : userConfig[state])) {
                 config[state] = defaultStateConfig;
@@ -59967,14 +60243,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 stateConfig = userConfig[state];
             }
             else {
-                let singleConfig = mergeSpec({}, defaultStateConfig[0], userConfig[state]);
-                if (isChannelAnimation(singleConfig)) {
-                    delete singleConfig.type;
-                }
-                if (singleConfig.oneByOne) {
-                    singleConfig = produceOneByOne(singleConfig, (_a = params === null || params === void 0 ? void 0 : params.dataIndex) !== null && _a !== void 0 ? _a : defaultDataIndex);
-                }
-                stateConfig = [singleConfig];
+                stateConfig = defaultStateConfig.map((stateConfig, i) => {
+                    var _a;
+                    let singleConfig = mergeSpec({}, defaultStateConfig[i], userConfig[state]);
+                    if (isChannelAnimation(singleConfig)) {
+                        delete singleConfig.type;
+                    }
+                    if (singleConfig.oneByOne) {
+                        singleConfig = produceOneByOne(singleConfig, (_a = params === null || params === void 0 ? void 0 : params.dataIndex) !== null && _a !== void 0 ? _a : defaultDataIndex);
+                    }
+                    return singleConfig;
+                });
             }
             config[state] = stateConfig;
         }
@@ -60042,7 +60321,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         config = cloneDeep(config);
         traverseSpec(config, (node) => {
-            if (isFunction$1(node) && node.prototype.constructor !== node) {
+            var _a;
+            if (isFunction$1(node) && ((_a = node.prototype) === null || _a === void 0 ? void 0 : _a.constructor) !== node) {
                 const name = (...args) => {
                     return node(...args, ctx);
                 };
@@ -60957,12 +61237,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._direction = Direction.vertical;
             this._sortDataByAxis = false;
             this._getInvalidDefined = (datum) => {
-                if (this._xAxisHelper.isContinuous) {
+                var _a, _b;
+                if ((_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.isContinuous) {
                     if (!couldBeValidNumber(datum[this._specXField[0]])) {
                         return false;
                     }
                 }
-                if (this._yAxisHelper.isContinuous) {
+                if ((_b = this._yAxisHelper) === null || _b === void 0 ? void 0 : _b.isContinuous) {
                     if (!couldBeValidNumber(datum[this._specYField[0]])) {
                         return false;
                     }
@@ -65216,13 +65497,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._unCompileChannel = { centerOffset: true, radiusOffset: true };
             this.computeOuterRadius = (key, datum, states = 'normal', opt, superValue) => {
                 var _a;
-                const offset = (_a = this.getAttribute('radiusOffset', datum, states, opt)) !== null && _a !== void 0 ? _a : 0;
+                const offset = (_a = this._computeAttribute('radiusOffset', datum, states, opt)) !== null && _a !== void 0 ? _a : 0;
                 return superValue + offset;
             };
             this.computeCenter = (key, datum, states = 'normal', opt, center) => {
                 const offset = polarToCartesian({
                     angle: datum[ARC_MIDDLE_ANGLE],
-                    radius: this.getAttribute('centerOffset', datum, states, opt)
+                    radius: this._computeAttribute('centerOffset', datum, states, opt)
                 });
                 return center + offset[key];
             };
@@ -76853,19 +77134,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       }, !0);
     };
 
-    const sankey = (data, op) => {
-        var _a, _b, _c;
-        if (!data || !(op === null || op === void 0 ? void 0 : op.view) || !isArray$1(data)) {
-            return data;
-        }
-        const view = op.view();
-        if (view.x1 - view.x0 === 0 ||
-            view.y1 - view.y0 === 0 ||
-            view.x1 - view.x0 === -Infinity ||
-            view.x1 - view.x0 === Infinity ||
-            view.y1 - view.y0 === -Infinity ||
-            view.y1 - view.y0 === Infinity) {
-            return data;
+    const collectHierarchyField = (set, data, field) => {
+        data.forEach((obj) => {
+            if (!isNil$1(obj[field])) {
+                set.add(obj[field]);
+            }
+            if (obj.children && obj.children.length > 0) {
+                collectHierarchyField(set, obj.children, field);
+            }
+        });
+    };
+    const convertValuesToNumbers = (data) => {
+        data.forEach((obj) => {
+            obj.value = isString$1(obj.value) ? +obj.value : obj.value;
+            if (obj.children && obj.children.length > 0) {
+                convertValuesToNumbers(obj.children);
+            }
+        });
+    };
+    const sankeyFormat = (data) => {
+        var _a;
+        if (!data || !isArray$1(data)) {
+            return [];
         }
         if (data.length > 1) {
             const updateData = {
@@ -76877,58 +77167,42 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     updateData[datum.id] = datum.values;
                 }
             });
-            data = updateData;
+            return [updateData];
         }
-        else {
-            if ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.latestData) {
-                data = data[0].latestData[0];
-            }
-            else {
-                data = data[0];
-            }
+        if ((_a = data[0]) === null || _a === void 0 ? void 0 : _a.latestData) {
+            return data[0].latestData;
         }
-        if (op.sourceField !== 'source' || op.targetField !== 'target' || op.valueField !== 'value') {
-            for (const key in data) {
-                if (key === 'links') {
-                    const updatedData = [];
-                    data[key].forEach((datum) => {
-                        const updatedDatum = {};
-                        for (const key in datum) {
-                            if (key === op.sourceField) {
-                                updatedDatum.source = datum[op.sourceField];
-                            }
-                            else if (key === op.targetField) {
-                                updatedDatum.target = datum[op.targetField];
-                            }
-                            else if (key === op.valueField) {
-                                updatedDatum.value = datum[op.valueField];
-                            }
-                            else {
-                                updatedDatum[key] = datum[key];
-                            }
-                        }
-                        updatedData.push(updatedDatum);
-                    });
-                    data[key] = updatedData;
-                }
-            }
+        return data;
+    };
+    const sankeyLayout = (data, op) => {
+        var _a, _b;
+        if (!data || !(op === null || op === void 0 ? void 0 : op.view) || !data.length) {
+            return [];
         }
-        const convertValuesToNumbers = (data) => {
-            data.forEach((obj) => {
-                obj.value = isString$1(obj.value) ? +obj.value : obj.value;
-                if (obj.children && obj.children.length > 0) {
-                    convertValuesToNumbers(obj.children);
-                }
-            });
-        };
-        for (const key in data) {
-            if (key === 'links') {
+        const view = op.view();
+        if (view.x1 - view.x0 === 0 ||
+            view.y1 - view.y0 === 0 ||
+            view.x1 - view.x0 === -Infinity ||
+            view.x1 - view.x0 === Infinity ||
+            view.y1 - view.y0 === -Infinity ||
+            view.y1 - view.y0 === Infinity) {
+            return [];
+        }
+        const originalData = data[0];
+        if (op.sourceField !== 'source' || op.targetField !== 'target' || op.valueField !== 'value') {
+            if (originalData.links) {
                 const updatedData = [];
-                data[key].forEach((datum) => {
+                originalData.links.forEach((datum) => {
                     const updatedDatum = {};
                     for (const key in datum) {
-                        if (key === 'value') {
-                            updatedDatum.value = isString$1(datum.value) ? +datum.value : datum.value;
+                        if (key === op.sourceField) {
+                            updatedDatum.source = datum[op.sourceField];
+                        }
+                        else if (key === op.targetField) {
+                            updatedDatum.target = datum[op.targetField];
+                        }
+                        else if (key === op.valueField) {
+                            updatedDatum.value = datum[op.valueField];
                         }
                         else {
                             updatedDatum[key] = datum[key];
@@ -76936,17 +77210,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                     updatedData.push(updatedDatum);
                 });
-                data[key] = updatedData;
+                originalData.links = updatedData;
             }
-            else if (key === 'nodes') {
-                if ((_c = (_b = data.nodes) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.children) {
-                    convertValuesToNumbers(data.nodes);
+        }
+        if (originalData.links) {
+            const updatedData = [];
+            originalData.links.forEach((datum) => {
+                const updatedDatum = {};
+                for (const key in datum) {
+                    if (key === 'value') {
+                        updatedDatum.value = isString$1(datum.value) ? +datum.value : datum.value;
+                    }
+                    else {
+                        updatedDatum[key] = datum[key];
+                    }
                 }
-            }
+                updatedData.push(updatedDatum);
+            });
+            originalData.links = updatedData;
+        }
+        else if ((_b = (_a = originalData.nodes) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.children) {
+            convertValuesToNumbers(originalData.nodes);
         }
         const layout = new SankeyLayout(op);
         const result = [];
-        result.push(layout.layout(data, view));
+        result.push(layout.layout(originalData, view));
         return result;
     };
 
@@ -77668,12 +77956,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._labelLimit = (_c = (_b = this._spec.label) === null || _b === void 0 ? void 0 : _b.limit) !== null && _c !== void 0 ? _c : 100;
         }
         initData() {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             super.initData();
-            if (this.getViewData()) {
-                registerDataSetInstanceTransform(this._dataSet, 'sankey', sankey);
-                this.addViewDataFilter({
-                    type: 'sankey',
+            const viewData = this.getViewData();
+            const rawData = this.getRawData();
+            if (rawData && viewData) {
+                registerDataSetInstanceTransform(this._dataSet, 'sankeyLayout', sankeyLayout);
+                registerDataSetInstanceTransform(this._dataSet, 'sankeyFormat', sankeyFormat);
+                rawData.transform({
+                    type: 'sankeyFormat'
+                }, false);
+                viewData.transform({
+                    type: 'sankeyLayout',
                     options: {
                         view: () => {
                             return {
@@ -77702,12 +77996,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     },
                     level: TransformLevel.sankeyLayout
                 });
-                const nodesDataSet = new DataSet();
-                registerDataSetInstanceParser(nodesDataSet, 'dataview', dataViewParser);
-                registerDataSetInstanceTransform(nodesDataSet, 'sankeyNodes', sankeyNodes);
-                registerDataSetInstanceTransform(nodesDataSet, 'addVChartProperty', addVChartProperty);
-                registerDataSetInstanceTransform(nodesDataSet, 'flatten', flatten);
-                const nodesDataView = new DataView(nodesDataSet, { name: `sankey-node-${this.id}-data` });
+                const { dataSet } = this._option;
+                registerDataSetInstanceTransform(dataSet, 'sankeyNodes', sankeyNodes);
+                registerDataSetInstanceTransform(dataSet, 'flatten', flatten);
+                const nodesDataView = new DataView(dataSet, { name: `sankey-node-${this.id}-data` });
                 nodesDataView.parse([this.getViewData()], {
                     type: 'dataview'
                 });
@@ -77725,7 +78017,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             return node;
                         }
                     }
-                });
+                }, false);
                 nodesDataView.transform({
                     type: 'addVChartProperty',
                     options: {
@@ -77733,13 +78025,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         call: addDataKey
                     }
                 }, false);
-                (_e = this._data) === null || _e === void 0 ? void 0 : _e.getDataView().target.addListener('change', nodesDataView.reRunAllTransform);
                 this._nodesSeriesData = new SeriesData(this._option, nodesDataView);
-                const linksDataSet = new DataSet();
-                registerDataSetInstanceParser(linksDataSet, 'dataview', dataViewParser);
-                registerDataSetInstanceTransform(linksDataSet, 'sankeyLinks', sankeyLinks);
-                registerDataSetInstanceTransform(linksDataSet, 'addVChartProperty', addVChartProperty);
-                const linksDataView = new DataView(linksDataSet, { name: `sankey-link-${this.id}-data` });
+                registerDataSetInstanceTransform(dataSet, 'sankeyLinks', sankeyLinks);
+                const linksDataView = new DataView(dataSet, { name: `sankey-link-${this.id}-data` });
                 linksDataView.parse([this.getViewData()], {
                     type: 'dataview'
                 });
@@ -77753,7 +78041,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         call: addDataKey
                     }
                 }, false);
-                (_f = this._data) === null || _f === void 0 ? void 0 : _f.getDataView().target.addListener('change', linksDataView.reRunAllTransform);
                 this._linksSeriesData = new SeriesData(this._option, linksDataView);
             }
         }
@@ -77806,8 +78093,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y: (datum) => datum.y0,
                 y1: (datum) => datum.y1,
                 fill: (datum) => {
-                    var _a, _b, _c;
-                    return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                    var _a, _b, _c, _d;
+                    return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                 }
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Mark);
             this._trigger.registerMark(nodeMark);
@@ -77826,10 +78113,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 thickness: (datum) => datum.thickness,
                 fill: (datum) => {
                     var _a, _b, _c, _d, _e, _f, _g;
-                    const sourceName = ((_a = this._spec) === null || _a === void 0 ? void 0 : _a.nodeKey) || ((_d = (_c = (_b = this._rawData.latestData[0]) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.children)
+                    const fill = (_b = (_a = this._spec.link) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill;
+                    if (fill) {
+                        return fill;
+                    }
+                    const sourceName = ((_c = this._spec) === null || _c === void 0 ? void 0 : _c.nodeKey) || ((_f = (_e = (_d = this._rawData.latestData[0]) === null || _d === void 0 ? void 0 : _d.nodes) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.children)
                         ? datum.source
                         : this.getNodeList()[datum.source];
-                    return (_g = (_f = (_e = this._spec.link) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.fill) !== null && _g !== void 0 ? _g : this.getNodeOrdinalColorScale(sourceName);
+                    return (_g = this._colorScale) === null || _g === void 0 ? void 0 : _g.scale(sourceName);
                 },
                 direction: (_a = this._spec.direction) !== null && _a !== void 0 ? _a : 'horizontal'
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
@@ -77883,8 +78174,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             return datum.y1;
                         },
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -77937,8 +78228,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         x: (datum) => datum.x0,
                         y: (datum) => (datum.y0 + datum.y1) / 2,
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -77951,8 +78242,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         x: (datum) => datum.x1,
                         y: (datum) => (datum.y0 + datum.y1) / 2,
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -77970,8 +78261,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         },
                         y: (datum) => (datum.y0 + datum.y1) / 2,
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -78044,11 +78335,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         nodesSeriesDataUpdate() {
-            this.event.emit(ChartEvent.legendFilter, { model: this });
             this._nodesSeriesData.updateData();
+            this._setNodeOrdinalColorScale();
         }
         linksSeriesDataUpdate() {
-            this.event.emit(ChartEvent.legendFilter, { model: this });
             this._linksSeriesData.updateData();
         }
         initTooltip() {
@@ -78057,33 +78347,32 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark);
             this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
         }
-        getNodeOrdinalColorScale(item) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            if (!isNil$1((_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalScale) === null || _b === void 0 ? void 0 : _b.getScale('color')) === null || _c === void 0 ? void 0 : _c._specified)) {
-                const specified = this._option.globalScale.getScale('color')._specified;
-                const colorDomain = [];
-                const colorRange = [];
-                for (const key in specified) {
-                    colorDomain.push(key);
-                    colorRange.push(specified[key]);
-                }
-                const ordinalScale = new ColorOrdinalScale();
-                (_e = (_d = ordinalScale.domain(colorDomain)).range) === null || _e === void 0 ? void 0 : _e.call(_d, colorRange);
-                return ordinalScale.scale(item);
-            }
-            const colorDomain = !isNil$1((_g = (_f = this._option.globalScale.getScale('color')) === null || _f === void 0 ? void 0 : _f.domain()) === null || _g === void 0 ? void 0 : _g[0])
-                ? this._option.globalScale.getScale('color').domain()
-                : this.getNodeList();
-            let colorRange = (_j = (_h = this._option.globalScale.getScale('color')) === null || _h === void 0 ? void 0 : _h.range()) !== null && _j !== void 0 ? _j : this._getDataScheme();
-            if (((_k = this._option.globalScale.getScale('color')) === null || _k === void 0 ? void 0 : _k.domain().length) === 0 ||
-                isNil$1(this._option.globalScale.getScale('color').domain()[0])) {
+        _setNodeOrdinalColorScale() {
+            var _a, _b, _c, _d, _e;
+            const colorScale = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalScale) === null || _b === void 0 ? void 0 : _b.getScale('color');
+            if (colorScale === null || colorScale === void 0 ? void 0 : colorScale._specified) {
+                this._colorScale = colorScale;
+                return;
+            }
+            let colorDomain;
+            let colorRange;
+            if (colorScale) {
+                colorDomain = colorScale.domain();
+                colorRange = colorScale.range();
+            }
+            if (!colorRange) {
+                colorRange = this._getDataScheme();
+            }
+            if (!colorDomain || isNil$1(colorDomain[0])) {
+                colorDomain = this.getNodeList();
                 if (colorDomain.length > 10) {
-                    colorRange = (_l = this._getDataScheme()[1]) === null || _l === void 0 ? void 0 : _l.scheme;
+                    colorRange = (_c = this._getDataScheme()[1]) === null || _c === void 0 ? void 0 : _c.scheme;
                 }
             }
             const ordinalScale = new ColorOrdinalScale();
-            (_o = (_m = ordinalScale.domain(colorDomain)).range) === null || _o === void 0 ? void 0 : _o.call(_m, colorRange);
-            return ordinalScale.scale(item);
+            (_e = (_d = ordinalScale.domain(colorDomain)).range) === null || _e === void 0 ? void 0 : _e.call(_d, colorRange);
+            this._colorScale = ordinalScale;
+            return;
         }
         getNodeList() {
             var _a, _b, _c;
@@ -78118,22 +78407,50 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getMeasureField() {
             return [this._valueField];
         }
-        getSeriesKeys() {
-            var _a, _b;
-            if (this._seriesField) {
-                const keyArray = [];
-                (_b = (_a = this._nodesSeriesData) === null || _a === void 0 ? void 0 : _a.getDataView()) === null || _b === void 0 ? void 0 : _b.latestData.forEach((datum) => {
-                    var _a;
-                    keyArray.push((_a = datum[this._seriesField]) !== null && _a !== void 0 ? _a : datum.datum[this._seriesField]);
-                });
-                return keyArray;
+        getRawDataStatisticsByField(field, isNumeric) {
+            var _a;
+            if (!this._rawStatisticsCache) {
+                this._rawStatisticsCache = {};
             }
-            return [];
+            if (!this._rawStatisticsCache[field]) {
+                const canUseViewStatistics = this._viewDataStatistics && this.getViewData().transformsArr.length <= 1;
+                if (canUseViewStatistics && ((_a = this._viewDataStatistics.latestData) === null || _a === void 0 ? void 0 : _a[field])) {
+                    this._rawStatisticsCache[field] = this._viewDataStatistics.latestData[field];
+                }
+                else if (this._rawData) {
+                    this._rawStatisticsCache[field] = {
+                        values: this._collectByField(field)
+                    };
+                }
+            }
+            return this._rawStatisticsCache[field];
+        }
+        _collectByField(field) {
+            var _a, _b, _c;
+            const keyArray = [];
+            const rawData = (_b = (_a = this.getRawData()) === null || _a === void 0 ? void 0 : _a.latestData) === null || _b === void 0 ? void 0 : _b[0];
+            if (!rawData) {
+                return [];
+            }
+            if (rawData.links) {
+                if ((_c = rawData.nodes) === null || _c === void 0 ? void 0 : _c.length) {
+                    rawData.nodes.forEach((node) => {
+                        if (node[this._seriesField]) {
+                            keyArray.push(node[this._seriesField]);
+                        }
+                    });
+                }
+            }
+            else if (rawData.nodes) {
+                const set = new Set();
+                collectHierarchyField(set, rawData.nodes, this._seriesField);
+                return Array.from(set);
+            }
+            return keyArray;
         }
         onLayoutEnd(ctx) {
             super.onLayoutEnd(ctx);
             this._viewBox.set(0, 0, this._region.getLayoutRect().width, this._region.getLayoutRect().height);
-            this._rawData.reRunAllTransform();
             this.getViewData().reRunAllTransform();
             this._nodesSeriesData.updateData();
             this._linksSeriesData.updateData();
@@ -79701,6 +80018,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._orient = v;
             this._layoutOrient = v;
         }
+        set autoIndentOnce(v) {
+            this._autoIndentOnce = v;
+        }
         getScales() {
             return this._scales;
         }
@@ -79718,6 +80038,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.layoutZIndex = LayoutZIndex.Axis;
             this.layoutLevel = LayoutLevel.Axis;
             this._orient = 'left';
+            this._autoIndentOnce = false;
+            this._hasAutoIndent = false;
             this._scales = [];
             this._statisticsDomain = { domain: [], index: {} };
             this._tick = undefined;
@@ -80332,17 +80654,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._layoutCache[key] = rect[key];
                 }
             });
-            ['x1', 'x2', 'y1', 'y2'].forEach(key => {
-                if (this._lastComputeOutBounds[key] < this._layoutCache._lastComputeOutBounds[key]) {
-                    this._lastComputeOutBounds[key] = this._layoutCache._lastComputeOutBounds[key];
-                }
-                else {
-                    this._layoutCache._lastComputeOutBounds[key] = this._lastComputeOutBounds[key];
-                }
-            });
+            if (this._autoIndentOnce && this._hasAutoIndent) {
+                ['x1', 'x2', 'y1', 'y2'].forEach(key => {
+                    this.getLastComputeOutBounds()[key] = this._layoutCache._lastComputeOutBounds[key];
+                });
+            }
+            else {
+                this._hasAutoIndent = true;
+                ['x1', 'x2', 'y1', 'y2'].forEach(key => {
+                    if (this.getLastComputeOutBounds()[key] < this._layoutCache._lastComputeOutBounds[key]) {
+                        this.getLastComputeOutBounds()[key] = this._layoutCache._lastComputeOutBounds[key];
+                    }
+                    else {
+                        this._layoutCache._lastComputeOutBounds[key] = this.getLastComputeOutBounds()[key];
+                    }
+                });
+            }
             return rect;
         }
         _clearLayoutCache() {
+            this._hasAutoIndent = false;
             this._layoutCache.width = 0;
             this._layoutCache.height = 0;
             this._layoutCache._lastComputeOutBounds = { x1: 0, x2: 0, y1: 0, y2: 0 };
@@ -83635,7 +83966,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
     function getSvgHtml(option, valueToHtml) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!(option === null || option === void 0 ? void 0 : option.hasShape) || !option.symbolType) {
             return '';
         }
@@ -83666,9 +83997,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     </svg>`;
         }
         if (isObject$2(fill)) {
-            fillString = 'gradientColor';
+            fillString = (_b = 'gradientColor' + option.index) !== null && _b !== void 0 ? _b : '';
             let gradient = '';
-            const stops = ((_b = fill.stops) !== null && _b !== void 0 ? _b : [])
+            const stops = ((_c = fill.stops) !== null && _c !== void 0 ? _c : [])
                 .map(s => `<stop offset="${valueToHtml(s.offset.toString())}" stop-color="${valueToHtml(s.color)}"/>`)
                 .join('');
             if (fill.gradient === 'radial') {
@@ -83677,7 +84008,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       </radialGradient>`;
             }
             else if (fill.gradient === 'linear') {
-                gradient = `<linearGradient id="${fillString}" x1="${((_c = fill.x0) !== null && _c !== void 0 ? _c : 0) * 100}%" y1="${((_d = fill.y0) !== null && _d !== void 0 ? _d : 0) * 100}%" x2="${((_e = fill.x1) !== null && _e !== void 0 ? _e : 0) * 100}%" y2="${((_f = fill.y1) !== null && _f !== void 0 ? _f : 0) * 100}%">
+                gradient = `<linearGradient id="${fillString}" x1="${((_d = fill.x0) !== null && _d !== void 0 ? _d : 0) * 100}%" y1="${((_e = fill.y0) !== null && _e !== void 0 ? _e : 0) * 100}%" x2="${((_f = fill.x1) !== null && _f !== void 0 ? _f : 0) * 100}%" y2="${((_g = fill.y1) !== null && _g !== void 0 ? _g : 0) * 100}%">
       ${stops}
       </linearGradient>`;
             }
@@ -83715,6 +84046,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
+    const defaultLabelStyle = {
+        overflowWrap: 'normal',
+        wordWrap: 'normal'
+    };
     class ContentColumnModel extends BaseTooltipModel {
         constructor(parent, option, className, childIndex) {
             super(parent, option, childIndex);
@@ -83768,7 +84103,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 let childStyle = {};
                 if (this.className === 'key-box') {
                     const { key, isKeyAdaptive } = line;
-                    childStyle = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height), overflowWrap: 'normal' }, tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
+                    childStyle = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, defaultLabelStyle), tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
                     const hasContent = (isString$1(key) && ((_b = key === null || key === void 0 ? void 0 : key.trim) === null || _b === void 0 ? void 0 : _b.call(key)) !== '') || isNumber$2(key);
                     if (!hasContent && !childStyle.visibility) {
                         childStyle.visibility = 'hidden';
@@ -83779,7 +84114,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'value-box') {
-                    childStyle = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height), overflowWrap: 'normal' }, tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
+                    childStyle = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, defaultLabelStyle), tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'shape-box') {
@@ -83849,7 +84184,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 stroke: line.shapeStroke,
                 lineWidth: line.shapeLineWidth,
                 hollow: line.shapeHollow,
-                marginTop: `calc((${(_e = (_d = keyColumn.lineHeight) !== null && _d !== void 0 ? _d : keyColumn.fontSize) !== null && _e !== void 0 ? _e : '18px'} - ${(_f = shapeColumn.width) !== null && _f !== void 0 ? _f : '8px'}) / 2)`
+                marginTop: `calc((${(_e = (_d = keyColumn.lineHeight) !== null && _d !== void 0 ? _d : keyColumn.fontSize) !== null && _e !== void 0 ? _e : '18px'} - ${(_f = shapeColumn.width) !== null && _f !== void 0 ? _f : '8px'}) / 2)`,
+                index
             };
         }
     }
@@ -86372,8 +86708,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             });
         }
         _handleChange(start, end, updateComponent) {
-            var _a;
-            const zoomLock = (_a = this._spec.zoomLock) !== null && _a !== void 0 ? _a : false;
+            var _a, _b;
+            const zoomLock = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.zoomLock) !== null && _b !== void 0 ? _b : false;
             if (zoomLock || end - start < this._minSpan || end - start > this._maxSpan) {
                 return;
             }
@@ -86542,6 +86878,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._relatedAxisComponent = bandAxis;
                 }
             }
+            if (this._relatedAxisComponent && this._filterMode === IFilterMode.axis) {
+                this._relatedAxisComponent.autoIndentOnce = true;
+            }
         }
         _setRegionsFromSpec() {
             var _a, _b;
@@ -86862,7 +87201,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d, _e, _f, _g;
             const delayType = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.delayType) !== null && _b !== void 0 ? _b : 'throttle';
             const delayTime = isValid$1((_c = this._spec) === null || _c === void 0 ? void 0 : _c.delayType) ? (_e = (_d = this._spec) === null || _d === void 0 ? void 0 : _d.delayTime) !== null && _e !== void 0 ? _e : 30 : 0;
-            const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : false;
+            const realTime = (_g = (_f = this._spec) === null || _f === void 0 ? void 0 : _f.realTime) !== null && _g !== void 0 ? _g : true;
             const option = { delayType, delayTime, realTime };
             if (this._zoomAttr.enable) {
                 this.initZoomEventOfRegions(this._regions, null, this._handleChartZoom, option);
@@ -87094,20 +87433,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _updateScaleRange() {
+            var _a, _b;
             const handlerSize = (this._startHandlerSize + this._endHandlerSize) / 2;
             if (!this._stateScale || !this._valueScale) {
                 return;
             }
+            let stateScaleRange;
+            const defaultSize = this._isHorizontal
+                ? this.getLayoutRect().width - handlerSize
+                : this.getLayoutRect().height - handlerSize;
+            const defaultRange = (_b = (_a = this._relatedAxisComponent) === null || _a === void 0 ? void 0 : _a.getScale().range()) !== null && _b !== void 0 ? _b : [0, defaultSize];
             if (this._isHorizontal) {
-                this._stateScale.range([0, this._computeWidth() - handlerSize]);
+                stateScaleRange = this._visible ? [0, this._computeWidth() - handlerSize] : defaultRange;
+                this._stateScale.range(stateScaleRange);
                 this._valueScale.range([this._computeHeight() - this._middleHandlerSize, 0]);
             }
             else if (this.layoutOrient === 'left') {
-                this._stateScale.range([0, this._computeHeight() - handlerSize]);
+                stateScaleRange = this._visible ? [0, this._computeHeight() - handlerSize] : defaultRange;
+                this._stateScale.range(stateScaleRange);
                 this._valueScale.range([this._computeWidth() - this._middleHandlerSize, 0]);
             }
             else {
-                this._stateScale.range([0, this._computeHeight() - handlerSize]);
+                stateScaleRange = this._visible ? [0, this._computeHeight() - handlerSize] : defaultRange;
+                this._stateScale.range(stateScaleRange);
                 this._valueScale.range([0, this._computeWidth() - this._middleHandlerSize]);
             }
             if (this._component) {