首先初始化一个ECharts实例:
var myChart = echarts.init(document.getElementById("main"));
接着随便放几个内容进去:
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
boundaryGap:false,
data: []
}]
});
所有的动态更新,修改数据后,直接再setOption即可,比如上面的图表没有内容,然后:
var names = [1, 2, 3];
var nums = [3, 4, 5];
myChart.setOption({
xAxis: {
data: names
},
series: [{
name: '销量',
data: nums
}]
})
这样就可以异步更新内容了。中间可以加入loading页面,通过下面代码启动
myChart.showLoading();
通过下面代码关闭
myChart.hideLoading()
当然,也可以通过对names[]和nums[]不断push的方法,动态加入新的数据。
names.push(nname);
nums.push(nnum);
但是这样图表会越来越密集,所以可以做一个判断,
if (names.length>7){
names.shift();
nums.shift();
}
shift方法就是删除数组中的第一个数据,返回值为删除的值。