開源JavaScript圖表庫 ECharts 的1.1.0版本發布

2013年7月初，百度商業前端數據可視化團隊發布了開源JavaScript圖表庫ECharts的1.1.0版本，引起了廣泛關注。ECharts基于HTML5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。

經ECharts開發者介紹，InfoQ編輯整理了一些有關這個圖表庫的相關信息，分享給大家。

ECharts的目的

ECharts的開發是為了解決數據可視化的問題。它是一個web前端數據可視化的解決方案，面向前端開發人員使用，可以輸出具有可交互圖形用戶界面的數據可視化圖表。

數據可視化一路發展過來，從簡易圖表階段（缺乏視覺表現力），到注重視覺表現力的信息設計階缺段（乏對數據的深入理解，往往產生視覺誤導），再到今天大家看到的很多沖擊力極強的數據可視化作品（如TED的無數作品，數據分析與視覺表現力充分結合），這顯然不會是終點。數據可視化在國際上正在進入一個新的階段，深度數據交互，在這個階段將打破平面的視覺效果，實現了人機互動式的跨平臺操作，真正的將數據帶入到任何工作場合中，幫助人更好的掌握數據價值。業界領先的Tableau就是個很好的例子，或者如初創企業zoomdata所做的也能說明這一趨勢，而ECharts也正朝著這個目標出發。

ECharts的思路

如維克托 ? 邁爾 - 舍恩伯格教授的《大數據時代》所述，大數據時代有幾個特點需要人們轉變思維或適應變化，其中很重要的一點就是“社會需要放棄它對因果關系的渴求，而僅需關注相關關系”。人們更需要關注“數據是什么”。ECharts的特性設計正是以此為出發點，呈現數據真實的一面，并且提供了一些直觀、易用的交互方式以方便用戶對所展現數據進行挖掘、提取、修正或整合，通過系列選擇、區域縮放、數值篩選等不同方式讓用戶可以更加專注于他們所關心的地方，可以有更豐富的呈現方式解讀數據。

ECharts的實現

ECharts的實現，表面上是canvas，但ECharts內在的技術特征應該是數據驅動和基于消息的耦合剝離。通過底層canvas類庫ZRender，ECharts代碼里幾乎可以無視canvas的存在。

熟悉KineticJS、EaselJS或者oCanvas的朋友應該對canvas基礎庫的概念不陌生。ZRender是一個輕量級的 canvas類庫，MVC封裝，數據驅動，提供類Dom事件模型。這個canvas類庫讓開發者寫起canvas應用時就像寫web頁面一樣。此外，css style的樣式屬性定義，層疊，MVC架構（CURD、render & refresh），promise式的動畫接口，也都是如此設計。

ZRender同樣是百度商業前端數據可視化團隊的作品，里面也有很多有意思的東西。

雖然說大數據的含義并不是“數據量大”，但大數據強調的考察對象從“隨機樣本”到“總體”的轉變趨勢不可避免的帶來了需要展現大量數據的需求。這或許是ECharts技術選型上為什么是canvas而不是svg的重要原因，在有限區域內顯示盡可能多的數據，ECharts的大規模散點圖充分利用了 canvas的像素處理能力，這或許已經達到了現有web呈現能力的極限，而顯示性能跟顯示一張圖片無異。拋開像素處理能力不說，同樣呈現普通的圖形，你很難想象瀏覽器創建10萬個svg DOM會有多么吃力，而用canvas渲染10萬個圓僅需500ms左右（chrome）。

在ECharts中涉及的一些技術細節：

• 依賴excanvas兼容IE8-。

• 遵循AMD模塊化標準，圖表按需加載。

• 地圖由基于svg格式的矢量數據生成，底層ZRender會轉換成canvas的路徑。

• 旋轉、平移、動畫的實現，被轉成矩陣運算來解決。

• 反復渲染的性能問題，采用了分層刷新和dirty flag進行了優化。

• 基于包圍盒和純數學方法解決同時大大優化了圖形hover判斷。

• 圖表和控件間采用消息中心進行通信協作。

ECharts的接口方法很簡單，但有一個很龐大的配置項集合。為了讓設置合理，犧牲了很多實現成本。ECharts團隊認為，接口設計的合理比起實現成本重要得多。

來自：http://www.infoq.com/cn/news/2013/07/echarts_1_1_0