问题描述:在本地环境中发现可以加载出绘图,但是在测试环境下绘图默认不显示,在切换DOM后再返回或刷新页面后可以加载出绘图(注:标签利用id属性来实现echarts的渲染)。
问题原因:①两个及以上的地方使用echarts图形界面,检查下每个容器的id值是不是都是唯一的,如果有重名的话,后面的会覆盖前面的,导致前面的不显示。
②再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
(图表的dom属性中发现了一个特殊的属性:_echarts_instance_,对应的值是一个id,可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染。)。
③从接口获取数据后DOM节点还没有被渲染。
问题解决:
①在echarts重新创建前,移除之前创建的实例并且重新创建一个Echarts实例。
document.getElementById('加载的echarts DOM元素').removeAttribute('_echarts_instance_');
②此外,还可以尝试用$nextTick的方法等数据获取后对echarts进行初始化绘图。