当存在echarts第二次显示空白,且控制台没有报错时,从以下四点入手基本上可以解决问题
// 第一 需要有固定宽高
<div style="width:100%; height:500px"></div>
// 第二 需要在页面加载完成后再去初始化
nextTick(() => {
let chartDom = ('pie-chart');
let myChart = (chartDom);
let option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: []
}
option && (option);
})
// 第三 离开页面canvas没有被销毁导致第二次进页面无法显示,
// 在进入或者离开页面时销毁即可
(('pie-chart')).dispose()
//第四 给setOption 一个延时操作
setTimeout(() => { option && (option); }, 100);