EChart.js 簡單入門

最近有一個統計的項目要做，在前端的數據需要用圖表的形式展示。網上搜索了一下，發現有幾種統計圖庫。

MSChart ?

這個是Visual Studio里的自帶控件，使用比較簡單，不過數據這塊需要在后臺綁定。

ichartjs

是一款基于HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標簽繪制各式圖形。 支持餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖等。

Chart.js

也是一款基于HTML5的圖形庫和ichartjs整體類似。不過Chart.js的教程文檔沒有ichartjs的詳細。不過感覺在對于移動的適配上感覺比ichartjs要好一點。

ECharts.js

這是我準備在這個項目中使用的圖形庫，這也是一款基于HTML5的圖形庫。圖形的創建也比較簡單，直接引用Javascript即可。使用這個庫的原因主要有三點，一個是因為這個庫是百度的項目，而且一直有更新，目前最新的是EChart 3；第二個是這個庫的項目文檔比較詳細，每個點都說明的比較清楚，而且是中文的，理解比較容易；第三點是這個庫支持的圖形很豐富，并且可以直接切換圖形，使用起來很方便。

官網：ECharts.js

下面來簡單說明一下EChart.js的使用。

第一步，引用Js文件

<script type="text/javascript" src="js/echarts.js"></script>

js文件有幾個版本，可以根據實際需要引用需要的版本。下載鏈接

第二步，準備一個放圖表的容器

<div id="chartmain" style="width:600px; height: 400px;"></div>

第三步，設置參數，初始化圖表

<script type="text/javascript">//指定圖標的配置和數據var option = {title:{text:'ECharts 數據統計'},tooltip:{},legend:{data:['用戶來源']},xAxis:{data:["Android","IOS","PC","Ohter"]},yAxis:{},series:[{name:'訪問量',type:'line',data:[500,200,360,100]}]};//初始化echarts實例var myChart = echarts.init(document.getElementById('chartmain'));//使用制定的配置項和數據顯示圖表 myChart.setOption(option);</script>

這樣簡單的一個統計圖表就出來了，官網使用的柱狀圖，我這邊改用了折線圖。

?

?柱狀圖其實也很簡單，只要修改一個參數就可以了。把series里的type 值修改為"bar"

?餅圖和折線圖、柱狀圖有一點區別。主要是在參數和數據綁定上。餅圖沒有X軸和Y軸的坐標，數據綁定上也是采用value 和name對應的形式。

var option = {title:{text:'ECharts 數據統計'}, series:[{name:'訪問量',type:'pie', radius:'60%', data:[{value:500,name:'Android'},{value:200,name:'IOS'},{value:360,name:'PC'},{value:100,name:'Ohter'}]}]};

?

、

?

轉載于:https://www.cnblogs.com/gscq073240/articles/9644316.html

總結

以上是生活随笔為你收集整理的EChart.js 简单入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。