先設置好別的樣式，顯示出一個空的直角坐標軸，然后獲取并填入數據，操作如下：
var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的坐標軸
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
// 通過調用 showLoading 方法顯示加載動畫
myChart.showLoading();
// 異步加載數據
$.get('data.json').done(function (data) {
// 當數據加載完成后再調用 hideLoading 方法將加載動畫隱藏
myChart.hideLoading();
// 填入數據
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: data.data
}]
});
});
實驗發現，通過 get 請求回來的 data 是字符串格式，不便操作，用 ajax 返回的 data 是 object 對象，代碼如下：
// 異步加載數據
$.ajax({
url: '/tjtb/open_tjtb_yzcj_chart/',
type: 'GET',
dataType: 'json',
success: function(data) {
// 當數據加載完成后再調用 hideLoading 方法將加載動畫隱藏
myChart.hideLoading();
// 填入數據
myChart.setOption({
dataset: {
source: data.source
},
series: data.serie
});
}
});
【詳情文檔】https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-m16h28xk.html
