echarts是一個非常流行的數(shù)據(jù)可視化庫，但是很多人可能在使用它時遇到過解析json數(shù)據(jù)格式化的問題。這篇文章就來介紹一下echarts如何解析json數(shù)據(jù)格式化。

//假設(shè)我們有一個json數(shù)據(jù)如下：
{
"name": "John",
"age": 30,
"city": "New York"
}
//我們可以用echarts中的option來定義一個柱狀圖
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
//但是如果我們要把json數(shù)據(jù)作為x軸數(shù)據(jù)，那么我們需要對option進(jìn)行修改：
option = {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
//我們需要先把x軸的data設(shè)置為空數(shù)組，然后使用JavaScript中的for-in循環(huán)來遍歷我們的json數(shù)據(jù)，把每個key的值push進(jìn)x軸的data數(shù)組中。
var jsonData = {
"name": "John",
"age": 30,
"city": "New York"
};
option = {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
for(var key in jsonData){
option.xAxis.data.push(jsonData[key]);
}
//這樣我們就完成了對json數(shù)據(jù)的解析和格式化，可以把它用于echarts中的x軸，達(dá)到我們想要的效果。