ECharts中实现异步数据更新非常简单,在图标初始化后不管任何时候只要通过jQuery等工具异步获取数据后通过setOption填入数据和配置即可更新数据。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
或者先设置样式,显示空的直角坐标轴,然后后去数据填入数据
var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
建议:在更新数据时,最好加上系列的name
loading动画
ECharts默认提供简单的加载动画,只需要调用showLoading方法显示;数据记在完之后再调用hideLoading方法隐藏加载动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
动态更新
ECharts由数据驱动,数据的改变驱动图表展现的改变。
所有的数据更新都需要通过setOption实现,只需要定时获取数据。