最近接觸到了Echarts這個JavaScript圖表庫，感覺已經被它的多種多樣的絢麗圖形深深地吸引了，所以我決定去學習它，瞭解它。

今天先來對它進行一些初步的瞭解。

ECharts介紹：

官方解釋：

ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

翻譯過來就是：ECharts是一個免費的、功能強大的、視覺化的一個庫。它可以非常簡單的往軟體產品中新增直觀的、動態的和高度可定製化的圖表。它是一個全新的基於zrender的用純JavaScript打造完成的canvas庫。

簡單的說，echarts就是一個幫助資料視覺化的庫。這個功能可就不起啊，相信在上學的時候很多老師就說過，能用圖表展示的就千萬別用文字這句話，是的圖表可以很直觀的把龐大的資料以一種合適的方式展現給我們，我們也能通過進行圖表分析得出有價值的資訊。所以作為一個前端人員來說，就是為了把資料以一種很舒服、很直觀的方式給別人展現出來，所以說這是前端人員的必備神器啊！！

ECharts的特性：

凡是什麼東西肯定要好用用的人才多是吧，不好用的東西就算說出花來也改變不了其本質，那麼ECharts有哪些特性了？

特性一：它有非常豐富的圖表型別

echarts不僅提供常見的如折線圖，柱狀圖，`散點圖，餅圖，K線圖等圖表型別，而且ECharts 提供了用於地理資料視覺化的地圖，熱力圖，線圖，用於關係資料視覺化的關係圖，treemap，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀表盤，並且支援圖與圖之間的混搭。

特性二：多個座標系的支援

echarts 3 開始獨立出了“座標系”的概念，支援了直角座標系（catesian，同 grid）、極座標系（polar）、地理座標系

特性三：移動端的優化

流量珍貴的移動端需要圖表庫的體積儘量小。ECharts 和 ZRender 程式碼的重構，帶來了核心部分體積的減小。ECharts 元件眾多，並且後面會持續增加，我們提供了更細粒度的按需打包能力。最小體積縮小為 ECharts 2 的 40%。

移動端互動也做了優化，例如移動端小屏上適於用手指在座標系中進行縮放、平移。 PC 端也可以用滑鼠在圖中進行縮放（用滑鼠滾輪）、平移。有很好的PC端和移動端的相容性和適應性。

特性四：深度的互動式資料探索

互動是從資料中發掘資訊的重要手段。“總覽為先，縮放過濾按需檢視細節”是資料視覺化互動的基本需求。
echarts 提供了legend visualMap dataZoom tooltip等元件以及圖表附帶的漫遊，選取等操作提供了資料篩取、檢視縮放、展示細節等能力。echarts 3 中，對這些元件進行了廣泛增強，支援在資料的各種座標軸、維度進行資料過濾、縮放，以及在更多的圖中採用這些元件。

特性五：大資料量的展現

現在的時代是大資料時代，越來越多的資料堆積，如何才能使這些資料發揮它應有的價值是一件值得我們深思的事情。echarts對大資料的處理能力非常好，藉助 Canvas 的能力，ECharts 在散點圖中能夠輕鬆展現上萬甚至上十萬的資料。

特性六：多維資料的支援以及豐富的視覺編碼手段

echarts 3 加強了對多維資料的支援。除了加入了平行座標等常見的多維資料視覺化工具外，對於傳統的散點圖等，傳入的資料也可以是多個維度的。配合視覺對映元件 visualMap 提供的豐富的視覺編碼，能夠將不同維度的資料對映到顏色，大小，透明度，明暗度等不同的視覺通道。

特性七：動態資料

echarts 由資料驅動，資料的改變驅動圖表展現的改變。因此動態資料的實現也變得異常簡單，只需要獲取資料，填入資料，echarts 會找到兩組資料之間的差異然後通過合適的動畫去表現資料的變化。配合 timeline 元件能夠在更高的時間維度上去表現資料的資訊。

特性八：絢麗的特效

這個特性是從視覺效果上最吸引人的一個特性，echarts 針對線資料，點資料等地理資料的視覺化提供了吸引眼球的特效如模擬遷徙等特效。

或許有人會說那為什麼不選擇highcharts了？highcharts在某些方面比echarts更好啊，是的，不可否認highcharts可能的確在某些方面比echarts好，但是，echarts是開源的、免費的的而highcharts是要收費的，，，所以基於這個層面，很多人可能也會選擇echarts。更加重要的一點是echarts是國產的，它是國內百度公司的一個技術團隊維護開的開源工具專案，所以，體現愛國主義精神的時候到了。。。

highcharts與echarts在效能方面的比較

• highcharts是基於SVG的，SVG的節點可以向dom節點一樣控制，所以在自主創作圖形方面非常方便，但是SVG是2D向量圖，不能畫3D圖形，而且SVG的節點都是物件，會非常佔用記憶體。

• 同樣雖然canvas也只支援2D繪圖，不支援3D繪圖。但是canvas繪圖不會給每個點生成物件，因此繪製圖形可以非常快，佔用記憶體特別少，相容性也比較好，除了IE6，其他瀏覽器都可以支援。