非同步資料載入和動態更新
非同步載入
在入門示例中，資料是透過 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 會找出兩組資料之間的差異，並選擇合適的動畫方式。
請看下面的例子。