Echarts 是一款基于 JavaScript 的開源可視化圖表庫,可以通過圖表直觀地展示數據,使數據更加易于理解和分析。Echarts 可以從各種數據源中獲取數據,如本地 JSON 文件、數據庫、Web API 等。下面我們就來介紹如何使用 Echarts 顯示本地 JSON:
// HTML 代碼 <div id="chart"></div> // JavaScript 代碼 var myChart = echarts.init(document.getElementById('chart')); $.getJSON('data.json', function (data) { myChart.setOption({ title: { text: '數據統計' }, tooltip: {}, legend: { data:['訪問量'] }, xAxis: { data: data.categories }, yAxis: {}, series: [{ name: '訪問量', type: 'bar', data: data.data }] }); });
以上代碼將本地 JSON 文件 'data.json' 中的數據讀取出來,并通過 Echarts 的 API 將數據可視化呈現在頁面中,其中包括標題、坐標軸、圖例和統計圖表。可以通過 Echarts 的豐富配置項對圖表進行自定義,例如更改圖表類型、顏色、字體等等。