Echarts是一款優秀的數據可視化庫，可以幫助我們快速地將數據變成清晰明了的圖表。在實際的項目中，經常會遇到需要讀取多個json數據的情況，本文將介紹基于Echarts如何讀取多個json數據。

我們首先需要在HTML頁面中引入Echarts庫的CDN。如果是在Vue項目中使用，則可以在main.js中按照如下方式引入：

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

接下來，我們需要定義一個空的對象，用于存儲讀取到的json數據。并通過異步請求讀取多個json數據，將讀取到的數據存儲到之前定義的對象中。如下所示：

let data = {};  // 定義一個空對象，用于存儲多個json文件的數據
// 定義一個異步讀取json文件的函數
const readJsonFile = (url) =>{
return new Promise((resolve, reject) =>{
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(JSON.parse(xhr.responseText));
}
}
xhr.open('GET', url, true)
xhr.send()
})
}
// 通過異步請求讀取多個json文件，將獲取到的數據存儲到data對象中
const fetchData = async () =>{
data.file1 = await readJsonFile('file1.json');
data.file2 = await readJsonFile('file2.json');
data.file3 = await readJsonFile('file3.json');
// 更多json文件
}
fetchData();

上述代碼中，我們定義了一個異步讀取json文件的函數readJsonFile，并通過fetchData函數異步請求多個json文件。在請求完成后，將讀取到的數據存儲到之前定義的空對象data中。

最后，我們可以使用Echarts的api來繪制圖表。通過讀取之前存儲的data對象，我們可以輕松地將多個json數據轉換為圖表。詳細的圖表繪制方法不在本文討論范圍內，感興趣的讀者可以參考Echarts的官方文檔。