vue3中如何解决echarts 二次渲染时不显示的问题？

作者: 图恩分类: 开发笔记阅读: 1082字数: 429发布时间： 2022-09-08 23:33:32

大家好我是图恩，在vue3.0项目中使用echarts的时候发现第一次获取到数据后正常渲染了echarts图，在切换到其他菜单后再切回来时发现echarts就不显示了，通过打印日志查看发现数据是正常获取到，而且方法也执行了，但是图就是不显示，通过浏览器的元素检查也能发现dom是存在的。

但是在图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。

解决办法就是在初始化echarts前删除这个属性：

let dsiab_com = document.getElementById("dayViews")
  dsiab_com.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(dsiab_com);

通过这个删除操作再执行init方法就可以解决这个问题。