近年來，以數據可視化出名的ECharts成為了數據界的寵兒。在ECharts的基礎上，我們可以將各種數據進行可視化展示，這便是一種直觀且易于理解的方式。

其中從JSON數據生成圖表也是ECharts中的一種非常基礎且常用的功能。下面我們就通過一段簡單的代碼來了解如何使用ECharts從JSON數據中生成圖表。

var myChart = echarts.init(document.getElementById('myChart'));
var data = [
{"rank": 1, "name": "張三", "score": 90},
{"rank": 2, "name": "李四", "score": 80},
{"rank": 3, "name": "王五", "score": 70},
{"rank": 4, "name": "趙六", "score": 60},
{"rank": 5, "name": "孫七", "score": 50}
];
var option = {
title: {
text: '學生成績排名'
},
xAxis: {
type: 'category',
data: ['張三', '李四', '王五', '趙六', '孫七']
},
yAxis: {
type: 'value'
},
series: [{
data: [90, 80, 70, 60, 50],
type: 'bar'
}]
};
myChart.setOption(option);

以上代碼中我們首先通過

函數獲取到一個圖表容器，并將其通過ID定位到了HTML代碼中。由于我們此時沒有提供任何圖表數據，因此接下來我們手動構造了一個示例JSON數據并賦值給了變量data。

接下來，我們通過一個options對象來設置圖表的各種屬性。其中，包括標題title、橫坐標xAxis、縱坐標yAxis、以及圖表的series。

options中的各個屬性的含義如下所示：

• title.text：標題名稱
• xAxis.type：橫軸數據類型，這里是類別型數據
• xAxis.data：橫軸上的數據項
• yAxis.type：縱軸數據類型，這里是數值型數據
• series.data：series中的數據來源
• series.type：series的類型，這里是柱狀圖

最后，我們將option傳遞給我們的圖表容器，并通過

函數來渲染圖表。