ECharts 是一款由百度開發的可視化圖表庫，支持多種圖表類型以及數據源格式，非常適合前端開發人員使用。在實際項目使用中，我們常常需要將后臺返回的 JSON 數據進行解析，然后渲染成對應的圖表。本文將介紹如何在前端中讀取 JSON 數據并使用 ECharts 渲染出柱狀圖。

// JSON 數據格式
var data = {
"list": [
{"name": "張三", "score": 80},
{"name": "李四", "score": 70},
{"name": "王五", "score": 90},
{"name": "趙六", "score": 60}
]
};
// 解析 JSON 數據
var xAxisData = [], // x軸數據
seriesData = []; // 數據
for(var i = 0; i< data.list.length; i++) {
xAxisData.push(data.list[i].name);
seriesData.push(data.list[i].score);
}
// 渲染柱狀圖
var myChart = echarts.init(document.getElementById('chart'));
var option = {
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [{
data: seriesData,
type: 'bar'
}]
};
myChart.setOption(option);

首先需要將 JSON 數據格式化，只保留需要的數據，這里我們只需要姓名和分數兩個字段。然后將數據分別存儲到 xAxisData 和 seriesData 兩個數組中。接下來就是 ECharts 的渲染代碼，通過初始化 myChart，定義柱狀圖的 option 參數，最后調用 setOption 方法即可。這樣就可以將數據渲染成具有交互性的柱狀圖了。