使用echarts(視覺化圖表庫)
阿新 • • 發佈：2022-04-10
一:echarts
1.簡介
一個基於 JavaScript 的開源視覺化圖表庫
- echarts官網使用教程: https://echarts.apache.org/zh/index.html
2.echars的使用匯入CDN
1.匯入echars的CDN標籤
# 標籤
<script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>
3.繪製一個簡單的圖表
在繪圖前我們需要為 ECharts 準備一個定義了高寬的 DOM 容器。在剛才的例子 之後，新增：
<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"> <title>Title</title> <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script> </head> <body> <!-- 為 ECharts 準備一個定義了寬高的 DOM --> <div id="main" style="width: 100%;height:800px;"></div> </body> <script> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 option = { title: { text: 'Referer of a Website', subtext: 'Fake Data', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: 'Access From', type: 'pie', radius: '50%', data: [ { value: 1048, name: 'Search Engine' }, { value: 735, name: 'Direct' }, { value: 580, name: 'Email' }, { value: 484, name: 'Union Ads' }, { value: 300, name: 'Video Ads' } ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </html>