Echart在Vue3使用时在页面切换后切换回来显示空白问题

552 阅读1分钟

报错:dom重复加载

原因:dom上已经挂载过图表了,当我们切换后dom上的图表并没有卸载

解决办法:在页面的onMounted生命周期中先卸载图表后面再加载图表,这样就不会出现重复渲染dom的bug了

解决代码:

let del = () => {
      echarts.init(document.getElementById('{此为图表挂载的dom节点}')).dispose() 
    	// dispose()方法用来卸载图表节点
    }

let chart = () => {
    let oPie = echarts.getInstanceByDom(document.getElementById('numberOfEssay'))
    if (oPie == null) {
      oPie = echarts.init(document.getElementById('numberOfEssay'))
    }
    //图表代码
    //.....
}


onMounted(() => {
        nextTick(() => {
          del()
          chart()  
          /*
          	就是先卸载后安装这样就不会报错了
          */
        })
    })