瞭解瞭解 ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRen ...
瞭解瞭解
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，相容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向佈局圖、地圖、儀錶盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。
| 一、 簡單瞭解一下Echarts |
1.1Echarts的基本圖表類型
圖表庫標準包含單圖表類型的標準圖表以及多圖表類型混合的混搭圖表
1.2Echarts中的常用名詞解釋
基本名詞
| chart | 是指一個完整的圖表，如折線圖，餅圖等“基本”圖表類型或由基本圖表組合而成的“混搭”圖表，可能包括坐標軸、圖例等 |
| axis | 直角坐標系中的一個坐標軸，坐標軸可分為類目型、數值型或時間型 |
| xAxis | 直角坐標系中的橫軸，通常並預設為類目型 |
| yAxis | 直角坐標系中的縱軸，通常並預設為數值型 |
| grid | 直角坐標系中除坐標軸外的繪圖網格，用於定義直角系整體佈局 |
| legend | 圖例，表述數據和圖形的關聯 |
| dataRange | 值域選擇，常用於展現地域數據時選擇值域範圍 |
| dataZoom | 數據區域縮放，常用於展現大量數據時選擇可視範圍 |
| roamController | 縮放漫游組件，搭配地圖使用 |
| toolbox | 輔助工具箱，輔助功能，如添加標線，框選縮放等 |
| tooltip | 氣泡提示框，常用於展現更詳細的數據 |
| timeline | 時間軸，常用於展現同一系列數據在時間維度上的多份數據 |
| series | 數據系列，一個圖表可能包含多個系列，每一個系列可能包含多個數據 |
圖表名詞
| line | 折線圖，堆積折線圖，區域圖，堆積區域圖。 |
| bar | 柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。 |
| scatter | 散點圖，氣泡圖。散點圖至少需要橫縱兩個數據，更高維度數據加入時可以映射為顏色或大小，當映射到大小時則為氣泡圖 |
| k | K線圖，蠟燭圖。常用於展現股票交易數據。 |
| pie | 餅圖，圓環圖。餅圖支持兩種（半徑、面積）南丁格爾玫瑰圖模式。 |
| radar | 雷達圖，填充雷達圖。高維度數據展現的常用圖表。 |
| chord | 和弦圖。常用於展現關係數據，外層為圓環圖，可體現數據占比關係，內層為各個扇形間相互連接的弦，可體現關係數據 |
| force | 力導佈局圖。常用於展現複雜關係網路聚類佈局。 |
| map | 地圖。內置世界地圖、中國及中國34個省市自治區地圖數據、可通過標準GeoJson擴展地圖類型。支持svg擴展類地圖應用，如室內地圖、運動場、物件構造等。 |
| heatmap | 熱力圖。用於展現密度分佈信息，支持與地圖、百度地圖插件聯合使用。 |
| gauge | 儀錶盤。用於展現關鍵指標數據，常見於BI類系統。 |
| funnel | 漏斗圖。用於展現數據經過篩選、過濾等流程處理後發生的數據變化，常見於BI類系統。 |
| evnetRiver | 事件河流圖。常用於展示具有時間屬性的多個事件，以及事件隨時間的演化。 |
| treemap | 矩形式樹狀結構圖，簡稱：矩形樹圖。用於展示樹形數據結構，優勢是能最大限度展示節點的尺寸特征。 |
| venn | 韋恩圖。用於展示集合以及它們的交集。 |
| tree | 樹圖。用於展示樹形數據結構各節點的層級關係 |
| wordCloud | 詞雲。詞雲是關鍵詞的視覺化描述，用於彙總用戶生成的標簽或一個網站的文字內容 |
| 二、 引入Echarts |
引入Echarts的方式有很多：
1、模塊化包引入
2、模塊化單文件引入
3、標簽式單文件引入
這裡我們就著重介紹一下第三種方式，也是最簡單，我認為比較好用的一種！！
ECharts 3 開始不再強制使用 AMD 的方式按需引入，代碼里也不再內置 AMD 載入器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標簽引入。路徑結果如下：
1 <body> 2 <div id="main" style="height:400px;"></div> //為 ECharts 準備一個具備高寬的 DOM 容器。 3 ... 4 <script src="js/echarts.js"></script> 5 <script> 6 var myChart = echarts.init(document.getElementById('main')); //基於準備好的dom，初始化echarts實例 7 var option = { 8 ... //指定圖表的配置項和數據 9 } 10 myChart.setOption(option); //使用剛指定的配置項和數據顯示圖表。
11 </script>
12 </body>
| 三、 具體小實例 |
由於Echarts中的屬性很多，接下來我就通過兩個小李子給大家介紹一下其中的基本屬性的使用吧~~~
3.1實例一：柱狀圖
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: { //標題，每個圖表最多僅有一個標題控制項，每個標題控制項可設主副標題。
text: 'ECharts 入門示例', //主標題文本
subtext:'該圖表純屬虛構', //副標題文本
x:'left', //標題水平安放位置，預設為left。可選值有left、right、center
y:'top', //標題垂直安放位置，預設為top。可選值有top、bottom、center
textAlign:'left', //標題水平對齊方式，預設根據x設置自動調整。可選值有left、right、center
backgroundColor:'rgba(0,0,0,0)', //標題背景顏色，預設透明
textStyle:{ //主標題文本樣式
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
},
subtextStyle:{
color: '#aaa' //副標題文本樣式
}
},
tooltip: {}, //提示框，滑鼠懸浮交互時的信息提示。
legend: { //圖例，每個圖表最多僅有一個圖例。
data:['銷量'], //圖例內容數組
x:'center', //圖例水平安放位置，預設為全圖居中。可選值有left、right、center
y:'top', //圖例垂直安放位置，預設為top。可選值有top、bottom、center
},
xAxis: { //直角坐標系中橫軸數組
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {}, //直角坐標系中縱軸數組
series: [{ //數據內容
name: '銷量', //系列名稱，如啟用legend，該值將被legend.data索引相關
type: 'bar', //圖表類型，必要參數！如為空或不支持類型，則該系列數據不被顯示。可選值為line(折線圖)，bar(柱狀圖)，scatter(散點圖)
data: [5, 20, 36, 10, 10, 20] //數據
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
運行效果：
3.2餅圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 800px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '某站點用戶訪問來源', //主標題文本
subtext: '純屬虛構', //副標題文本
x: 'center' //標題水平安放位置
},
series: [{ //數據內容
name: '訪問來源', //系列名稱，如啟用legend，該值將被legend.data索引相關
type: 'pie', //圖表類型，必要參數！
radius: '55%', //半徑
center: ['50%', '60%'], //圓心坐標
data: [{ //數據
value: 335,
name: '直接訪問'
},
{
value: 310,
name: '郵件營銷'
},
{
value: 234,
name: '聯盟廣告'
},
{
value: 135,
name: '視頻廣告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}],
tooltip: { //提示框，滑鼠懸浮交互時的信息提示
trigger: 'item', //觸發類型，預設數據觸發，可選值有item和axis
formatter: "{a} <br/>{b} : {c} ({d}%)", //滑鼠指上時顯示的數據 a（系列名稱），b（類目值），c（數值）, d（占總體的百分比）
backgroundColor: 'rgba(0,0,0,0.7)' //提示背景顏色，預設為透明度為0.7的黑色
},
legend: { //圖例，每個圖表最多僅有一個圖例。
orient: 'vertical', //佈局方式，預設為水平佈局，可選值有horizontal(豎直)和vertical(水平)
x: 'left', //圖例水平安放位置，預設為全圖居中。可選值有left、right、center
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
toolbox: { //工具箱，每個圖表最多僅有一個工具箱。
show: true, //顯示策略，可選為：true（顯示） | false（隱藏）
feature: { //啟用功能
dataView: { //數據視圖
show: true,
readOnly: false //readOnly 預設數據視圖為只讀，可指定readOnly為false打開編輯功能
},
restore: { //還原，複位原始圖表 右上角有還原圖標
show: true
},
saveAsImage: { //保存圖片（IE8-不支持），預設保存類型為png，可以改為jpeg
show: true,
type:'jpeg',
title : '保存為圖片'
}
}
}
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
運行效果：
|
四、 給大家介紹一下其他的製作圖表的框架 |
4.1MSChart
這個是Visual Studio里的自帶控制項，使用比較簡單，不過數據這塊需要在後臺綁定。
4.2ichart.js
是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標簽繪製各式圖形。 支持餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖等。
4.3Chart.js
也是一款基於HTML5的圖形庫和ichartjs整體類似。不過Chart.js的教程文檔沒有ichartjs的詳細。不過感覺在對於移動的適配上感覺比ichartjs要好一點。
優點：
1.輕量級，min版總大小50多k。
2.移動端使用比較流暢，畢竟小。
缺點：
1.功能欠缺比較多。
2.中文文檔奇缺。
4.3Echarts.js
使用這個庫的原因主要有三點，一個是因為這個庫是百度的項目，而且一直有更新，目前最新的是EChart 3；第二個是這個庫的項目文檔比較詳細，每個點都說明的比較清楚，而且是中文的，理解比較容易；第三點是這個庫支持的圖形很豐富，並且可以直接切換圖形，使用起來很方便。
優點：
1.國人開發，文檔全，便於開發和閱讀文檔。
2.圖表豐富，可以適用各種各樣的功能。
缺點：
移動端使用略卡，畢竟是PC端的東西，移植到移動端肯定多多少少有些問題吧，或許跟自己水平也有一定的關係，哎怎麼說呢。
