原因
其实是因为echarts会自动继承父级的高度,但是现实隐藏时候display则echarts无法继承父类的宽高
解决方案
for (const [containerId, { option, config }] of this
.echartsOptions) {
this.$nextTick(() => {
let dom = document.getElementById(containerId);
let { width, height } = dom.getBoundingClientRect();
let myChart = this.$echarts.init(dom, "light");
myChart.clear();
myChart.resize();
myChart.setOption(option, config);
});
}
原理
- myChart.clear();清空画布
- myChart.resize();重置大小
二者配合:如果只是resize则在页面切换时候会有放大缩小的错觉,而clear清空画图,因为画布是空的,自然没有显示隐藏时候放大缩小的感觉