ECharts,一個純 Javascript 的圖表庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴輕量級的 Canvas 類庫 ZRender,提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。
ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果,並且對移動端做了深度的優化。
豐富的圖表類型
ECharts 提供了常規的折線圖,柱狀圖,散點圖,餅圖,K線圖,用於統計的盒形圖,用於地理數據可視化的地圖,熱力圖,線圖,用於關系數據可視化的關系圖,treemap,多維數據可視化的平行坐標,還有用於 BI 的漏斗圖,儀表盤,並且支持圖與圖之間的混搭。
你可以在下載界面下載包含所有圖表的構建文件,如果只是需要其中一兩個圖表,又嫌包含所有圖表的構建文件太大,也可以在在線構建中選擇需要的圖表類型后自定義構建。
多個坐標系的支持
ECharts 3 開始獨立出了“坐標系”的概念,支持了直角坐標系(catesian,同 grid)、極坐標系(polar)、地理坐標系(geo)。圖表可以跨坐標系存在,例如折、柱、散點等圖可以放在直角坐標系上,也可以放在極坐標系上, 甚至可以放在地理坐標系中。
下面是一個折線圖在極坐標系上的例子:
下面是一個散點圖在地理坐標系上的例子:
移動端的優化
流量珍貴的移動端需要圖表庫的體積盡量小。ECharts 和 ZRender 代碼的重構,帶來了核心部分體積的減小。ECharts 組件眾多,並且后面會持續增加,我們提供了更細粒度的按需打包能力。最小體積縮小為 ECharts 2 的 40%。
移動端交互也做了優化,例如移動端小屏上適於用手指在坐標系中進行縮放、平移。 PC 端也可以用鼠標在圖中進行縮放(用鼠標滾輪)、平移,如下圖:
深度的交互式數據探索
交互是從數據中發掘信息的重要手段。總覽為先 縮放過濾 按需查看細節是數據可視化交互的基本需求。
ECharts 一直在“交互”的路上前進,legend visualMap dataZoom tooltip等組件以及圖表附帶的漫游,選取等操作提供了數據篩取、視圖縮放、展示細節等能力。
ECharts 3 中,對這些組件進行了廣泛增強,例如支持在數據的各種坐標軸、維度進行數據過濾、縮放,以及在更多的圖中采用這些組件。比如下面這個例子
大數據量的展現
借助 Canvas 的能力,ECharts 在散點圖中能夠輕松展現上萬甚至上十萬的數據。
下面的微博簽到圖中就展現了 100k+ 的簽到數據。
多維數據的支持以及豐富的視覺編碼手段
ECharts 3 開始加強了對多維數據的支持,除了加入了平行坐標等常見的多維數據可視化工具外,對於傳統的散點圖等,傳入的數據也可以是多個維度的,配合視覺映射組件 visualMap 提供的豐富的視覺編碼,能夠將不同維度的數據映射到顏色,大小,透明度,明暗度等不同的視覺通道。
動態數據
ECharts 由數據驅動,數據的改變驅動圖表展現的改變,因此動態數據的實現也變得異常簡單,只需要獲取數據,填入數據,ECharts 會找到兩組數據之間的差異然后通過合適的動畫去表現數據的變化。配合 timeline 組件能夠在更高的時間維度上去表現數據的信息。
絢麗的特效
ECharts 針對線數據,點數據等地理數據的可視化提供了吸引眼球的特效。