ECharts是一款開源的JavaScript圖表庫,可以方便的實現各種數據可視化效果。ECharts支持通過json格式的數據來展示圖表,以下是如何在ECharts中使用json數據的步驟。
首先,需要創建一個空的div容器用于顯示圖表,例如以下代碼:
<div id="chart" style="width: 600px;height:400px;"></div>
接下來,需要引入ECharts的核心文件,例如以下代碼:
<script src="echarts.min.js"></script>
然后,利用jQuery或其他方式從后臺獲取json數據:
$.ajax({
type: "GET",
url: "data.json",
dataType: "json",
success: function(data) {
// 數據處理
// 創建ECharts
}
})
在success回調函數中,可以對獲取到的json數據進行一些處理,例如以下代碼:
var xAxisData = [];
var seriesData = [];
for(var i=0,len=data.length;i<len;i++) {
xAxisData.push(data[i].name);
seriesData.push(data[i].value);
}
以上代碼將json數據中的name和value屬性分別存儲到xAxisData和seriesData中,用于創建ECharts圖表。
最后,創建ECharts圖表:
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);
以上代碼采用柱狀圖作為例子,將x軸數據設為xAxisData,y軸數據設為seriesData,創建了一個簡單的柱狀圖。