提交 19b8b48d 编写于 作者: P pissang

fix(option): check the missing component before merge theme

Fix #14844
上级 a50c9fac
......@@ -137,6 +137,22 @@ const BUILTIN_CHARTS_MAP = {
const componetsMissingLogPrinted: Record<string, boolean> = {};
function checkMissingComponents(option: ECUnitOption) {
each(option, function (componentOption, mainType: ComponentMainType) {
if (!ComponentModel.hasClass(mainType)) {
if (__DEV__) {
const componentImportName = BUITIN_COMPONENTS_MAP[mainType as keyof typeof BUITIN_COMPONENTS_MAP];
if (componentImportName && !componetsMissingLogPrinted[componentImportName]) {
error(`Component ${mainType} is used but not imported.
import { ${componentImportName} } from 'echarts/components';
echarts.use([${componentImportName}]);`);
componetsMissingLogPrinted[componentImportName] = true;
}
}
}
});
}
class GlobalModel extends Model<ECUnitOption> {
// @readonly
option: ECUnitOption;
......@@ -238,6 +254,9 @@ class GlobalModel extends Model<ECUnitOption> {
if (!type || type === 'recreate') {
const baseOption = optionManager.mountOption(type === 'recreate');
if (__DEV__) {
checkMissingComponents(baseOption);
}
if (!this.option || type === 'recreate') {
initBase(this, baseOption);
......@@ -308,16 +327,6 @@ class GlobalModel extends Model<ECUnitOption> {
}
if (!ComponentModel.hasClass(mainType)) {
if (__DEV__) {
const componentImportName = BUITIN_COMPONENTS_MAP[mainType as keyof typeof BUITIN_COMPONENTS_MAP];
if (componentImportName && !componetsMissingLogPrinted[componentImportName]) {
error(`Component ${mainType} is used but not imported.
import { ${componentImportName} } from 'echarts/components';
echarts.use([${componentImportName}]);`);
componetsMissingLogPrinted[componentImportName] = true;
}
}
// globalSettingTask.dirty();
option[mainType] = option[mainType] == null
? clone(componentOption)
......@@ -990,6 +999,7 @@ function mergeTheme(option: ECUnitOption, theme: ThemeOption): void {
if (name === 'colorLayer' && notMergeColorLayer) {
return;
}
// If it is component model mainType, the model handles that merge later.
// otherwise, merge them here.
if (!ComponentModel.hasClass(name)) {
......
......@@ -32,7 +32,7 @@ use([PieChart, TitleComponent, CanvasRenderer]);
import { EChartsOption } from '../../../../src/export/option';
function createChart(): EChartsType {
function createChart(theme?: object): EChartsType {
const el = document.createElement('div');
Object.defineProperty(el, 'clientWidth', {
get() {
......@@ -44,7 +44,7 @@ function createChart(): EChartsType {
return 400;
}
});
const chart = init(el);
const chart = init(el, theme);
return chart;
};
......@@ -61,11 +61,15 @@ echarts.use([${seriesImportName}]);`;
}
// !!!!IMPORTANTE NOTE:
// DO NOT test on the same component twice.
// Because error message will be cached. It will not report on the same component twice.
describe('model_componentMissing', function () {
const oldConsoleErr = console.error;
it('Should report grid component missing error', function () {
const chart = createChart();
const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
xAxis: {},
......@@ -81,7 +85,6 @@ describe('model_componentMissing', function () {
it('Should report dataZoom component missing error', function () {
const chart = createChart();
const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
dataZoom: {}
......@@ -95,7 +98,6 @@ describe('model_componentMissing', function () {
it('Should not report title component missing error', function () {
const chart = createChart();
const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
title: {},
......@@ -108,7 +110,6 @@ describe('model_componentMissing', function () {
it('Should report funnel series missing error', function () {
const chart = createChart();
const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
series: [{
......@@ -124,7 +125,6 @@ describe('model_componentMissing', function () {
it('Should not report pie series missing error', function () {
const chart = createChart();
const oldConsoleErr = console.error;
console.error = jest.fn();
chart.setOption<EChartsOption>({
series: [{
......@@ -132,6 +132,20 @@ describe('model_componentMissing', function () {
}]
});
expect(console.error).not.toBeCalled();
console.error = oldConsoleErr;
});
it('Should not report visualMap component missing error when using theme', function () {
const chart = createChart({
visualMap: {
borderColor: '#71708A'
}
});
console.error = jest.fn();
chart.setOption<EChartsOption>({});
expect(console.error).not.toBeCalled();
console.error = oldConsoleErr;
});
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册