【推薦】開源來自百度商業前端數據可視化團隊的超漂亮動態圖表--ECharts


  本人項目中最近有需要圖表的地方,偶然發現一款超級漂亮的動態圖標js圖表控件,分享給大家,覺得好用的就看一下。更多更漂亮的演示大家可以參考下面兩個網址:ECharts官方網址:http://ecomfe.github.io/echarts/index.html,Why ECHarts:http://ecomfe.github.io/echarts/doc/slide/whyEcharts.html#/,官網有示例及各種幫助文檔等,第二個網址則是圖表形象生動的演示,文章內容均出自於此,有些圖片是引用的在線地址可能比較慢一些,耐心等一下。

ECharts

基於Canvas,純Javascript圖表庫,提供直觀,生動,可交互,可個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗,賦予了用戶對數據進行挖掘、整合的能力。

ECharts (Enterprise Charts 商業產品圖表庫)

提供商業產品常用圖表庫,底層基於ZRender,創建了坐標系,圖例,提示,工具箱等基礎組件,並在此上構建出折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、餅圖(環形圖)、地圖、力導向布局圖,同時支持任意維度的堆積和多圖表混合展現。

(IE8- supported by excanvas )

ECharts Architecture

特色

我們誠摯邀請你翻閱這份在線文檔 《 Why ECharts ? 》 你可以從中更直觀的體驗到ECharts的特性以及快速瀏覽到所有圖表類型。

*文檔中展現的個別特性在IE8-中並沒有得到支持,所以建議使用IE9+、chrome、safari、firefox或opear等高級瀏覽器閱讀這份文檔。


混搭

混搭的圖表會更具表現力也更有有趣味,ECharts提供的圖表(共7類11種)支持任意混搭:

折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、 餅圖(環形圖)、地圖、力導布局圖。

混搭情況下一個標准圖表:包含唯一圖例、工具箱、數據區域縮放、值域漫游模塊,一個直角坐標系(可包含一條或多條類目軸線,一條或多條值軸線,最多上下左右四條)

拖拽重計算

拖拽重計算特性(專利)帶來了數據統計圖表從未有過的用戶體驗,允許用戶對統計數據進行有效的提取、整合,甚至在多個圖表間交換數據,賦予了用戶對數據進行挖掘、整合的能力。

數據視圖

如果你所呈現的數據足夠讓用戶所關心,那么他們將不滿足於查看可視化的圖表,要去逐一迎合他們下載保存,數據分享,加工整合已有數據等等需求?

或許你只要給予一個“,”分隔的數據文本他們就懂了,這就是ECharts的數據視圖!當然,你可以重載數據視圖的輸出方法,用你獨特的方式去呈現數據。

如果你的用戶足夠的高端,你甚至可以打開數據視圖的編輯功能,跟拖拽重計算相比,這可是批量的數據修改!

ECharts 數據視圖

動態類型切換

很多圖表類型本身所表現的能力是相似的,但由於數據差異、表現需求和個人喜好的不同導致最終圖表所呈現的張力又大不一樣,比如折線圖和柱狀圖的選擇總是讓人頭疼。

ECharts提供了動態類型切換,讓用戶隨心所欲的切換到他所需要的圖表類型。

ECharts 動態類型切換

圖例開關

多系列數據的同時展現呈現出豐富內容,但如何讓用戶切換到他所關心的個別系列上?

ECharts提供了方便快捷的圖例開關,可以隨時切換到你所關心的數據系列。

ECharts 圖例開關

數據區域選擇

數據可以是無限的,但顯示空間總是有限的,數據區域選擇組件提供了大數據量中漫游的能力,讓用戶選擇並呈現他所關心的數據區域。

ECharts 數據區域選擇

值域漫游

基於坐標的圖表(如地圖、散點圖)通過色彩變化表現數值的大小能直觀形象的展示數據分布。

但如何聚焦到我所關心的數值上?我們創造了稱為值域漫游的功能,讓你可以輕松進行數值篩選。

ECharts 數據區域選擇

大規模散點圖

如何展現成千上百萬的離散數據從而找出他們的分布和聚類?貌似除了用專業的統計工具(如MATLAB)外別無選擇?

不,ECharts發明了基於像素的大規模散點圖(專利),一個900 x 400的散點區域就能夠毫不重復的呈現35萬組數據,這對於常規的應用,用現代瀏覽器就足以輕松展現百萬級的散點數據!

ECharts 數據區域選擇

標線輔助

趨勢線?平均線?未來走勢?修正值?有需求用戶自然知道用意~

提供標線輔助在K線圖中可是必要的功能!是的,K線圖我們正在開發中~

多維度堆積

支持多系列,多維度的數據堆積,配合自動伸縮的圖形實體和直角坐標系,能呈現出更有內涵的統計圖表~

ECharts 多維度堆積

個性化定制

近300個可配置選項結合多級控制設計滿足高度定制的個性化需求。

ECharts 個性化定制

事件交互

可以捕獲的用戶交互和數據變化事件實現圖表與外界的聯動。

 

使用幫助及更多幫助大家可以參考前文貼出的官網網址。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM