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

ppylox
·9/8/2022·2 阅读
AI 摘要模型根据正文自动生成,仅供参考

Vue3项目中使用ECharts时,切换菜单后二次渲染图表不显示,但数据和DOM均正常。原因是图表DOM上的`_echarts_instance_`属性ID未变,导致ECharts认为无需重新渲染。解决方法是在调用`echarts.init`前,先通过`removeAttribute('_echarts_instance_')`删除该属性,再初始化图表即可正常显示。

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

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

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

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

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

相关文章