又是一年雙十一，廣大單身狗們有沒有很寂寞(好把，其實我也是)！但是這次的雙十一，我不再孤單，因為結識了一個js的強大的圖表庫---ECharts。
最近做軟件工程項目的時候，由於設計圖中有柱狀圖和餅圖的設計，第一反應用原生js寫肯定很麻煩，於是我請求能否不做，但我們的PM鐵了心要做，最終逼迫我找到了這個強大的圖表庫，哈哈，在這里感謝一下PM李佳瑋。(當我發現它還兼容IE6-8時，真的炒雞感動!)
ECharts提供商業產品常用圖表，底層基於ZRender（一個全新的輕量級canvas類庫），創建了坐標系，圖例，提示，工具箱等基礎組件，並在此上構建出折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達圖、地圖、和弦圖、力導向布局圖、儀表盤以及漏斗圖，同時支持任意維度的堆積和多圖表混合展現。
廢話不多說，馬上進入ECharts的使用吧。
首先我們進入ECharts的官網http://echarts.baidu.com/index.html(向百度前端團隊致敬)，進去以后下載ECharts。
下載好的目錄:
初學的話我們只要把目光放在build文件上，這里面包含了我們制作圖表所需的相關資源文件。
引入ECharts包有三種方式，官方文檔中有三種方式的具體介紹http://echarts.baidu.com/doc/doc.html#引入ECharts。
這里我采用官方推薦的模塊化單文件引入,首先需要熟悉模塊化開發。ECharts是一個符合AMD規范的模塊加載器，AMD規范相信大家都不陌生，它是javascript客戶端(就是瀏覽器上)的開發規范，而Node.js有CommonJs開發規范。如果不是很了解AMD規范可以參考一下文章:
AMD---瀏覽器中的開發規范http://www.cnblogs.com/snandy/archive/2012/03/12/2390782.html
好，接下來我會展示具體的引入寫法:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main" style="height:300px;"></div>
<script type="text/javascript" src="echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths : {
// 這里載入相對路徑
echarts : "echarts/build/dist"
}
});
require(
[
// 這里的echarts代表的是paths中的路徑
"echarts",
"echarts/chart/bar"
],
// 回調函數
function(ex){
}
);
</script>
</body>
</html>
js中require()表示要創建一個圖標的請求，首先要列出所需圖表庫的資源，這里是要載入bar.js文件，因此需要引入模塊"echarts/chart/bar"。在ECharts中還有很多種圖表，比如pie(餅圖)，map(地圖)等等。
現在我們已經加載了我們需要的圖類，接下來要做的事很簡單---插入對應圖類所需組件。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main" style="height:300px;"></div>
<script type="text/javascript" src="echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
require.config({
paths : {
echarts : "echarts/build/dist"
}
});
require(
[
"echarts",
"echarts/chart/pie"
],
function(ec){
var myChart=ec.init(document.getElementById("main"));
var option = {
title :{
text : "查看企業各部門報銷",
x : "center"
},
tooltip : {
trigger : "item",
formatter : "{a} <br/> {b} : {c} ({d}%)"
},
legend : {
orient : "vertical",
x : "left",
data : ["part1","part2","part3","part4"]
},
toolbox : {
show : true,
feature : {
//mark : {show : true},
//dataView : {show : true,readOnly : false},
restore : {show : true}
//saveAsImage : {shwo :true}
}
},
calculable : false,
series : [
{
name : "餅圖實例",
type : "pie",
radius : "55%",
center : ["50%","60%"],
data : [
{value:100,name:"part1"},
{value:200,name:"part2"},
{value:300,name:"part3"},
{value:400,name:"part4"}
]
}
]
};
myChart.setOption(option);
}
);
</script>
</body>
</html>
可以看到require()的第二個參數是個function(){}，這里應該是個回調函數，等待資源加載好后執行，這個函數中提供了創建圖表所需要的信息:
首先要獲取到需要被創建的對象，這里用DOM方法取到。
其次把數據集用類似json的形式存放到option中，最后傳入到要被創建的對象中。
可以看到Option對象中的子對象，都攜帶了不同的信息，比如標題title，提示框(tooltip)等等，更多的組件信息可以在官方文檔中查看
http://echarts.baidu.com/doc/doc.html#選項
最后打開瀏覽器就可以欣賞到一個簡單的利用ECharts的圖表了:
當我打開的時候還看到了很多動態的好玩的效果，都值得我們去研究。
不過框架畢竟是框架，希望大家在學習框架前一定要學好原生js~這樣用起這些框架起來才會得心應手！