Echarts中异步数据加载与更新(下)

2,529 阅读1分钟

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);
}