@visactor/vchart 1.6.1 → 1.6.3

package/build/index.js

@@ -6421,7 +6421,7 @@
     }
 
     function couldBeValidNumber(v) {
-        if (isNil$1(v)) {
+        if (v === null || v === undefined || v === '') {
             return false;
         }
         if (isNumber$2(v)) {
@@ -6904,9 +6904,7 @@
                 dataZoomSelectedColor: '#0040ff',
                 scrollBarSliderColor: '#000000',
                 tooltipBackgroundColor: '#ffffff',
-                markLabelBackgroundColor: '#ffc528',
-                titleFontColor: '#21252c',
-                labelFontColor: '#89909d'
+                markLabelBackgroundColor: '#ffc528'
             }
         }
     };
@@ -10938,7 +10936,10 @@
       direction: "horizontal",
       wordBreak: "break-all",
       ignoreBuf: !1,
-      verticalMode: 0
+      verticalMode: 0,
+      whiteSpace: "no-wrap",
+      heightLimit: 1 / 0,
+      lineClamp: 1 / 0
     };
     const DefaultStyle = Object.assign(Object.assign(Object.assign({
       opacity: 1,
@@ -16969,7 +16970,7 @@
       }
     }
 
-    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", ...GRAPHIC_UPDATE_TAG_KEY];
+    const TEXT_UPDATE_TAG_KEY = ["text", "maxLineWidth", "heightLimit", "lineClamp", "fontSize", "fontFamily", "fontWeight", "ellipsis", "lineHeight", "direction", "wordBreak", ...GRAPHIC_UPDATE_TAG_KEY];
     let Text$1 = class Text extends Graphic {
       get font() {
         const textTheme = getTheme$1(this).text;
@@ -17027,6 +17028,103 @@
           paddingArray = parsePadding(boundsPadding);
         return paddingArray && bounds.expand(paddingArray), this.clearUpdateBoundTag(), bounds;
       }
+      updateWrapAABBBounds(text) {
+        var _a, _b, _c;
+        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,
+            lineWidth = textTheme.lineWidth,
+            wordBreak = textTheme.wordBreak,
+            fontWeight = textTheme.fontWeight,
+            ignoreBuf = textTheme.ignoreBuf,
+            heightLimit = 0,
+            lineClamp: lineClamp
+          } = this.attribute,
+          buf = ignoreBuf ? 0 : 2;
+        if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
+          const bbox = this.cache.layoutData.bbox;
+          return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+        }
+        const textMeasure = application.graphicUtil.textMeasure,
+          layoutObj = new CanvasTextLayout(fontFamily, {
+            fontSize: fontSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily
+          }, textMeasure),
+          lines = isArray$1(text) ? text.map(l => l.toString()) : [text.toString()],
+          linesLayout = [],
+          bboxWH = [0, 0];
+        let lineCountLimit = 1 / 0;
+        if (heightLimit > 0 && (lineCountLimit = Math.max(Math.floor(heightLimit / lineHeight), 1)), lineClamp && (lineCountLimit = Math.min(lineCountLimit, lineClamp)), "number" == typeof maxLineWidth && maxLineWidth !== 1 / 0) {
+          if (maxLineWidth > 0) for (let i = 0; i < lines.length; i++) {
+            const str = lines[i];
+            let needCut = !0;
+            if (i === lineCountLimit - 1) {
+              const clip = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
+              linesLayout.push({
+                str: clip.str,
+                width: clip.width
+              });
+              break;
+            }
+            const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth, "break-word" === wordBreak);
+            if ("" !== str && "" === clip.str) {
+              if (ellipsis) {
+                const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis, !1);
+                clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+              } else clip.str = "", clip.width = 0;
+              needCut = !1;
+            }
+            if (linesLayout.push({
+              str: clip.str,
+              width: clip.width
+            }), clip.str.length === str.length) ;else if (needCut) {
+              const newStr = str.substring(clip.str.length);
+              lines.splice(i + 1, 0, newStr);
+            }
+          }
+          let maxWidth = 0;
+          linesLayout.forEach(layout => {
+            maxWidth = Math.max(maxWidth, layout.width);
+          }), bboxWH[0] = maxWidth;
+        } else {
+          let width,
+            text,
+            lineWidth = 0;
+          for (let i = 0, len = lines.length; i < len; i++) {
+            if (i === lineCountLimit - 1) {
+              const clip = layoutObj.textMeasure.clipTextWithSuffix(lines[i], layoutObj.textOptions, maxLineWidth, ellipsis, !1);
+              linesLayout.push({
+                str: clip.str,
+                width: clip.width
+              }), lineWidth = Math.max(lineWidth, clip.width);
+              break;
+            }
+            text = lines[i], width = layoutObj.textMeasure.measureTextWidth(text, layoutObj.textOptions, "break-word" === wordBreak), lineWidth = Math.max(lineWidth, width), linesLayout.push({
+              str: text,
+              width: width
+            });
+          }
+          bboxWH[0] = lineWidth;
+        }
+        bboxWH[1] = linesLayout.length * (lineHeight + buf);
+        const bbox = {
+          xOffset: 0,
+          yOffset: 0,
+          width: bboxWH[0],
+          height: bboxWH[1]
+        };
+        layoutObj.LayoutBBox(bbox, textAlign, textBaseline);
+        const layoutData = layoutObj.layoutWithBBox(bbox, linesLayout, textAlign, textBaseline, lineHeight);
+        return this.cache.layoutData = layoutData, this.clearUpdateShapeTag(), this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
+      }
       updateSingallineAABBBounds(text) {
         const textTheme = getTheme$1(this).text,
           {
@@ -17058,9 +17156,11 @@
             stroke = textTheme.stroke,
             lineWidth = textTheme.lineWidth,
             wordBreak = textTheme.wordBreak,
-            ignoreBuf = textTheme.ignoreBuf
-          } = attribute,
-          buf = ignoreBuf ? 0 : Math.max(2, .075 * fontSize),
+            ignoreBuf = textTheme.ignoreBuf,
+            whiteSpace = textTheme.whiteSpace
+          } = 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;
@@ -17188,8 +17288,9 @@
             maxLineWidth: maxLineWidth,
             stroke = textTheme.stroke,
             lineWidth = textTheme.lineWidth,
-            wordBreak = textTheme.wordBreak
+            whiteSpace = textTheme.whiteSpace
           } = attribute;
+        if ("normal" === whiteSpace) return this.updateWrapAABBBounds(text);
         if (!this.shouldUpdateShape() && (null === (_a = this.cache) || void 0 === _a ? void 0 : _a.layoutData)) {
           const bbox = this.cache.layoutData.bbox;
           return this._AABBBounds.set(bbox.xOffset, bbox.yOffset, bbox.xOffset + bbox.width, bbox.yOffset + bbox.height), stroke && this._AABBBounds.expand(lineWidth / 2), this._AABBBounds;
@@ -25139,13 +25240,16 @@
           background: this._background
         });
       }
+      preventRender(prevent) {
+        prevent ? this._skipRender = -1 / 0 : this.params && this.params.optimize && !1 !== this.params.optimize.skipRenderWithOutRange ? this._skipRender = this.window.isVisible() ? 0 : 1 : this._skipRender = 0;
+      }
       optmize(params) {
         this.optmizeRender(null == params ? void 0 : params.skipRenderWithOutRange);
       }
       optmizeRender() {
         let skipRenderWithOutRange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !0;
-        skipRenderWithOutRange && (this._skipRender = this.window.isVisible() ? 0 : 1, this.window.onVisibleChange(visible => {
-          visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1;
+        skipRenderWithOutRange && (this._skipRender = this._skipRender < 0 ? this._skipRender : this.window.isVisible() ? 0 : 1, this.window.onVisibleChange(visible => {
+          this._skipRender < 0 || (visible ? (this.dirtyBounds && this.dirtyBounds.setValue(0, 0, this._viewBox.width(), this._viewBox.height()), this._skipRender > 1 && this.renderNextFrame(), this._skipRender = 0) : this._skipRender = 1);
         }));
       }
       getTimeline() {
@@ -37005,7 +37109,7 @@
     function moveToHead(array, idx, start, cmp) {
       let parent, pidx;
       const item = array[idx];
-      for (; idx > start && (pidx = Math.floor((idx - 1) / 2), parent = array[pidx], cmp(item, parent) < 0);) array[idx] = parent, idx = pidx;
+      for (; idx > start && (pidx = Math.floor((idx - 1) / 2), parent = array[pidx], item && parent && cmp(item, parent) < 0);) array[idx] = parent, idx = pidx;
       return array[idx] = item;
     }
     function moveToTail(array, idx, end, cmp) {
@@ -37172,6 +37276,7 @@
       }
       evaluate() {
         return __awaiter$5(this, void 0, void 0, function* () {
+          if (this._isReleased) return;
           if (this._beforeRunner && (yield this.asyncCallback(this._beforeRunner)), !this._committed.length) return this.logger.info("Dataflow invoked, but nothing to do."), !1;
           this._isRunning = !0, this._updateCounter += 1;
           let grammar,
@@ -37181,14 +37286,14 @@
             count = 0;
           this.logger.canLogInfo() && (dt = Date.now(), this.logger.debug(`-- START PROPAGATION (${this._updateCounter}) -----`)), this._beforeEvaluate();
           try {
-            for (; this._heap.size() > 0;) if (grammar = this._heap.pop(), grammar.rank === grammar.qrank) {
+            for (; this._heap.size() > 0 && !this._isReleased;) if (grammar = this._heap.pop(), grammar.rank === grammar.qrank) {
               if (next = grammar.run(), next && next.then && (next = yield next), !this._isRunning) return !1;
               this._logGrammarRunInfo(grammar), this._enqueueTargets(grammar), count += 1;
             } else this._enqueue(grammar);
           } catch (err) {
             this._heap.clear(), error = err;
           }
-          return this._isRunning = !1, this.logger.canLogInfo() && (dt = Date.now() - dt, this.logger.info(`> ${count} grammars; ${dt} ms`)), error ? this.logger.error(error) : this._afterRunner && (yield this.asyncCallback(this._afterRunner)), this._finishFirstRender = !0, !0;
+          return !this._isReleased && (this._isRunning = !1, this.logger.canLogInfo() && (dt = Date.now() - dt, this.logger.info(`> ${count} grammars; ${dt} ms`)), error ? this.logger.error(error) : this._afterRunner && (yield this.asyncCallback(this._afterRunner)), this._finishFirstRender = !0, !0);
         });
       }
       evaluateSync() {
@@ -37210,7 +37315,7 @@
         this._afterRunner = callback;
       }
       release() {
-        this.stop(), this._heap && (this._heap.clear(), this._heap = null), this.logger = null, this._committed = null;
+        this.stop(), this._isReleased = !0, this._heap && (this._heap.clear(), this._heap = null), this.logger = null, this._committed = null;
       }
     }
 
@@ -40619,6 +40724,11 @@
           _context.globalAlpha = strokeOpacity * opacity, _context.lineWidth = getScaledStroke(this, lineWidth, this.dpr), _context.strokeStyle = createColor(this, stroke, params, offsetX, offsetY), _context.lineJoin = lineJoin, 0 === lineDash[0] && 0 === lineDash[1] || _context.setLineDash(lineDash), _context.lineCap = lineCap, _context.miterLimit = miterLimit;
         }
       }
+      measureText(text) {
+        let method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : application.global.measureTextMethod;
+        this.setTransform(1, 0, 0, 1, 0, 0, !0, application.global.devicePixelRatio);
+        return super.measureText(text, method);
+      }
       createPattern(image, repetition) {
         return null;
       }
@@ -41500,10 +41610,14 @@
       toCanvas() {
         return this._stage ? this._stage.toCanvas() : null;
       }
+      preventRender(tag) {
+        this._stage && this._stage.preventRender(tag);
+      }
       release() {
+        var _a;
         this._view.traverseMarkTree(mark => {
           mark.release();
-        }), this._dragController && this._dragController.release(), this._gestureController && this._gestureController.release(), this._stage && this._stage.release(), this._stage = null, this._layer = null, this._dragController = null, this._gestureController = null;
+        }), this._dragController && this._dragController.release(), this._gestureController && this._gestureController.release(), this._stage !== (null === (_a = this._viewOptions) || void 0 === _a ? void 0 : _a.stage) && this._stage.release(), this._stage = null, this._layer = null, this._dragController = null, this._gestureController = null;
       }
       createStage() {
         var _a, _b, _c, _d, _e;
@@ -43442,8 +43556,8 @@
         return null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem) || void 0 === _c ? void 0 : _c.call(_b);
       }
       getBounds() {
-        var _a, _b, _c, _d;
-        return this.graphicItem ? this.graphicItem.AABBBounds : null === (_d = null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem) || void 0 === _c ? void 0 : _c.call(_b)) || void 0 === _d ? void 0 : _d.AABBBounds;
+        var _a, _b, _c;
+        return this.graphicItem ? this.graphicItem.AABBBounds : null === (_c = null === (_b = null === (_a = this.elements) || void 0 === _a ? void 0 : _a[0]) || void 0 === _b ? void 0 : _b.getGraphicItem()) || void 0 === _c ? void 0 : _c.AABBBounds;
       }
       getMorphConfig() {
         var _a;
@@ -45423,6 +45537,11 @@
           "signal" === grammar.grammarType && BuiltInSignalID.includes(grammar.id()) || "mark" === grammar.grammarType && "root" === grammar.id() || this.removeGrammar(grammar);
         }), this;
       }
+      removeAllGraphicItems() {
+        return this.traverseMarkTree(mark => {
+          mark.graphicItem && removeGraphicItem(mark.graphicItem), mark.graphicItem = null;
+        }), this;
+      }
       parseSpec(spec) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (this.emit(HOOK_EVENT.BEFORE_PARSE_VIEW), this._spec = spec, normalizeMarkTree(spec), spec.theme ? this.theme(spec.theme) : this.theme(ThemeManager$1.getDefaultTheme()), spec.width && this.width(spec.width), spec.height && this.height(spec.height), this.padding(null !== (_b = null !== (_a = spec.padding) && void 0 !== _a ? _a : this._options.padding) && void 0 !== _b ? _b : this._theme.padding), !this.width() || !this.height()) {
@@ -45504,9 +45623,15 @@
       setCurrentTheme(theme) {
         let render = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !0;
         return __awaiter$2(this, void 0, void 0, function* () {
-          return this.theme(theme), this.grammars.getAllMarks().forEach(mark => {
-            mark.commit();
-          }), render ? (yield this.evaluate(), this.renderer.render(!0)) : yield this._dataflow.evaluate(), this;
+          if (!this._isReleased) {
+            if (this.theme(theme), this.grammars.getAllMarks().forEach(mark => {
+              mark.commit();
+            }), render) {
+              if (yield this.evaluate(), this._isReleased) return;
+              this.renderer.render(!0);
+            } else yield this._dataflow.evaluate();
+            return this;
+          }
         });
       }
       background(value) {
@@ -45596,7 +45721,8 @@
       }
       runAsync(runningConfig) {
         return __awaiter$2(this, void 0, void 0, function* () {
-          for (; this._running;) yield this._running;
+          if (this._isReleased) return;
+          for (; this._running && (yield this._running, !this._isReleased););
           const clear = () => {
             this._running = null;
           };
@@ -45616,25 +45742,31 @@
         this.emit(HOOK_EVENT.BEFORE_DO_RENDER), this.renderer && (this._progressiveMarks || this.animate.animate(), this.renderer.render(immediately), this.handleRenderEnd()), this.emit(HOOK_EVENT.AFTER_DO_RENDER);
       }
       evaluate(runningConfig) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return __awaiter$2(this, void 0, void 0, function* () {
-          const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
-          this.reuseCachedGrammars(normalizedRunningConfig);
-          const grammarWillDetach = this._cachedGrammars.size() > 0;
-          grammarWillDetach && this.detachCachedGrammar();
+          if (this._isReleased) return;
+          const normalizedRunningConfig = normalizeRunningConfig(runningConfig),
+            grammarWillDetach = this._cachedGrammars.size() > 0;
+          grammarWillDetach && (this.reuseCachedGrammars(normalizedRunningConfig), this.detachCachedGrammar());
           const hasResize = this._resizeRenderer(),
             hasUpdate = this._dataflow.hasCommitted();
-          return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), yield this._dataflow.evaluate(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, yield this._dataflow.evaluate()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!1), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
-            this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
-          }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doPreProgressive(), this) : this;
+          if (!(grammarWillDetach || hasUpdate || this._layoutState || hasResize)) return this;
+          if (this.clearProgressive(), null === (_a = this.renderer) || void 0 === _a || _a.preventRender(!0), yield this._dataflow.evaluate(), !this._isReleased) {
+            if (this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState) {
+              if (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, yield this._dataflow.evaluate(), this._isReleased)) return;
+              this._layoutState = LayoutState.after, (null === (_b = this._layoutMarks) || void 0 === _b ? void 0 : _b.length) && this.handleLayoutEnd();
+            }
+            return null === (_c = this.renderer) || void 0 === _c || _c.preventRender(!1), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!1), null === (_d = this._willMorphMarks) || void 0 === _d || _d.forEach(morphMarks => {
+              this._morph.morph(morphMarks.prev, morphMarks.next, normalizedRunningConfig);
+            }), this._willMorphMarks = null, this.releaseCachedGrammars(normalizedRunningConfig), this.doPreProgressive(), this;
+          }
         });
       }
       evaluateSync(runningConfig) {
         var _a, _b;
-        const normalizedRunningConfig = normalizeRunningConfig(runningConfig);
-        this.reuseCachedGrammars(normalizedRunningConfig);
-        const grammarWillDetach = this._cachedGrammars.size() > 0;
-        grammarWillDetach && this.detachCachedGrammar();
+        const normalizedRunningConfig = normalizeRunningConfig(runningConfig),
+          grammarWillDetach = this._cachedGrammars.size() > 0;
+        grammarWillDetach && (this.reuseCachedGrammars(normalizedRunningConfig), this.detachCachedGrammar());
         const hasResize = this._resizeRenderer(),
           hasUpdate = this._dataflow.hasCommitted();
         return grammarWillDetach || hasUpdate || this._layoutState || hasResize ? (this.clearProgressive(), this._dataflow.evaluateSync(), this._needBuildLayoutTree && (this.buildLayoutTree(), this._needBuildLayoutTree = !1), this._layoutState && (this._layoutState = LayoutState.layouting, this.doLayout(), this._dataflow.hasCommitted() && (this._layoutState = LayoutState.reevaluate, this._dataflow.evaluateSync()), this._layoutState = LayoutState.after, (null === (_a = this._layoutMarks) || void 0 === _a ? void 0 : _a.length) && this.handleLayoutEnd()), this._layoutState = null, this.findProgressiveMarks(), this._resizeRenderer(), this.doRender(!0), null === (_b = this._willMorphMarks) || void 0 === _b || _b.forEach(morphMarks => {
@@ -45910,7 +46042,7 @@
       }
       release() {
         var _a, _b, _c;
-        this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
+        this._isReleased = !0, this._unBindResizeEvent(), this.clearProgressive(), Factory$1.unregisterRuntimeTransforms(), this.animate.stop(), this.grammars.release(), this._cachedGrammars.release(), this._dataflow.release(), this._dataflow = null, null === (_b = null === (_a = this.renderer) || void 0 === _a ? void 0 : _a.release) || void 0 === _b || _b.call(_a), this.renderer = null, this._boundInteractions = null, this.removeAllListeners(), null === (_c = this._eventListeners) || void 0 === _c || _c.forEach(listener => {
           listener.source.removeEventListener(listener.type, listener.handler);
         }), this._eventListeners = null;
       }
@@ -49815,6 +49947,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return (_b = spec.direction) !== null && _b !== void 0 ? _b : 'vertical';
     }
 
+    const newTokenToLegacyToken = {
+        primaryFontColor: 'titleFontColor',
+        secondaryFontColor: 'labelFontColor'
+    };
+    const legacyTokenToNewToken = {
+        titleFontColor: 'primaryFontColor',
+        labelFontColor: 'secondaryFontColor'
+    };
+    function getUpgradedTokenValue(palette, key) {
+        const legacyKey = newTokenToLegacyToken[key];
+        if (legacyKey && palette[legacyKey]) {
+            return palette[legacyKey];
+        }
+        if (palette[key]) {
+            return palette[key];
+        }
+        const newKey = legacyTokenToNewToken[key];
+        if (newKey) {
+            return palette[newKey];
+        }
+        return undefined;
+    }
+
     function getDataScheme(colorScheme, seriesSpec) {
         var _a;
         if (!colorScheme) {
@@ -49877,12 +50032,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         let color;
         const { palette } = scheme;
         if (isObject$2(palette)) {
-            color = (_a = palette[colorKey.key]) !== null && _a !== void 0 ? _a : colorKey.default;
+            color = (_a = getUpgradedTokenValue(palette, colorKey.key)) !== null && _a !== void 0 ? _a : colorKey.default;
         }
         if (!color) {
             return undefined;
         }
-        if ((!isValid$1(colorKey.a) && !isValid$1(colorKey.l)) || !isString$1(color)) {
+        if ((isNil$1(colorKey.a) && isNil$1(colorKey.l)) || !isString$1(color)) {
             return color;
         }
         let c = new Color(color);
@@ -49933,7 +50088,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         var _a, _b;
         const { type: seriesType } = seriesSpec !== null && seriesSpec !== void 0 ? seriesSpec : {};
         let scheme;
-        if (!seriesSpec || !isValid$1(seriesType)) {
+        if (!seriesSpec || isNil$1(seriesType)) {
             scheme = colorScheme === null || colorScheme === void 0 ? void 0 : colorScheme.default;
         }
         else {
@@ -50009,9 +50164,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 dataZoomSelectedColor: '#4284FF',
                 scrollBarSliderColor: '#ffffff',
                 tooltipBackgroundColor: '#404349',
-                markLabelBackgroundColor: '#f0bd30',
-                titleFontColor: '#fdfdfd',
-                labelFontColor: '#bbbdc3'
+                markLabelBackgroundColor: '#f0bd30'
             }
         }
     };
@@ -52192,6 +52345,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         renderAsync(morphConfig) {
             var _a;
             return __awaiter$h(this, void 0, void 0, function* () {
+                if (this.isReleased) {
+                    return;
+                }
                 this.initView();
                 if (!this._view) {
                     return Promise.reject('srView init fail');
@@ -56015,28 +56171,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         compileSignal() {
             this.state.compile();
         }
-        _computeAttribute(key, state) {
-            return (datum, opt) => {
-                return undefined;
-            };
-        }
         compileCommonAttributeCallback(key, state) {
             const noAttrTransform = !needAttrTransform(this.type, key);
             const opt = { mark: null, parent: null, element: null };
-            const attrFunctor = this._computeAttribute(key, state);
-            return noAttrTransform
-                ? (datum, element) => {
-                    opt.mark = element.mark;
-                    opt.parent = element.mark.group;
-                    opt.element = element;
-                    return attrFunctor(datum, opt);
-                }
-                : (datum, element) => {
-                    opt.mark = element.mark;
-                    opt.parent = element.mark.group;
-                    opt.element = element;
-                    return attrTransform(this.type, key, attrFunctor(datum, opt));
-                };
+            return (datum, element) => {
+                opt.mark = element.mark;
+                opt.parent = element.mark.group;
+                opt.element = element;
+                if (noAttrTransform) {
+                    return this.getAttribute(key, datum, state, opt);
+                }
+                return attrTransform(this.type, key, this.getAttribute(key, datum, state, opt));
+            };
         }
         compileTransform() {
             var _a;
@@ -56200,7 +56346,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         getAttribute(key, datum, state = 'normal', opt) {
-            return this._computeAttribute(key, state)(datum, opt);
+            return this._computeAttribute(key, datum, state, opt);
         }
         setAttribute(attr, style, state = 'normal', level = 0, stateStyle = this.stateStyle) {
             var _a;
@@ -56254,60 +56400,42 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             return style;
         }
-        _computeAttribute(key, state) {
+        _computeAttribute(key, datum, state, opt) {
             var _a;
             let stateStyle = (_a = this.stateStyle[state]) === null || _a === void 0 ? void 0 : _a[key];
             if (!stateStyle) {
                 stateStyle = this.stateStyle.normal[key];
             }
-            const baseValueFunctor = this._computeStateAttribute(stateStyle, key, state);
-            const hasPostProcess = isFunction$1(stateStyle === null || stateStyle === void 0 ? void 0 : stateStyle.postProcess);
-            const hasExCompute = key in this._computeExChannel;
-            if (hasPostProcess && hasExCompute) {
-                const exCompute = this._computeExChannel[key];
-                return (datum, opt) => {
-                    let baseValue = baseValueFunctor(datum, opt);
-                    baseValue = stateStyle.postProcess(baseValue, datum, this._attributeContext, opt, this.getDataView());
-                    return exCompute(key, datum, state, opt, baseValue);
-                };
-            }
-            else if (hasPostProcess) {
-                return (datum, opt) => {
-                    return stateStyle.postProcess(baseValueFunctor(datum, opt), datum, this._attributeContext, opt, this.getDataView());
-                };
+            let baseValue = this._computeStateAttribute(stateStyle, key, datum, state, opt);
+            if (isFunction$1(stateStyle === null || stateStyle === void 0 ? void 0 : stateStyle.postProcess)) {
+                baseValue = stateStyle.postProcess(baseValue, datum, this._attributeContext, opt, this.getDataView());
             }
-            else if (hasExCompute) {
-                const exCompute = this._computeExChannel[key];
-                return (datum, opt) => {
-                    return exCompute(key, datum, state, opt, baseValueFunctor(datum, opt));
-                };
+            if (key in this._computeExChannel) {
+                return this._computeExChannel[key](key, datum, state, opt, baseValue);
             }
-            return baseValueFunctor;
+            return baseValue;
         }
-        _computeStateAttribute(stateStyle, key, state) {
+        _computeStateAttribute(stateStyle, key, datum, state, opt) {
             var _a;
             if (!stateStyle) {
-                return (datum, opt) => undefined;
+                return undefined;
             }
             if (stateStyle.referer) {
-                return stateStyle.referer._computeAttribute(key, state);
+                return stateStyle.referer.getAttribute(key, datum, state, opt);
+            }
+            if (typeof stateStyle.style === 'function') {
+                return stateStyle.style(datum, this._attributeContext, opt, this.getDataView());
             }
             if (GradientType.includes(stateStyle.style.gradient)) {
-                return this._computeGradientAttr(stateStyle.style);
+                return this._computeGradientAttr(stateStyle.style, datum, opt);
             }
             if (['outerBorder', 'innerBorder'].includes(key)) {
-                return this._computeBorderAttr(stateStyle.style);
+                return this._computeBorderAttr(stateStyle.style, datum, opt);
             }
             if (isValidScaleType((_a = stateStyle.style.scale) === null || _a === void 0 ? void 0 : _a.type)) {
-                return (datum, opt) => stateStyle.style.scale.scale(datum[stateStyle.style.field]);
+                return stateStyle.style.scale.scale(datum[stateStyle.style.field]);
             }
-            return (datum, opt) => {
-                var _a;
-                if (typeof stateStyle.style === 'function') {
-                    return (_a = stateStyle.style) === null || _a === void 0 ? void 0 : _a.call(stateStyle, datum, this._attributeContext, opt, this.getDataView());
-                }
-                return stateStyle.style;
-            };
+            return stateStyle.style;
         }
         _initStyle() {
             const defaultStyle = this._getDefaultStyle();
@@ -56344,7 +56472,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
             }
         }
-        _computeGradientAttr(gradientStyle) {
+        _computeGradientAttr(gradientStyle, data, opt) {
             var _a, _b;
             const { gradient, scale, field } = gradientStyle, rest = __rest$8(gradientStyle, ["gradient", "scale", "field"]);
             const markData = this.getDataView();
@@ -56360,42 +56488,49 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             const themeColor = computeActualDataScheme(getDataScheme(this.model.getColorScheme(), this.model.modelType === 'series' ? (_b = (_a = this.model).getSpec) === null || _b === void 0 ? void 0 : _b.call(_a) : undefined), this.model.getDefaultColorDomain());
+            const computeStyle = {};
             const mergedStyle = Object.assign(Object.assign({}, DEFAULT_GRADIENT_CONFIG[gradient]), rest);
-            return (data, opt) => {
-                const computeStyle = {};
-                Object.keys(mergedStyle).forEach(key => {
-                    const value = mergedStyle[key];
-                    if (key === 'stops') {
-                        computeStyle.stops = value.map((stop) => {
-                            const { opacity, color, offset } = stop;
-                            let computeColor = color !== null && color !== void 0 ? color : colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField]);
-                            if (isFunction$1(color)) {
-                                computeColor = color(data, this._attributeContext, opt, markData);
-                            }
-                            if (isValid$1(opacity)) {
-                                computeColor = Color.SetOpacity(computeColor, opacity);
-                            }
-                            return {
-                                offset: isFunction$1(offset) ? offset(data, this._attributeContext, opt, markData) : offset,
-                                color: computeColor || themeColor[0]
-                            };
-                        });
-                    }
-                    else if (isFunction$1(value)) {
-                        computeStyle[key] = value(data, this._attributeContext, opt, markData);
-                    }
-                    else {
-                        computeStyle[key] = value;
-                    }
-                });
-                computeStyle.gradient = gradient;
-                return computeStyle;
-            };
+            Object.keys(mergedStyle).forEach(key => {
+                const value = mergedStyle[key];
+                if (key === 'stops') {
+                    computeStyle.stops = value.map((stop) => {
+                        const { opacity, color, offset } = stop;
+                        let computeColor = color !== null && color !== void 0 ? color : colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField]);
+                        if (isFunction$1(color)) {
+                            computeColor = color(data, this._attributeContext, opt, markData);
+                        }
+                        if (isValid$1(opacity)) {
+                            computeColor = Color.SetOpacity(computeColor, opacity);
+                        }
+                        return {
+                            offset: isFunction$1(offset) ? offset(data, this._attributeContext, opt, markData) : offset,
+                            color: computeColor || themeColor[0]
+                        };
+                    });
+                }
+                else if (isFunction$1(value)) {
+                    computeStyle[key] = value(data, this._attributeContext, opt, markData);
+                }
+                else {
+                    computeStyle[key] = value;
+                }
+            });
+            computeStyle.gradient = gradient;
+            return computeStyle;
         }
-        _computeBorderAttr(borderStyle) {
+        _computeBorderAttr(borderStyle, data, opt) {
             var _a, _b, _c;
             const { scale, field } = borderStyle, mergedStyle = __rest$8(borderStyle, ["scale", "field"]);
             const computeStyle = {};
+            Object.keys(mergedStyle).forEach(key => {
+                const value = mergedStyle[key];
+                if (isFunction$1(value)) {
+                    computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
+                }
+                else {
+                    computeStyle[key] = value;
+                }
+            });
             if (!('stroke' in computeStyle)) {
                 const themeColor = computeActualDataScheme(getDataScheme(this.model.getColorScheme(), this.model.modelType === 'series' ? (_b = (_a = this.model).getSpec) === null || _b === void 0 ? void 0 : _b.call(_a) : undefined), this.model.getDefaultColorDomain());
                 let colorScale = scale;
@@ -56408,52 +56543,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (!colorField) {
                         colorField = globalField;
                     }
-                    return (data, opt) => {
-                        const computeStyle = {};
-                        Object.keys(mergedStyle).forEach(key => {
-                            const value = mergedStyle[key];
-                            if (isFunction$1(value)) {
-                                computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
-                            }
-                            else {
-                                computeStyle[key] = value;
-                            }
-                        });
-                        computeStyle.stroke = (colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField])) || themeColor[0];
-                        return computeStyle;
-                    };
+                    computeStyle.stroke = (colorScale === null || colorScale === void 0 ? void 0 : colorScale.scale(data[colorField])) || themeColor[0];
                 }
             }
             else if (GradientType.includes((_c = mergedStyle.stroke) === null || _c === void 0 ? void 0 : _c.gradient)) {
-                const gradientFunctor = this._computeGradientAttr(mergedStyle.stroke);
-                return (data, opt) => {
-                    const computeStyle = {};
-                    Object.keys(mergedStyle).forEach(key => {
-                        const value = mergedStyle[key];
-                        if (isFunction$1(value)) {
-                            computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
-                        }
-                        else {
-                            computeStyle[key] = value;
-                        }
-                    });
-                    computeStyle.stroke = gradientFunctor(data, opt);
-                    return computeStyle;
-                };
+                computeStyle.stroke = this._computeGradientAttr(mergedStyle.stroke, data, opt);
             }
-            return (data, opt) => {
-                const computeStyle = {};
-                Object.keys(mergedStyle).forEach(key => {
-                    const value = mergedStyle[key];
-                    if (isFunction$1(value)) {
-                        computeStyle[key] = value(data, this._attributeContext, opt, this.getDataView());
-                    }
-                    else {
-                        computeStyle[key] = value;
-                    }
-                });
-                return computeStyle;
-            };
+            return computeStyle;
         }
     }
 
@@ -56622,6 +56718,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 exit: { type: 'fadeOut' },
                 update: [
                     {
+                        type: 'update',
                         options: { excludeChannels: 'points' }
                     },
                     {
@@ -56971,6 +57068,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         updateCustomConfigAndRerender(modifyConfig, morphConfig) {
             return __awaiter$h(this, void 0, void 0, function* () {
+                if (this._isReleased) {
+                    return this;
+                }
                 const result = modifyConfig();
                 if (!isValid$1(result)) {
                     return this;
@@ -57044,6 +57144,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         renderAsync(morphConfig) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             return __awaiter$h(this, void 0, void 0, function* () {
+                if (this._isReleased) {
+                    return this;
+                }
                 if (!this._chart) {
                     (_b = (_a = this._option.performanceHook) === null || _a === void 0 ? void 0 : _a.beforeInitializeChart) === null || _b === void 0 ? void 0 : _b.call(_a);
                     this._initChart(this._spec);
@@ -57056,6 +57159,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     (_h = (_g = this._option.performanceHook) === null || _g === void 0 ? void 0 : _g.afterCompileToVGrammar) === null || _h === void 0 ? void 0 : _h.call(_g);
                 }
                 yield ((_j = this._compiler) === null || _j === void 0 ? void 0 : _j.renderAsync(morphConfig));
+                if (this._isReleased) {
+                    return this;
+                }
                 if (this._option.animation) {
                     (_k = this._chart) === null || _k === void 0 ? void 0 : _k.getAllRegions().forEach(region => {
                         var _a;
@@ -57086,6 +57192,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._userEvents = null;
             this._event = null;
             this._eventDispatcher = null;
+            this._isReleased = true;
             InstanceManager.unregisterInstance(this);
         }
         updateData(id, data, options) {
@@ -57352,6 +57459,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 this._chart.onResize(width, height);
                 (_d = (_c = this._option.performanceHook) === null || _c === void 0 ? void 0 : _c.afterResizeWithUpdate) === null || _d === void 0 ? void 0 : _d.call(_c);
                 yield ((_f = (_e = this._compiler).resize) === null || _f === void 0 ? void 0 : _f.call(_e, width, height));
+                if (this._isReleased) {
+                    return this;
+                }
                 this._event.emit(ChartEvent.afterResize, { chart: this._chart });
                 return this;
             });
@@ -57782,7 +57892,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.6.1";
+    const version = "1.6.3";
 
     class ChartData {
         get dataList() {
@@ -59918,7 +60028,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const AnimationStates = ['appear', 'enter', 'update', 'exit', 'disappear', 'normal'];
     function animationConfig(defaultConfig = {}, userConfig, params) {
-        var _a;
         const config = {};
         for (let i = 0; i < AnimationStates.length; i++) {
             const state = AnimationStates[i];
@@ -59935,9 +60044,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
             else {
                 defaultStateConfig = [Object.assign(Object.assign({}, DEFAULT_ANIMATION_CONFIG[state]), defaultConfig[state])];
-                if (state === 'exit') {
-                    defaultStateConfig[0].controlOptions = { stopWhenStateChange: true };
-                }
+            }
+            if (state === 'exit') {
+                defaultStateConfig.forEach(exitConfig => {
+                    exitConfig.controlOptions = { stopWhenStateChange: true };
+                });
             }
             if (!(userConfig === null || userConfig === void 0 ? void 0 : userConfig[state])) {
                 config[state] = defaultStateConfig;
@@ -59948,14 +60059,17 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 stateConfig = userConfig[state];
             }
             else {
-                let singleConfig = mergeSpec({}, defaultStateConfig[0], userConfig[state]);
-                if (isChannelAnimation(singleConfig)) {
-                    delete singleConfig.type;
-                }
-                if (singleConfig.oneByOne) {
-                    singleConfig = produceOneByOne(singleConfig, (_a = params === null || params === void 0 ? void 0 : params.dataIndex) !== null && _a !== void 0 ? _a : defaultDataIndex);
-                }
-                stateConfig = [singleConfig];
+                stateConfig = defaultStateConfig.map((stateConfig, i) => {
+                    var _a;
+                    let singleConfig = mergeSpec({}, defaultStateConfig[i], userConfig[state]);
+                    if (isChannelAnimation(singleConfig)) {
+                        delete singleConfig.type;
+                    }
+                    if (singleConfig.oneByOne) {
+                        singleConfig = produceOneByOne(singleConfig, (_a = params === null || params === void 0 ? void 0 : params.dataIndex) !== null && _a !== void 0 ? _a : defaultDataIndex);
+                    }
+                    return singleConfig;
+                });
             }
             config[state] = stateConfig;
         }
@@ -60023,7 +60137,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         config = cloneDeep(config);
         traverseSpec(config, (node) => {
-            if (isFunction$1(node) && node.prototype.constructor !== node) {
+            var _a;
+            if (isFunction$1(node) && ((_a = node.prototype) === null || _a === void 0 ? void 0 : _a.constructor) !== node) {
                 const name = (...args) => {
                     return node(...args, ctx);
                 };
@@ -60938,12 +61053,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._direction = Direction.vertical;
             this._sortDataByAxis = false;
             this._getInvalidDefined = (datum) => {
-                if (this._xAxisHelper.isContinuous) {
+                var _a, _b;
+                if ((_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.isContinuous) {
                     if (!couldBeValidNumber(datum[this._specXField[0]])) {
                         return false;
                     }
                 }
-                if (this._yAxisHelper.isContinuous) {
+                if ((_b = this._yAxisHelper) === null || _b === void 0 ? void 0 : _b.isContinuous) {
                     if (!couldBeValidNumber(datum[this._specYField[0]])) {
                         return false;
                     }
@@ -65197,13 +65313,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._unCompileChannel = { centerOffset: true, radiusOffset: true };
             this.computeOuterRadius = (key, datum, states = 'normal', opt, superValue) => {
                 var _a;
-                const offset = (_a = this.getAttribute('radiusOffset', datum, states, opt)) !== null && _a !== void 0 ? _a : 0;
+                const offset = (_a = this._computeAttribute('radiusOffset', datum, states, opt)) !== null && _a !== void 0 ? _a : 0;
                 return superValue + offset;
             };
             this.computeCenter = (key, datum, states = 'normal', opt, center) => {
                 const offset = polarToCartesian({
                     angle: datum[ARC_MIDDLE_ANGLE],
-                    radius: this.getAttribute('centerOffset', datum, states, opt)
+                    radius: this._computeAttribute('centerOffset', datum, states, opt)
                 });
                 return center + offset[key];
             };
@@ -77787,8 +77903,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y: (datum) => datum.y0,
                 y1: (datum) => datum.y1,
                 fill: (datum) => {
-                    var _a, _b, _c;
-                    return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                    var _a, _b, _c, _d;
+                    return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                 }
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Mark);
             this._trigger.registerMark(nodeMark);
@@ -77806,11 +77922,11 @@ 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;
+                    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)
                         ? datum.source
                         : this.getNodeList()[datum.source];
-                    return (_g = (_f = (_e = this._spec.link) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.fill) !== null && _g !== void 0 ? _g : this.getNodeOrdinalColorScale(sourceName);
+                    return (_g = (_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);
                 },
                 direction: (_a = this._spec.direction) !== null && _a !== void 0 ? _a : 'horizontal'
             }, STATE_VALUE_ENUM.STATE_NORMAL, AttributeLevel.Series);
@@ -77864,8 +77980,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             return datum.y1;
                         },
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -77918,8 +78034,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         x: (datum) => datum.x0,
                         y: (datum) => (datum.y0 + datum.y1) / 2,
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -77932,8 +78048,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         x: (datum) => datum.x1,
                         y: (datum) => (datum.y0 + datum.y1) / 2,
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -77951,8 +78067,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         },
                         y: (datum) => (datum.y0 + datum.y1) / 2,
                         fill: (datum) => {
-                            var _a, _b, _c;
-                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.getNodeOrdinalColorScale(this._getNodeNameFromData(datum));
+                            var _a, _b, _c, _d;
+                            return (_c = (_b = (_a = this._spec.node) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : (_d = this._colorScale) === null || _d === void 0 ? void 0 : _d.scale(this._getNodeNameFromData(datum));
                         },
                         text: (datum) => this._createText(datum),
                         limit: this._labelLimit,
@@ -78027,6 +78143,7 @@ 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 });
@@ -78038,33 +78155,32 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._linkMark && this._tooltipHelper.activeTriggerSet.mark.add(this._linkMark);
             this._labelMark && this._tooltipHelper.activeTriggerSet.mark.add(this._labelMark);
         }
-        getNodeOrdinalColorScale(item) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            if (!isNil$1((_c = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalScale) === null || _b === void 0 ? void 0 : _b.getScale('color')) === null || _c === void 0 ? void 0 : _c._specified)) {
-                const specified = this._option.globalScale.getScale('color')._specified;
-                const colorDomain = [];
-                const colorRange = [];
-                for (const key in specified) {
-                    colorDomain.push(key);
-                    colorRange.push(specified[key]);
-                }
-                const ordinalScale = new ColorOrdinalScale();
-                (_e = (_d = ordinalScale.domain(colorDomain)).range) === null || _e === void 0 ? void 0 : _e.call(_d, colorRange);
-                return ordinalScale.scale(item);
-            }
-            const colorDomain = !isNil$1((_g = (_f = this._option.globalScale.getScale('color')) === null || _f === void 0 ? void 0 : _f.domain()) === null || _g === void 0 ? void 0 : _g[0])
-                ? this._option.globalScale.getScale('color').domain()
-                : this.getNodeList();
-            let colorRange = (_j = (_h = this._option.globalScale.getScale('color')) === null || _h === void 0 ? void 0 : _h.range()) !== null && _j !== void 0 ? _j : this._getDataScheme();
-            if (((_k = this._option.globalScale.getScale('color')) === null || _k === void 0 ? void 0 : _k.domain().length) === 0 ||
-                isNil$1(this._option.globalScale.getScale('color').domain()[0])) {
+        _setNodeOrdinalColorScale() {
+            var _a, _b, _c, _d, _e;
+            const colorScale = (_b = (_a = this._option) === null || _a === void 0 ? void 0 : _a.globalScale) === null || _b === void 0 ? void 0 : _b.getScale('color');
+            if (colorScale === null || colorScale === void 0 ? void 0 : colorScale._specified) {
+                this._colorScale = colorScale;
+                return;
+            }
+            let colorDomain;
+            let colorRange;
+            if (colorScale) {
+                colorDomain = colorScale.domain();
+                colorRange = colorScale.range();
+            }
+            if (!colorRange) {
+                colorRange = this._getDataScheme();
+            }
+            if (!colorDomain || isNil$1(colorDomain[0])) {
+                colorDomain = this.getNodeList();
                 if (colorDomain.length > 10) {
-                    colorRange = (_l = this._getDataScheme()[1]) === null || _l === void 0 ? void 0 : _l.scheme;
+                    colorRange = (_c = this._getDataScheme()[1]) === null || _c === void 0 ? void 0 : _c.scheme;
                 }
             }
             const ordinalScale = new ColorOrdinalScale();
-            (_o = (_m = ordinalScale.domain(colorDomain)).range) === null || _o === void 0 ? void 0 : _o.call(_m, colorRange);
-            return ordinalScale.scale(item);
+            (_e = (_d = ordinalScale.domain(colorDomain)).range) === null || _e === void 0 ? void 0 : _e.call(_d, colorRange);
+            this._colorScale = ordinalScale;
+            return;
         }
         getNodeList() {
             var _a, _b, _c;
@@ -82854,7 +82970,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             maxKeyWidth -
                             keyStyle.spacing -
                             valueStyle.spacing;
-                    value.multiLine = true;
                     if (!value.maxWidth) {
                         value.maxWidth = Math.ceil(value.width);
                     }
@@ -83425,7 +83540,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         styleObj.lineHeight = getPixelPropertyStr(lineHeight);
         styleObj.fontWeight = fontWeight;
         styleObj.whiteSpace = multiLine ? 'initial' : 'nowrap';
-        styleObj.wordBreak = wordBreak;
+        styleObj.wordBreak = multiLine ? wordBreak !== null && wordBreak !== void 0 ? wordBreak : 'break-word' : 'normal';
         styleObj.maxWidth = getPixelPropertyStr(maxWidth);
         return styleObj;
     }
@@ -83617,7 +83732,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
     function getSvgHtml(option, valueToHtml) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!(option === null || option === void 0 ? void 0 : option.hasShape) || !option.symbolType) {
             return '';
         }
@@ -83648,9 +83763,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     </svg>`;
         }
         if (isObject$2(fill)) {
-            fillString = 'gradientColor';
+            fillString = (_b = 'gradientColor' + option.index) !== null && _b !== void 0 ? _b : '';
             let gradient = '';
-            const stops = ((_b = fill.stops) !== null && _b !== void 0 ? _b : [])
+            const stops = ((_c = fill.stops) !== null && _c !== void 0 ? _c : [])
                 .map(s => `<stop offset="${valueToHtml(s.offset.toString())}" stop-color="${valueToHtml(s.color)}"/>`)
                 .join('');
             if (fill.gradient === 'radial') {
@@ -83659,7 +83774,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
       </radialGradient>`;
             }
             else if (fill.gradient === 'linear') {
-                gradient = `<linearGradient id="${fillString}" x1="${((_c = fill.x0) !== null && _c !== void 0 ? _c : 0) * 100}%" y1="${((_d = fill.y0) !== null && _d !== void 0 ? _d : 0) * 100}%" x2="${((_e = fill.x1) !== null && _e !== void 0 ? _e : 0) * 100}%" y2="${((_f = fill.y1) !== null && _f !== void 0 ? _f : 0) * 100}%">
+                gradient = `<linearGradient id="${fillString}" x1="${((_d = fill.x0) !== null && _d !== void 0 ? _d : 0) * 100}%" y1="${((_e = fill.y0) !== null && _e !== void 0 ? _e : 0) * 100}%" x2="${((_f = fill.x1) !== null && _f !== void 0 ? _f : 0) * 100}%" y2="${((_g = fill.y1) !== null && _g !== void 0 ? _g : 0) * 100}%">
       ${stops}
       </linearGradient>`;
             }
@@ -83697,6 +83812,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
+    const defaultLabelStyle = {
+        overflowWrap: 'normal',
+        wordWrap: 'normal'
+    };
     class ContentColumnModel extends BaseTooltipModel {
         constructor(parent, option, className, childIndex) {
             super(parent, option, childIndex);
@@ -83750,7 +83869,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 let childStyle = {};
                 if (this.className === 'key-box') {
                     const { key, isKeyAdaptive } = line;
-                    childStyle = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
+                    childStyle = mergeSpec({}, isKeyAdaptive ? defaultAdaptiveKeyStyle : defaultKeyStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, defaultLabelStyle), tooltipStyle.keyColumn.common), (_a = tooltipStyle.keyColumn.items) === null || _a === void 0 ? void 0 : _a[i]));
                     const hasContent = (isString$1(key) && ((_b = key === null || key === void 0 ? void 0 : key.trim) === null || _b === void 0 ? void 0 : _b.call(key)) !== '') || isNumber$2(key);
                     if (!hasContent && !childStyle.visibility) {
                         childStyle.visibility = 'hidden';
@@ -83761,7 +83880,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'value-box') {
-                    childStyle = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
+                    childStyle = mergeSpec({}, defaultValueStyle, Object.assign(Object.assign(Object.assign({ height: getPixelPropertyStr(contentAttributes[i].height) }, defaultLabelStyle), tooltipStyle.valueColumn.common), (_c = tooltipStyle.valueColumn.items) === null || _c === void 0 ? void 0 : _c[i]));
                     this.children[i].setStyle(childStyle);
                 }
                 else if (this.className === 'shape-box') {
@@ -83831,7 +83950,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 stroke: line.shapeStroke,
                 lineWidth: line.shapeLineWidth,
                 hollow: line.shapeHollow,
-                marginTop: `calc((${(_e = (_d = keyColumn.lineHeight) !== null && _d !== void 0 ? _d : keyColumn.fontSize) !== null && _e !== void 0 ? _e : '18px'} - ${(_f = shapeColumn.width) !== null && _f !== void 0 ? _f : '8px'}) / 2)`
+                marginTop: `calc((${(_e = (_d = keyColumn.lineHeight) !== null && _d !== void 0 ? _d : keyColumn.fontSize) !== null && _e !== void 0 ? _e : '18px'} - ${(_f = shapeColumn.width) !== null && _f !== void 0 ? _f : '8px'}) / 2)`,
+                index
             };
         }
     }