定制软件开发Echarts重新加载数据但不重新渲染的原因和解决方法

一、需求

定制软件开发有一个页面展示数据图表，但是第一次进入该页面是正常渲染的，当从这个页面跳出来，再次进入的话依然是调用的echarts初始化的图表，导致页面渲染不成功，即不渲染图表。
（注：我是开发环境未发现该问题，打包部署后发现该问题）。

二、Echarts渲染的逻辑

如果 echarts 未实例化则进⾏实例化过程，⼀旦实例化，便会在div容器⽣成⼀个 echarts_instance属性，该属性值即为当前 echarts 的ID，然后根据该ID进⾏渲染。

三、重新加载数据但不重新渲染的原因

第⼀次渲染图表后，便有了ID，但是我们⾮第⼀次加载数据时，图表的 echarts_instance 属性值我们没有显式引⽤，所以此时，待渲染的图表在原有的div容器中，匹配不到想要渲染的图表，则出现数据加载成功，但是不渲染的情况。

四、解决方案

由于容器上已经有 echarts_instance ，还是上次的，所以Echarts是不会重新初始化的，需要手动将DOM上的 echarts_instance 属性移除， 再次进行初始化， 然后 setOption 即在离开该页面的时候清空一下 echarts_instance 属性。

解决方案：
在setoption之前写入一行代码
document.getElementById(‘xxx’).removeAttribute(‘echarts_instance’);

解决方案代码：

// 在setoption之前写入一行代码document.getElementById('xxx').removeAttribute('_echarts_instance_');
1
2