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