ECharts介紹
本文介紹的是2.0的版本，3.0版本已經出來了。
ECharts，縮寫來自Enterprise Charts，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。
名稱解釋
| 名詞 | 描述 |
|---|---|
| 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有幾種方式，推薦大家使用模塊化單文件引入。
<body>
<div id="myChart" style="height:600px;"></div>//這里必須設置div的寬度，否則不會顯示
...
<script src="./js/echarts.js"></script>//這里放入你js文件的地址
<script type="text/javascript">
require.config({ //配置require.config文件
paths: {
echarts: './js/dist'
}
});
</script>
</body>
require.config配置好可以動態加載ECharts
<body>
<div id="myChart" style="height:500px;"></div>
...
<script src="./js/echarts.js"></script>
<script type="text/javascript">
require.config({
paths: {
echarts: './js/dist'
}
});
require(
[
'echarts',
'echarts/chart/line', // 按需加載所需圖表，如需動態類型切換功能，別忘了同時加載相應圖表
'echarts/chart/bar' //這里還可以添加其他的圖表
......code
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
var option = {
...
}
myChart.setOption(option);
}
);
</script>
</body>
總結
創建一個顯示圖標的容器（必須設置寬度高度）
引入EChartsJS文件可以通過script標簽引入
配置require.config文件（加載EChartsjs文件地址）
動態加載ECharts所需要的圖標在回調函數里面使用（如果是在同一個頁面已經加載了ECharts圖標在使用require('echarts').init(“id”)）
以上是ECharts使用方法，是根據ECharts官網介紹來寫的，還有很多方法沒有列出來，可以參考ECharts官網---------》http://echarts.baidu.com/echarts2/index.html