ECharts是一個非常流行的開源的可視化庫。它可以幫助我們實(shí)現(xiàn)各種類型的圖表，如柱狀圖、折線圖、散點(diǎn)圖等等。ECharts還提供了一個非常強(qiáng)大的特性，就是可以從JSON上的數(shù)據(jù)庫讀取數(shù)據(jù)集，使得我們可以在網(wǎng)頁上實(shí)時地顯示數(shù)據(jù)庫中的數(shù)據(jù)。下面我們就來看一下如何在ECharts上加載JSON上的數(shù)據(jù)庫。

// 通過ajax加載json數(shù)據(jù)
$.ajax({
type: "GET",
url: "data.json",  // 數(shù)據(jù)庫地址
data: {},
dataType: "json",
success: function (data) {
var users = [];  // 定義一個存放數(shù)據(jù)的數(shù)組
for (var i = 0; i< data.length; i++) {
users.push({
'name': data[i].name,
'age': data[i].age,
'sex': data[i].sex,
'city': data[i].city
});
}
},
error: function (xhr, textStatus, errorThrown) {
console.log(xhr);
console.log(textStatus);
console.log(errorThrown);
}
});
// 將數(shù)據(jù)庫中的數(shù)據(jù)傳給ECharts
option = {
tooltip: {},
legend: {
data: ['用戶']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '用戶',
type: 'bar',
data: []
}]
};
// 將數(shù)據(jù)傳給xAxis和series
for (var i = 0; i< users.length; i++) {
option.xAxis.data.push(users[i].name);
option.series[0].data.push(users[i].age);
}

上述代碼中，我們通過ajax從json上的數(shù)據(jù)庫中讀取到數(shù)據(jù)，并存放在一個數(shù)組中。然后將數(shù)據(jù)傳給ECharts的xAxis和series，最終實(shí)現(xiàn)了從JSON上的數(shù)據(jù)庫加載數(shù)據(jù)集的效果。