@visactor/vchart 1.6.3 → 1.6.5

package/build/index.js

@@ -647,17 +647,17 @@
     function objectKeys(obj) {
       return Object.keys(obj);
     }
-    function isEqual$1(a, b) {
+    function isEqual$1(a, b, options) {
       if (a === b) return !0;
       if (typeof a != typeof b) return !1;
       if (null == a || null == b) return !1;
       if (Number.isNaN(a) && Number.isNaN(b)) return !0;
       if (objToString(a) !== objToString(b)) return !1;
-      if (isFunction$1(a)) return !1;
+      if (isFunction$1(a)) return !!(null == options ? void 0 : options.skipFunction);
       if ("object" != typeof a) return !1;
       if (isArray$1(a)) {
         if (a.length !== b.length) return !1;
-        for (let i = a.length - 1; i >= 0; i--) if (!isEqual$1(a[i], b[i])) return !1;
+        for (let i = a.length - 1; i >= 0; i--) if (!isEqual$1(a[i], b[i], options)) return !1;
         return !0;
       }
       if (!isPlainObject$1(a)) return !1;
@@ -668,7 +668,7 @@
       for (let i = ka.length - 1; i >= 0; i--) if (ka[i] != kb[i]) return !1;
       for (let i = ka.length - 1; i >= 0; i--) {
         const key = ka[i];
-        if (!isEqual$1(a[key], b[key])) return !1;
+        if (!isEqual$1(a[key], b[key], options)) return !1;
       }
       return !0;
     }
@@ -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());
@@ -13732,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) {
@@ -17029,14 +17044,13 @@
         return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
       }
       updateWrapAABBBounds(text) {
-        var _a, _b, _c;
+        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,
@@ -17047,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;
         }
@@ -17078,7 +17093,7 @@
             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;
             }
@@ -17161,9 +17176,8 @@
           } = attribute;
         if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
         const buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
-          {
-            lineHeight = null !== (_a = attribute.lineHeight) && void 0 !== _a ? _a : (attribute.fontSize || textTheme.fontSize) + buf
-          } = attribute;
+          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),
@@ -17223,10 +17237,10 @@
             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;
+          } = 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
@@ -17274,7 +17288,7 @@
         return this._AABBBounds.set(dy, dx, dy + lineHeight, dx + width), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
       }
       updateHorizontalMultilineAABBBounds(text) {
-        var _a;
+        var _a, _b;
         const textTheme = getTheme$1(this).text,
           attribute = this.attribute,
           {
@@ -17283,15 +17297,15 @@
             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,
             whiteSpace = textTheme.whiteSpace
-          } = attribute;
+          } = 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 === (_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;
         }
@@ -17323,10 +17337,10 @@
             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;
+          } = 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
@@ -17429,14 +17443,13 @@
         return isArray$1(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
       }
       updateMultilineAABBBounds(text) {
-        var _a, _b, _c;
+        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,
@@ -17447,8 +17460,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;
         }
@@ -17478,7 +17492,7 @@
             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;
             }
@@ -18014,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 {
@@ -18036,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(),
             {
@@ -18554,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,
@@ -21599,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 {
@@ -26436,6 +26460,13 @@
       getGraphicItem() {
         return this.graphicItem;
       }
+      removeGraphicItem() {
+        var _a, _b;
+        this.graphicItem && (null === (_b = null === (_a = this.graphicItem.animates) || void 0 === _a ? void 0 : _a.forEach) || void 0 === _b || _b.call(_a, animate => animate.stop())), this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem[BridgeElementKey] = null, this.graphicItem = null);
+      }
+      resetGraphicItem() {
+        this.graphicItem && (this.graphicItem = null);
+      }
       getBounds() {
         var _a;
         return null === (_a = this.graphicItem) || void 0 === _a ? void 0 : _a.AABBBounds;
@@ -26645,8 +26676,7 @@
         this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem = null);
       }
       release() {
-        var _a, _b;
-        this.graphicItem && (null === (_b = null === (_a = this.graphicItem.animates) || void 0 === _a ? void 0 : _a.forEach) || void 0 === _b || _b.call(_a, animate => animate.stop())), this.mark = null, this.data = null, this.graphicItem && (removeGraphicItem(this.graphicItem), this.graphicItem[BridgeElementKey] = null, this.graphicItem = null), this.items = null;
+        this.removeGraphicItem(), this.mark = null, this.data = null, this.items = null;
       }
       getItemAttribute(channel) {
         var _a, _b;
@@ -28045,6 +28075,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,
@@ -28222,6 +28294,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) {
@@ -28297,30 +28385,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) {
@@ -28449,13 +28544,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) => {
@@ -28478,32 +28567,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;
@@ -28535,12 +28618,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 => {
@@ -28551,30 +28633,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);
           }
         };
@@ -28771,6 +28853,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;
@@ -29325,10 +29446,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 {
@@ -29336,6 +29498,7 @@
         super(merge$1({}, DataLabel.defaultAttributes, attributes)), this.name = "data-label";
       }
       render() {
+        var _a;
         const {
           dataLabels: dataLabels,
           size: size
@@ -29356,10 +29519,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) => {
@@ -31201,10 +31366,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",
@@ -31303,6 +31464,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]);
@@ -31337,6 +31503,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,
@@ -31354,7 +31521,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,
@@ -31423,6 +31590,7 @@
         };
       }
       _onHandlerPointerUp(e) {
+        var _a;
         e.preventDefault();
         const {
           start: start,
@@ -31434,7 +31602,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();
@@ -31826,11 +31994,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;
@@ -32795,22 +32964,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;
@@ -32912,7 +33073,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 {
@@ -32942,7 +33103,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,
@@ -33116,6 +33277,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 => {
@@ -33315,20 +33490,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;
@@ -33377,7 +33629,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;
@@ -33415,77 +33667,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 = [];
@@ -33518,10 +33699,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];
@@ -33531,22 +33712,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);
@@ -33557,7 +33741,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);
@@ -33635,6 +33819,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;
       }
@@ -33685,7 +33875,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;
@@ -33966,7 +34156,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],
@@ -34072,7 +34262,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;
@@ -34100,7 +34290,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;
@@ -36430,7 +36620,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({
@@ -37660,7 +37850,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 {
@@ -39892,7 +40082,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({
@@ -45539,7 +45729,9 @@
       }
       removeAllGraphicItems() {
         return this.traverseMarkTree(mark => {
-          mark.graphicItem && removeGraphicItem(mark.graphicItem), mark.graphicItem = null;
+          mark.graphicItem && (removeGraphicItem(mark.graphicItem), mark.elementMap.forEach(element => {
+            element.resetGraphicItem();
+          }), mark.graphicItem = null);
         }), this;
       }
       parseSpec(spec) {
@@ -48588,7 +48780,7 @@
         }
     };
 
-    const sankey$1 = {
+    const sankey = {
         link: {
             style: {
                 fillOpacity: 0.15,
@@ -48665,7 +48857,7 @@
         rangeColumn,
         circlePacking,
         heatmap,
-        sankey: sankey$1,
+        sankey,
         rose,
         boxPlot,
         correlation: correlation$1
@@ -51410,23 +51602,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     class DimensionEvent {
         constructor(eventDispatcher, mode) {
-            var _a, _b;
             this._eventDispatcher = eventDispatcher;
             this._mode = mode;
-            this._chart = (_b = (_a = this._eventDispatcher.globalInstance).getChart) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        get chart() {
+            var _a, _b;
+            if (!this._chart) {
+                this._chart = (_b = (_a = this._eventDispatcher.globalInstance).getChart) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+            return this._chart;
         }
         register(eType, handler) {
             var _a, _b;
-            ((_b = (_a = this._chart) === null || _a === void 0 ? void 0 : _a.getOption().onError) !== null && _b !== void 0 ? _b : error$1)('Method not implemented.');
+            ((_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.getOption().onError) !== null && _b !== void 0 ? _b : error$1)('Method not implemented.');
         }
         unregister() {
             var _a, _b;
-            ((_b = (_a = this._chart) === null || _a === void 0 ? void 0 : _a.getOption().onError) !== null && _b !== void 0 ? _b : error$1)('Method not implemented.');
+            ((_b = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.getOption().onError) !== null && _b !== void 0 ? _b : error$1)('Method not implemented.');
         }
         getTargetDimensionInfo(x, y) {
             var _a, _b;
-            const cartesianInfo = (_a = getCartesianDimensionInfo(this._chart, { x, y })) !== null && _a !== void 0 ? _a : [];
-            const polarInfo = (_b = getPolarDimensionInfo(this._chart, { x, y })) !== null && _b !== void 0 ? _b : [];
+            const cartesianInfo = (_a = getCartesianDimensionInfo(this.chart, { x, y })) !== null && _a !== void 0 ? _a : [];
+            const polarInfo = (_b = getPolarDimensionInfo(this.chart, { x, y })) !== null && _b !== void 0 ? _b : [];
             const result = [].concat(cartesianInfo, polarInfo);
             if (result.length === 0) {
                 return null;
@@ -51435,7 +51632,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         dispatch(v, opt) {
             var _a;
-            const axis = (_a = this._chart) === null || _a === void 0 ? void 0 : _a.getAllComponents().filter(c => {
+            const axis = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.getAllComponents().filter(c => {
                 if (c.specKey !== 'axes') {
                     return false;
                 }
@@ -57892,7 +58089,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.6.3";
+    const version = "1.6.5";
 
     class ChartData {
         get dataList() {
@@ -76950,19 +77147,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 = {
@@ -76974,58 +77180,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];
@@ -77033,17 +77223,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;
     };
 
@@ -77765,12 +77969,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 {
@@ -77799,12 +78009,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'
                 });
@@ -77822,7 +78030,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             return node;
                         }
                     }
-                });
+                }, false);
                 nodesDataView.transform({
                     type: 'addVChartProperty',
                     options: {
@@ -77830,13 +78038,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'
                 });
@@ -77850,7 +78054,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);
             }
         }
@@ -77922,11 +78125,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y1: (datum) => datum.y1,
                 thickness: (datum) => datum.thickness,
                 fill: (datum) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h;
-                    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)
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    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 : (_h = this._colorScale) === null || _h === void 0 ? void 0 : _h.scale(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);
@@ -78141,12 +78348,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() {
@@ -78215,22 +78420,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();
@@ -79798,6 +80031,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;
         }
@@ -79815,6 +80051,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;
@@ -80429,17 +80667,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 };
@@ -86474,8 +86721,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;
             }
@@ -86644,6 +86891,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;
@@ -86964,7 +87214,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);
@@ -87196,20 +87446,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) {