ECharts 是一個(gè)強(qiáng)大的可視化工具庫，能夠快速地生成各種酷炫的數(shù)據(jù)圖表。下面，我們將介紹如何使用 ECharts 獲取本地 JSON 數(shù)據(jù)。
首先，我們需要在 HTML 中引入 ECharts 庫和一個(gè)渲染容器，如下：
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="container" style="width: 600px;height:400px;"></div> </body> </html>
然后，在 JavaScript 中定義一個(gè)變量，存放 JSON 數(shù)據(jù)，如下：
var data = [
{
"name": "北京",
"value": 200
},
{
"name": "上海",
"value": 300
},
{
"name": "廣州",
"value": 400
},
{
"name": "深圳",
"value": 500
},
{
"name": "杭州",
"value": 600
}
];最后，在 JavaScript 中使用 ECharts 的 API 將數(shù)據(jù)渲染成圖表，如下：
var myChart = echarts.init(document.getElementById('container'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {},
tooltip: {},
legend: {},
xAxis: {
data: data.map(function(item) {
return item.name;
})
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: data.map(function(item) {
return item.value;
})
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);通過上面的步驟，我們就可以在頁面中顯示一個(gè)簡單的柱狀圖，并且數(shù)據(jù)來自于本地的 JSON 文件。
上一篇python 正則 傳參
下一篇c 如何修改json文件