echarts - 如何动态更新 echarts 绘图主题
问题描述
有人可以向我解释如何在不重新加载页面的情况下从浅色主题切换到深色主题吗?
我有这段代码可以检查主题是浅色还是深色,并且我想根据主题动态更改主题。
到目前为止我的代码
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);
}
推荐阅读
- android - 如何在低于 Android 9.0 的版本中使用 Biometric Prompt API
- r - 更改“likert”标准文本
- sql - 使用 SQL 查询输出进行操作
- r - 按另一个字符串中存在的字符串合并数据帧
- spring - Spring Mail 身份验证失败
- javascript - 在js中打开模态
- c++ - 错误错误:'void*' 不是指向对象的指针类型
- assembly - 在 C++ 中创建 *int - 在将函数返回值分配给全局之前,MSVC 额外存储/重新加载函数返回值的意义何在?
- node.js - 字符串到 Mongodb 查询
- reactjs - React 的 setState 只是选择性地更新状态