异步数据加载和动态更新
异步加载
在快速上手一节中的示例中，数据是在初始化时直接通过 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 来匹配数据。在前面的示例中，图表能够正常更新是依赖于系列（series）的顺序，但我们更推荐在更新数据时加上 name。
loading 动画
如果数据加载时间较长，用户面对只有一个坐标轴的空图表可能会怀疑是出现了 bug。
ECharts 默认提供了一个简单的加载动画。你只需要调用 showLoading 即可显示。当数据加载完成后，调用 hideLoading 隐藏动画。
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});效果如下
动态更新
ECharts 是由数据驱动的，数据的改变会驱动图表展现的变化。因此，实现动态更新非常简单。
所有数据的更新都通过 setOption 实现。你只需要定时获取数据，ECharts 会找到两组数据之间的差异，并采用合适的过渡动画。
看下面的示例。
