【HZHE001】黃子涵學習Echarts
阿新 • • 發佈：2022-03-26
快速上手
獲取 Apache ECharts
在 https://www.jsdelivr.com/package/npm/echarts 選擇 dist/echarts.js，點選並儲存為 echarts.js 檔案。
引入 Apache ECharts
在剛才儲存 echarts.js 的目錄新建一個 HZHE001.html 檔案，內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <script src="echarts.js"></script> </head> <body> </body> </html>
開啟這個 HZHE001.html，你會看到一片空白。
但是不要擔心，開啟控制檯確認沒有報錯資訊，就可以進行下一步。
繪製一個簡單的圖表
在繪圖前我們需要為 ECharts 準備一個定義了高寬的 DOM 容器。在剛才的例子 </head> 之後，新增：
<body>
<!-- 為 ECharts 準備一個定義了寬高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然後就可以通過 echarts.init 方法初始化一個 echarts
setOption 方法生成一個簡單的柱狀圖，下面是完整程式碼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>黃子涵學習Echarts</title> <script src="echarts.js"></script> </head> <body> <!-- 為 ECharts 準備一個定義了寬高的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data: ['黃子涵'] }, xAxis: { data: ['HZH1', 'HZH2', 'HZH3', 'HZH4', 'HZH5', 'HZH6'] }, yAxis: {}, series: [ { name: '黃子涵', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>