Echarts中异步数据加载与更新(下)
数据的动态更新
ECharts由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。
所有数据的更新都通过setOption实现,你只需要定时获取数据,setOption填入数据,而不用考虑数据到底产生了哪些变化,ECharts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
ECharts 3 中移出了ECharts 2 中的addData方法。如果只需要加入单个数据,可以先data.push(value)后setOption。
<button onclick=“addData()”>数量增加</button>
var datas = [5,10,20,10,15,25]
var option = {
... ,
series:{
name:'销量',
type:'bar',
data:datas
}
}
function addData(){
var inc = Math.floor(Math.random()*10)
for(var i in datas){
datas[i] = datas[i]+inc;
}
myChart.clear();
myChart.setOption(option);
}