在網站開發中,經常需要使用統計圖表來展示數據,此時我們可以使用 echarts 來完成。那么如何在 HTML 中嵌入 echarts 統計圖表呢?下面是詳細的步驟。
第一步,下載 echarts 庫,本文以 echarts 5 為例。將 echarts.min.js 文件下載到本地,并引入到 html 文件中。代碼如下:
<script src="echarts.min.js"></script>
第二步,創建一個 div 作為容器,用于展示 echarts 統計圖表。需要給 div 設置好樣式,方便展示圖表。如下:
<div id="chart" style="width: 800px;height:600px"></div>
第三步,使用 JavaScript 編寫 echarts 統計圖表的配置項代碼,包括圖表類型、數據、樣式等。代碼如下:
var myChart = echarts.init(document.getElementById('chart')); var option = { title: { text: '某地區蒸發量和降水量' }, tooltip: {}, legend: { data:['蒸發量','降水量'] }, xAxis: { data: ["1月","2月","3月","4月","5月","6月"] }, yAxis: {}, series: [{ name: '蒸發量', type: 'bar', data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7] }, { name: '降水量', type: 'bar', data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7] }] }; myChart.setOption(option);
第四步,將配置項應用到 echarts 統計圖表中,即可在網頁中展示出效果。代碼如下:
myChart.setOption(option);
最后,網頁中就能展示出我們編寫的 echarts 統計圖表了。以上就是使用 echarts 在 HTML 中展示統計圖表的詳細步驟。
上一篇python 集合的運算
下一篇vue http劫持