Echarts是一個基于JavaScript的數(shù)據(jù)可視化庫，可以通過圖表來展示數(shù)據(jù)。為了在Echarts中展示數(shù)據(jù)，需要將數(shù)據(jù)源轉(zhuǎn)換為JSON格式的數(shù)據(jù)。本文介紹如何連接JSON文件，并將其中的數(shù)據(jù)展示在Echarts中。

首先，需要在HTML頁面中引入Echarts的JS文件，并在頁面中創(chuàng)建一個div容器，用于展示圖表。以下是引入JS文件以及創(chuàng)建div容器的代碼：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
<div id="chart-container" style="height: 400px;">
接下來，需要創(chuàng)建一個JSON文件，并在其中定義需要展示的數(shù)據(jù)。以下是一個簡單的JSON文件示例：
{
"name": "中國",
"data": [
{
"year": "2010",
"value": 11920
},
{
"year": "2011",
"value": 12600
},
{
"year": "2012",
"value": 13500
},
{
"year": "2013",
"value": 14370
},
{
"year": "2014",
"value": 15720
}
]
}
在JavaScript中，可以通過XMLHttpRequest對象獲取JSON文件中的數(shù)據(jù)，并將其轉(zhuǎn)換為Echarts所需的格式。以下是獲取JSON數(shù)據(jù)并轉(zhuǎn)換格式的代碼：
// 創(chuàng)建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 打開JSON文件
xhr.open("GET", "data.json", true);
// 設(shè)置響應(yīng)類型
xhr.responseType = "json";
// 發(fā)送請求
xhr.send();
// 響應(yīng)成功返回數(shù)據(jù)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 轉(zhuǎn)換數(shù)據(jù)格式
var option = {
title: {
text: xhr.response.name
},
tooltip: {},
xAxis: {
type: 'category',
data: xhr.response.data.map(function (item) {
return item.year;
})
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: xhr.response.data.map(function (item) {
return item.value;
})
}]
};
// 創(chuàng)建圖表
var myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
}
};
以上代碼通過XMLHttpRequest對象獲取JSON文件中的數(shù)據(jù)，并將其轉(zhuǎn)換為Echarts的格式。最后，通過Echarts的init方法創(chuàng)建一個圖表對象，并將轉(zhuǎn)換后的數(shù)據(jù)作為參數(shù)傳入myChart的setOption方法中，即可在頁面中展示數(shù)據(jù)。