一直好奇，今晚就學習了一番，算是入門的級別，學習總是一個漸進的過程。
一路記錄，一路足跡。
一：學習資料
1.主要參考的代碼
https://github.com/shengxinjing/imooc-echarts
2.官網
http://echarts.baidu.com/
3.視頻
https://www.imooc.com/learn/687?_wv=1031
二：Echars特性
1.特性
ECharts，一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。
2.支持
- 豐富的圖表類型
ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、k線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於數據關系可視化的關系圖，treemap，多維數據可視化的平行坐標，還有用於BI的漏斗圖，儀表盤，並且支持圖與圖之間的混搭
- 動態數據
ECharts由數據驅動，數據的改變驅動圖表展現的改變。因此動態數據的實現也變得異常簡單，只需獲取數據，填入數據，ECharts會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。
- 移動端的優化
流量珍貴的移動端需要圖表庫的體積盡量小。ECharts和ZRender代碼的重構，帶來了核心部分體積的減小。ECharts和ZRender代碼的重構帶來了核心部分體積的縮小。ECharts提供按需打包的能力，因為ECharts的組件眾多，並且會持續增加。
- 多維數據支持以及豐富的視覺編碼手段
ECharts 3開始加強了對多維數據的支持。除了加入平行坐標等常見的多維數據可視化工具外，對於傳統的散點圖，傳入的數據也可以是多個維度的。配合視覺映射組件visualMap 提供豐富的視覺編碼，能夠將不同維度的數據映射到顏色，大小，透明度,明暗度等不同的視覺通道。
- 深度的交互式數據探索
交互是從數據中發掘信息的重要手段。“總覽為先，縮放過濾按需查看細節”是數據可視化交互的基本需求。
echarts 提供了legend visualMap dataZoom tooltip等組件以及圖表附帶的漫游，選取等操作提供了數據篩取、視圖縮放、展示細節等能力。echarts 3 中，對這些組件進行了廣泛增強，支持在數據的各種坐標軸、維度進行數據過濾、縮放，以及在更多的圖中采用這些組件。
- 大數據量的顯示
現在的時代是大數據時代，越來越多的數據堆積，如何才能使這些數據發揮它應有的價值是一件值得我們深思的事情。echarts對大數據的處理能力非常好，借助 Canvas 的能力，ECharts 在散點圖中能夠輕松展現上萬甚至上十萬的數據。
- 多個坐標系的支持
echarts 3 開始獨立出了“坐標系”的概念，支持了直角坐標系（catesian，同 grid）、極坐標系（polar）、地理坐標系（geo）。圖表可以跨坐標系存在，例如折、柱、散點等圖可以放在直角坐標系上，也可以放在極坐標系上，甚至可以放在地理坐標系中。
- 絢麗的特效
三：ZRender介紹
1.說明
ECharts 底層依賴着輕量級的Canvas類庫ZRender。
ZRender（Zlevel Render）是一個輕量級的Canvas類庫，MVC封裝，數據驅動，提供類DOM事件模型。
2.MVC
MVC核心封裝實現圖形倉庫、視圖渲染和交互控制：
- Stroage(M) : shape數據CURD管理
- Painter(V) : canvas元素生命周期管理，視圖渲染，繪畫，更新控制
- Handler(C) : 事件交互處理，實現完整dom事件模擬封裝
- shape : 圖形實體，分而治之的圖形策略，可定義擴展
- tool : 繪畫擴展相關實用方法，工具及腳手架
3.特色
1 數據驅動
利用zrender繪圖，你只需做的是定義圖形數據，剩下的事情就交給zrender.
2 完整的事件封裝
用DOM事件模型去操作canvas里的圖形元素。
不僅可以響應zrender全局事件，甚至可以為特定的shape添加特定的事件。
3 高效的分層刷新
如css中的z-index一樣，你可以定義把不同的shape放在不同的層中，這不僅實現了視覺上的上下覆蓋，更重要的是圖形元素發生變化后的refresh將局限在發生了變化的圖形層中。
4 強大的動畫支持
提供promise式的動畫接口和常用緩動函數，輕松實現各種動畫需求
5 易於擴展
分而治之的圖形定義策略允許你擴展自己獨有的圖形元素，你既可以完整實現三個接口方法（brush,drift,isCover），也可以通過base派生后僅實現需要關心的圖形細節。
四：Echarts與HighCharts的比較
1.比較
-
highcharts是基於SVG的，SVG的節點可以向dom節點一樣控制，所以在自主創作圖形方面非常方便，但是SVG是2D矢量圖，不能畫3D圖形，而且SVG的節點都是對象，會非常占用內存。
-
同樣雖然canvas也只支持2D繪圖，不支持3D繪圖。但是canvas繪圖不會給每個點生成對象，因此繪制圖形可以非常快，占用內存特別少，兼容性也比較好，除了IE6，其他瀏覽器都可以支持。