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

大家好我是图恩,在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方法就可以解决这个问题。

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):