EChart.js 簡(jiǎn)單入門

最近有一個(gè)統(tǒng)計(jì)的項(xiàng)目要做，在前端的數(shù)據(jù)需要用圖表的形式展示。網(wǎng)上搜索了一下，發(fā)現(xiàn)有幾種統(tǒng)計(jì)圖庫(kù)。

MSChart  

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

ichartjs

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

Chart.js

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

ECharts.js

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

官網(wǎng)：ECharts.js

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

第一步，引用Js文件

這樣簡(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'} ] }] };

、