@visactor/vchart 1.3.1-test.6 → 1.3.1

package/build/index.js

@@ -7517,10 +7517,10 @@
 	  parse(data, options) {
 	    let emit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : !1;
 	    var _a;
-	    this.isRunning = !0, emit && this.target.emit("beforeParse", []);
+	    this.isRunning = !0, emit && this.target.emit("beforeParse", []), options && (this.parseOption = options);
 	    const cloneData = this.cloneParseData(data, options);
 	    if (null == options ? void 0 : options.type) {
-	      this.parseOption = options, options = cloneDeep(options);
+	      options = cloneDeep(options);
 	      const parserData = (null !== (_a = this.dataSet.getParser(options.type)) && void 0 !== _a ? _a : this.dataSet.getParser("bytejson"))(cloneData, options.options, this);
 	      this.rawData = cloneData, this.parserData = parserData, this.history && this.historyData.push(cloneData, parserData), this.latestData = parserData;
 	    } else this.parserData = cloneData, this.rawData = cloneData, this.history && this.historyData.push(cloneData), this.latestData = cloneData;
@@ -10169,6 +10169,7 @@
 	    SeriesMarkNameEnum["word"] = "word";
 	    SeriesMarkNameEnum["fillingWord"] = "fillingWord";
 	})(SeriesMarkNameEnum || (SeriesMarkNameEnum = {}));
+	const seriesMarkNameSet = new Set(Object.values(SeriesMarkNameEnum));
 
 	var MarkTypeEnum;
 	(function (MarkTypeEnum) {
@@ -10318,11 +10319,11 @@
 	        series });
 	}
 
-	function preprocessSpecOrTheme(obj, colorScheme, seriesType) {
+	function preprocessSpecOrTheme(type, obj, colorScheme, seriesType) {
 	    if (isArray$3(obj)) {
 	        return obj.map(element => {
 	            if (isObject$f(element) && !isFunction(element)) {
-	                return preprocessSpecOrTheme(element, colorScheme, seriesType);
+	                return preprocessSpecOrTheme(type, element, colorScheme, seriesType);
 	            }
 	            return element;
 	        });
@@ -10342,11 +10343,20 @@
 	            if (isColorKey(value)) {
 	                newObj[key] = getActualColor(value, colorScheme, seriesType);
 	            }
-	            else if (key === 'padding') {
-	                newObj[key] = normalizeLayoutPaddingSpec(value);
-	            }
 	            else {
-	                newObj[key] = preprocessSpecOrTheme(value, colorScheme, seriesType);
+	                newObj[key] = preprocessSpecOrTheme(seriesMarkNameSet.has(key) ? (type.includes('spec') ? 'mark-spec' : 'mark-theme') : type, value, colorScheme, seriesType);
+	            }
+	        }
+	        else if (!type.includes('mark') && key === 'padding') {
+	            newObj[key] = normalizeLayoutPaddingSpec(value);
+	        }
+	        else if (!type.includes('theme') && key === 'lineHeight' && isString(value) && value[value.length - 1] === '%') {
+	            if (isValid(obj.fontSize)) {
+	                const scale = Number.parseFloat(value.substring(0, value.length - 1)) / 100;
+	                const newValue = obj.fontSize * scale;
+	                if (isValidNumber(newValue)) {
+	                    newObj[key] = newValue;
+	                }
 	            }
 	        }
 	        else {
@@ -36419,17 +36429,17 @@
 	    defaultFontFamily: 'PingFang SC,Helvetica Neue,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol',
 	    defaultFontSize: 14,
 	    l1FontSize: 32,
-	    l1LineHeight: 48,
+	    l1LineHeight: '150%',
 	    l2FontSize: 20,
-	    l2LineHeight: 28,
+	    l2LineHeight: '140%',
 	    l3FontSize: 16,
-	    l3LineHeight: 24,
+	    l3LineHeight: '150%',
 	    l4FontSize: 14,
-	    l4LineHeight: 22,
+	    l4LineHeight: '150%',
 	    l5FontSize: 12,
-	    l5LineHeight: 16,
+	    l5LineHeight: '130%',
 	    l6FontSize: 10,
-	    l6LineHeight: 12,
+	    l6LineHeight: '120%',
 	    axisTickSize: 4,
 	    areaOpacity: 0.2
 	};
@@ -56369,7 +56379,7 @@
 	        }
 	    },
 	    nonLeafLabel: {
-	        padding: THEME_CONSTANTS.l4FontSize * 2,
+	        padding: THEME_CONSTANTS.l5FontSize * 2,
 	        style: {
 	            fill: 'black',
 	            stroke: 'white',
@@ -56863,7 +56873,30 @@
 	    },
 	    selectedBackground: {
 	        style: {
-	            lineWidth: 0
+	            fill: { type: 'palette', key: 'dataZoomSelectedColor' },
+	            fillOpacity: 0.1,
+	            outerBorder: {
+	                stroke: { type: 'palette', key: 'dataZoomSelectedColor' },
+	                strokeOpacity: 0.2,
+	                distance: -0.5,
+	                lineWidth: 1
+	            }
+	        }
+	    },
+	    selectedBackgroundChart: {
+	        area: {
+	            style: {
+	                visible: false,
+	                stroke: false,
+	                fill: { type: 'palette', key: 'dataZoomChartColor' }
+	            }
+	        },
+	        line: {
+	            style: {
+	                visible: false,
+	                stroke: { type: 'palette', key: 'dataZoomChartColor' },
+	                lineWidth: 1
+	            }
 	        }
 	    },
 	    startHandler: {
@@ -56912,13 +56945,6 @@
 	            fill: { type: 'palette', key: 'secondaryFontColor', default: '#89909d' }
 	        }
 	    },
-	    dragMask: {
-	        style: {
-	            fill: { type: 'palette', key: 'dataZoomSelectedColor', a: 0.1 },
-	            stroke: { type: 'palette', key: 'dataZoomSelectedColor', a: 0.2 },
-	            lineWidth: 3
-	        }
-	    },
 	    backgroundChart: {
 	        area: {
 	            style: {
@@ -56932,20 +56958,6 @@
 	                lineWidth: 1
 	            }
 	        }
-	    },
-	    selectedBackgroundChart: {
-	        area: {
-	            style: {
-	                stroke: false,
-	                fill: { type: 'palette', key: 'dataZoomChartColor' }
-	            }
-	        },
-	        line: {
-	            style: {
-	                stroke: { type: 'palette', key: 'dataZoomChartColor' },
-	                lineWidth: 1
-	            }
-	        }
 	    }
 	};
 
@@ -56978,7 +56990,7 @@
 	    }
 	};
 
-	const DEFAULT_CONTINUOUS_LEGEND_THEME = {
+	const DEFAULT_CONTINUOUS_LEGEND_THEME$1 = {
 	    orient: 'right',
 	    position: 'middle',
 	    padding: [16, 24],
@@ -57029,7 +57041,7 @@
 	    }
 	};
 
-	const handlerTheme$1 = {
+	const handlerTheme$2 = {
 	    style: {
 	        symbolType: 'circle',
 	        lineWidth: 0,
@@ -57045,20 +57057,20 @@
 	    }
 	};
 	const colorLegend = {
-	    horizontal: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { rail: {
+	    horizontal: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { rail: {
 	            width: 200,
 	            height: 8,
 	            style: {
 	                fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
 	            }
-	        }, handler: handlerTheme$1 }),
-	    vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { rail: {
+	        }, handler: handlerTheme$2 }),
+	    vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { rail: {
 	            width: 8,
 	            height: 200,
 	            style: {
 	                fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
 	            }
-	        }, handler: handlerTheme$1 })
+	        }, handler: handlerTheme$2 })
 	};
 
 	const discreteLegend = {
@@ -57122,7 +57134,7 @@
 	    allowAllCanceled: false
 	};
 
-	const handlerTheme = {
+	const handlerTheme$1 = {
 	    style: {
 	        symbolType: 'circle',
 	        lineWidth: 0,
@@ -57134,24 +57146,21 @@
 	        fill: { type: 'palette', key: 'dataZoomHandlerFillColor' }
 	    }
 	};
-	const sizeLegend = Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { horizontal: {
-	        sizeBackground: {
+	const sizeLegend = {
+	    horizontal: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { sizeBackground: {
 	            fill: { type: 'palette', key: 'dataZoomChartColor' }
-	        },
-	        track: {
+	        }, track: {
 	            style: {
 	                fill: { type: 'palette', key: 'dataZoomSelectedColor', a: 0.8 }
 	            }
-	        },
-	        rail: {
+	        }, rail: {
 	            width: 200,
 	            height: 4,
 	            style: {
 	                fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
 	            }
-	        },
-	        handler: handlerTheme
-	    }, vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { sizeBackground: {
+	        }, handler: handlerTheme$1 }),
+	    vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME$1), { sizeBackground: {
 	            fill: { type: 'palette', key: 'dataZoomChartColor' }
 	        }, track: {
 	            style: {
@@ -57163,7 +57172,8 @@
 	            style: {
 	                fill: { type: 'palette', key: 'dataZoomBackgroundColor' }
 	            }
-	        }, handler: handlerTheme }) });
+	        }, handler: handlerTheme$1 })
+	};
 
 	const mapLabel = {
 	    visible: true,
@@ -57466,14 +57476,12 @@
 	    padding: 8,
 	    titleStyle: {
 	        fontSize: THEME_CONSTANTS.l5FontSize,
-	        lineHeight: THEME_CONSTANTS.l5LineHeight,
 	        fontFamily: THEME_CONSTANTS.defaultFontFamily,
 	        fontWeight: 'bold',
 	        fill: { type: 'palette', key: ['titleFontColor', 'primaryFontColor'] }
 	    },
 	    contentStyle: {
 	        fontSize: THEME_CONSTANTS.l5FontSize,
-	        lineHeight: THEME_CONSTANTS.l5LineHeight,
 	        fontFamily: THEME_CONSTANTS.defaultFontFamily,
 	        fill: { type: 'palette', key: 'secondaryFontColor' }
 	    },
@@ -57546,6 +57554,111 @@
 	    animationThreshold: 2000
 	};
 
+	const DEFAULT_CONTINUOUS_LEGEND_THEME = {
+	    orient: 'right',
+	    position: 'middle',
+	    padding: 30,
+	    title: {
+	        visible: false,
+	        padding: 0,
+	        textStyle: {
+	            fontSize: THEME_CONSTANTS.defaultFontSize,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'titleFontColor' }
+	        },
+	        space: 12
+	    },
+	    handler: {
+	        visible: true
+	    },
+	    startText: {
+	        style: {
+	            fontSize: THEME_CONSTANTS.defaultFontSize,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'labelFontColor' }
+	        }
+	    },
+	    endText: {
+	        style: {
+	            fontSize: THEME_CONSTANTS.defaultFontSize,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'labelFontColor' }
+	        }
+	    },
+	    handlerText: {
+	        style: {
+	            fontSize: THEME_CONSTANTS.defaultFontSize,
+	            fontWeight: 'normal',
+	            fill: { type: 'palette', key: 'labelFontColor' }
+	        }
+	    }
+	};
+
+	const handlerTheme = {
+	    style: {
+	        symbolType: 'circle',
+	        lineWidth: 4,
+	        outerBorder: { distance: 2, lineWidth: 1, stroke: '#ccc' },
+	        size: 10,
+	        stroke: '#fff'
+	    }
+	};
+	({
+	    horizontal: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { rail: {
+	            width: 200,
+	            height: 8,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        }, handler: handlerTheme }),
+	    vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { rail: {
+	            width: 8,
+	            height: 200,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        }, handler: handlerTheme })
+	});
+
+	const getHandlerTheme = (align) => ({
+	    style: {
+	        symbolType: getSizeHandlerPath(align),
+	        fill: '#fff',
+	        lineWidth: 1,
+	        size: 10,
+	        stroke: '#ccc',
+	        outerBorder: false
+	    }
+	});
+	({
+	    horizontal: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { sizeBackground: {
+	            fill: '#cdcdcd'
+	        }, track: {
+	            style: {
+	                fill: 'rgba(20,20,20,0.1)'
+	            }
+	        }, rail: {
+	            width: 200,
+	            height: 4,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        }, handler: getHandlerTheme('top') }),
+	    vertical: Object.assign(Object.assign({}, DEFAULT_CONTINUOUS_LEGEND_THEME), { sizeBackground: {
+	            fill: '#cdcdcd'
+	        }, track: {
+	            style: {
+	                fill: 'rgba(20,20,20,0.1)'
+	            }
+	        }, rail: {
+	            width: 4,
+	            height: 200,
+	            style: {
+	                fill: 'rgba(0,0,0,0.04)'
+	            }
+	        }, handler: getHandlerTheme('right') })
+	});
+
 	const colorScheme = {
 	    default: {
 	        dataScheme,
@@ -57575,7 +57688,19 @@
 
 	const darkTheme = {
 	    name: 'dark',
-	    colorScheme
+	    colorScheme,
+	    component: {
+	        dataZoom: {
+	            selectedBackground: {
+	                style: {
+	                    fillOpacity: 0.4,
+	                    outerBorder: {
+	                        strokeOpacity: 0.4
+	                    }
+	                }
+	            }
+	        }
+	    }
 	};
 
 	const builtinThemeMap = new Map([
@@ -57583,6 +57708,13 @@
 	    [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));
+	    }
+	});
 
 	class InstanceManager {
 	    static registerInstance(instance) {
@@ -57614,7 +57746,7 @@
 	        if (!name) {
 	            return;
 	        }
-	        ThemeManager.themes.set(name, mergeTheme({}, ThemeManager.getDefaultTheme(), theme));
+	        ThemeManager.themes.set(name, getMergedTheme(theme));
 	    }
 	    static getTheme(name) {
 	        return ThemeManager.themes.get(name) || ThemeManager.getDefaultTheme();
@@ -57642,14 +57774,8 @@
 	        return ThemeManager._currentThemeName;
 	    }
 	}
-	ThemeManager.themes = new Map();
+	ThemeManager.themes = themes;
 	ThemeManager._currentThemeName = defaultThemeName;
-	ThemeManager.registerTheme(defaultThemeName, builtinThemeMap.get(defaultThemeName));
-	builtinThemeMap.forEach((theme, name) => {
-	    if (name !== defaultThemeName) {
-	        ThemeManager.registerTheme(name, theme);
-	    }
-	});
 
 	var GrammarType;
 	(function (GrammarType) {
@@ -58634,14 +58760,14 @@
 	        const userTheme = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.theme) !== null && _b !== void 0 ? _b : this._option.theme;
 	        if (isString(userTheme)) {
 	            const theme = mergeTheme({}, ThemeManager.getTheme(userTheme));
-	            this._currentTheme = preprocessSpecOrTheme(theme, theme.colorScheme);
+	            this._currentTheme = preprocessSpecOrTheme('theme', theme, theme.colorScheme);
 	            this._currentThemeName = userTheme;
 	        }
 	        else {
 	            const theme = mergeTheme({}, ThemeManager.getTheme(this._currentThemeName), userTheme !== null && userTheme !== void 0 ? userTheme : {});
-	            this._currentTheme = preprocessSpecOrTheme(theme, theme.colorScheme);
+	            this._currentTheme = preprocessSpecOrTheme('theme', theme, theme.colorScheme);
 	        }
-	        setPoptipTheme(preprocessSpecOrTheme(mergeSpec({}, (_c = this._currentTheme.component) === null || _c === void 0 ? void 0 : _c.poptip)));
+	        setPoptipTheme(preprocessSpecOrTheme('mark-theme', mergeSpec({}, (_c = this._currentTheme.component) === null || _c === void 0 ? void 0 : _c.poptip)));
 	        (_d = this._compiler) === null || _d === void 0 ? void 0 : _d.setBackground(this._getBackground());
 	    }
 	    _getBackground() {
@@ -59786,18 +59912,33 @@
 	        });
 	    }
 	    _mergeThemeToSpec() {
-	        const chartSpec = this.getChart().getSpec();
-	        this._spec = mergeSpec({}, this._theme, this._getDefaultSpecFromChart(chartSpec), this._originalSpec);
+	        if (this._shouldMergeThemeToSpec()) {
+	            const specFromChart = this._getDefaultSpecFromChart(this.getChart().getSpec());
+	            const merge = (originalSpec) => mergeSpec({}, this._theme, this._prepareSpecBeforeMergingTheme(specFromChart), this._prepareSpecBeforeMergingTheme(originalSpec));
+	            if (isArray$3(this._originalSpec)) {
+	                this._spec = this._originalSpec.map(spec => merge(spec));
+	            }
+	            else {
+	                this._spec = merge(this._originalSpec);
+	            }
+	        }
+	        this._prepareSpecAfterMergingTheme();
 	    }
 	    _getDefaultSpecFromChart(chartSpec) {
 	        return {};
 	    }
-	    _preprocessSpec(obj) {
+	    _shouldMergeThemeToSpec() {
+	        return true;
+	    }
+	    _prepareSpecBeforeMergingTheme(obj) {
+	        return obj;
+	    }
+	    _prepareSpecAfterMergingTheme(obj) {
 	        var _a, _b, _c;
 	        if (!arguments.length) {
 	            obj = this._spec;
 	        }
-	        const newObj = preprocessSpecOrTheme(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, (_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);
 	        if (!arguments.length) {
 	            this._spec = newObj;
 	        }
@@ -61732,7 +61873,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.3.0";
+	const version = "1.3.1";
 	Logger.getInstance(LoggerLevel.Error);
 
 	const Appear_ClipIn$1 = {
@@ -64754,7 +64895,6 @@
 	            super._initTheme((_a = globalTheme.series[this.type]) !== null && _a !== void 0 ? _a : {});
 	        }
 	        this._mergeThemeToSpec();
-	        this._preprocessSpec();
 	    }
 	    _createMark(markInfo, option = {}) {
 	        var _a, _b, _c, _d;
@@ -65253,8 +65393,8 @@
 	        }
 	        return array((_b = this._spec.xField) !== null && _b !== void 0 ? _b : this.fieldX);
 	    }
-	    fillData() {
-	        super.fillData();
+	    viewDataUpdate(d) {
+	        super.viewDataUpdate(d);
 	        if (this.sortDataByAxis) {
 	            this._sortDataInAxisDomain();
 	        }
@@ -66665,7 +66805,8 @@
 	            progressiveStep: spec.progressiveStep,
 	            progressiveThreshold: spec.progressiveThreshold,
 	            background: spec.seriesBackground,
-	            invalidType: spec.invalidType
+	            invalidType: spec.invalidType,
+	            seriesField: spec.seriesField
 	        };
 	        return series;
 	    }
@@ -71870,18 +72011,30 @@
 	MapChart.type = ChartTypeEnum.map;
 	MapChart.view = 'singleDefault';
 
+	function transformInvalidValue(value) {
+	    if (!couldBeValidNumber(value)) {
+	        return 0;
+	    }
+	    return Number.parseFloat(value);
+	}
 	const pie = (originData, op) => {
 	    const data = originData.map((datum) => (Object.assign({}, datum)));
 	    if (!data || data.length === 0) {
 	        return data;
 	    }
 	    const { angleField, startAngle, endAngle, asStartAngle, asEndAngle, asMiddleAngle, asRadian, asRatio, asQuadrant, asK } = op;
-	    const total = data.reduce((sum, d) => Number.parseFloat(d[angleField]) + sum, 0);
-	    const max = data.reduce((m, d) => Math.max(m, Number.parseFloat(d[angleField])), -Infinity);
+	    let total = 0;
+	    let max = -Infinity;
+	    for (let index = 0; index < data.length; index++) {
+	        const angleFieldValue = transformInvalidValue(data[index][angleField]);
+	        total += angleFieldValue;
+	        max = Math.max(angleFieldValue, max);
+	    }
 	    const intervalAngle = endAngle - startAngle;
 	    let lastAngle = startAngle;
 	    data.forEach(d => {
-	        const ratio = Number.parseFloat(d[angleField]) / total;
+	        const angleFieldValue = transformInvalidValue(d[angleField]);
+	        const ratio = total ? angleFieldValue / total : 0;
 	        const radian = ratio * intervalAngle;
 	        asRatio && (d[asRatio] = ratio);
 	        asStartAngle && (d[asStartAngle] = lastAngle);
@@ -71889,10 +72042,12 @@
 	        asMiddleAngle && (d[asMiddleAngle] = lastAngle + radian / 2);
 	        asRadian && (d[asRadian] = radian);
 	        asQuadrant && (d[asQuadrant] = computeQuadrant$2(lastAngle + radian / 2));
-	        asK && (d[asK] = Number.parseFloat(d[angleField]) / max);
+	        asK && (d[asK] = max ? angleFieldValue / max : 0);
 	        lastAngle = d[asEndAngle];
 	    });
-	    data[data.length - 1][asEndAngle] = endAngle;
+	    if (total !== 0) {
+	        data[data.length - 1][asEndAngle] = endAngle;
+	    }
 	    return data;
 	};
 
@@ -80914,23 +81069,12 @@
 	        else {
 	            super._initTheme(getComponentThemeFromGlobalTheme(this.type, globalTheme, this._originalSpec, this._option.getChart()));
 	        }
-	        if (this._shouldMergeThemeToSpec) {
-	            if (isArray$3(this._originalSpec)) {
-	                this._spec = this._originalSpec.map(spec => merge$2({}, this._theme, spec));
-	            }
-	            else {
-	                this._mergeThemeToSpec();
-	            }
-	        }
-	        this._preprocessSpec();
+	        this._mergeThemeToSpec();
 	        const { padding, noOuterPadding = true, orient } = this._spec;
 	        if (noOuterPadding && padding && orient) {
 	            this._spec.padding = Object.assign(Object.assign({}, normalizeLayoutPaddingSpec(padding)), { [orient]: 0 });
 	        }
 	    }
-	    _shouldMergeThemeToSpec() {
-	        return true;
-	    }
 	    getContainer() {
 	        if (!this._container) {
 	            this._container = this._option.globalInstance.getStage().find(node => node.name === 'root', true);
@@ -81645,6 +81789,17 @@
 	        this._startHandlerSize = startHandlerVisble ? this._spec.startHandler.style.size : 0;
 	        this._endHandlerSize = endHandlerVisble ? this._spec.endHandler.style.size : 0;
 	    }
+	    _prepareSpecBeforeMergingTheme(originalSpec) {
+	        const newSpec = Object.assign({}, originalSpec);
+	        const { selectedBackgroundChart = {} } = newSpec;
+	        const { line, area } = selectedBackgroundChart;
+	        if (line || area) {
+	            newSpec.selectedBackgroundChart = Object.assign(Object.assign({}, selectedBackgroundChart), { line: line && line.visible !== false
+	                    ? Object.assign(Object.assign({}, line), { style: Object.assign(Object.assign({}, line.style), { visible: true }) }) : line, area: area && area.visible !== false
+	                    ? Object.assign(Object.assign({}, area), { style: Object.assign(Object.assign({}, area.style), { visible: true }) }) : area });
+	        }
+	        return newSpec;
+	    }
 	    onLayoutEnd(ctx) {
 	        this._updateScaleRange();
 	        super.onLayoutEnd(ctx);
@@ -83777,8 +83932,8 @@
 	            label: Object.assign({ style: isFunction(spec.label.style)
 	                    ? (datum, index, data, layer) => {
 	                        var _a;
-	                        const style = this._preprocessSpec(spec.label.style(datum.rawValue, index, datum, data, layer));
-	                        return transformToGraphic(this._preprocessSpec(mergeSpec({}, (_a = this._theme.label) === null || _a === void 0 ? void 0 : _a.style, style)));
+	                        const style = this._prepareSpecAfterMergingTheme(spec.label.style(datum.rawValue, index, datum, data, layer));
+	                        return transformToGraphic(this._prepareSpecAfterMergingTheme(mergeSpec({}, (_a = this._theme.label) === null || _a === void 0 ? void 0 : _a.style, style)));
 	                    }
 	                    : transformToGraphic(spec.label.style), formatMethod: spec.label.formatMethod
 	                    ? (value, datum, index) => {
@@ -83793,8 +83948,8 @@
 	                style: isFunction(spec.tick.style)
 	                    ? (value, index, datum, data) => {
 	                        var _a;
-	                        const style = this._preprocessSpec(spec.tick.style(value, index, datum, data));
-	                        return transformToGraphic(this._preprocessSpec(mergeSpec({}, (_a = this._theme.tick) === null || _a === void 0 ? void 0 : _a.style, style)));
+	                        const style = this._prepareSpecAfterMergingTheme(spec.tick.style(value, index, datum, data));
+	                        return transformToGraphic(this._prepareSpecAfterMergingTheme(mergeSpec({}, (_a = this._theme.tick) === null || _a === void 0 ? void 0 : _a.style, style)));
 	                    }
 	                    : transformToGraphic(spec.tick.style),
 	                state: transformStateStyle(spec.tick.state),
@@ -83823,7 +83978,7 @@
 	                    ? (datum, index) => {
 	                        var _a, _b;
 	                        const style = spec.grid.style((_a = datum.datum) === null || _a === void 0 ? void 0 : _a.rawValue, index, datum.datum);
-	                        return transformToGraphic(this._preprocessSpec(mergeSpec({}, (_b = this._theme.grid) === null || _b === void 0 ? void 0 : _b.style, style)));
+	                        return transformToGraphic(this._prepareSpecAfterMergingTheme(mergeSpec({}, (_b = this._theme.grid) === null || _b === void 0 ? void 0 : _b.style, style)));
 	                    }
 	                    : transformToGraphic(spec.grid.style)
 	            },
@@ -85623,6 +85778,7 @@
 	        this._orient = 'left';
 	        this._visible = true;
 	        this._position = 'middle';
+	        this._preSelectedData = [];
 	        this._selectedData = [];
 	        this.effect = {
 	            onSelectedDataChange: () => {
@@ -85694,9 +85850,13 @@
 	    }
 	    changeRegions(regions) {
 	    }
+	    _bindLegendDataChange() {
+	        this._preSelectedData = [...this._selectedData];
+	        this._initSelectedData();
+	    }
 	    initData() {
 	        const legendData = this._initLegendData();
-	        legendData.target.addListener('change', this._initSelectedData.bind(this));
+	        legendData.target.addListener('change', this._bindLegendDataChange.bind(this));
 	        this._legendData = new CompilableData(this._option, legendData);
 	        this._initSelectedData();
 	        eachSeries(this._regions, s => {
@@ -85785,12 +85945,29 @@
 	        result.y2 = result.y1 + height;
 	        return result;
 	    }
+	    onDataUpdate() {
+	        var _a, _b;
+	        if (JSON.stringify(this._preSelectedData) === JSON.stringify(this._selectedData)) {
+	            return;
+	        }
+	        if (this._legendComponent) {
+	            const attrs = this._getLegendAttributes(this.getLayoutRect());
+	            if (!isEqual$1(attrs, this._cacheAttrs)) {
+	                this._legendComponent.setAttributes(mergeSpec({}, attrs, {
+	                    defaultSelected: this._selectedData
+	                }));
+	            }
+	        }
+	        (_b = (_a = this.effect).onSelectedDataChange) === null || _b === void 0 ? void 0 : _b.call(_a);
+	        this.event.emit(ChartEvent.legendSelectedDataChange, { model: this });
+	    }
 	    clear() {
 	        if (this._legendComponent) {
 	            this._container.removeChild(this._legendComponent);
 	            this._legendComponent = null;
 	        }
 	        this._cacheAttrs = null;
+	        this._preSelectedData = null;
 	        super.clear();
 	    }
 	}
@@ -85903,7 +86080,7 @@
 	    }
 	    _getLegendAttributes(rect) {
 	        const layout = this.layoutOrient === 'bottom' || this.layoutOrient === 'top' ? 'horizontal' : 'vertical';
-	        const attrs = Object.assign({ layout, items: this._getLegendItems(), zIndex: this.layoutZIndex, maxWidth: rect.width, maxHeight: rect.height }, getLegendAttributes(this._spec, rect));
+	        const attrs = Object.assign(Object.assign({ layout, items: this._getLegendItems(), zIndex: this.layoutZIndex }, getLegendAttributes(this._spec, rect)), { maxWidth: rect.width, maxHeight: rect.height });
 	        this._addDefaultTitleText(attrs);
 	        return attrs;
 	    }
@@ -89094,7 +89271,12 @@
 	MarkPoint.speckey = 'markPoint';
 
 	function escapeHTML(value) {
-	    return String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\(/g, '&#40;');
+	    return String(value)
+	        .replace(/&/g, '&amp;')
+	        .replace(/</g, '&lt;')
+	        .replace(/>/g, '&gt;')
+	        .replace(/\(/g, '&#40;')
+	        .replace(/  /g, ' &nbsp;');
 	}
 	const getTooltipContentValue = (field, datum, params) => {
 	    if (isNil(field)) {
@@ -91317,7 +91499,7 @@
 	    }
 	    _initTheme(theme) {
 	        super._initTheme(theme);
-	        this._spec.style = this._preprocessSpec(mergeSpec({}, this._theme, this._originalSpec.style));
+	        this._spec.style = this._prepareSpecAfterMergingTheme(mergeSpec({}, this._theme, this._originalSpec.style));
 	    }
 	    _shouldMergeThemeToSpec() {
 	        return false;