亲测有效,echarts刷新图表,清空图表数据

最近在用echarts进行前台图表展现,发现每次加载若是数据不变,则图表不变化,所以进行了一些尝试。html

首先,简要说一下我理解的echarts:echarts

一、引入echarts的js文件;3d

二、经过var mychartDiv=document.getElementById("id")获取div对象,而后在此div中填图表数据,理解这个就很清楚的知道怎么在一个页面中放入多个图表了;htm

三、获取div对象后能够经过var myEchart=echarts.init(mychartDiv)初始化echarts实例;对象

四、经过myEchart.removeAttribute("_echarts_instance_");在每次清空后从新加载;(本节标题的重点)blog

五、定义echartOption; var echartOption={},具体见官网写得很详细,传送门:https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChartsrem

六、最后,经过前面获得的实例经过myEchart.setOption(echartOption,true);便可显示图表。get

看到这儿若是还出现没有清空图表的状况,能够在it

经过$("#id")).empty()方法在加载echarts前对div 进行清空,io

或者document.getElementById('id').innerHTML = "",

或者$('#id').html("");

这样就能够完美解决问题。

=========================我是分隔符==========================

若是到如今你尚未看懂,总结2步:

一、清空图表所在的div,js代码是document.getElementById('bigDiv').innerHTML = ""

二、在echarts.init(document.getElementById("id"))前增长代码document.getElementById("id").removeAttribute("_echarts_instance_");

若是有疑问欢迎留言。

效果图以下:

 更改前,若是数据加载失败图表仍在:

 

 更改后,若是加载失败图表也消失:

 

 下面是正常状况下的图表:

 

 

 

 

 

 

 

 

 

 

原文出处:https://www.cnblogs.com/jmwan/p/11989410.html

相关文章
相关标签/搜索