一、幾種統計相簿：
1.MSChart : 這個是Visual Studio裡的自帶控制元件，使用比較簡單，不過資料這塊需要在後臺繫結。
2.ichartjs : 是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標籤繪製各式圖形。 支援餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖等。
3.Chart.js : 也是一款基於HTML5的圖形庫和ichartjs整體類似。不過Chart.js的教程文件沒有ichartjs的詳細。不過感覺在對於移動的適配上感覺比ichartjs要好一點。
4.Echart.js : 這也是一款基於HTML5的圖形庫。圖形的建立也比較簡單，直接引用Javascript即可。
ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的執行在PC和移動裝置上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可互動，可高度個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。
支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動元件，支援多圖表、元件的聯動和混搭展現。
二、EChart.js簡單使用
1.引入ＪＳ檔案
<script type="text/javascript" src="js/echarts.js"></script>
下載方法：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
複製程式碼２.準備一個放圖表的工具
<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'}
]
}]
};
複製程式碼三、詳細講解引數配置
1.初始化 echarts.init(dom)
2.例項方法 http://echarts.baidu.com/echarts2/doc/doc.html#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95
3.選項 option
1.xAxis : [] 表示x軸，陣列物件，其下至少有一個物件。（沒有的話，效果：垂直於座標原點的y軸）
2.yAxis : [] 表示y軸，陣列物件，其下可以有空物件。（沒有的話，效果：垂直於座標原點的x軸；其下是空物件時，沒有影響）
3.seies : [] 驅動圖表生成的資料內容陣列，至少有一個物件。（當沒有series的時候，是沒有資料的，效果展示為空白）
4.title ： {} 標題控制元件
5.tooltip : {} 滑鼠懸浮互動時的資訊提示
6.legend : {} 圖表的圖例
7.backgroundColor : 背景色
8.color : 數值系列的顏色列表
9.itemStyle ： 設定 陰影，透明度，顏色，邊框顏色，邊框寬度...
itemStyle: {
// 陰影的大小
shadowBlur: 200,
// 陰影水平方向上的偏移
shadowOffsetX: 0,
// 陰影垂直方向上的偏移
shadowOffsetY: 0,
// 陰影顏色
shadowColor: 'rgba(0, 0, 0, 0.5)'
複製程式碼}
......
元件選項
10.visiualMap 視覺對映（將數值的大小對映到陰暗度上）
visualMap: {
// 不顯示 visualMap 元件，只用於明暗度的對映
show: false,
// 對映的最小值為 80
min: 80,
// 對映的最大值為 600
max: 600,
inRange: {
// 明暗度的範圍是 0 到 1
colorLightness: [0, 1]
}
複製程式碼}
11.dataZoom 資料區域縮放 與toolbox.feature.dataZoom同步，僅對直角座標系圖表有效。
......
http://echarts.baidu.com/echarts2/doc/doc.html#%E9%80%89%E9%A1%B9
四、動態資料繫結
簡單的統計表已經可以生成，不過之前圖示資料都是直接寫在引數裡面的，而實際使用中，我們的資料一般都是非同步讀取的。EChart.js對於資料非同步讀取這塊提供了非同步載入的方法。
繫結多組資料：
很多時候需要展示的資料不單單是一組資料，很多時候會進行一個資料對比。這個時候只需要在series中增加一組資料，legend中新增一下這個資料組的name
<!DOCTYPE html>
<html>
<head>
<title>ECharts.js 資料繫結</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script type="text/javascript">
//指定圖示的配置和資料
var option = {
title:{
text:'ECharts 資料統計'
},
legend:{
data:['訪問量','使用者量']
},
xAxis:{
data:["Android","IOS","PC","Other"]
},
yAxis:{},
series:[
{
name:'訪問量',
type:'bar',
data:[180,420,333,83]
},
{
name:'使用者量',
type:'bar',
data:[125,330,230,60]
}
]
};
//初始化echarts例項
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置項和資料顯示圖表
myChart.setOption(option);
</script>
</body>
</html>
複製程式碼資料非同步載入
EChart中實現非同步資料的更新非常簡單，在圖表初始化後不管任何時候只要通過 jQuery 等工具非同步獲取資料後通過 setOption 填入資料和配置項就行。
繫結資料的方式有兩種，一種是寫寫好一些圖表引數，然後資料留空，然後在非同步讀取資料的時候，繫結資料。
還有一種就是直接非同步讀取資料的時候同時設定圖表引數和資料繫結。
data.json檔案內容： {"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}
第一種： 非同步載入的時候設定圖表引數和繫結資料
<script type="text/javascript">
//初始化echarts例項
var myChart = echarts.init(document.getElementById('chartmain'));
//非同步載入的配置項和資料顯示圖表
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
title:{
text:'ECharts 非同步載入資料'
},
tooltip:{},
legend:{
data:['訪問量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[
{
name:'訪問量',
type:'bar',
data:data.data
}
]
})
})
</script>
複製程式碼第二種： 先設定圖表引數，後繫結資料
<script type="text/javascript">
//初始化echarts例項
var myChart = echarts.init(document.getElementById('chartmain'));
//設定圖示配置項
myChart.setOption({
title:{
text:'ECharts 非同步載入資料'
},
tooltip:{},
legend:{
data:['訪問量']
},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'訪問量',
type:'bar',
data:[]
}
]
})
//非同步載入資料
$.get('data.json').done(function (data) {
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根據名字對應到相應的系列
name:"訪問量",
data:data.data
}
]
})
})
</script>
複製程式碼因為是非同步載入，所以有時候資料載入會慢，或者延遲。在資料沒有載入前，圖表這樣的。面對這樣的圖表，肯定會覺得這是沒有資料嗎，還是圖表有問題.對於這塊ECharts增加了一個載入動畫。
//開啟loading動畫
myChart.showLoading();
//載入資料函式
function bindData(){
//為了效果明顯，我們做了延遲讀取資料
setTimeout(function(){
//非同步載入資料
$.get('data.json').done(function (data) {
//獲取資料後，隱藏loading動畫
myChart.hideLoading();
data = eval('('+data+')');
myChart.setOption({
xAxis:{
data:data.name
},
series:[
{
//根據名字對應到相應的系列
name:"訪問量",
data:data.data
}
]
})
})
},2000)
}
bindData();
複製程式碼五、ECharts中的事件和行為
在 ECharts 的圖表中使用者的操作將會觸發相應的事件。開發者可以監聽這些事件，然後通過回撥函式做相應的處理，比如跳轉到一個地址，或者彈出對話方塊，或者做資料下鑽等等。
myChart.on('click', function (params) {
// 控制檯列印資料的名稱
console.log(params.name);
複製程式碼});
ECharts中事件型別分為兩種型別：
一、使用者滑鼠操作點選，或者 hover 圖表的圖形時觸發的事件
二、使用者在使用可以互動的元件後觸發的行為事件，例如在切換圖例開關時觸發的 'legendselectchanged' 事件（這裡需要注意切換圖例開關是不會觸發'legendselected'事件的），資料區域縮放時觸發的 'datazoom' 事件等等。
ECharts 支援常規的滑鼠事件型別，包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout' 事件。 例： 點選柱狀圖後開啟相應的百度搜尋頁面
// 基於準備好的dom，初始化ECharts例項 var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
複製程式碼// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
複製程式碼// 處理點選事件並且跳轉到相應的百度搜尋頁面
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
複製程式碼所有的滑鼠事件包含引數 params，這是一個包含點選圖形的資料資訊的物件，如下格式： { // 當前點選的圖形元素所屬的元件名稱，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列型別。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義。
seriesType: string,
// 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義。
seriesIndex: number,
// 系列名稱。當 componentType 為 'series' 時有意義。
seriesName: string,
// 資料名，類目名
name: string,
// 資料在傳入的 data 陣列中的 index
dataIndex: number,
// 傳入的原始資料項
data: Object,
// sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，
// dataType 的值會是 'node' 或者 'edge'，表示當前點選在 node 還是 edge 上。
// 其他大部分圖表中只有一種 data，dataType 無意義。
dataType: string,
// 傳入的資料值
value: number|Array
// 資料圖形的顏色。當 componentType 為 'series' 時有意義。
color: string
複製程式碼}
六、移動端自適應
ECharts 工作在使用者指定高寬的 DOM 節點（容器）中。ECharts 的『元件』和『系列』都在這個 DOM 節點中，每個節點都可以由使用者指定位置。圖表庫內部並不適宜實現 DOM 文件流佈局，因此採用類似絕對佈局的簡單容易理解的佈局方式。但是有時候容器尺寸極端時，這種方式並不能自動避免元件重疊的情況，尤其在移動端小屏的情況下。
另外，有時會出現一個圖表需要同時在PC、移動端上展現的場景。這需要 ECharts 內部元件隨著容器尺寸變化而變化的能力。 為了解決這個問題，ECharts 完善了元件的定位設定，並且實現了類似 CSS Media Query 的自適應能力。
大部分【元件】和【系列】會遵循兩種定位方式：
left/right/top/bottom/width/height 定位方式：
這六個量中，每個量都可以是『絕對值』或者『百分比』或者『位置描述』。
絕對值 單位是瀏覽器畫素（px），用 number 形式書寫（不寫單位）。例如 {left: 23, height: 400}。
百分比 表示佔 DOM 容器高寬的百分之多少，用 string 形式書寫。例如 {right: '30%', bottom: '40%'}。
位置描述
可以設定 left: 'center'，表示水平居中。
可以設定 top: 'middle'，表示垂直居中。
這六個量的概念，和 CSS 中六個量的概念類似：
left：距離 DOM 容器左邊界的距離。
right：距離 DOM 容器右邊界的距離。
top：距離 DOM 容器上邊界的距離。
bottom：距離 DOM 容器下邊界的距離。
width：寬度。
height：高度。
在橫向，left、right、width 三個量中，只需兩個量有值即可，因為任兩個量可以決定元件的位置和大小，例如 left 和 right 或者 right 和 width 都可以決定元件的位置和大小。 縱向，top、bottom、height 三個量，和橫向類同不贅述。
center / radius 定位方式：
center
是一個陣列，表示 [x, y]，其中，x、y可以是『絕對值』或者『百分比』，含義和前述相同。
radius
是一個陣列，表示 [內半徑, 外半徑]，其中，內外半徑可以是『絕對值』或者『百分比』，含義和前述相同。 在自適應容器大小時，百分比設定是很有用的。
Media Query
Media Query 提供了『隨著容器尺寸改變而改變』的能力。
要在 option 中設定 Media Query 須遵循如下格式：
option = {
baseOption: { // 這裡是基本的『原子option』。
title: {...},
legend: {...},
series: [{...}, {...}, ...],
...
},
media: [ // 這裡定義了 media query 的逐條規則。
{
query: {...}, // 這裡寫規則。
option: { // 這裡寫此規則滿足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二個規則。
option: { // 第二個規則對應的option。
legend: {...},
...
}
},
{ // 這條裡沒有寫規則，表示『預設』，
option: { // 即所有規則都不滿足時，採納這個option。
legend: {...},
...
}
}
]
複製程式碼};
query:
每個query類似於這樣
{
minWidth: 200,
maxHeight: 300,
minAspectRatio: 1.3
}
複製程式碼現在支援三個屬性：width、height、aspectRatio（長寬比）。
每個屬性都可以加上 min 或 max 字首。比如，minWidth: 200 表示『大於等於200px寬度』。兩個屬性一起寫表示『並且』，比如：{minWidth: 200, maxHeight: 300} 表示『大於等於200px寬度，並且小於等於300px高度』。
option： media中的 option 既然是『原子 option』，理論上可以寫任何 option 的配置項。但是一般我們只寫跟佈局定位相關的，例如擷取上面例子中的一部分 query option： media: [
...,
{
query: {
maxAspectRatio: 1 // 當長寬比小於1時。
},
option: {
legend: { // legend 放在底部中間。
right: 'center',
bottom: 0,
orient: 'horizontal' // legend 橫向佈局。
},
series: [ // 兩個餅圖左右佈局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '70%']
}
]
}
},
{
query: {
maxWidth: 500 // 當容器寬度小於 500 時。
},
option: {
legend: {
right: 10, // legend 放置在右側中間。
top: '15%',
orient: 'vertical' // 縱向佈局。
},
series: [ // 兩個餅圖上下佈局。
{
radius: [20, '50%'],
center: ['50%', '30%']
},
{
radius: [30, '50%'],
center: ['50%', '75%']
}
]
}
},
...
複製程式碼]
多個 query 被滿足時的優先順序：
注意，可以有多個 query 同時被滿足，會都被 mergeOption，定義在後的後被 merge（即優先順序更高）。
預設 query：
如果 media 中有某項不寫 query，則表示『預設值』，即所有規則都不滿足時，採納這個option。 容器大小實時變化時的注意事項：
在不少情況下，並不需要容器DOM節點任意隨著拖拽變化大小，而是隻是根據不同終端設定幾個典型尺寸。
但是如果容器DOM節點需要能任意隨著拖拽變化大小，那麼目前使用時需要注意這件事：某個配置項，如果在某一個 query option 中出現，那麼在其他 query option 中也必須出現，否則不能夠迴歸到原來的狀態。 （left/right/top/bottom/width/height 不受這個限制。）