因?yàn)橐鲕浖捻?xiàng)目，了解了一下現(xiàn)在比較熱門的統(tǒng)計(jì)圖庫，有以下幾種：

MSChart ?

這個(gè)是Visual Studio里的自帶控件，使用比較簡(jiǎn)單，不過數(shù)據(jù)這塊需要在后臺(tái)綁定。

ichartjs

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

Chart.js

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

ECharts.js

這是我準(zhǔn)備在這個(gè)項(xiàng)目中使用的圖形庫，這也是一款基于HTML5的圖形庫。圖形的創(chuàng)建也比較簡(jiǎn)單，直接引用Javascript即可。使用這個(gè)庫的原因主要有三點(diǎn)，一個(gè)是因?yàn)檫@個(gè)庫是百度的項(xiàng)目，而且一直有更新，目前最新的是EChart 3；第二個(gè)是這個(gè)庫的項(xiàng)目文檔比較詳細(xì)，每個(gè)點(diǎn)都說明的比較清楚，而且是中文的，理解比較容易；第三點(diǎn)是這個(gè)庫支持的圖形很豐富，并且可以直接切換圖形，使用起來很方便。

下面來簡(jiǎn)單說明一下EChart.js的使用。

第一步，引用Js文件

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

js文件有幾個(gè)版本，可以根據(jù)實(shí)際需要引用需要的版本。

第二步，準(zhǔn)備一個(gè)放圖表的容器

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

第三步，設(shè)置參數(shù)，初始化圖表

?

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

?

?

這樣簡(jiǎn)單的一個(gè)統(tǒng)計(jì)圖表就出來了，官網(wǎng)使用的柱狀圖，我這邊改用了折線圖。

?

?

?柱狀圖其實(shí)也很簡(jiǎn)單，只要修改一個(gè)參數(shù)就可以了。把series里的type 值修改為"bar"

?

?餅圖和折線圖、柱狀圖有一點(diǎn)區(qū)別。主要是在參數(shù)和數(shù)據(jù)綁定上。餅圖沒有X軸和Y軸的坐標(biāo)，數(shù)據(jù)綁定上也是采用value 和name對(duì)應(yīng)的形式。

?

?????

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

?

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/gxt-/p/9313925.html

總結(jié)

以上是生活随笔為你收集整理的Echarts的简单使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。