@visactor/vchart 1.5.2 → 1.6.0-alpha.0

package/build/index.js

@@ -26874,7 +26874,7 @@
         return isObject$2(obj) && obj.type === 'palette' && !!obj.key;
     }
     function isProgressiveDataColorScheme(obj) {
-        if (!isArray$1(obj)) {
+        if (!isArray$1(obj) || obj.length === 0) {
             return false;
         }
         return obj.every(item => {
@@ -28408,11 +28408,10 @@
         }, this.graphicItem.setAttributes(this.graphicItem.attribute), this.clearGraphicAttributes(), this.mark.needAnimate() && (this.setPrevGraphicAttributes({}), this.setNextGraphicAttributes(attributes), this.setFinalGraphicAttributes(attributes)));
       }
       updateGraphicItem(config) {
-        var _a;
         if (!this.graphicItem) return;
         isNil$1(config.clip) || this.graphicItem.setAttribute("clip", config.clip), isNil$1(config.interactive) || this.graphicItem.setAttribute("pickable", config.interactive), isNil$1(config.zIndex) || this.graphicItem.setAttribute("zIndex", config.zIndex), this.diffState === DiffState.exit ? this.graphicItem.releaseStatus = "willRelease" : this.graphicItem.releaseStatus = void 0;
-        const markSpec = this.mark.getSpec();
-        (null === (_a = markSpec.animation) || void 0 === _a ? void 0 : _a.state) && (this.graphicItem.stateAnimateConfig = markSpec.animation.state);
+        const stateAnimation = this.mark.animate.getAnimationConfigs("state");
+        0 !== stateAnimation.length && (this.graphicItem.stateAnimateConfig = stateAnimation[0].originConfig);
       }
       getGraphicItem() {
         return this.graphicItem;
@@ -28487,9 +28486,8 @@
         });
       }
       clearStates(hasAnimation) {
-        var _a;
-        const stateAnimation = isBoolean$1(hasAnimation) ? hasAnimation : !!(null === (_a = this.mark.getSpec().animation) || void 0 === _a ? void 0 : _a.state);
-        this.states = [], this.graphicItem && this.graphicItem.clearStates(stateAnimation), this.runtimeStatesEncoder && (this.runtimeStatesEncoder = {});
+        const stateAnimationEnable = isBoolean$1(hasAnimation) ? hasAnimation : 0 !== this.mark.animate.getAnimationConfigs("state").length;
+        this.states = [], this.graphicItem && this.graphicItem.clearStates(stateAnimationEnable), this.runtimeStatesEncoder && (this.runtimeStatesEncoder = {});
       }
       _updateRuntimeStates(state, attrs) {
         this.runtimeStatesEncoder || (this.runtimeStatesEncoder = {}), this.runtimeStatesEncoder[state] = attrs;
@@ -28511,15 +28509,15 @@
         }), this.useStates(nextStates));
       }
       useStates(states, hasAnimation) {
-        var _a, _b;
+        var _a;
         if (!this.graphicItem) return;
         this.mark.emit(HOOK_EVENT.BEFORE_ELEMENT_STATE, {
           states: states
         }, this), this.states = states.slice();
         const stateSort = null === (_a = this.mark.getSpec()) || void 0 === _a ? void 0 : _a.stateSort;
         stateSort && this.states.sort(stateSort);
-        const stateAnimation = isBoolean$1(hasAnimation) ? hasAnimation : !!(null === (_b = this.mark.getSpec().animation) || void 0 === _b ? void 0 : _b.state);
-        this.graphicItem.stateProxy = this.getStateAttrs, this.graphicItem.useStates(this.states, stateAnimation), this.mark.emit(HOOK_EVENT.AFTER_ELEMENT_STATE, {
+        const stateAnimationEnable = isBoolean$1(hasAnimation) ? hasAnimation : 0 !== this.mark.animate.getAnimationConfigs("state").length;
+        this.graphicItem.stateProxy = this.getStateAttrs, this.graphicItem.useStates(this.states, stateAnimationEnable), this.mark.emit(HOOK_EVENT.AFTER_ELEMENT_STATE, {
           states: states
         }, this);
       }
@@ -38031,7 +38029,10 @@
             count = 0;
           this.logger.canLogInfo() && (dt = Date.now(), this.logger.debug(`-- START PROPAGATION (${this._updateCounter}) -----`)), this._beforeEvaluate();
           try {
-            for (; this._heap.size() > 0;) grammar = this._heap.pop(), grammar.rank === grammar.qrank ? (next = grammar.run(), next && next.then && (next = yield next), this._logGrammarRunInfo(grammar), this._enqueueTargets(grammar), count += 1) : this._enqueue(grammar);
+            for (; this._heap.size() > 0;) 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;
           }
@@ -38047,6 +38048,9 @@
         for (this.logger.canLogInfo() && (dt = Date.now(), this.logger.debug(`-- START PROPAGATION (${this._updateCounter}) -----`)), this._beforeEvaluate(); this._heap.size() > 0;) grammar = this._heap.pop(), grammar.rank === grammar.qrank ? (grammar.runSync(), this._logGrammarRunInfo(grammar), this._enqueueTargets(grammar), count += 1) : this._enqueue(grammar);
         return this._isRunning = !1, this.logger.canLogInfo() && (dt = Date.now() - dt, this.logger.info(`> ${count} grammars updated; ${dt} ms`)), this._afterRunner && this._afterRunner(this), this._finishFirstRender = !0, !0;
       }
+      stop() {
+        this._isRunning && (this._isRunning = !1);
+      }
       runBefore(callback) {
         this._beforeRunner = callback;
       }
@@ -38054,7 +38058,7 @@
         this._afterRunner = callback;
       }
       release() {
-        this._heap && (this._heap.clear(), this._heap = null), this.logger = null, this._committed = null;
+        this.stop(), this._heap && (this._heap.clear(), this._heap = null), this.logger = null, this._committed = null;
       }
     }
 
@@ -42979,13 +42983,12 @@
         }), this.clearGraphicAttributes();
       }
       useStates(states, hasAnimation) {
-        var _a;
         if (!this.graphicItem) return;
         this.mark.emit(HOOK_EVENT.BEFORE_ELEMENT_STATE, {
           states: states
         }, this), this.states = states.slice();
-        const stateAnimation = isBoolean$1(hasAnimation) ? hasAnimation : !!(null === (_a = this.mark.getSpec().animation) || void 0 === _a ? void 0 : _a.state);
-        this.graphicItem.glyphStateProxy = this.getStateAttrs, this.graphicItem.useStates(this.states, stateAnimation), this.mark.emit(HOOK_EVENT.AFTER_ELEMENT_STATE, {
+        const stateAnimationEnable = isBoolean$1(hasAnimation) ? hasAnimation : 0 !== this.mark.animate.getAnimationConfigs("state").length;
+        this.graphicItem.glyphStateProxy = this.getStateAttrs, this.graphicItem.useStates(this.states, stateAnimationEnable), this.mark.emit(HOOK_EVENT.AFTER_ELEMENT_STATE, {
           states: states
         }, this);
       }
@@ -43543,6 +43546,10 @@
       constructor(mark, config) {
         this.state = null, this.immediateConfigs = [], this.isEnabled = !0, this.disabledStates = [], this.animators = new Map(), this.elementRecorder = new WeakMap(), this.timelineCount = {}, this.mark = mark, this.configs = normalizeAnimationConfig(null != config ? config : {});
       }
+      getAnimationConfigs(animationState) {
+        var _a;
+        return this.isEnabled ? (null !== (_a = this.configs) && void 0 !== _a ? _a : []).filter(config => config.state === animationState) : [];
+      }
       updateConfig(config) {
         this.configs = normalizeAnimationConfig(null != config ? config : {});
       }
@@ -45841,6 +45848,18 @@
       },
       dataLabels: []
     };
+    const lineDataLabel = {
+      type: "line-data",
+      data: [{
+        text: ""
+      }],
+      position: "top",
+      overlap: {
+        avoidBaseMark: !1,
+        clampForce: !1
+      },
+      smartInvert: !1
+    };
     const lineLabel = {
       type: "line",
       data: [{
@@ -45983,6 +46002,7 @@
       rectLabel: rectLabel,
       symbolLabel: symbolLabel$1,
       arcLabel: arcLabel,
+      lineDataLabel: lineDataLabel,
       datazoom: datazoom,
       continuousPlayer: continuousPlayer,
       discretePlayer: discretePlayer,
@@ -46400,7 +46420,7 @@
           this.event(eventConfig);
         }), (null === (_j = spec.interactions) || void 0 === _j ? void 0 : _j.length) && spec.interactions.forEach(interaction => {
           this.interaction(interaction.type, interaction);
-        }), this.emit(HOOK_EVENT.AFTER_PARSE_VIEW), this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, this;
+        }), !1 === spec.animation ? this.animate.disable() : this.animate.enable(), this.emit(HOOK_EVENT.AFTER_PARSE_VIEW), this._needBuildLayoutTree = !0, this._layoutState = LayoutState.before, this;
       }
       updateSpec(spec) {
         return this.removeAllInteractions(), this.removeAllGrammars(), this.parseSpec(spec);
@@ -47642,14 +47662,15 @@
       var _a;
       const labelTheme = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.dataLabel,
         dataLabels = marks.map((mark, index) => {
-          var _a, _b, _c, _d, _e, _f;
+          var _a, _b, _c, _d, _e, _f, _g, _h;
           const labelParameters = Object.assign(Object.assign({}, parameters), {
             labelIndex: index
           });
           let currentTheme = {};
           switch (mark.markType) {
             case GrammarMarkType.line:
-              currentTheme = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.lineLabel;
+            case GrammarMarkType.area:
+              currentTheme = null === (_a = null == theme ? void 0 : theme.components) || void 0 === _a ? void 0 : _a.lineDataLabel;
               break;
             case GrammarMarkType.rect:
             case GrammarMarkType.interval:
@@ -47669,17 +47690,22 @@
             default:
               currentTheme = null === (_e = null == theme ? void 0 : theme.components) || void 0 === _e ? void 0 : _e.pointLabel;
           }
-          const data = [];
+          const data = [],
+            themeDatum = null !== (_g = null === (_f = null == currentTheme ? void 0 : currentTheme.data) || void 0 === _f ? void 0 : _f[0]) && void 0 !== _g ? _g : {};
           mark.elements.forEach(element => {
-            var _a, _b;
-            if ("willRelease" !== element.getGraphicItem().releaseStatus) {
+            if ("willRelease" !== element.getGraphicItem().releaseStatus) if (mark.isCollectionMark()) {
+              element.getDatum().forEach(entry => {
+                const attributes = invokeEncoder(encoder, entry, element, labelParameters);
+                data.push(merge$1({}, themeDatum, attributes));
+              });
+            } else {
               const attributes = invokeEncoder(encoder, element.getDatum(), element, labelParameters),
-                datum = merge$1({}, null !== (_b = null === (_a = null == currentTheme ? void 0 : currentTheme.data) || void 0 === _a ? void 0 : _a[0]) && void 0 !== _b ? _b : {}, attributes);
+                datum = merge$1({}, themeDatum, attributes);
               data.push(datum);
             }
           });
           const addition = invokeFunctionType(labelStyle, labelParameters, mark),
-            graphicItemName = null === (_f = mark.graphicItem) || void 0 === _f ? void 0 : _f.name;
+            graphicItemName = null === (_h = mark.graphicItem) || void 0 === _h ? void 0 : _h.name;
           return merge$1({}, currentTheme, {
             data: data,
             baseMarkGroupName: graphicItemName,
@@ -49285,6 +49311,12 @@
             style: {
                 stroke: false
             }
+        },
+        barBackground: {
+            visible: false,
+            style: {
+                fill: { type: 'palette', key: 'primaryFontColor', a: 0.06 }
+            }
         }
     };
 
@@ -50418,6 +50450,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         SeriesMarkNameEnum["ripplePoint"] = "ripplePoint";
         SeriesMarkNameEnum["centerPoint"] = "centerPoint";
         SeriesMarkNameEnum["centerLabel"] = "centerLabel";
+        SeriesMarkNameEnum["barBackground"] = "barBackground";
     })(SeriesMarkNameEnum || (SeriesMarkNameEnum = {}));
     const seriesMarkNameSet = new Set(Object.values(SeriesMarkNameEnum));
 
@@ -50450,7 +50483,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         [SeriesMarkNameEnum.label]: { name: SeriesMarkNameEnum.label, type: MarkTypeEnum.text }
     };
 
-    const barSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { [SeriesMarkNameEnum.bar]: { name: SeriesMarkNameEnum.bar, type: MarkTypeEnum.rect } });
+    const barSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { [SeriesMarkNameEnum.bar]: { name: SeriesMarkNameEnum.bar, type: MarkTypeEnum.rect }, [SeriesMarkNameEnum.barBackground]: { name: SeriesMarkNameEnum.barBackground, type: MarkTypeEnum.rect } });
     const bar3dSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { [SeriesMarkNameEnum.bar3d]: { name: SeriesMarkNameEnum.bar3d, type: MarkTypeEnum.rect3d } });
 
     const lineLikeSeriesMark = {
@@ -50510,6 +50543,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
 
     const correlationSeriesMark = Object.assign(Object.assign({}, baseSeriesMark), { [SeriesMarkNameEnum.nodePoint]: { name: SeriesMarkNameEnum.nodePoint, type: MarkTypeEnum.symbol }, [SeriesMarkNameEnum.ripplePoint]: { name: SeriesMarkNameEnum.ripplePoint, type: MarkTypeEnum.ripple }, [SeriesMarkNameEnum.centerPoint]: { name: SeriesMarkNameEnum.centerPoint, type: MarkTypeEnum.symbol }, [SeriesMarkNameEnum.centerLabel]: { name: SeriesMarkNameEnum.centerLabel, type: MarkTypeEnum.text } });
 
+    const rangeAreaSeriesMark = Object.assign({}, areaSeriesMark);
+
     const seriesMarkInfoMap = {
         [SeriesTypeEnum.bar]: barSeriesMark,
         [SeriesTypeEnum.bar3d]: bar3dSeriesMark,
@@ -50539,7 +50574,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         [SeriesTypeEnum.rangeColumn]: rangeColumnSeriesMark,
         [SeriesTypeEnum.circlePacking]: circlePackingSeriesMark,
         [SeriesTypeEnum.heatmap]: heatmapSeriesMark,
-        [SeriesTypeEnum.correlation]: correlationSeriesMark
+        [SeriesTypeEnum.correlation]: correlationSeriesMark,
+        [SeriesTypeEnum.rangeArea]: rangeAreaSeriesMark
     };
 
     function baseMerge(target, source, shallowArray = false) {
@@ -50656,32 +50692,37 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         if (!theme) {
             return theme;
         }
-        let { colorScheme } = theme;
-        if (colorScheme) {
-            colorScheme = Object.keys(colorScheme).reduce((scheme, key) => {
-                const value = colorScheme[key];
-                scheme[key] = transformColorSchemeToStandardStruct(value);
-                return scheme;
-            }, {});
-        }
+        const colorScheme = transformColorSchemeToMerge(theme.colorScheme);
         let { series } = theme;
         const { mark: markByType, markByName } = theme;
         if (markByType || markByName) {
             series = Object.keys(seriesMarkInfoMap).reduce((newSeriesTheme, key) => {
                 var _a;
                 const value = (_a = series === null || series === void 0 ? void 0 : series[key]) !== null && _a !== void 0 ? _a : {};
-                const newValue = {};
-                Object.values(seriesMarkInfoMap[key]).forEach(({ type, name }) => {
-                    var _a, _b;
-                    newValue[name] = mergeSpec({}, (_a = markByType === null || markByType === void 0 ? void 0 : markByType[array(type)[0]]) !== null && _a !== void 0 ? _a : {}, (_b = markByName === null || markByName === void 0 ? void 0 : markByName[name]) !== null && _b !== void 0 ? _b : {}, value[name]);
-                });
-                newSeriesTheme[key] = Object.assign(Object.assign({}, value), newValue);
+                newSeriesTheme[key] = transformSeriesThemeToMerge(value, key, markByType, markByName);
                 return newSeriesTheme;
             }, {});
         }
         return Object.assign(Object.assign({}, theme), { colorScheme,
             series });
     }
+    function transformColorSchemeToMerge(colorScheme) {
+        if (colorScheme) {
+            colorScheme = Object.keys(colorScheme).reduce((scheme, key) => {
+                const value = colorScheme[key];
+                scheme[key] = transformColorSchemeToStandardStruct(value);
+                return scheme;
+            }, {});
+        }
+        return colorScheme;
+    }
+    function transformSeriesThemeToMerge(seriesTheme, seriesType, markByType, markByName) {
+        const newTheme = {};
+        Object.values(seriesMarkInfoMap[seriesType]).forEach(({ type, name }) => {
+            newTheme[name] = mergeSpec({}, markByType === null || markByType === void 0 ? void 0 : markByType[array(type)[0]], markByName === null || markByName === void 0 ? void 0 : markByName[name], seriesTheme === null || seriesTheme === void 0 ? void 0 : seriesTheme[name]);
+        });
+        return Object.assign(Object.assign({}, seriesTheme), newTheme);
+    }
 
     const colorScheme = {
         default: {
@@ -50728,18 +50769,19 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     };
 
-    const builtinThemeMap = new Map([
-        [lightTheme.name, lightTheme],
-        [darkTheme.name, darkTheme]
-    ]);
+    const builtinThemes = {
+        [lightTheme.name]: lightTheme,
+        [darkTheme.name]: darkTheme
+    };
     const defaultThemeName = lightTheme.name;
-    const themes = new Map([[defaultThemeName, builtinThemeMap.get(defaultThemeName)]]);
-    const getMergedTheme = (theme) => mergeTheme({}, builtinThemeMap.get(defaultThemeName), theme);
-    builtinThemeMap.forEach((theme, name) => {
-        if (name !== defaultThemeName) {
-            themes.set(name, getMergedTheme(theme));
-        }
-    });
+    const themes = new Map(Object.keys(builtinThemes).map(key => [key, builtinThemes[key]]));
+    const hasThemeMerged = new Map(Object.keys(builtinThemes).map(key => [key, key === defaultThemeName]));
+    const getMergedTheme = (theme) => mergeTheme({}, themes.get(defaultThemeName), theme);
+    const defaultChartLevelTheme = {
+        background: getActualColor(builtinThemes[defaultThemeName].background, builtinThemes[defaultThemeName].colorScheme),
+        fontFamily: builtinThemes[defaultThemeName].fontFamily,
+        colorScheme: builtinThemes[defaultThemeName].colorScheme
+    };
 
     class InstanceManager {
         static registerInstance(instance) {
@@ -50772,12 +50814,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return;
             }
             ThemeManager.themes.set(name, getMergedTheme(theme));
+            hasThemeMerged.set(name, true);
         }
         static getTheme(name) {
+            if (hasThemeMerged.has(name) && !hasThemeMerged.get(name)) {
+                ThemeManager.registerTheme(name, ThemeManager.themes.get(name));
+            }
             return ThemeManager.themes.get(name) || ThemeManager.getDefaultTheme();
         }
         static removeTheme(name) {
-            return ThemeManager.themes.delete(name);
+            return ThemeManager.themes.delete(name) && hasThemeMerged.delete(name);
         }
         static themeExist(name) {
             if (!isString$1(name)) {
@@ -50877,6 +50923,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     }
 
     function preprocessSpecOrTheme(type, obj, colorScheme, seriesType) {
+        if (isNil$1(obj)) {
+            return obj;
+        }
         if (isArray$1(obj)) {
             return obj.map(element => {
                 if (isObject$2(element) && !isFunction$1(element)) {
@@ -53709,6 +53758,55 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
+    const mergeThemeAndGet = (path, currentThemeName, optionTheme, specTheme, colorScheme) => {
+        if (isString$1(specTheme) && ThemeManager.themeExist(specTheme)) {
+            return getMergedValue(getThemeValue(path, specTheme, colorScheme));
+        }
+        else if (isString$1(optionTheme) && ThemeManager.themeExist(optionTheme)) {
+            return getMergedValue(getThemeValue(path, optionTheme, colorScheme), getThemeValue(path, specTheme, colorScheme));
+        }
+        return getMergedValue(getThemeValue(path, currentThemeName, colorScheme), getThemeValue(path, optionTheme, colorScheme), getThemeValue(path, specTheme, colorScheme));
+    };
+    const getThemeValue = (path, theme, colorScheme) => {
+        let themeObject;
+        if (isString$1(theme) && ThemeManager.themeExist(theme)) {
+            themeObject = ThemeManager.getTheme(theme);
+        }
+        else if (isObject$2(theme)) {
+            themeObject = theme;
+        }
+        if (isNil$1(themeObject)) {
+            return undefined;
+        }
+        const paths = path.split('.');
+        const colorSchemePath = 'colorScheme';
+        if (path === colorSchemePath) {
+            return transformColorSchemeToMerge(themeObject.colorScheme);
+        }
+        const backgroundPath = 'background';
+        if (path === backgroundPath) {
+            return getActualColor(themeObject.background, colorScheme);
+        }
+        const seriesPath = 'series';
+        if (paths.length === 2 && paths[0] === seriesPath) {
+            const { markByName, mark } = themeObject;
+            return transformSeriesThemeToMerge(get$1(themeObject, paths), paths[1], mark, markByName);
+        }
+        return get$1(themeObject, paths);
+    };
+    const getMergedValue = (...sources) => {
+        const tmpKey = '__TMP_KEY__';
+        const obj = mergeSpec({}, ...sources.map(source => ({
+            [tmpKey]: source
+        })));
+        return obj[tmpKey];
+    };
+    const getThemeFromOption = (path, option) => {
+        var _a, _b;
+        const { globalTheme = defaultThemeName, optionTheme, specTheme, chartLevelTheme = defaultChartLevelTheme } = (_b = (_a = option.getThemeConfig) === null || _a === void 0 ? void 0 : _a.call(option)) !== null && _b !== void 0 ? _b : {};
+        return mergeThemeAndGet(path, globalTheme, optionTheme, specTheme, chartLevelTheme === null || chartLevelTheme === void 0 ? void 0 : chartLevelTheme.colorScheme);
+    };
+
     class BaseModel extends LayoutItem {
         getData() {
             return this._data;
@@ -53848,19 +53946,26 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.setAttrFromSpec();
         }
         _initTheme(theme) {
-            this._theme = theme;
+            if (theme) {
+                this._theme = theme;
+            }
+            else {
+                this._theme = this._getTheme();
+            }
             this._mergeMarkTheme();
+            this._mergeThemeToSpec();
         }
-        setTheme(theme) {
-            this._theme = theme;
+        _getTheme() {
+            return undefined;
         }
         _mergeMarkTheme() {
             var _a, _b;
-            const globalTheme = (_b = (_a = this._option).getTheme) === null || _b === void 0 ? void 0 : _b.call(_a);
-            if (isNil$1(globalTheme) || isNil$1(this._theme)) {
+            const config = (_b = (_a = this._option).getThemeConfig) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (isNil$1(config) || isNil$1(this._theme)) {
                 return;
             }
-            const { mark: markThemeByType, markByName: markThemeByName } = globalTheme;
+            const markThemeByType = getThemeFromOption('mark', this._option);
+            const markThemeByName = getThemeFromOption('markByName', this._option);
             this.getMarkInfoList().forEach(({ type, name }) => {
                 var _a, _b;
                 this._theme[name] = mergeSpec({}, (_a = markThemeByType === null || markThemeByType === void 0 ? void 0 : markThemeByType[array(type)[0]]) !== null && _a !== void 0 ? _a : {}, (_b = markThemeByName === null || markThemeByName === void 0 ? void 0 : markThemeByName[name]) !== null && _b !== void 0 ? _b : {}, this._theme[name]);
@@ -53890,17 +53995,28 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return obj;
         }
         _prepareSpecAfterMergingTheme(obj) {
-            var _a, _b, _c;
             if (!arguments.length) {
                 obj = this._spec;
             }
-            const newObj = preprocessSpecOrTheme('spec', obj, (_c = (_b = (_a = this._option).getTheme) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c.colorScheme, this.modelType === 'series' ? this.type : undefined);
+            const newObj = preprocessSpecOrTheme('spec', obj, this.getColorScheme(), this.modelType === 'series' ? this.type : undefined);
             if (!arguments.length) {
                 this._spec = newObj;
             }
             return newObj;
         }
-        setCurrentTheme(theme, noRender) {
+        setCurrentTheme(noRender) {
+            return __awaiter$h(this, void 0, void 0, function* () {
+                const modifyConfig = () => {
+                    this.reInit(this._getTheme());
+                    return { change: true, reMake: false };
+                };
+                if (noRender) {
+                    modifyConfig();
+                }
+                else {
+                    yield this._option.globalInstance.updateCustomConfigAndRerender(modifyConfig);
+                }
+            });
         }
         updateLayoutAttribute() {
         }
@@ -53970,6 +54086,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         _getDataIdKey() {
             return undefined;
         }
+        getColorScheme() {
+            var _a, _b, _c;
+            return ((_c = (_b = (_a = this._option).getThemeConfig) === null || _b === void 0 ? void 0 : _b.call(_a).chartLevelTheme) !== null && _c !== void 0 ? _c : defaultChartLevelTheme).colorScheme;
+        }
+        _getChartLevelTheme() {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = this._option).getThemeConfig) === null || _b === void 0 ? void 0 : _b.call(_a).chartLevelTheme) !== null && _c !== void 0 ? _c : defaultChartLevelTheme;
+        }
     }
 
     function isStateAttrChangeable(key, stateStyle, facetField) {
@@ -56484,7 +56608,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         _computeGradientAttr(gradientStyle, data, opt) {
-            var _a, _b;
             const { gradient, scale, field } = gradientStyle, rest = __rest$8(gradientStyle, ["gradient", "scale", "field"]);
             const markData = this.getDataView();
             let colorScale = scale;
@@ -56498,7 +56621,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     colorField = globalField;
                 }
             }
-            const themeColor = computeActualDataScheme(getDataScheme((_b = (_a = this.model.getOption()) === null || _a === void 0 ? void 0 : _a.getTheme()) === null || _b === void 0 ? void 0 : _b.colorScheme, this.model.modelType === 'series' ? this.model.type : undefined), this.model.getDefaultColorDomain());
+            const themeColor = computeActualDataScheme(getDataScheme(this.model.getColorScheme(), this.model.modelType === 'series' ? this.model.type : undefined), this.model.getDefaultColorDomain());
             const computeStyle = {};
             const mergedStyle = Object.assign(Object.assign({}, DEFAULT_GRADIENT_CONFIG[gradient]), rest);
             Object.keys(mergedStyle).forEach(key => {
@@ -56530,7 +56653,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return computeStyle;
         }
         _computeBorderAttr(borderStyle, data, opt) {
-            var _a, _b, _c;
+            var _a;
             const { scale, field } = borderStyle, mergedStyle = __rest$8(borderStyle, ["scale", "field"]);
             const computeStyle = {};
             Object.keys(mergedStyle).forEach(key => {
@@ -56543,7 +56666,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             });
             if (!('stroke' in computeStyle)) {
-                const themeColor = computeActualDataScheme(getDataScheme((_b = (_a = this.model.getOption()) === null || _a === void 0 ? void 0 : _a.getTheme()) === null || _b === void 0 ? void 0 : _b.colorScheme, this.model.modelType === 'series' ? this.model.type : undefined), this.model.getDefaultColorDomain());
+                const themeColor = computeActualDataScheme(getDataScheme(this.model.getColorScheme(), this.model.modelType === 'series' ? this.model.type : undefined), this.model.getDefaultColorDomain());
                 let colorScale = scale;
                 let colorField = field;
                 if ((!scale || !field) && this.model.modelType === 'series') {
@@ -56557,7 +56680,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     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)) {
+            else if (GradientType.includes((_a = mergedStyle.stroke) === null || _a === void 0 ? void 0 : _a.gradient)) {
                 computeStyle.stroke = this._computeGradientAttr(mergedStyle.stroke, data, opt);
             }
             return computeStyle;
@@ -57249,6 +57372,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             };
             this._observer = null;
+            this._currentChartLevelTheme = {};
             this._context = {};
             this._onResize = debounce((...args) => {
                 const { width, height } = this._getCurSize();
@@ -57292,7 +57416,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._event = new Event$1(this._eventDispatcher, mode);
             this._compiler.initView();
             (_d = this.getStage()) === null || _d === void 0 ? void 0 : _d.setTheme({
-                text: { fontFamily: this._currentTheme.fontFamily }
+                text: { fontFamily: this._currentChartLevelTheme.fontFamily }
             });
             this._initDataSet(this._option.dataSet);
             this._autoSize = isTrueBrowser(mode) ? (_f = (_e = spec.autoFit) !== null && _e !== void 0 ? _e : this._option.autoFit) !== null && _f !== void 0 ? _f : true : false;
@@ -57326,7 +57450,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 performanceHook: this._option.performanceHook,
                 viewBox: this._viewBox,
                 animation: this._option.animation,
-                getTheme: () => this._currentTheme,
+                getThemeConfig: () => {
+                    var _a;
+                    return ({
+                        globalTheme: this._currentThemeName,
+                        optionTheme: this._option.theme,
+                        specTheme: (_a = this._spec) === null || _a === void 0 ? void 0 : _a.theme,
+                        chartLevelTheme: this._currentChartLevelTheme
+                    });
+                },
                 layout: this._option.layout,
                 onError: this._onError
             });
@@ -57668,7 +57800,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this._spec = spec;
                     if (!isEqual$1(lastSpec.theme, spec.theme)) {
                         this._updateCurrentTheme();
-                        (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme(this._currentTheme, false);
+                        (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme();
                     }
                     const reSize = this._updateChartConfiguration(lastSpec);
                     (_c = (_b = this._compiler) === null || _b === void 0 ? void 0 : _b.getVGrammarView()) === null || _c === void 0 ? void 0 : _c.updateLayoutTag();
@@ -57807,6 +57939,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         off(eType, handler) {
             var _a;
+            if (!this._userEvents || this._userEvents.length === 0) {
+                return;
+            }
             if (handler) {
                 const index = this._userEvents.findIndex(e => e.eType === eType && e.handler === handler);
                 if (index >= 0) {
@@ -57843,34 +57978,20 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._chart.setHovered(datum, filter, region);
         }
         _updateCurrentTheme(nextThemeName) {
-            var _a, _b, _c;
-            let optionTheme = this._option.theme;
-            let specTheme = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.theme;
-            let finalTheme;
-            if (ThemeManager.themeExist(nextThemeName)) {
-                const newTheme = ThemeManager.getTheme(nextThemeName);
-                optionTheme = !optionTheme || isString$1(optionTheme) ? {} : optionTheme;
-                specTheme = !specTheme || isString$1(specTheme) ? {} : specTheme;
-                finalTheme = mergeTheme({}, newTheme, optionTheme, specTheme);
+            var _a, _b;
+            const optionTheme = this._option.theme;
+            const specTheme = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.theme;
+            if (nextThemeName) {
                 this._currentThemeName = nextThemeName;
             }
-            else {
-                if (isString$1(specTheme) && ThemeManager.themeExist(specTheme)) {
-                    finalTheme = mergeTheme({}, ThemeManager.getTheme(specTheme));
-                    this._currentThemeName = specTheme;
-                }
-                else if (isString$1(optionTheme) && ThemeManager.themeExist(optionTheme)) {
-                    finalTheme = mergeTheme({}, ThemeManager.getTheme(optionTheme), getThemeObject(specTheme));
-                    this._currentThemeName = optionTheme;
-                }
-                else {
-                    const baseTheme = getThemeObject(this._currentThemeName);
-                    finalTheme = mergeTheme({}, baseTheme, getThemeObject(optionTheme), getThemeObject(specTheme));
-                }
-            }
-            this._currentTheme = preprocessSpecOrTheme('theme', finalTheme, finalTheme.colorScheme);
-            setPoptipTheme(preprocessSpecOrTheme('mark-theme', mergeSpec({}, (_b = this._currentTheme.component) === null || _b === void 0 ? void 0 : _b.poptip)));
-            (_c = this._compiler) === null || _c === void 0 ? void 0 : _c.setBackground(this._getBackground());
+            const colorScheme = mergeThemeAndGet('colorScheme', this._currentThemeName, optionTheme, specTheme);
+            this._currentChartLevelTheme = {
+                colorScheme,
+                background: mergeThemeAndGet('background', this._currentThemeName, optionTheme, specTheme, colorScheme),
+                fontFamily: mergeThemeAndGet('fontFamily', this._currentThemeName, optionTheme, specTheme, colorScheme)
+            };
+            setPoptipTheme(preprocessSpecOrTheme('mark-theme', mergeThemeAndGet('component.poptip', this._currentThemeName, optionTheme, specTheme, colorScheme), colorScheme));
+            (_b = this._compiler) === null || _b === void 0 ? void 0 : _b.setBackground(this._getBackground());
         }
         _updateChartConfiguration(oldSpec) {
             var _a, _b;
@@ -57888,10 +58009,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _getBackground() {
             const specBackground = typeof this._spec.background === 'string' ? this._spec.background : null;
-            return specBackground || this._currentTheme.background || this._option.background;
+            return specBackground || this._currentChartLevelTheme.background || this._option.background;
         }
         getCurrentTheme() {
-            return this._currentTheme;
+            return getThemeObject(this._currentThemeName);
         }
         getCurrentThemeName() {
             return this._currentThemeName;
@@ -57904,7 +58025,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 yield this.updateCustomConfigAndRerender(() => {
                     var _a;
                     this._updateCurrentTheme(name);
-                    (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme(this._currentTheme, true);
+                    (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme(true);
                     return { change: true, reMake: false };
                 });
                 return this;
@@ -57917,7 +58038,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.updateCustomConfigAndRerenderSync(() => {
                 var _a;
                 this._updateCurrentTheme(name);
-                (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme(this._currentTheme, true);
+                (_a = this._chart) === null || _a === void 0 ? void 0 : _a.setCurrentTheme(true);
                 return { change: true, reMake: false };
             });
             return this;
@@ -58208,7 +58329,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     };
     registerVChartCore();
 
-    const version = "1.5.2";
+    const version = "1.6.0-alpha.0";
 
     class ChartData {
         get dataList() {
@@ -58646,7 +58767,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._chartData;
         }
         constructor(spec, option) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             super(option);
             this.type = 'chart';
             this.id = createID();
@@ -58770,12 +58891,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
                 return undefined;
             };
-            this._theme = option.getTheme();
-            this._paddingSpec = normalizeLayoutPaddingSpec((_a = spec.padding) !== null && _a !== void 0 ? _a : (_b = this._theme) === null || _b === void 0 ? void 0 : _b.padding);
+            this._paddingSpec = normalizeLayoutPaddingSpec((_a = spec.padding) !== null && _a !== void 0 ? _a : getThemeFromOption('padding', this._option));
             this._event = new Event$1(option.eventDispatcher, option.mode);
             this._dataSet = option.dataSet;
-            this._chartData = new ChartData(this._dataSet, (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError);
-            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_d = this._option) === null || _d === void 0 ? void 0 : _d.onError });
+            this._chartData = new ChartData(this._dataSet, (_b = this._option) === null || _b === void 0 ? void 0 : _b.onError);
+            this._modelOption = Object.assign(Object.assign({}, option), { mode: this._option.mode, map: this._idMap, getChartLayoutRect: () => this._layoutRect, getChartViewRect: () => this._viewRect, getChart: () => this, globalScale: this._globalScale, onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError });
             this._stack = new Stack(this);
             this._spec = spec;
         }
@@ -58885,7 +59005,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!region) {
                     return;
                 }
-                const series = Factory.createSeries(spec.type, spec, Object.assign(Object.assign({}, this._modelOption), { region, specIndex: index, specKey: 'series', getTheme: () => this._theme, globalScale: this._globalScale, getSeriesData: this._chartData.getSeriesData.bind(this._chartData), sourceDataList: this._chartData.dataList }));
+                const series = Factory.createSeries(spec.type, spec, Object.assign(Object.assign({}, this._modelOption), { region, specIndex: index, specKey: 'series', globalScale: this._globalScale, getSeriesData: this._chartData.getSeriesData.bind(this._chartData), sourceDataList: this._chartData.dataList }));
                 if (series) {
                     series.created();
                     this._series.push(series);
@@ -58900,7 +59020,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._series.find(x => x.id === id);
         }
         _createComponent(Component, spec) {
-            const component = Component.createComponent(spec, Object.assign(Object.assign({}, this._modelOption), { getAllRegions: this.getAllRegions, getRegionsInIndex: this.getRegionsInIndex, getRegionsInIds: this.getRegionsInIds, getRegionsInUserIdOrIndex: this.getRegionsInUserIdOrIndex, getTheme: () => this._theme, getAllSeries: this.getAllSeries, getSeriesInIndex: this.getSeriesInIndex, getSeriesInIds: this.getSeriesInIds, getSeriesInUserIdOrIndex: this.getSeriesInUserIdOrIndex, getAllComponents: this.getComponents, getComponentByIndex: this.getComponentByIndex, getComponentByUserId: this.getComponentByUserId, getComponentsByKey: this.getComponentsByKey }));
+            const component = Component.createComponent(spec, Object.assign(Object.assign({}, this._modelOption), { getAllRegions: this.getAllRegions, getRegionsInIndex: this.getRegionsInIndex, getRegionsInIds: this.getRegionsInIds, getRegionsInUserIdOrIndex: this.getRegionsInUserIdOrIndex, getAllSeries: this.getAllSeries, getSeriesInIndex: this.getSeriesInIndex, getSeriesInIds: this.getSeriesInIds, getSeriesInUserIdOrIndex: this.getSeriesInUserIdOrIndex, getAllComponents: this.getComponents, getComponentByIndex: this.getComponentByIndex, getComponentByUserId: this.getComponentByUserId, getComponentsByKey: this.getComponentsByKey }));
             if (!component) {
                 return;
             }
@@ -58979,10 +59099,13 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (this._spec.zField || (this._spec.series && this._spec.series.some((s) => s.zField))) {
                     use3dLayout = true;
                 }
-                const layout = new (Factory.getLayoutInKey((_b = (_a = this._spec.layout) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : (use3dLayout ? 'layout3d' : 'base')))(this._spec.layout, {
-                    onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError
-                });
-                this._layoutFunc = layout.layoutItems.bind(layout);
+                const constructor = Factory.getLayoutInKey((_b = (_a = this._spec.layout) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : (use3dLayout ? 'layout3d' : 'base'));
+                if (constructor) {
+                    const layout = new constructor(this._spec.layout, {
+                        onError: (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError
+                    });
+                    this._layoutFunc = layout.layoutItems.bind(layout);
+                }
             }
         }
         layout(params) {
@@ -59093,9 +59216,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return this._chartData.getSeriesData(id, index);
         }
         _transformSpecScale() {
-            var _a, _b, _c;
+            var _a, _b;
             const scales = (_a = this._spec.scales) !== null && _a !== void 0 ? _a : [];
             let colorScaleSpec = scales.find(s => s.id === 'color');
+            const colorScheme = this.getColorScheme();
             if (!colorScaleSpec) {
                 colorScaleSpec = {
                     type: 'ordinal',
@@ -59107,12 +59231,12 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (this._spec.color) {
                     const colorSpec = this._spec.color;
                     if (isArray$1(colorSpec)) {
-                        colorScaleSpec.range = colorSpec.map(color => { var _a; return getActualColor(color, (_a = this._theme) === null || _a === void 0 ? void 0 : _a.colorScheme); });
+                        colorScaleSpec.range = colorSpec.map(color => getActualColor(color, colorScheme));
                     }
                     else {
                         const tempSpec = colorSpec;
                         if (tempSpec.range) {
-                            tempSpec.range = tempSpec.range.map(color => { var _a; return getActualColor(color, (_a = this._theme) === null || _a === void 0 ? void 0 : _a.colorScheme); });
+                            tempSpec.range = tempSpec.range.map(color => getActualColor(color, colorScheme));
                         }
                         Object.prototype.hasOwnProperty.call(tempSpec, 'type') && (colorScaleSpec.type = tempSpec.type);
                         Object.prototype.hasOwnProperty.call(tempSpec, 'domain') && (colorScaleSpec.domain = tempSpec.domain);
@@ -59123,7 +59247,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
             if (!((_b = colorScaleSpec.range) === null || _b === void 0 ? void 0 : _b.length)) {
-                colorScaleSpec.range = getDataScheme((_c = this._theme) === null || _c === void 0 ? void 0 : _c.colorScheme);
+                colorScaleSpec.range = getDataScheme(colorScheme);
                 colorScaleSpec.rangeTheme = true;
             }
             return scales;
@@ -59145,10 +59269,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             mergeUpdateResult(result, this._globalScale.updateSpec(this._transformSpecScale()));
         }
         updateGlobalScaleTheme() {
-            var _a;
             const colorSpec = this._globalScale.getScaleSpec('color');
+            const colorScheme = this.getColorScheme();
             if (colorSpec.rangeTheme) {
-                colorSpec.range = getDataScheme((_a = this._theme) === null || _a === void 0 ? void 0 : _a.colorScheme);
+                colorSpec.range = getDataScheme(colorScheme);
                 this._globalScale.getScale('color').range(colorSpec.range);
             }
         }
@@ -59202,8 +59326,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return result;
         }
         updateChartConfig(result, oldSpec) {
-            var _a, _b;
-            this._paddingSpec = normalizeLayoutPaddingSpec((_a = this._spec.padding) !== null && _a !== void 0 ? _a : (_b = this._theme) === null || _b === void 0 ? void 0 : _b.padding);
+            var _a;
+            this._paddingSpec = normalizeLayoutPaddingSpec((_a = this._spec.padding) !== null && _a !== void 0 ? _a : getThemeFromOption('padding', this._option));
             this._updateLayoutRect(this._viewBox);
             if (!isEqual$1(this._spec.background, oldSpec.background)) {
                 result.reMake = true;
@@ -59280,7 +59404,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 label: spec.label,
                 seriesStyle: spec.seriesStyle,
                 animation: spec.animation,
-                animationThreshold: (_a = spec.animationThreshold) !== null && _a !== void 0 ? _a : this._theme.animationThreshold,
+                animationThreshold: (_a = spec.animationThreshold) !== null && _a !== void 0 ? _a : getThemeFromOption('animationThreshold', this._option),
                 animationAppear: spec.animationAppear,
                 animationDisappear: spec.animationDisappear,
                 animationEnter: spec.animationEnter,
@@ -59320,31 +59444,27 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._layoutRect.y = this.padding.top;
             this._event.emit(ChartEvent.layoutRectUpdate, {});
         }
-        getCurrentTheme() {
-            return this._theme;
-        }
-        setCurrentTheme(theme, reInit = true) {
-            this._theme = theme;
+        setCurrentTheme(reInit = true) {
             this.setLayoutTag(true);
             this.transformSpec(this._spec);
             this.updateGlobalScaleTheme();
             this.setRegionTheme(reInit);
-            this.setComponentTheme(theme, reInit);
-            this.setSeriesTheme(theme, reInit);
+            this.setComponentTheme(reInit);
+            this.setSeriesTheme(reInit);
         }
         setRegionTheme(reInit = true) {
-            this._regions.forEach(r => {
-                reInit ? r.reInit() : r.setTheme();
-            });
+            this._regions.forEach((r) => __awaiter$h(this, void 0, void 0, function* () {
+                yield r.setCurrentTheme(reInit);
+            }));
         }
-        setComponentTheme(theme, reInit = true) {
-            this._components.forEach(c => {
-                reInit ? c.setCurrentTheme(theme.component[c.type], true) : c.setTheme(theme.component[c.type]);
-            });
+        setComponentTheme(reInit = true) {
+            this._components.forEach((c) => __awaiter$h(this, void 0, void 0, function* () {
+                yield c.setCurrentTheme(reInit);
+            }));
         }
-        setSeriesTheme(theme, reInit = true) {
+        setSeriesTheme(reInit = true) {
             this._series.forEach((s) => __awaiter$h(this, void 0, void 0, function* () {
-                reInit ? yield s.setCurrentTheme(theme.series[s.type], true) : s.setTheme(theme.series[s.type]);
+                yield s.setCurrentTheme(reInit);
             }));
         }
         clear() {
@@ -59628,6 +59748,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }
             }
         }
+        getColorScheme() {
+            var _a, _b, _c;
+            return ((_c = (_b = (_a = this._option).getThemeConfig) === null || _b === void 0 ? void 0 : _b.call(_a).chartLevelTheme) !== null && _c !== void 0 ? _c : defaultChartLevelTheme).colorScheme;
+        }
     }
 
     class CartesianChart extends BaseChart {
@@ -60772,7 +60896,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._viewDataMap = new Map();
             this._viewDataFilter = null;
             this._data = null;
-            this._stack = false;
             this._percent = false;
             this._stackOffsetSilhouette = false;
             this._invalidType = 'break';
@@ -60835,6 +60958,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             if (isValid$1(this._spec.stackValue)) {
                 this._stack = true;
             }
+            if (isNil$1(this._stack) && this._supportStack && this._seriesField) {
+                this._stack = true;
+            }
             if (isValid$1(this._spec.invalidType)) {
                 this._invalidType = this._spec.invalidType;
             }
@@ -61400,12 +61526,15 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a;
             return this._getSeriesInfo((_a = this._seriesField) !== null && _a !== void 0 ? _a : DEFAULT_DATA_SERIES_FIELD, this.getSeriesKeys());
         }
-        getDefaultColorScale() {
+        _getDefaultColorScale() {
             var _a, _b;
             const colorDomain = this.getDefaultColorDomain();
-            const colorRange = getDataScheme(this._option.getTheme().colorScheme, this.type);
+            const colorRange = this._getDataScheme();
             return (_b = (_a = new ColorOrdinalScale().domain(colorDomain)).range) === null || _b === void 0 ? void 0 : _b.call(_a, colorRange);
         }
+        _getDataScheme() {
+            return getDataScheme(this.getColorScheme(), this.type);
+        }
         getDefaultColorDomain() {
             var _a, _b;
             return this._seriesField ? (_b = (_a = this._viewDataStatistics) === null || _a === void 0 ? void 0 : _a.latestData[this._seriesField]) === null || _b === void 0 ? void 0 : _b.values : [];
@@ -61413,7 +61542,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getColorAttribute() {
             var _a, _b;
             return {
-                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this.getDefaultColorScale(),
+                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this._getDefaultColorScale(),
                 field: (_b = this._seriesField) !== null && _b !== void 0 ? _b : DEFAULT_DATA_SERIES_FIELD
             };
         }
@@ -61428,30 +61557,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         onMarkTreePositionUpdate(marks) {
         }
-        setCurrentTheme(theme, noRender) {
-            return __awaiter$h(this, void 0, void 0, function* () {
-                const modifyConfig = () => {
-                    this.reInit(theme);
-                    return { change: true, reMake: false };
-                };
-                if (noRender) {
-                    modifyConfig();
-                }
-                else {
-                    yield this._option.globalInstance.updateCustomConfigAndRerender(modifyConfig);
-                }
-            });
-        }
-        _initTheme(theme) {
-            var _a;
-            const globalTheme = this._option.getTheme();
-            if (theme) {
-                super._initTheme(theme);
-            }
-            else {
-                super._initTheme((_a = globalTheme.series[this.type]) !== null && _a !== void 0 ? _a : {});
-            }
-            this._mergeThemeToSpec();
+        _getTheme() {
+            return preprocessSpecOrTheme('theme', getThemeFromOption(`series.${this.type}`, this._option), this.getColorScheme(), this.type);
         }
         _createMark(markInfo, option = {}) {
             var _a, _b, _c, _d;
@@ -62392,7 +62499,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         constructor() {
             super(...arguments);
             this.type = SeriesTypeEnum.area;
-            this._stack = true;
+            this._supportStack = true;
             this._sortDataByAxis = false;
         }
         setAttrFromSpec() {
@@ -62715,7 +62822,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.type = SeriesTypeEnum.bar;
             this._barMarkName = SeriesMarkNameEnum.bar;
             this._barMarkType = MarkTypeEnum.rect;
-            this._stack = true;
+            this._supportStack = true;
             this._bandPosition = 0;
         }
         initMark() {
@@ -62725,7 +62832,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 large: this._spec.large,
                 largeThreshold: this._spec.largeThreshold
             };
-            this._rectMark = this._createMark(Object.assign(Object.assign({}, BarSeries.mark.bar), { name: this._barMarkName, type: this._barMarkType }), {
+            this._initBarBackgroundMark(progressive);
+            this._barMark = this._createMark(Object.assign(Object.assign({}, BarSeries.mark.bar), { name: this._barMarkName, type: this._barMarkType }), {
                 morph: shouldDoMorph(this._spec.animation, this._spec.morph, userAnimationConfig(this.type, this._spec)),
                 defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
@@ -62734,13 +62842,22 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 progressive
             });
         }
+        _initBarBackgroundMark(progressive) {
+            var _a;
+            if ((_a = this._spec.barBackground) === null || _a === void 0 ? void 0 : _a.visible) {
+                this._barBackgroundMark = this._createMark(BarSeries.mark.barBackground, {
+                    dataView: this._barBackgroundViewData.getDataView(),
+                    dataProductId: this._barBackgroundViewData.getProductId(),
+                    progressive
+                });
+            }
+        }
         initMarkStyle() {
-            const rectMark = this._rectMark;
-            if (rectMark) {
-                this.setMarkStyle(rectMark, {
+            if (this._barMark) {
+                this.setMarkStyle(this._barMark, {
                     fill: this.getColorAttribute()
                 }, 'normal', AttributeLevel.Series);
-                this._trigger.registerMark(rectMark);
+                this._trigger.registerMark(this._barMark);
             }
         }
         initLabelMarkStyle(textMark) {
@@ -62757,7 +62874,52 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initTooltip() {
             super.initTooltip();
-            this._rectMark && this._tooltipHelper.activeTriggerSet.mark.add(this._rectMark);
+            this._barMark && this._tooltipHelper.activeTriggerSet.mark.add(this._barMark);
+        }
+        _statisticViewData() {
+            var _a, _b;
+            super._statisticViewData();
+            if (!((_a = this._spec.barBackground) === null || _a === void 0 ? void 0 : _a.visible)) {
+                return;
+            }
+            const dimensionItems = ([data], op) => {
+                var _a;
+                let dataCollect = [{}];
+                const fields = this.getDimensionField();
+                for (let i = 0; i < fields.length; i++) {
+                    const field = fields[i];
+                    const values = (_a = data.latestData[field]) === null || _a === void 0 ? void 0 : _a.values;
+                    if (!(values === null || values === void 0 ? void 0 : values.length)) {
+                        continue;
+                    }
+                    const newDataCollect = [];
+                    for (let j = 0; j < values.length; j++) {
+                        for (let k = 0; k < dataCollect.length; k++) {
+                            newDataCollect.push(Object.assign(Object.assign({}, dataCollect[k]), { [field]: values[j] }));
+                        }
+                    }
+                    dataCollect = newDataCollect;
+                }
+                return dataCollect;
+            };
+            registerDataSetInstanceTransform(this._option.dataSet, 'addVChartProperty', addVChartProperty);
+            registerDataSetInstanceTransform(this._option.dataSet, 'dimensionItems', dimensionItems);
+            const barBackgroundData = new DataView(this._option.dataSet)
+                .parse([this._viewDataStatistics], {
+                type: 'dataview'
+            })
+                .transform({
+                type: 'dimensionItems'
+            }, false)
+                .transform({
+                type: 'addVChartProperty',
+                options: {
+                    beforeCall: initKeyMap,
+                    call: addDataKey.bind(this)
+                }
+            }, false);
+            (_b = this._viewDataStatistics) === null || _b === void 0 ? void 0 : _b.target.addListener('change', barBackgroundData.reRunAllTransform);
+            this._barBackgroundViewData = new SeriesData(this._option, barBackgroundData);
         }
         init(option) {
             var _a, _b;
@@ -62850,7 +63012,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
             const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
             if (this.direction === Direction.horizontal) {
-                this.setMarkStyle(this._rectMark, {
+                this.setMarkStyle(this._barMark, {
                     x: (datum) => {
                         if (this._shouldDoPreCalculate()) {
                             this._calculateStackRectPosition(false);
@@ -62873,7 +63035,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', AttributeLevel.Series);
             }
             else {
-                this.setMarkStyle(this._rectMark, {
+                this.setMarkStyle(this._barMark, {
                     x: (datum) => this._getPosition(this.direction, datum),
                     y: (datum, ctx, opt, dataView) => {
                         if (this._shouldDoPreCalculate()) {
@@ -62897,13 +63059,56 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }, 'normal', AttributeLevel.Series);
             }
+            this._initBarBackgroundMarkStyle();
+        }
+        _initBarBackgroundMarkStyle() {
+            var _a, _b, _c, _d;
+            if (!this._barBackgroundMark) {
+                return;
+            }
+            const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
+            const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
+            if (this.direction === Direction.horizontal) {
+                this.setMarkStyle(this._barBackgroundMark, {
+                    x: () => {
+                        const range = xScale.range();
+                        const min = Math.min(range[0], range[range.length - 1]);
+                        return min;
+                    },
+                    x1: () => {
+                        const range = xScale.range();
+                        const max = Math.max(range[0], range[range.length - 1]);
+                        return max;
+                    },
+                    y: (datum) => this._getPosition(this.direction, datum),
+                    height: () => this._getBarWidth(this._yAxisHelper)
+                }, 'normal', AttributeLevel.Series);
+            }
+            else {
+                this.setMarkStyle(this._barBackgroundMark, {
+                    x: (datum) => this._getPosition(this.direction, datum),
+                    y: () => {
+                        const range = yScale.range();
+                        const min = Math.min(range[0], range[range.length - 1]);
+                        return min;
+                    },
+                    y1: () => {
+                        const range = yScale.range();
+                        const max = Math.max(range[0], range[range.length - 1]);
+                        return max;
+                    },
+                    width: () => {
+                        return this._getBarWidth(this._xAxisHelper);
+                    }
+                }, 'normal', AttributeLevel.Series);
+            }
         }
         initLinearRectMarkStyle() {
             var _a, _b, _c, _d;
             const xScale = (_b = (_a = this._xAxisHelper) === null || _a === void 0 ? void 0 : _a.getScale) === null || _b === void 0 ? void 0 : _b.call(_a, 0);
             const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
             if (this.direction === Direction.vertical) {
-                this.setMarkStyle(this._rectMark, {
+                this.setMarkStyle(this._barMark, {
                     x: (datum) => valueInScaleRange(this.dataToPositionX(datum), xScale),
                     x1: (datum) => valueInScaleRange(this.dataToPositionX1(datum), xScale),
                     y: (datum, ctx, opt, dataView) => {
@@ -62926,7 +63131,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', AttributeLevel.Series);
             }
             else {
-                this.setMarkStyle(this._rectMark, {
+                this.setMarkStyle(this._barMark, {
                     x: (datum) => {
                         if (this._shouldDoPreCalculate()) {
                             this._calculateStackRectPosition(false);
@@ -62969,7 +63174,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const xIndex = (_c = (_b = (_a = this.getViewDataStatistics()) === null || _a === void 0 ? void 0 : _a.latestData) === null || _b === void 0 ? void 0 : _b[this._fieldX[0]]) === null || _c === void 0 ? void 0 : _c.values.indexOf(xValue);
                 return xIndex || 0;
             };
-            this._rectMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('bar')) === null || _c === void 0 ? void 0 : _c(animationParams, appearPreset), userAnimationConfig(this._barMarkName, this._spec), { dataIndex }));
+            this._barMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('bar')) === null || _c === void 0 ? void 0 : _c(animationParams, appearPreset), userAnimationConfig(this._barMarkName, this._spec), { dataIndex }));
         }
         _getBarWidth(axisHelper) {
             var _a, _b;
@@ -63005,7 +63210,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 dataToPosition = this.dataToPositionX.bind(this);
             }
             const scale = axisHelper.getScale(0);
-            const size = this._rectMark.getAttribute(sizeAttribute, datum);
+            const size = this._barMark.getAttribute(sizeAttribute, datum);
             const bandWidth = (_b = (_a = axisHelper.getBandwidth) === null || _a === void 0 ? void 0 : _a.call(axisHelper, this._groups ? this._groups.fields.length - 1 : 0)) !== null && _b !== void 0 ? _b : DefaultBandWidth$2;
             if (((_d = (_c = this._groups) === null || _c === void 0 ? void 0 : _c.fields) === null || _d === void 0 ? void 0 : _d.length) > 1 && isValid$1(this._spec.barGapInGroup)) {
                 const groupFields = this._groups.fields;
@@ -63043,7 +63248,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return 'square';
         }
         getActiveMarks() {
-            return [this._rectMark];
+            return [this._barMark];
+        }
+        compileData() {
+            var _a;
+            super.compileData();
+            (_a = this._barBackgroundViewData) === null || _a === void 0 ? void 0 : _a.compile();
+        }
+        fillData() {
+            var _a, _b;
+            super.fillData();
+            (_b = (_a = this._barBackgroundViewData) === null || _a === void 0 ? void 0 : _a.getDataView()) === null || _b === void 0 ? void 0 : _b.reRunAllTransform();
+        }
+        viewDataUpdate(d) {
+            var _a, _b, _c;
+            super.viewDataUpdate(d);
+            (_b = (_a = this._barBackgroundViewData) === null || _a === void 0 ? void 0 : _a.getDataView()) === null || _b === void 0 ? void 0 : _b.reRunAllTransform();
+            (_c = this._barBackgroundViewData) === null || _c === void 0 ? void 0 : _c.updateData();
+        }
+        release() {
+            var _a;
+            super.release();
+            (_a = this._barBackgroundViewData) === null || _a === void 0 ? void 0 : _a.release();
+            this._barBackgroundViewData = null;
         }
     }
     BarSeries.type = SeriesTypeEnum.bar;
@@ -63061,7 +63288,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.seriesType = SeriesTypeEnum.bar;
         }
         _getDefaultSeriesSpec(spec) {
-            return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { barWidth: spec.barWidth, barMaxWidth: spec.barMaxWidth, barMinWidth: spec.barMinWidth, barGapInGroup: spec.barGapInGroup, barMinHeight: spec.barMinHeight });
+            return Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { barWidth: spec.barWidth, barMaxWidth: spec.barMaxWidth, barMinWidth: spec.barMinWidth, barGapInGroup: spec.barGapInGroup, barMinHeight: spec.barMinHeight, barBackground: spec.barBackground });
         }
         transformSpec(spec) {
             super.transformSpec(spec);
@@ -63870,6 +64097,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
+    function getComponentThemeFromOption(type, option) {
+        return getThemeFromOption(`component.${type}`, option);
+    }
+
     const DEFAULT_TITLE_STYLE = {
         left: {
             textAlign: 'center',
@@ -63913,19 +64144,29 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         const orient = spec === null || spec === void 0 ? void 0 : spec.orient;
         return orient === 'angle' || orient === 'radius';
     }
-    const getCartesianAxisTheme = (orient, type, theme) => {
-        var _a, _b;
-        const { axisBand, axisLinear, axisX, axisY, axis } = (_a = theme.component) !== null && _a !== void 0 ? _a : {};
-        const axisTypeTheme = (_b = (type === 'band' ? axisBand : ['linear', 'log', 'symlog'].includes(type) ? axisLinear : {})) !== null && _b !== void 0 ? _b : {};
-        const axisTheme = isXAxis(orient) ? axisX : axisY;
-        return mergeSpec({}, axis, axisTypeTheme, axisTheme);
-    };
-    const getPolarAxisTheme = (orient, type, theme) => {
-        var _a, _b;
-        const { axisBand, axisLinear, axisAngle, axisRadius, axis } = (_a = theme.component) !== null && _a !== void 0 ? _a : {};
-        const axisTypeTheme = (_b = (type === 'band' ? axisBand : type === 'linear' ? axisLinear : {})) !== null && _b !== void 0 ? _b : {};
-        const axisTheme = orient === 'angle' ? axisAngle : axisRadius;
-        return mergeSpec({}, axis, axisTypeTheme, axisTheme);
+    const getCartesianAxisTheme = (orient, type, option) => {
+        var _a;
+        const axisTypeTheme = (_a = (type === 'band'
+            ? getComponentThemeFromOption('axisBand', option)
+            : ['linear', 'log', 'symlog'].includes(type)
+                ? getComponentThemeFromOption('axisLinear', option)
+                : {})) !== null && _a !== void 0 ? _a : {};
+        const axisTheme = isXAxis(orient)
+            ? getComponentThemeFromOption('axisX', option)
+            : getComponentThemeFromOption('axisY', option);
+        return mergeSpec({}, getComponentThemeFromOption('axis', option), axisTypeTheme, axisTheme);
+    };
+    const getPolarAxisTheme = (orient, type, option) => {
+        var _a;
+        const axisTypeTheme = (_a = (type === 'band'
+            ? getComponentThemeFromOption('axisBand', option)
+            : type === 'linear'
+                ? getComponentThemeFromOption('axisLinear', option)
+                : {})) !== null && _a !== void 0 ? _a : {};
+        const axisTheme = orient === 'angle'
+            ? getComponentThemeFromOption('axisAngle', option)
+            : getComponentThemeFromOption('axisRadius', option);
+        return mergeSpec({}, getComponentThemeFromOption('axis', option), axisTypeTheme, axisTheme);
     };
 
     function limitTagInBounds(shape, bounds) {
@@ -63971,10 +64212,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         return null;
     }
-    const getCartesianCrosshairTheme = (theme, chart) => {
+    const getCartesianCrosshairTheme = (option, chart) => {
         var _a;
         const axes = chart.getAllComponents().filter(component => component.type.includes('Axis'));
-        const { bandField, linearField, xField, yField } = (_a = theme.component.crosshair) !== null && _a !== void 0 ? _a : {};
+        const { bandField, linearField, xField, yField } = (_a = getComponentThemeFromOption(ComponentTypeEnum.crosshair, option)) !== null && _a !== void 0 ? _a : {};
         const xAxis = axes.find(axis => isXAxis(axis.getOrient()));
         let newXField;
         if (isValid$1(xAxis)) {
@@ -63996,10 +64237,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             yField: newYField
         };
     };
-    const getPolarCrosshairTheme = (theme, chart) => {
+    const getPolarCrosshairTheme = (option, chart) => {
         var _a;
         const axes = chart.getAllComponents().filter(component => component.type.includes('Axis'));
-        const { bandField, linearField, categoryField, valueField } = (_a = theme.component.crosshair) !== null && _a !== void 0 ? _a : {};
+        const { bandField, linearField, categoryField, valueField } = (_a = getComponentThemeFromOption(ComponentTypeEnum.crosshair, option)) !== null && _a !== void 0 ? _a : {};
         const angleAxis = axes.find(axis => axis.getOrient() === 'angle');
         let newAngleField;
         if (isValid$1(angleAxis)) {
@@ -64043,36 +64284,36 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         return spec.orient === 'bottom' || spec.orient === 'top' ? 'horizontal' : 'vertical';
     }
 
-    function getComponentThemeFromGlobalTheme(type, theme, componentSpec, chart) {
-        var _a, _b, _c;
+    function getComponentThemeFromGlobalTheme(type, option, componentSpec) {
+        var _a;
+        const chart = (_a = option.getChart) === null || _a === void 0 ? void 0 : _a.call(option);
         switch (type) {
             case ComponentTypeEnum.cartesianBandAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'band', theme);
+                return getCartesianAxisTheme(getOrient(componentSpec), 'band', option);
             case ComponentTypeEnum.cartesianLinearAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'linear', theme);
+                return getCartesianAxisTheme(getOrient(componentSpec), 'linear', option);
             case ComponentTypeEnum.cartesianLogAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'log', theme);
+                return getCartesianAxisTheme(getOrient(componentSpec), 'log', option);
             case ComponentTypeEnum.cartesianSymlogAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), 'symlog', theme);
+                return getCartesianAxisTheme(getOrient(componentSpec), 'symlog', option);
             case ComponentTypeEnum.cartesianAxis:
             case ComponentTypeEnum.cartesianTimeAxis:
-                return getCartesianAxisTheme(getOrient(componentSpec), undefined, theme);
+                return getCartesianAxisTheme(getOrient(componentSpec), undefined, option);
             case ComponentTypeEnum.polarBandAxis:
-                return getPolarAxisTheme(componentSpec.orient, 'band', theme);
+                return getPolarAxisTheme(componentSpec.orient, 'band', option);
             case ComponentTypeEnum.polarLinearAxis:
-                return getPolarAxisTheme(componentSpec.orient, 'linear', theme);
+                return getPolarAxisTheme(componentSpec.orient, 'linear', option);
             case ComponentTypeEnum.polarAxis:
-                return getPolarAxisTheme(componentSpec.orient, undefined, theme);
+                return getPolarAxisTheme(componentSpec.orient, undefined, option);
             case ComponentTypeEnum.cartesianCrosshair:
-                return getCartesianCrosshairTheme(theme, chart);
+                return getCartesianCrosshairTheme(option, chart);
             case ComponentTypeEnum.polarCrosshair:
-                return getPolarCrosshairTheme(theme, chart);
+                return getPolarCrosshairTheme(option, chart);
             case ComponentTypeEnum.colorLegend:
-                return (_a = theme.component) === null || _a === void 0 ? void 0 : _a.colorLegend[getLayout(componentSpec)];
             case ComponentTypeEnum.sizeLegend:
-                return (_b = theme.component) === null || _b === void 0 ? void 0 : _b.sizeLegend[getLayout(componentSpec)];
+                return getThemeFromOption(`component.${type}.${getLayout(componentSpec)}`, option);
             default:
-                return (_c = theme.component) === null || _c === void 0 ? void 0 : _c[type];
+                return getComponentThemeFromOption(type, option);
         }
     }
 
@@ -64120,29 +64361,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 y: markEventParams.event.viewY - this.getLayoutStartPoint().y
             };
         }
-        setCurrentTheme(theme, noRender) {
-            return __awaiter$h(this, void 0, void 0, function* () {
-                const modifyConfig = () => {
-                    this.reInit(theme);
-                    return { change: true, reMake: false };
-                };
-                if (noRender) {
-                    modifyConfig();
-                }
-                else {
-                    yield this._option.globalInstance.updateCustomConfigAndRerender(modifyConfig);
-                }
-            });
-        }
-        _initTheme(theme) {
-            const globalTheme = this._option.getTheme();
-            if (theme) {
-                super._initTheme(theme);
-            }
-            else {
-                super._initTheme(getComponentThemeFromGlobalTheme(this.type, globalTheme, this._originalSpec, this._option.getChart()));
-            }
-            this._mergeThemeToSpec();
+        _getTheme() {
+            return preprocessSpecOrTheme('theme', getComponentThemeFromGlobalTheme(this.type, this._option, this._originalSpec), this.getColorScheme());
         }
         _mergeThemeToSpec() {
             super._mergeThemeToSpec();
@@ -64977,7 +65197,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     fill: (datum) => {
                         var _a, _b, _c, _d;
                         if (isValid$1(datum[(_a = this._seriesField) !== null && _a !== void 0 ? _a : DEFAULT_DATA_SERIES_FIELD])) {
-                            return ((_b = this._option.globalScale.getScale('color')) !== null && _b !== void 0 ? _b : this.getDefaultColorScale()).scale(datum[(_c = this._seriesField) !== null && _c !== void 0 ? _c : DEFAULT_DATA_SERIES_FIELD]);
+                            return ((_b = this._option.globalScale.getScale('color')) !== null && _b !== void 0 ? _b : this._getDefaultColorScale()).scale(datum[(_c = this._seriesField) !== null && _c !== void 0 ? _c : DEFAULT_DATA_SERIES_FIELD]);
                         }
                         return (_d = this._spec) === null || _d === void 0 ? void 0 : _d.defaultFillColor;
                     },
@@ -66233,7 +66453,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         constructor() {
             super(...arguments);
             this.type = SeriesTypeEnum.rose;
-            this._stack = true;
+            this._supportStack = true;
             this._roseMark = null;
             this._labelMark = null;
         }
@@ -67121,7 +67341,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getColorAttribute() {
             var _a, _b, _c;
             return {
-                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this.getDefaultColorScale(),
+                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this._getDefaultColorScale(),
                 field: (_c = (_b = this._dotTypeField) !== null && _b !== void 0 ? _b : this._seriesField) !== null && _c !== void 0 ? _c : DEFAULT_DATA_SERIES_FIELD
             };
         }
@@ -67538,7 +67758,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getColorAttribute() {
             var _a, _b, _c;
             return {
-                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this.getDefaultColorScale(),
+                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this._getDefaultColorScale(),
                 field: (_c = (_b = this._seriesGroupField) !== null && _b !== void 0 ? _b : this._seriesField) !== null && _c !== void 0 ? _c : DEFAULT_DATA_SERIES_FIELD
             };
         }
@@ -67551,7 +67771,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     : this._seriesField
                         ? (_c = this._viewDataStatistics) === null || _c === void 0 ? void 0 : _c.latestData[this._seriesField].values
                         : [];
-            const colorRange = getDataScheme(this._option.getTheme().colorScheme, this.type);
+            const colorRange = this._getDataScheme();
             return new ColorOrdinalScale().domain(colorDomain).range(colorRange);
         }
         getDotColorAttribute() {
@@ -67820,7 +68040,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!region) {
                     return;
                 }
-                const series = Factory.createSeries(spec.type, spec, Object.assign(Object.assign({}, this._modelOption), { region, specIndex: index, specKey: 'series', getTheme: () => this._theme, globalScale: this._globalScale }));
+                const series = Factory.createSeries(spec.type, spec, Object.assign(Object.assign({}, this._modelOption), { region, specIndex: index, specKey: 'series', globalScale: this._globalScale }));
                 if (series) {
                     series.created();
                     this._series.push(series);
@@ -67962,7 +68182,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
     class ProgressLikeSeries extends PolarSeries {
         constructor() {
             super(...arguments);
-            this._stack = true;
+            this._supportStack = true;
             this._arcGroupMark = null;
             this._getAngleValueStart = (datum) => {
                 const axis = this._getAngleAxis();
@@ -68108,7 +68328,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 x: 0,
                 y: 0,
                 path: () => {
-                    var _a;
                     const axis = this._getAngleAxis();
                     if (this._isTickMaskVisible(axis)) {
                         const { tickMask } = this._spec;
@@ -68116,7 +68335,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                         const subTickData = this._getAngleAxisSubTickData(axis);
                         const { x, y } = this.angleAxisHelper.center();
                         const radius = this._computeLayoutRadius();
-                        const markStyle = preprocessSpecOrTheme('mark-spec', style, (_a = this._option.getTheme()) === null || _a === void 0 ? void 0 : _a.colorScheme, this.type);
+                        const markStyle = preprocessSpecOrTheme('mark-spec', style, this.getColorScheme(), this.type);
                         return subTickData.map(({ value }) => {
                             const pos = this.angleAxisHelper.dataToPosition([value]) + degreeToRadian(offsetAngle);
                             const angleUnit = degreeToRadian(angle) / 2;
@@ -68306,14 +68525,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     x: () => this.angleAxisHelper.center().x,
                     y: () => this.angleAxisHelper.center().y,
                     startAngle: () => {
+                        const fieldName = this._stack ? STACK_FIELD_START : this._angleField[0];
                         const scale = this.angleAxisHelper.getScale(0);
                         const domain = scale.domain();
-                        return this._getAngleValueStart({ [STACK_FIELD_START]: domain[0] });
+                        return this._getAngleValueStart({ [fieldName]: domain[0] });
                     },
                     endAngle: () => {
+                        const fieldName = this._stack ? STACK_FIELD_END : this._angleField[0];
                         const scale = this.angleAxisHelper.getScale(0);
                         const domain = scale.domain();
-                        return this._getAngleValueEnd({ [STACK_FIELD_END]: domain[domain.length - 1] });
+                        return this._getAngleValueEnd({ [fieldName]: domain[domain.length - 1] });
                     },
                     innerRadius: this._getRadiusValueStart,
                     outerRadius: this._getRadiusValueEnd,
@@ -68380,6 +68601,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._pinMark = null;
             this._pointerMark = null;
             this._pinBackgroundMark = null;
+            this._stack = false;
         }
         setAttrFromSpec() {
             var _a;
@@ -68680,7 +68902,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return series;
         }
         transformSpec(spec) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             super.transformSpec(spec);
             let backgroundSeries = (_a = spec.series) === null || _a === void 0 ? void 0 : _a.find((series) => series.type === SeriesTypeEnum.gauge || series.type === SeriesTypeEnum.circularProgress);
             if (isNil$1(backgroundSeries)) {
@@ -68689,6 +68911,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     if (isNil$1(backgroundSeries.radiusField) && isNil$1(backgroundSeries.categoryField)) {
                         backgroundSeries.radiusField = (_d = (_c = spec.radiusField) !== null && _c !== void 0 ? _c : spec.categoryField) !== null && _d !== void 0 ? _d : spec.seriesField;
                     }
+                    if (isNil$1(backgroundSeries.valueField) && isNil$1(backgroundSeries.angleField)) {
+                        backgroundSeries.valueField = (_e = spec.valueField) !== null && _e !== void 0 ? _e : spec.angleField;
+                    }
                 }
                 if (spec.series.length === 1) {
                     spec.series.push(backgroundSeries);
@@ -68886,7 +69111,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             const wordMark = this._wordMark;
             const fillingWordMark = this._fillingWordMark;
             const textField = ((_a = this._spec.word) === null || _a === void 0 ? void 0 : _a.formatMethod) ? WORD_CLOUD_TEXT : this._nameField;
@@ -68906,7 +69131,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     visible: (datum) => !datum.isFillingWord
                 }, 'normal', AttributeLevel.Series);
                 this.setMarkStyle(wordMark, {
-                    fontFamily: (_d = (_c = (_b = this._spec.word) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fontFamily) !== null && _d !== void 0 ? _d : (_f = (_e = this._option) === null || _e === void 0 ? void 0 : _e.getTheme()) === null || _f === void 0 ? void 0 : _f.fontFamily
+                    fontFamily: (_d = (_c = (_b = this._spec.word) === null || _b === void 0 ? void 0 : _b.style) === null || _c === void 0 ? void 0 : _c.fontFamily) !== null && _d !== void 0 ? _d : (_e = this._getChartLevelTheme()) === null || _e === void 0 ? void 0 : _e.fontFamily
                 }, 'normal', AttributeLevel.User_Mark);
             }
             if (fillingWordMark) {
@@ -68925,7 +69150,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     visible: (datum) => datum.isFillingWord
                 }, 'normal', AttributeLevel.Series);
                 this.setMarkStyle(fillingWordMark, {
-                    fontFamily: (_j = (_h = (_g = this._spec.word) === null || _g === void 0 ? void 0 : _g.style) === null || _h === void 0 ? void 0 : _h.fontFamily) !== null && _j !== void 0 ? _j : (_l = (_k = this._option) === null || _k === void 0 ? void 0 : _k.getTheme()) === null || _l === void 0 ? void 0 : _l.fontFamily
+                    fontFamily: (_h = (_g = (_f = this._spec.word) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fontFamily) !== null && _h !== void 0 ? _h : (_j = this._getChartLevelTheme()) === null || _j === void 0 ? void 0 : _j.fontFamily
                 }, 'normal', AttributeLevel.User_Mark);
             }
             this._trigger.registerMark(wordMark);
@@ -68952,7 +69177,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             var _a, _b, _c, _d, _e;
             const colorList = isFillingWord ? this._wordCloudShapeConfig.fillingColorList : this._colorList;
             const colorDomain = field ? (_a = this.getViewData()) === null || _a === void 0 ? void 0 : _a.latestData.map((datum) => datum[field]) : [];
-            const colorRange = (_c = colorList !== null && colorList !== void 0 ? colorList : (_b = this._option.globalScale.getScale('color')) === null || _b === void 0 ? void 0 : _b.range()) !== null && _c !== void 0 ? _c : getDataScheme(this._option.getTheme().colorScheme, this.type);
+            const colorRange = (_c = colorList !== null && colorList !== void 0 ? colorList : (_b = this._option.globalScale.getScale('color')) === null || _b === void 0 ? void 0 : _b.range()) !== null && _c !== void 0 ? _c : this._getDataScheme();
             return (_e = (_d = new ColorOrdinalScale().domain(colorDomain)).range) === null || _e === void 0 ? void 0 : _e.call(_d, colorRange);
         }
         getWordColorAttribute(field, isFillingWord) {
@@ -68970,7 +69195,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return (datum) => colorList[0];
         }
         compile() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29;
             super.compile();
             const { width, height } = this._region.getLayoutRect();
             if (!isValidNumber$1(width) || !isValidNumber$1(height) || !(height > 0 && width > 0)) {
@@ -69031,9 +69256,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     fontSizeRange: this._fontSizeRange,
                     padding: this._fontPadding,
                     rotate: { field: WORD_CLOUD_ANGLE },
-                    fontFamily: (_g = (_d = this._fontFamilyField) !== null && _d !== void 0 ? _d : (_f = (_e = this._spec.word) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.fontFamily) !== null && _g !== void 0 ? _g : (_j = (_h = this._option) === null || _h === void 0 ? void 0 : _h.getTheme()) === null || _j === void 0 ? void 0 : _j.fontFamily,
+                    fontFamily: (_g = (_d = this._fontFamilyField) !== null && _d !== void 0 ? _d : (_f = (_e = this._spec.word) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.fontFamily) !== null && _g !== void 0 ? _g : (_h = this._getChartLevelTheme()) === null || _h === void 0 ? void 0 : _h.fontFamily,
                     fontWeight: fontWeightField ? { field: fontWeightField } : valueField ? { field: WORD_CLOUD_WEIGHT } : null,
-                    fontStyle: (_k = this._fontStyleField) !== null && _k !== void 0 ? _k : (_m = (_l = this._spec.word) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.fontStyle,
+                    fontStyle: (_j = this._fontStyleField) !== null && _j !== void 0 ? _j : (_l = (_k = this._spec.word) === null || _k === void 0 ? void 0 : _k.style) === null || _l === void 0 ? void 0 : _l.fontStyle,
                     randomVisible: this._random,
                     clip: this._wordCloudConfig.drawOutOfBound === 'clip',
                     shrink: this._wordCloudConfig.zoomToFit.shrink,
@@ -69050,39 +69275,39 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     dataIndexKey: DEFAULT_DATA_KEY,
                     size: [width, height],
                     shape: this._maskShape,
-                    text: { field: ((_o = this._spec.word) === null || _o === void 0 ? void 0 : _o.formatMethod) ? WORD_CLOUD_TEXT : this._nameField },
+                    text: { field: ((_m = this._spec.word) === null || _m === void 0 ? void 0 : _m.formatMethod) ? WORD_CLOUD_TEXT : this._nameField },
                     fontSize: valueField ? { field: valueField } : this._fontSizeRange[0],
                     fontSizeRange: this._fontSizeRange,
                     padding: this._fontPadding,
                     rotateList: rotateAngles,
-                    fontFamily: (_s = (_p = this._fontFamilyField) !== null && _p !== void 0 ? _p : (_r = (_q = this._spec.word) === null || _q === void 0 ? void 0 : _q.style) === null || _r === void 0 ? void 0 : _r.fontFamily) !== null && _s !== void 0 ? _s : (_u = (_t = this._option) === null || _t === void 0 ? void 0 : _t.getTheme()) === null || _u === void 0 ? void 0 : _u.fontFamily,
+                    fontFamily: (_r = (_o = this._fontFamilyField) !== null && _o !== void 0 ? _o : (_q = (_p = this._spec.word) === null || _p === void 0 ? void 0 : _p.style) === null || _q === void 0 ? void 0 : _q.fontFamily) !== null && _r !== void 0 ? _r : (_s = this._getChartLevelTheme()) === null || _s === void 0 ? void 0 : _s.fontFamily,
                     fontWeight: fontWeightField ? { field: fontWeightField } : valueField ? { field: WORD_CLOUD_WEIGHT } : null,
-                    fontStyle: (_v = this._fontStyleField) !== null && _v !== void 0 ? _v : (_x = (_w = this._spec.word) === null || _w === void 0 ? void 0 : _w.style) === null || _x === void 0 ? void 0 : _x.fontStyle,
-                    fillingFontFamily: (_2 = (_z = (_y = this._wordCloudShapeConfig) === null || _y === void 0 ? void 0 : _y.fillingFontFamilyField) !== null && _z !== void 0 ? _z : (_1 = (_0 = this._spec.word) === null || _0 === void 0 ? void 0 : _0.style) === null || _1 === void 0 ? void 0 : _1.fontFamily) !== null && _2 !== void 0 ? _2 : (_4 = (_3 = this._option) === null || _3 === void 0 ? void 0 : _3.getTheme()) === null || _4 === void 0 ? void 0 : _4.fontFamily,
+                    fontStyle: (_t = this._fontStyleField) !== null && _t !== void 0 ? _t : (_v = (_u = this._spec.word) === null || _u === void 0 ? void 0 : _u.style) === null || _v === void 0 ? void 0 : _v.fontStyle,
+                    fillingFontFamily: (_0 = (_x = (_w = this._wordCloudShapeConfig) === null || _w === void 0 ? void 0 : _w.fillingFontFamilyField) !== null && _x !== void 0 ? _x : (_z = (_y = this._spec.word) === null || _y === void 0 ? void 0 : _y.style) === null || _z === void 0 ? void 0 : _z.fontFamily) !== null && _0 !== void 0 ? _0 : (_1 = this._getChartLevelTheme()) === null || _1 === void 0 ? void 0 : _1.fontFamily,
                     fillingPadding: this._fillingFontPadding,
-                    fillingFontStyle: (_6 = (_5 = this._wordCloudShapeConfig) === null || _5 === void 0 ? void 0 : _5.fillingFontStyleField) !== null && _6 !== void 0 ? _6 : (_8 = (_7 = this._spec.word) === null || _7 === void 0 ? void 0 : _7.style) === null || _8 === void 0 ? void 0 : _8.fontStyle,
-                    fillingFontWeight: (_10 = (_9 = this._wordCloudShapeConfig) === null || _9 === void 0 ? void 0 : _9.fillingFontWeightField) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = this._spec.word) === null || _11 === void 0 ? void 0 : _11.style) === null || _12 === void 0 ? void 0 : _12.fontWeight,
+                    fillingFontStyle: (_3 = (_2 = this._wordCloudShapeConfig) === null || _2 === void 0 ? void 0 : _2.fillingFontStyleField) !== null && _3 !== void 0 ? _3 : (_5 = (_4 = this._spec.word) === null || _4 === void 0 ? void 0 : _4.style) === null || _5 === void 0 ? void 0 : _5.fontStyle,
+                    fillingFontWeight: (_7 = (_6 = this._wordCloudShapeConfig) === null || _6 === void 0 ? void 0 : _6.fillingFontWeightField) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = this._spec.word) === null || _8 === void 0 ? void 0 : _8.style) === null || _9 === void 0 ? void 0 : _9.fontWeight,
                     fillingRotateList: fillingRotateAngles,
-                    fillingTimes: (_13 = this._wordCloudShapeConfig) === null || _13 === void 0 ? void 0 : _13.fillingTimes,
-                    fillingXStep: (_14 = this._wordCloudShapeConfig) === null || _14 === void 0 ? void 0 : _14.fillingXStep,
-                    fillingYStep: (_15 = this._wordCloudShapeConfig) === null || _15 === void 0 ? void 0 : _15.fillingYStep,
-                    fillingXRatioStep: (_16 = this._wordCloudShapeConfig) === null || _16 === void 0 ? void 0 : _16.fillingXRatioStep,
-                    fillingYRatioStep: (_17 = this._wordCloudShapeConfig) === null || _17 === void 0 ? void 0 : _17.fillingYRatioStep,
-                    fillingInitialOpacity: (_18 = this._wordCloudShapeConfig) === null || _18 === void 0 ? void 0 : _18.fillingInitialOpacity,
-                    fillingDeltaOpacity: (_19 = this._wordCloudShapeConfig) === null || _19 === void 0 ? void 0 : _19.fillingDeltaOpacity,
-                    fillingInitialFontSize: (_20 = this._wordCloudShapeConfig) === null || _20 === void 0 ? void 0 : _20.fillingInitialFontSize,
-                    fillingDeltaFontSize: (_21 = this._wordCloudShapeConfig) === null || _21 === void 0 ? void 0 : _21.fillingDeltaFontSize,
-                    ratio: (_22 = this._wordCloudShapeConfig) === null || _22 === void 0 ? void 0 : _22.ratio,
-                    fillingRatio: (_23 = this._wordCloudShapeConfig) === null || _23 === void 0 ? void 0 : _23.fillingRatio,
-                    removeWhiteBorder: (_24 = this._wordCloudShapeConfig) === null || _24 === void 0 ? void 0 : _24.removeWhiteBorder,
-                    textLayoutTimes: (_25 = this._wordCloudShapeConfig) === null || _25 === void 0 ? void 0 : _25.textLayoutTimes,
-                    fontSizeShrinkFactor: (_26 = this._wordCloudShapeConfig) === null || _26 === void 0 ? void 0 : _26.fontSizeShrinkFactor,
-                    stepFactor: (_27 = this._wordCloudShapeConfig) === null || _27 === void 0 ? void 0 : _27.stepFactor,
-                    layoutMode: (_28 = this._wordCloudShapeConfig) === null || _28 === void 0 ? void 0 : _28.layoutMode,
-                    importantWordCount: (_29 = this._wordCloudShapeConfig) === null || _29 === void 0 ? void 0 : _29.importantWordCount,
-                    globalShinkLimit: (_30 = this._wordCloudShapeConfig) === null || _30 === void 0 ? void 0 : _30.globalShinkLimit,
-                    fontSizeEnlargeFactor: (_31 = this._wordCloudShapeConfig) === null || _31 === void 0 ? void 0 : _31.fontSizeEnlargeFactor,
-                    fillingDeltaFontSizeFactor: (_32 = this._wordCloudShapeConfig) === null || _32 === void 0 ? void 0 : _32.fillingDeltaFontSizeFactor
+                    fillingTimes: (_10 = this._wordCloudShapeConfig) === null || _10 === void 0 ? void 0 : _10.fillingTimes,
+                    fillingXStep: (_11 = this._wordCloudShapeConfig) === null || _11 === void 0 ? void 0 : _11.fillingXStep,
+                    fillingYStep: (_12 = this._wordCloudShapeConfig) === null || _12 === void 0 ? void 0 : _12.fillingYStep,
+                    fillingXRatioStep: (_13 = this._wordCloudShapeConfig) === null || _13 === void 0 ? void 0 : _13.fillingXRatioStep,
+                    fillingYRatioStep: (_14 = this._wordCloudShapeConfig) === null || _14 === void 0 ? void 0 : _14.fillingYRatioStep,
+                    fillingInitialOpacity: (_15 = this._wordCloudShapeConfig) === null || _15 === void 0 ? void 0 : _15.fillingInitialOpacity,
+                    fillingDeltaOpacity: (_16 = this._wordCloudShapeConfig) === null || _16 === void 0 ? void 0 : _16.fillingDeltaOpacity,
+                    fillingInitialFontSize: (_17 = this._wordCloudShapeConfig) === null || _17 === void 0 ? void 0 : _17.fillingInitialFontSize,
+                    fillingDeltaFontSize: (_18 = this._wordCloudShapeConfig) === null || _18 === void 0 ? void 0 : _18.fillingDeltaFontSize,
+                    ratio: (_19 = this._wordCloudShapeConfig) === null || _19 === void 0 ? void 0 : _19.ratio,
+                    fillingRatio: (_20 = this._wordCloudShapeConfig) === null || _20 === void 0 ? void 0 : _20.fillingRatio,
+                    removeWhiteBorder: (_21 = this._wordCloudShapeConfig) === null || _21 === void 0 ? void 0 : _21.removeWhiteBorder,
+                    textLayoutTimes: (_22 = this._wordCloudShapeConfig) === null || _22 === void 0 ? void 0 : _22.textLayoutTimes,
+                    fontSizeShrinkFactor: (_23 = this._wordCloudShapeConfig) === null || _23 === void 0 ? void 0 : _23.fontSizeShrinkFactor,
+                    stepFactor: (_24 = this._wordCloudShapeConfig) === null || _24 === void 0 ? void 0 : _24.stepFactor,
+                    layoutMode: (_25 = this._wordCloudShapeConfig) === null || _25 === void 0 ? void 0 : _25.layoutMode,
+                    importantWordCount: (_26 = this._wordCloudShapeConfig) === null || _26 === void 0 ? void 0 : _26.importantWordCount,
+                    globalShinkLimit: (_27 = this._wordCloudShapeConfig) === null || _27 === void 0 ? void 0 : _27.globalShinkLimit,
+                    fontSizeEnlargeFactor: (_28 = this._wordCloudShapeConfig) === null || _28 === void 0 ? void 0 : _28.fontSizeEnlargeFactor,
+                    fillingDeltaFontSizeFactor: (_29 = this._wordCloudShapeConfig) === null || _29 === void 0 ? void 0 : _29.fillingDeltaFontSizeFactor
                 });
             }
             this._data.getProduct().transform(wordCloudTransforms);
@@ -71180,7 +71405,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this.type = SeriesTypeEnum.wordCloud3d;
         }
         compile() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30;
             super.compile();
             const wordCloudTransforms = [];
             const valueField = this._valueField;
@@ -71238,9 +71463,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     fontSizeRange: this._fontSizeRange,
                     padding: this._fontPadding,
                     rotate: { field: WORD_CLOUD_ANGLE },
-                    fontFamily: (_h = (_e = this._fontFamilyField) !== null && _e !== void 0 ? _e : (_g = (_f = this._spec.word) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fontFamily) !== null && _h !== void 0 ? _h : (_k = (_j = this._option) === null || _j === void 0 ? void 0 : _j.getTheme()) === null || _k === void 0 ? void 0 : _k.fontFamily,
+                    fontFamily: (_h = (_e = this._fontFamilyField) !== null && _e !== void 0 ? _e : (_g = (_f = this._spec.word) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fontFamily) !== null && _h !== void 0 ? _h : (_j = this._getChartLevelTheme()) === null || _j === void 0 ? void 0 : _j.fontFamily,
                     fontWeight: fontWeightField ? { field: fontWeightField } : valueField ? { field: WORD_CLOUD_WEIGHT } : null,
-                    fontStyle: (_l = this._fontStyleField) !== null && _l !== void 0 ? _l : (_o = (_m = this._spec.word) === null || _m === void 0 ? void 0 : _m.style) === null || _o === void 0 ? void 0 : _o.fontStyle,
+                    fontStyle: (_k = this._fontStyleField) !== null && _k !== void 0 ? _k : (_m = (_l = this._spec.word) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.fontStyle,
                     depth_3d: this._spec.depth_3d,
                     randomVisible: this._random,
                     clip: this._wordCloudConfig.drawOutOfBound === 'clip',
@@ -71257,42 +71482,42 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     type: 'wordcloudShape',
                     size: [this._region.getLayoutRect().width, this._region.getLayoutRect().height],
                     shape: this._maskShape,
-                    postProjection: (_p = this._spec.postProjection) !== null && _p !== void 0 ? _p : 'StereographicProjection',
+                    postProjection: (_o = this._spec.postProjection) !== null && _o !== void 0 ? _o : 'StereographicProjection',
                     dataIndexKey: DEFAULT_DATA_KEY,
                     text: { field: textField },
                     fontSize: valueField ? { field: valueField } : this._fontSizeRange[0],
                     fontSizeRange: this._fontSizeRange,
                     padding: this._fontPadding,
                     rotateList: rotateAngles,
-                    fontFamily: (_t = (_q = this._fontFamilyField) !== null && _q !== void 0 ? _q : (_s = (_r = this._spec.word) === null || _r === void 0 ? void 0 : _r.style) === null || _s === void 0 ? void 0 : _s.fontFamily) !== null && _t !== void 0 ? _t : (_v = (_u = this._option) === null || _u === void 0 ? void 0 : _u.getTheme()) === null || _v === void 0 ? void 0 : _v.fontFamily,
+                    fontFamily: (_s = (_p = this._fontFamilyField) !== null && _p !== void 0 ? _p : (_r = (_q = this._spec.word) === null || _q === void 0 ? void 0 : _q.style) === null || _r === void 0 ? void 0 : _r.fontFamily) !== null && _s !== void 0 ? _s : (_t = this._getChartLevelTheme()) === null || _t === void 0 ? void 0 : _t.fontFamily,
                     fontWeight: fontWeightField ? { field: fontWeightField } : valueField ? { field: WORD_CLOUD_WEIGHT } : null,
-                    fontStyle: (_w = this._fontStyleField) !== null && _w !== void 0 ? _w : (_y = (_x = this._spec.word) === null || _x === void 0 ? void 0 : _x.style) === null || _y === void 0 ? void 0 : _y.fontStyle,
+                    fontStyle: (_u = this._fontStyleField) !== null && _u !== void 0 ? _u : (_w = (_v = this._spec.word) === null || _v === void 0 ? void 0 : _v.style) === null || _w === void 0 ? void 0 : _w.fontStyle,
                     depth_3d: this._spec.depth_3d,
-                    fillingFontFamily: (_3 = (_0 = (_z = this._wordCloudShapeConfig) === null || _z === void 0 ? void 0 : _z.fillingFontFamilyField) !== null && _0 !== void 0 ? _0 : (_2 = (_1 = this._spec.word) === null || _1 === void 0 ? void 0 : _1.style) === null || _2 === void 0 ? void 0 : _2.fontFamily) !== null && _3 !== void 0 ? _3 : (_5 = (_4 = this._option) === null || _4 === void 0 ? void 0 : _4.getTheme()) === null || _5 === void 0 ? void 0 : _5.fontFamily,
+                    fillingFontFamily: (_1 = (_y = (_x = this._wordCloudShapeConfig) === null || _x === void 0 ? void 0 : _x.fillingFontFamilyField) !== null && _y !== void 0 ? _y : (_0 = (_z = this._spec.word) === null || _z === void 0 ? void 0 : _z.style) === null || _0 === void 0 ? void 0 : _0.fontFamily) !== null && _1 !== void 0 ? _1 : (_2 = this._getChartLevelTheme()) === null || _2 === void 0 ? void 0 : _2.fontFamily,
                     fillingPadding: this._fillingFontPadding,
-                    fillingFontStyle: (_7 = (_6 = this._wordCloudShapeConfig) === null || _6 === void 0 ? void 0 : _6.fillingFontStyleField) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = this._spec.word) === null || _8 === void 0 ? void 0 : _8.style) === null || _9 === void 0 ? void 0 : _9.fontStyle,
-                    fillingFontWeight: (_11 = (_10 = this._wordCloudShapeConfig) === null || _10 === void 0 ? void 0 : _10.fillingFontWeightField) !== null && _11 !== void 0 ? _11 : (_13 = (_12 = this._spec.word) === null || _12 === void 0 ? void 0 : _12.style) === null || _13 === void 0 ? void 0 : _13.fontWeight,
+                    fillingFontStyle: (_4 = (_3 = this._wordCloudShapeConfig) === null || _3 === void 0 ? void 0 : _3.fillingFontStyleField) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = this._spec.word) === null || _5 === void 0 ? void 0 : _5.style) === null || _6 === void 0 ? void 0 : _6.fontStyle,
+                    fillingFontWeight: (_8 = (_7 = this._wordCloudShapeConfig) === null || _7 === void 0 ? void 0 : _7.fillingFontWeightField) !== null && _8 !== void 0 ? _8 : (_10 = (_9 = this._spec.word) === null || _9 === void 0 ? void 0 : _9.style) === null || _10 === void 0 ? void 0 : _10.fontWeight,
                     fillingRotateList: fillingRotateAngles,
-                    fillingTimes: (_14 = this._wordCloudShapeConfig) === null || _14 === void 0 ? void 0 : _14.fillingTimes,
-                    fillingXStep: (_15 = this._wordCloudShapeConfig) === null || _15 === void 0 ? void 0 : _15.fillingXStep,
-                    fillingYStep: (_16 = this._wordCloudShapeConfig) === null || _16 === void 0 ? void 0 : _16.fillingYStep,
-                    fillingXRatioStep: (_17 = this._wordCloudShapeConfig) === null || _17 === void 0 ? void 0 : _17.fillingXRatioStep,
-                    fillingYRatioStep: (_18 = this._wordCloudShapeConfig) === null || _18 === void 0 ? void 0 : _18.fillingYRatioStep,
-                    fillingInitialOpacity: (_19 = this._wordCloudShapeConfig) === null || _19 === void 0 ? void 0 : _19.fillingInitialOpacity,
-                    fillingDeltaOpacity: (_20 = this._wordCloudShapeConfig) === null || _20 === void 0 ? void 0 : _20.fillingDeltaOpacity,
-                    fillingInitialFontSize: (_21 = this._wordCloudShapeConfig) === null || _21 === void 0 ? void 0 : _21.fillingInitialFontSize,
-                    fillingDeltaFontSize: (_22 = this._wordCloudShapeConfig) === null || _22 === void 0 ? void 0 : _22.fillingDeltaFontSize,
-                    ratio: (_23 = this._wordCloudShapeConfig) === null || _23 === void 0 ? void 0 : _23.ratio,
-                    fillingRatio: (_24 = this._wordCloudShapeConfig) === null || _24 === void 0 ? void 0 : _24.fillingRatio,
-                    removeWhiteBorder: (_25 = this._wordCloudShapeConfig) === null || _25 === void 0 ? void 0 : _25.removeWhiteBorder,
-                    textLayoutTimes: (_26 = this._wordCloudShapeConfig) === null || _26 === void 0 ? void 0 : _26.textLayoutTimes,
-                    fontSizeShrinkFactor: (_27 = this._wordCloudShapeConfig) === null || _27 === void 0 ? void 0 : _27.fontSizeShrinkFactor,
-                    stepFactor: (_28 = this._wordCloudShapeConfig) === null || _28 === void 0 ? void 0 : _28.stepFactor,
-                    layoutMode: (_29 = this._wordCloudShapeConfig) === null || _29 === void 0 ? void 0 : _29.layoutMode,
-                    importantWordCount: (_30 = this._wordCloudShapeConfig) === null || _30 === void 0 ? void 0 : _30.importantWordCount,
-                    globalShinkLimit: (_31 = this._wordCloudShapeConfig) === null || _31 === void 0 ? void 0 : _31.globalShinkLimit,
-                    fontSizeEnlargeFactor: (_32 = this._wordCloudShapeConfig) === null || _32 === void 0 ? void 0 : _32.fontSizeEnlargeFactor,
-                    fillingDeltaFontSizeFactor: (_33 = this._wordCloudShapeConfig) === null || _33 === void 0 ? void 0 : _33.fillingDeltaFontSizeFactor
+                    fillingTimes: (_11 = this._wordCloudShapeConfig) === null || _11 === void 0 ? void 0 : _11.fillingTimes,
+                    fillingXStep: (_12 = this._wordCloudShapeConfig) === null || _12 === void 0 ? void 0 : _12.fillingXStep,
+                    fillingYStep: (_13 = this._wordCloudShapeConfig) === null || _13 === void 0 ? void 0 : _13.fillingYStep,
+                    fillingXRatioStep: (_14 = this._wordCloudShapeConfig) === null || _14 === void 0 ? void 0 : _14.fillingXRatioStep,
+                    fillingYRatioStep: (_15 = this._wordCloudShapeConfig) === null || _15 === void 0 ? void 0 : _15.fillingYRatioStep,
+                    fillingInitialOpacity: (_16 = this._wordCloudShapeConfig) === null || _16 === void 0 ? void 0 : _16.fillingInitialOpacity,
+                    fillingDeltaOpacity: (_17 = this._wordCloudShapeConfig) === null || _17 === void 0 ? void 0 : _17.fillingDeltaOpacity,
+                    fillingInitialFontSize: (_18 = this._wordCloudShapeConfig) === null || _18 === void 0 ? void 0 : _18.fillingInitialFontSize,
+                    fillingDeltaFontSize: (_19 = this._wordCloudShapeConfig) === null || _19 === void 0 ? void 0 : _19.fillingDeltaFontSize,
+                    ratio: (_20 = this._wordCloudShapeConfig) === null || _20 === void 0 ? void 0 : _20.ratio,
+                    fillingRatio: (_21 = this._wordCloudShapeConfig) === null || _21 === void 0 ? void 0 : _21.fillingRatio,
+                    removeWhiteBorder: (_22 = this._wordCloudShapeConfig) === null || _22 === void 0 ? void 0 : _22.removeWhiteBorder,
+                    textLayoutTimes: (_23 = this._wordCloudShapeConfig) === null || _23 === void 0 ? void 0 : _23.textLayoutTimes,
+                    fontSizeShrinkFactor: (_24 = this._wordCloudShapeConfig) === null || _24 === void 0 ? void 0 : _24.fontSizeShrinkFactor,
+                    stepFactor: (_25 = this._wordCloudShapeConfig) === null || _25 === void 0 ? void 0 : _25.stepFactor,
+                    layoutMode: (_26 = this._wordCloudShapeConfig) === null || _26 === void 0 ? void 0 : _26.layoutMode,
+                    importantWordCount: (_27 = this._wordCloudShapeConfig) === null || _27 === void 0 ? void 0 : _27.importantWordCount,
+                    globalShinkLimit: (_28 = this._wordCloudShapeConfig) === null || _28 === void 0 ? void 0 : _28.globalShinkLimit,
+                    fontSizeEnlargeFactor: (_29 = this._wordCloudShapeConfig) === null || _29 === void 0 ? void 0 : _29.fontSizeEnlargeFactor,
+                    fillingDeltaFontSizeFactor: (_30 = this._wordCloudShapeConfig) === null || _30 === void 0 ? void 0 : _30.fillingDeltaFontSizeFactor
                 });
             }
             this._data.getProduct().transform(wordCloudTransforms);
@@ -71312,7 +71537,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             }
         }
         initMarkStyle() {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const wordMark = this._wordMark;
             const fillingWordMark = this._fillingWordMark;
             if (wordMark) {
@@ -71332,7 +71557,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     visible: (datum) => !datum.isFillingWord
                 }, 'normal', AttributeLevel.Series);
                 this.setMarkStyle(wordMark, {
-                    fontFamily: (_c = (_b = (_a = this._spec.word) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontFamily) !== null && _c !== void 0 ? _c : (_e = (_d = this._option) === null || _d === void 0 ? void 0 : _d.getTheme()) === null || _e === void 0 ? void 0 : _e.fontFamily
+                    fontFamily: (_c = (_b = (_a = this._spec.word) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontFamily) !== null && _c !== void 0 ? _c : (_d = this._getChartLevelTheme()) === null || _d === void 0 ? void 0 : _d.fontFamily
                 }, 'normal', AttributeLevel.User_Mark);
             }
             if (fillingWordMark) {
@@ -71352,7 +71577,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     visible: (datum) => datum.isFillingWord
                 }, 'normal', AttributeLevel.Series);
                 this.setMarkStyle(fillingWordMark, {
-                    fontFamily: (_h = (_g = (_f = this._spec.word) === null || _f === void 0 ? void 0 : _f.style) === null || _g === void 0 ? void 0 : _g.fontFamily) !== null && _h !== void 0 ? _h : (_k = (_j = this._option) === null || _j === void 0 ? void 0 : _j.getTheme()) === null || _k === void 0 ? void 0 : _k.fontFamily
+                    fontFamily: (_g = (_f = (_e = this._spec.word) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.fontFamily) !== null && _g !== void 0 ? _g : (_h = this._getChartLevelTheme()) === null || _h === void 0 ? void 0 : _h.fontFamily
                 }, 'normal', AttributeLevel.User_Mark);
             }
             this._trigger.registerMark(wordMark);
@@ -72858,8 +73083,9 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         initMark() {
             var _a, _b, _c, _d, _e, _f, _g, _h;
+            this._initBarBackgroundMark();
             const labelPosition = (_a = this._spec.label) === null || _a === void 0 ? void 0 : _a.position;
-            this._rectMark = this._createMark(RangeColumnSeries.mark.bar, {
+            this._barMark = this._createMark(RangeColumnSeries.mark.bar, {
                 morph: shouldDoMorph(this._spec.animation, this._spec.morph, userAnimationConfig('bar', this._spec)),
                 defaultMorphElementKey: this.getDimensionField()[0],
                 groupKey: this._seriesField,
@@ -72897,16 +73123,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
                 const position = (_d = minLabelSpec === null || minLabelSpec === void 0 ? void 0 : minLabelSpec.position) !== null && _d !== void 0 ? _d : 'end';
                 const offset = (_e = minLabelSpec === null || minLabelSpec === void 0 ? void 0 : minLabelSpec.offset) !== null && _e !== void 0 ? _e : (this._direction === 'vertical' ? -20 : -25);
-                setRectLabelPos(this, minLabelMark, position, offset, (datum) => this._rectMark.getAttribute('x', datum), (datum) => {
+                setRectLabelPos(this, minLabelMark, position, offset, (datum) => this._barMark.getAttribute('x', datum), (datum) => {
                     return this._direction === 'vertical'
-                        ? this._rectMark.getAttribute('x', datum) +
-                            this._rectMark.getAttribute('width', datum)
-                        : this._rectMark.getAttribute('x1', datum);
-                }, (datum) => this._rectMark.getAttribute('y', datum), (datum) => {
+                        ? this._barMark.getAttribute('x', datum) +
+                            this._barMark.getAttribute('width', datum)
+                        : this._barMark.getAttribute('x1', datum);
+                }, (datum) => this._barMark.getAttribute('y', datum), (datum) => {
                     return this._direction === 'vertical'
-                        ? this._rectMark.getAttribute('y1', datum)
-                        : this._rectMark.getAttribute('y', datum) +
-                            this._rectMark.getAttribute('height', datum);
+                        ? this._barMark.getAttribute('y1', datum)
+                        : this._barMark.getAttribute('y', datum) +
+                            this._barMark.getAttribute('height', datum);
                 }, () => this._direction);
             }
             const maxLabelMark = this._maxLabelMark;
@@ -72924,16 +73150,16 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 });
                 const position = (_j = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.position) !== null && _j !== void 0 ? _j : 'start';
                 const offset = (_k = maxLabelSpec === null || maxLabelSpec === void 0 ? void 0 : maxLabelSpec.offset) !== null && _k !== void 0 ? _k : (this._direction === 'vertical' ? -20 : -25);
-                setRectLabelPos(this, maxLabelMark, position, offset, (datum) => this._rectMark.getAttribute('x', datum), (datum) => {
+                setRectLabelPos(this, maxLabelMark, position, offset, (datum) => this._barMark.getAttribute('x', datum), (datum) => {
                     return this._direction === 'vertical'
-                        ? this._rectMark.getAttribute('x', datum) +
-                            this._rectMark.getAttribute('width', datum)
-                        : this._rectMark.getAttribute('x1', datum);
-                }, (datum) => this._rectMark.getAttribute('y', datum), (datum) => {
+                        ? this._barMark.getAttribute('x', datum) +
+                            this._barMark.getAttribute('width', datum)
+                        : this._barMark.getAttribute('x1', datum);
+                }, (datum) => this._barMark.getAttribute('y', datum), (datum) => {
                     return this._direction === 'vertical'
-                        ? this._rectMark.getAttribute('y1', datum)
-                        : this._rectMark.getAttribute('y', datum) +
-                            this._rectMark.getAttribute('height', datum);
+                        ? this._barMark.getAttribute('y1', datum)
+                        : this._barMark.getAttribute('y', datum) +
+                            this._barMark.getAttribute('height', datum);
                 }, () => this._direction);
             }
         }
@@ -72965,7 +73191,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             const yScale = (_d = (_c = this._yAxisHelper) === null || _c === void 0 ? void 0 : _c.getScale) === null || _d === void 0 ? void 0 : _d.call(_c, 0);
             const { dataToPosition } = this.direction === Direction.horizontal ? this._xAxisHelper : this._yAxisHelper;
             if (this.direction === Direction.horizontal) {
-                this.setMarkStyle(this._rectMark, {
+                this.setMarkStyle(this._barMark, {
                     x: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._spec.xField[0]), {
                         bandPosition: this._bandPosition
                     }), xScale),
@@ -72977,7 +73203,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 }, 'normal', AttributeLevel.Series);
             }
             else {
-                this.setMarkStyle(this._rectMark, {
+                this.setMarkStyle(this._barMark, {
                     x: (datum) => this._getPosition(this.direction, datum),
                     y: (datum) => valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._spec.yField[0]), {
                         bandPosition: this._bandPosition
@@ -72990,6 +73216,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     }
                 }, 'normal', AttributeLevel.Series);
             }
+            this._initBarBackgroundMarkStyle();
         }
         initAnimation() {
             var _a, _b, _c, _d, _e;
@@ -73000,7 +73227,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 return xIndex || 0;
             };
             const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
-            this._rectMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('rangeColumn')) === null || _c === void 0 ? void 0 : _c({ direction: this.direction }, appearPreset), userAnimationConfig(SeriesMarkNameEnum.bar, this._spec), { dataIndex }));
+            this._barMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('rangeColumn')) === null || _c === void 0 ? void 0 : _c({ direction: this.direction }, appearPreset), userAnimationConfig(SeriesMarkNameEnum.bar, this._spec), { dataIndex }));
             if (this._minLabelMark) {
                 this._minLabelMark.setAnimationConfig(animationConfig((_d = Factory.getAnimationInKey('fadeInOut')) === null || _d === void 0 ? void 0 : _d(), userAnimationConfig(SeriesMarkNameEnum.label, this._spec), { dataIndex }));
             }
@@ -73033,7 +73260,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         _getDefaultSeriesSpec(spec) {
             var _a, _b;
-            const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { barGapInGroup: spec.barGapInGroup });
+            const series = Object.assign(Object.assign({}, super._getDefaultSeriesSpec(spec)), { barGapInGroup: spec.barGapInGroup, barBackground: spec.barBackground });
             series.bar = spec.bar;
             if (spec.direction === Direction.horizontal) {
                 series.xField = (_a = spec.xField) !== null && _a !== void 0 ? _a : [spec.minField, spec.maxField];
@@ -75672,7 +75899,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         constructor() {
             super(...arguments);
             this.type = SeriesTypeEnum.waterfall;
-            this._stack = true;
+            this._stack = false;
             this._leaderLineMark = null;
             this._stackLabelMark = null;
             this._labelMark = null;
@@ -75690,7 +75917,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
         setAttrFromSpec() {
             super.setAttrFromSpec();
-            this._stack = false;
+            this.setValueFieldToStack();
             this._fieldX = [this._fieldX[0]];
             this._fieldY = [this._fieldY[0]];
             if (isNil$1(this._seriesField)) {
@@ -75763,7 +75990,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const xIndex = (_c = (_b = (_a = this.getViewDataStatistics()) === null || _a === void 0 ? void 0 : _a.latestData) === null || _b === void 0 ? void 0 : _b[this._fieldX[0]]) === null || _c === void 0 ? void 0 : _c.values.indexOf(xValue);
                 return xIndex || 0;
             };
-            this._rectMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('waterfall')) === null || _c === void 0 ? void 0 : _c(animationParams, appearPreset), userAnimationConfig(SeriesMarkNameEnum.bar, this._spec), { dataIndex }));
+            this._barMark.setAnimationConfig(animationConfig((_c = Factory.getAnimationInKey('waterfall')) === null || _c === void 0 ? void 0 : _c(animationParams, appearPreset), userAnimationConfig(SeriesMarkNameEnum.bar, this._spec), { dataIndex }));
             if (this._leaderLineMark) {
                 this._leaderLineMark.setAnimationConfig(animationConfig((_d = Factory.getAnimationInKey('fadeInOut')) === null || _d === void 0 ? void 0 : _d(), userAnimationConfig(SeriesMarkNameEnum.leaderLine, this._spec)));
             }
@@ -75792,7 +76019,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 leaderLine.setDataView(this._totalData.getDataView(), this._totalData.getProductId());
             }
             if ((_a = this._spec.stackLabel) === null || _a === void 0 ? void 0 : _a.visible) {
-                this._rectMark.addLabelSpec(this._spec.stackLabel);
+                this._barMark.addLabelSpec(this._spec.stackLabel);
             }
         }
         initLabelMarkStyle(labelMark) {
@@ -75823,7 +76050,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     bandPosition: this._bandPosition
                 }) +
                     getBandwidth(0) * 0.5 -
-                    this._rectMark.getAttribute('width', datum) * (0.5 - pos));
+                    this._barMark.getAttribute('width', datum) * (0.5 - pos));
             }
             return valueInScaleRange(dataToPosition([datum[field]], {
                 bandPosition: this._bandPosition
@@ -75840,7 +76067,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 bandPosition: this._bandPosition
             }) +
                 getBandwidth(0) * 0.5 -
-                this._rectMark.getAttribute('height', datum) * (0.5 - pos));
+                this._barMark.getAttribute('height', datum) * (0.5 - pos));
         }
         initMarkStyle() {
             super.initMarkStyle();
@@ -77625,7 +77852,10 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                             return;
                         }
                         const selectedDatum = originalDatum
-                            ? originalDatum.filter((entry, index) => entry.parents.some((par) => { var _a; return par.key === curLinkDatum.target && ((_a = entry.parents[index - 1]) === null || _a === void 0 ? void 0 : _a.key) === curLinkDatum.source; }))
+                            ? originalDatum.filter((entry) => {
+                                const parentKeysList = entry.parents.map((item) => item.key);
+                                return parentKeysList.includes(curLinkDatum.source) && parentKeysList.includes(curLinkDatum.target);
+                            })
                             : null;
                         if (selectedDatum && selectedDatum.length) {
                             if (!highlightNodes.includes(linkDatum.source)) {
@@ -78115,11 +78345,11 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             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 : getDataScheme(this._option.getTheme().colorScheme, this.type);
+            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])) {
                 if (colorDomain.length > 10) {
-                    colorRange = (_l = getDataScheme(this._option.getTheme().colorScheme, this.type)[1]) === null || _l === void 0 ? void 0 : _l.scheme;
+                    colorRange = (_l = this._getDataScheme()[1]) === null || _l === void 0 ? void 0 : _l.scheme;
                 }
             }
             const ordinalScale = new ColorOrdinalScale();
@@ -78303,8 +78533,6 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         }
     }
 
-    const rangeAreaSeriesMark = Object.assign({}, areaSeriesMark);
-
     class RangeAreaSeries extends AreaSeries {
         constructor() {
             super(...arguments);
@@ -78536,7 +78764,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
         getColorAttribute() {
             var _a;
             return {
-                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this.getDefaultColorScale(),
+                scale: (_a = this._option.globalScale.getScale('color')) !== null && _a !== void 0 ? _a : this._getDefaultColorScale(),
                 field: this.getFieldValue[0]
             };
         }
@@ -83016,7 +83244,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 if (!pattern) {
                     return TooltipResult.failed;
                 }
-                const position = this._getActualTooltipPosition(actualTooltip, getTooltipPatternValue(pattern.position, data, params), getTooltipPatternValue(pattern.positionMode, data, params), params, this._getParentElement(spec), changePositionOnly);
+                const position = this._getActualTooltipPosition(actualTooltip, params, this._getTooltipBoxSize(actualTooltip, changePositionOnly));
                 actualTooltip.position = position;
                 if (pattern.updatePosition) {
                     actualTooltip.position = pattern.updatePosition(actualTooltip.position, data, params);
@@ -83035,26 +83263,31 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                 const patternVisible = getTooltipPatternValue(pattern.visible, data, params);
                 let tooltipContent = null;
                 tooltipContent = getShowContent(pattern, data, params);
-                const actualTooltip = Object.assign(Object.assign({}, tooltipContent), { visible: isValid$1(tooltipContent) ? patternVisible !== false : false, activeType: pattern.activeType });
+                const actualTooltip = Object.assign(Object.assign({}, tooltipContent), { visible: isValid$1(tooltipContent) ? patternVisible !== false : false, activeType: pattern.activeType, data });
                 return actualTooltip;
             };
-            this._getActualTooltipPosition = (actualTooltip, position, positionMode, params, tooltipParentElement, changePositionOnly) => {
-                var _a, _b, _c, _d, _e, _f;
+            this._getActualTooltipPosition = (actualTooltip, params, tooltipBoxSize) => {
+                var _a, _b, _c, _d, _e;
                 const event = params.event;
-                const { width: tooltipBoxWidth = 0, height: tooltipBoxHeight = 0 } = (_a = this._getTooltipBoxSize(actualTooltip, changePositionOnly)) !== null && _a !== void 0 ? _a : {};
                 const invalidPosition = {
                     x: Infinity,
                     y: Infinity
                 };
                 const { offsetX, offsetY } = this._option;
-                const tooltipSpec = this._component.getSpec();
+                const tooltipSpec = this._cacheViewSpec;
                 if (!tooltipSpec) {
                     return invalidPosition;
                 }
+                const { activeType, data } = actualTooltip;
+                const pattern = tooltipSpec[activeType];
+                const position = getTooltipPatternValue(pattern.position, data, params);
+                const positionMode = getTooltipPatternValue(pattern.positionMode, data, params);
+                const tooltipParentElement = this._getParentElement(tooltipSpec);
+                const { width: tooltipBoxWidth = 0, height: tooltipBoxHeight = 0 } = tooltipBoxSize !== null && tooltipBoxSize !== void 0 ? tooltipBoxSize : {};
                 const isCanvas = tooltipSpec.renderMode === 'canvas';
-                const canvasRect = (_b = params === null || params === void 0 ? void 0 : params.chart) === null || _b === void 0 ? void 0 : _b.getCanvasRect();
-                const canvasWidth = (_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.width) !== null && _c !== void 0 ? _c : DEFAULT_CHART_WIDTH;
-                const canvasHeight = (_d = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.height) !== null && _d !== void 0 ? _d : DEFAULT_CHART_HEIGHT;
+                const canvasRect = (_a = params === null || params === void 0 ? void 0 : params.chart) === null || _a === void 0 ? void 0 : _a.getCanvasRect();
+                const canvasWidth = (_b = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.width) !== null && _b !== void 0 ? _b : DEFAULT_CHART_WIDTH;
+                const canvasHeight = (_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.height) !== null && _c !== void 0 ? _c : DEFAULT_CHART_HEIGHT;
                 let isFixedPosition = false;
                 const containerSize = {
                     width: 0,
@@ -83068,8 +83301,8 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     containerSize.width = window.innerWidth;
                     containerSize.height = window.innerHeight;
                     if (!isCanvas) {
-                        tooltipParentElementRect = (_e = tooltipParentElement === null || tooltipParentElement === void 0 ? void 0 : tooltipParentElement.getBoundingClientRect()) !== null && _e !== void 0 ? _e : invalidPosition;
-                        const chartElement = ((_f = this._compiler.getCanvas()) !== null && _f !== void 0 ? _f : this._chartContainer);
+                        tooltipParentElementRect = (_d = tooltipParentElement === null || tooltipParentElement === void 0 ? void 0 : tooltipParentElement.getBoundingClientRect()) !== null && _d !== void 0 ? _d : invalidPosition;
+                        const chartElement = ((_e = this._compiler.getCanvas()) !== null && _e !== void 0 ? _e : this._chartContainer);
                         const chartElementRect = chartElement === null || chartElement === void 0 ? void 0 : chartElement.getBoundingClientRect();
                         relativePosOffset = {
                             x: chartElementRect.x - tooltipParentElementRect.x,
@@ -83356,14 +83589,14 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             return Object.assign(Object.assign({}, DEFAULT_OPTIONS), { offsetX: (_a = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _a !== void 0 ? _a : DEFAULT_OPTIONS.offsetX, offsetY: (_b = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _b !== void 0 ? _b : DEFAULT_OPTIONS.offsetY });
         }
         _getTooltipBoxSize(actualTooltip, changePositionOnly) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (!changePositionOnly || isNil$1(this._attributes)) {
-                const globalTheme = (_b = (_a = this._chartOption).getTheme) === null || _b === void 0 ? void 0 : _b.call(_a);
-                this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), globalTheme);
+                const { chartLevelTheme = defaultChartLevelTheme } = (_c = (_b = (_a = this._chartOption).getThemeConfig) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : {};
+                this._attributes = getTooltipAttributes(actualTooltip, this._component.getSpec(), chartLevelTheme);
             }
             return {
-                width: (_d = (_c = this._attributes) === null || _c === void 0 ? void 0 : _c.panel) === null || _d === void 0 ? void 0 : _d.width,
-                height: (_f = (_e = this._attributes) === null || _e === void 0 ? void 0 : _e.panel) === null || _f === void 0 ? void 0 : _f.height
+                width: (_e = (_d = this._attributes) === null || _d === void 0 ? void 0 : _d.panel) === null || _e === void 0 ? void 0 : _e.width,
+                height: (_g = (_f = this._attributes) === null || _f === void 0 ? void 0 : _f.panel) === null || _g === void 0 ? void 0 : _g.height
             };
         }
         _getParentElement(spec) {
@@ -84171,7 +84404,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._container = null;
         }
         _updateTooltip(visible, params, actualTooltip) {
-            var _a;
+            var _a, _b;
             if (!visible || !this.model) {
                 this.setVisibility(visible);
             }
@@ -84184,9 +84417,18 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
                     this.model.setContent();
                 }
                 this.setVisibility(visible);
-                const { x = 0, y = 0 } = (_a = actualTooltip.position) !== null && _a !== void 0 ? _a : {};
+                let { x = 0, y = 0 } = (_a = actualTooltip.position) !== null && _a !== void 0 ? _a : {};
                 const el = this.model.product;
                 if (el) {
+                    if ((_b = this._cacheViewSpec) === null || _b === void 0 ? void 0 : _b.updateElement) {
+                        this._cacheViewSpec.updateElement(el, actualTooltip, params);
+                        const position = this._getActualTooltipPosition(actualTooltip, params, {
+                            width: el.offsetWidth,
+                            height: el.offsetHeight
+                        });
+                        x = position.x;
+                        y = position.y;
+                    }
                     el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
                 }
             }
@@ -89069,7 +89311,7 @@ C0.3-1.4,0.3-1.4,0.3-1.4z;`;
             this._linkedOutOfBrushElementsMap = {};
             this._needInitOutState = true;
             this._cacheInteractiveRangeAttrs = [];
-            this._needEnablePickable = true;
+            this._needEnablePickable = false;
         }
         init() {
             var _a, _b;