异步数据加载和动态更新
异步加载
在入门示例中，数据是通过 setOption 直接更新的。但在许多情况下，数据需要频繁地通过异步加载来填充。ECharts 可以通过一种简单的方式实现异步加载。你可以在图表初始化后，通过诸如 jQuery 的函数异步获取数据，然后使用 setOption 填充数据和配置项。
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function(data) {
// Structure of data:
// {
// categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"],
// values: [5, 20, 36, 10, 10, 20]
// }
myChart.setOption({
title: {
text: 'Asynchronous Loading Example'
},
tooltip: {},
legend: {},
xAxis: {
data: data.categories
},
yAxis: {},
series: [
{
name: 'Sales',
type: 'bar',
data: data.values
}
]
});
});或者在填充数据前，先显示一个定义了所有样式的空坐标系。
var myChart = echarts.init(document.getElementById('main'));
// Show title, legends and empty axes
myChart.setOption({
title: {
text: 'Asynchronous Loading Example'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: []
},
yAxis: {},
series: [
{
name: 'Sales',
type: 'bar',
data: []
}
]
});
// Asynchronous Data Loading
$.get('data.json').done(function(data) {
// Fill in the data
myChart.setOption({
xAxis: {
data: data.categories
},
series: [
{
// Find series by name
name: 'Sales',
data: data.data
}
]
});
});例如：
更新数据时，你需要使用 name 来“导航”ECharts。在前面的例子中，图表可以根据系列的顺序正常更新，但我们建议你在更新数据时添加 name 数据。
加载动画
当加载数据需要很长时间时，用户面对只有一个坐标系的空图表会怀疑是否存在 bug。
ECharts 默认有一个简单的加载动画。你可以调用 showLoading 来显示它。当数据加载完成后，调用 hideLoading 来隐藏动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});效果如下：
动态更新
ECharts 是由数据驱动的，数据的改变会驱动图表展现的改变。因此，实现动态更新非常简单。
所有的数据更新都是通过 setOption 实现的。你只需要定期获取数据，ECharts 会找出两组数据之间的差异，并选择合适的动画方式。
请看下面的例子。