vue使用echarts图表切换页面返回后二次渲染图表不显示的问题及解决方法

1,562 阅读1分钟

一、问题描述

使用echarts图表时,切换页面后返回图表不显示,发现第一次能渲染,但点击其他页面在点击回来就不渲染了,这个bug本地情况是没有的,发布线上才有。

二、解决方案

  • 在图表的dom属性中发现了一个特殊的属性:echarts_instance,对应的值是一个id,可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。
  • 于是再次基础之上,使用如下解决方案:
  • 在重新初始化创建的时候,移除之前创建的实例重新创建一个Echarts实例
//在初始化init之前,使用下方代码即可
document.getElementById("myChart").removeAttribute('_echarts_instance_');