解决echarts图表在显示没有数据后再切换后渲染不出的问题

  1. 在 echarts 正常渲染后,会在容器 div 上面添加一个自定义的属性 _echarts_instance_,比如 <div id="ec_container" _echarts_instance_="ec_1543635936716"></div>
  2. 假设 echarts 里面的数据都是从 ajax 的方式来获取的,当某一次数据请求失败的时候,会在 div#ec_container 里面插入 一段 html ,比如 <span>暂无数据</span>,此时的 div#ec_container 变成了 <div id="ec_container" _echarts_instance_="ec_1543635936716"><span>暂无数据</span></div>
  3. 当再次切换搜索条件,获取新的数据的时候,ajax请求成功,数据也是没问题的,但是此时 echarts 图 渲染不出来,页面上面依然显示的是 “暂无数据”,此时的 div#ec_container 依然是 <div id="ec_container" _echarts_instance_="ec_1543635936716"><span>暂无数据</span></div>
  4. 无意中,我发现当我手动把 div#ec_container 的自定义属性 echarts_instance 去掉之后,再获取数据的时候,echarts 图能够正常渲染。
  5. 所以我的解决办法是:当获取数据失败,往 div#ec_container 容器中插入 <span>暂无数据</span> html 片段之后,手动删除掉 div#ec_container 容器的 echarts_instance,这样问题就解决了。
原文地址:https://www.cnblogs.com/bber/p/10233612.html