本人項目中最近有需要圖表的地方,偶然發現一款超級漂亮的動態圖標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 )
特色
我們誠摯邀請你翻閱這份在線文檔 《 Why ECharts ? 》 你可以從中更直觀的體驗到ECharts的特性以及快速瀏覽到所有圖表類型。
*文檔中展現的個別特性在IE8-中並沒有得到支持,所以建議使用IE9+、chrome、safari、firefox或opear等高級瀏覽器閱讀這份文檔。
混搭
混搭的圖表會更具表現力也更有有趣味,ECharts提供的圖表(共7類11種)支持任意混搭:
折線圖(區域圖)、柱狀圖(條狀圖)、散點圖(氣泡圖)、K線圖、 餅圖(環形圖)、地圖、力導布局圖。
混搭情況下一個標准圖表:包含唯一圖例、工具箱、數據區域縮放、值域漫游模塊,一個直角坐標系(可包含一條或多條類目軸線,一條或多條值軸線,最多上下左右四條)
拖拽重計算
拖拽重計算特性(專利)帶來了數據統計圖表從未有過的用戶體驗,允許用戶對統計數據進行有效的提取、整合,甚至在多個圖表間交換數據,賦予了用戶對數據進行挖掘、整合的能力。
數據視圖
如果你所呈現的數據足夠讓用戶所關心,那么他們將不滿足於查看可視化的圖表,要去逐一迎合他們下載保存,數據分享,加工整合已有數據等等需求?
或許你只要給予一個“,”分隔的數據文本他們就懂了,這就是ECharts的數據視圖!當然,你可以重載數據視圖的輸出方法,用你獨特的方式去呈現數據。
如果你的用戶足夠的高端,你甚至可以打開數據視圖的編輯功能,跟拖拽重計算相比,這可是批量的數據修改!
動態類型切換
很多圖表類型本身所表現的能力是相似的,但由於數據差異、表現需求和個人喜好的不同導致最終圖表所呈現的張力又大不一樣,比如折線圖和柱狀圖的選擇總是讓人頭疼。
ECharts提供了動態類型切換,讓用戶隨心所欲的切換到他所需要的圖表類型。
圖例開關
多系列數據的同時展現呈現出豐富內容,但如何讓用戶切換到他所關心的個別系列上?
ECharts提供了方便快捷的圖例開關,可以隨時切換到你所關心的數據系列。
數據區域選擇
數據可以是無限的,但顯示空間總是有限的,數據區域選擇組件提供了大數據量中漫游的能力,讓用戶選擇並呈現他所關心的數據區域。
值域漫游
基於坐標的圖表(如地圖、散點圖)通過色彩變化表現數值的大小能直觀形象的展示數據分布。
但如何聚焦到我所關心的數值上?我們創造了稱為值域漫游的功能,讓你可以輕松進行數值篩選。
大規模散點圖
如何展現成千上百萬的離散數據從而找出他們的分布和聚類?貌似除了用專業的統計工具(如MATLAB)外別無選擇?
不,ECharts發明了基於像素的大規模散點圖(專利),一個900 x 400的散點區域就能夠毫不重復的呈現35萬組數據,這對於常規的應用,用現代瀏覽器就足以輕松展現百萬級的散點數據!
標線輔助
趨勢線?平均線?未來走勢?修正值?有需求用戶自然知道用意~
提供標線輔助在K線圖中可是必要的功能!是的,K線圖我們正在開發中~
多維度堆積
支持多系列,多維度的數據堆積,配合自動伸縮的圖形實體和直角坐標系,能呈現出更有內涵的統計圖表~
個性化定制
近300個可配置選項結合多級控制設計滿足高度定制的個性化需求。
事件交互
可以捕獲的用戶交互和數據變化事件實現圖表與外界的聯動。
使用幫助及更多幫助大家可以參考前文貼出的官網網址。