echarts 短时间内重新渲染图标不显示/空白问题

本文主要是介绍echarts 短时间内重新渲染图标不显示/空白问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.问题详细描述

项目框架背景是vue3，在页面实现echarts时，出现了在首次渲染echarts图表>退出系统->再次进入echarts图表页面的过程中，再次进入echarts图表时 不显示的问题。效果图如下。

2.解决方法

在观察中，得知数据获取中并没有问题，那就是在数据在图表的渲染过程中出现了问题。

再去观察图表的渲染过程层，发现图表的DOM种存在一个特殊的属性，_echarts_instance_。

这个东西相当于是一个ID，图表在每次刷新的过程中，它都会发生变化，然后重新渲染。

联想到我使用的Vue+vue-router的框架，答案就呼之欲出了。我猜测的是，由于存在这个属性的变更，但是vue的渲染特殊性，在页面跳转与返回时，修改的是路由，导致图标ec并没有发生改变，导致在渲染的时候，echarts认为并不需要重新渲染，导致出现有数据但是没有出现图标的问题。

到这里就可以针对性解决这个问题。找到这个属性，将它删除。

const LC = document.getElementById("chartLeft")
LC.removeAttribute('_echarts_instance_');
let leftChart = echarts.init(LC);
leftChart.setOption(option)

再次尝试，果然就OK了。

问题虽然暂时解决了，但是在去翻echarts API的时候，并没有找到相关的介绍。这里我就默认是这个原因了 也许是误打误撞刚好解决了问题，也许这样解决问题还有着什么弊端。如果看到这篇文章的你有兴趣（默认你也出现了这样的问题），可以深究问题，回来贴一下答案。

这篇关于echarts 短时间内重新渲染图标不显示/空白问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---