vue线上环境切换页面echarts第二次显示空白,且控制台没有报错,开发环境显示正常
vue3.0开发环境切换页面echarts显示正常,线上环境切换页面echarts第二次显示空白,且控制台没有报错,我们可以从canvas的特性以及缓存去找问题,文章种的四步代码经本人实测能够解决该问题
·
当存在echarts第二次显示空白,且控制台没有报错时,从以下四点入手基本上可以解决问题
// 第一 需要有固定宽高
<div id="content-analysis" style="width:100%; height:500px"></div>
// 第二 需要在页面加载完成后再去初始化
nextTick(() => {
let chartDom = document.getElementById('pie-chart');
let myChart = echarts.init(chartDom);
let option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: []
}
option && myChart.setOption(option);
})
// 第三 离开页面canvas没有被销毁导致第二次进页面无法显示,
// 在进入或者离开页面时销毁即可
echarts.init(document.getElementById('pie-chart')).dispose()
//第四 给setOption 一个延时操作
setTimeout(() => { option && myChart.setOption(option); }, 100);
更多推荐
已为社区贡献2条内容
所有评论(0)