Echart是一種非常流行的數據可視化解決方案，它支持各種類型的數據展現，比如折線圖、柱狀圖、散點圖、餅圖等等。而在Echart中，常常需要從外部讀取數據，這時候就需要使用到JSON文件。

// sample.json
{
"category": ["蘋果", "香蕉", "橙子", "梨子"],
"series": [
{
"name": "產量",
"type": "bar",
"data": [100, 200, 150, 80]
},
{
"name": "銷售量",
"type": "bar",
"data": [80, 180, 120, 70]
},
{
"name": "庫存",
"type": "bar",
"data": [20, 20, 30, 10]
}
]
}

以上是一個簡單的JSON數據文件，其包含了一個類別數組和多個數據系列。接下來我們就可以使用Echart來渲染這個圖表了。

// 引入Echart庫
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>// 獲取DOM元素
const chartDom = document.getElementById('chart');
// 初始化Echart實例
const chart = echarts.init(chartDom);
// 異步讀取JSON數據文件
fetch('./sample.json')
.then(response =>response.json())
.then(data =>{
// 使用數據渲染圖表
chart.setOption({
title: {
text: '水果產銷庫存'
},
legend: {
data: data.series.map(item =>item.name)
},
xAxis: {
type: 'category',
data: data.category
},
yAxis: {
type: 'value'
},
series: data.series
});
});

以上代碼中，我們使用了fetch API來異步讀取JSON數據文件，然后將數據傳遞給Echart實例的setOption方法，從而渲染出了一個簡單的圖表。