最近在使用 echarts 做數據可視化時，遇到了一個問題：無法讀取到提供的 JSON 數據文件。

我的項目結構是這樣的：

│   index.html
│   data.json
│   
└───echarts
echarts.min.js

在 index.html 中，我使用 Ajax 方法讀取 data.json 文件：

var data;
$.ajax({
type: "GET",
url: "./data.json",
dataType: "json",
success: function(result){
data = result;
},
async: false
});

然后使用 echarts.min.js 進行數據可視化：

var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption({
title: {
text: '柱狀圖'
},
xAxis: {
data: data.category
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: data.data
}]
});

但是，當我打開網頁時，發現圖表上沒有任何數據。經過一番排查，發現是無法讀取到 JSON 數據文件。

經過查看網絡 Console，發現報錯信息為：

Failed to load resource: the server responded with a status of 404 (Not Found)

我檢查了文件路徑是否正確，也嘗試使用絕對路徑，但是問題仍然存在。

最后，我發現問題在于我的項目是在本地運行。瀏覽器會將本地文件轉換為 URL 形式，因此在使用 Ajax 讀取文件時，需要在 url 參數中添加協議頭 file://。

var data;
$.ajax({
type: "GET",
url: "file:///D:/project/data.json",
dataType: "json",
success: function(result){
data = result;
},
async: false
});

這樣修改后，問題得以解決。

總結：在本地運行的項目中，使用 Ajax 讀取文件時需要在 url 參數中添加協議頭 file://。