echarts入門

　　一直好奇，今晚就學習了一番，算是入門的級別，學習老是一個漸進的過程。

　　一路記錄，一路足跡。

一：學習資料

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，其餘瀏覽器均可以支持。