如何动态更新echarts plot主题
How to update the echarts plot theme dynamicaly
有人可以向我解释如何在不重新加载页面的情况下从浅色主题切换到深色主题吗??
我有这段代码可以检查主题是浅色还是深色,我想根据主题动态更改主题。
到目前为止我的代码
initECharts(days: any, hours: any, data: any) {
if (this._chart) {
this._chart.clear();
this._chart = null;
}
// console.log('days: ', this.days);
// console.log('hours: ', this.hours);
// console.log('values: ', this.values);
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}
好的,我找到了。
每次你想动态更新主题例如一个按钮或一个可观察的或承诺,你必须调用这个方法
echarts.dispose(this._chart);
然后你调用initMethod,例子:
this.initECharts();
在我的例子中,init 方法看起来像这样。
initECharts(days: any, hours: any, data: any) {
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}
有人可以向我解释如何在不重新加载页面的情况下从浅色主题切换到深色主题吗??
我有这段代码可以检查主题是浅色还是深色,我想根据主题动态更改主题。
到目前为止我的代码
initECharts(days: any, hours: any, data: any) {
if (this._chart) {
this._chart.clear();
this._chart = null;
}
// console.log('days: ', this.days);
// console.log('hours: ', this.hours);
// console.log('values: ', this.values);
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}
好的,我找到了。
每次你想动态更新主题例如一个按钮或一个可观察的或承诺,你必须调用这个方法
echarts.dispose(this._chart);
然后你调用initMethod,例子:
this.initECharts();
在我的例子中,init 方法看起来像这样。
initECharts(days: any, hours: any, data: any) {
data = this.reconstructData(days, hours, data);
// const x: any = document.getElementById('main');
const theme = (this._themeService.theme === 'dark') ? 'dark' : 'light';
console.log('theme', theme);
const domEl: any = this.main.nativeElement;
this._chart = echarts.init(domEl, theme);
// specify chart configuration item and data
const option: any = {
tooltip: {
position: 'top'
},
animation: false,
grid: {
height: '50%',
y: '10%'
},
xAxis: {
type: 'category',
data: hours,
splitArea: {
show: true
},
nameTextStyle: {
color: 'red'
}
},
yAxis: {
type: 'category',
data: days,
splitArea: {
show: true
}
},
visualMap: {
min: 0,
max: 10,
calculable: true,
orient: 'horizontal',
left: 'center',
bottom: '15%'
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// use configuration item and data specified to show chart
this._chart.setOption(option);
}