echarts-学习笔记及扩展
學習來源:如何挑選數(shù)據(jù)可視化框架及平臺 - 前端篇
? ? ? ? ? ? ? ? ?數(shù)據(jù)可視化分析
可視化庫:D3可視化界的jQuery,ECharts窮人的Highcharts,Highcharts小鎮(zhèn)里的世界級組件,Vega圖表也能低代碼,G2/F2《The Grammar Of Graphics》的追隨者,Chart.js頂級推廣案例,AnyChart悶聲賺錢的圖表庫,FusionCharts高中生的逆襲,amCharts唯一可以免費商用的商業(yè)圖表庫,Google Chart圖表庫的云服務(wù)。
雖然有很多開源圖表庫,但絕大部分不是已經(jīng)棄坑就是將要棄坑了,目前真正能用的就只有ECharts,Ploty.js,Vega,G2.
D3
D3最早出現(xiàn)在Mike Bostock讀博期間發(fā)表的一篇論文里,它的目的并不是做圖標庫,而是成為更低層的基礎(chǔ)設(shè)施,簡化數(shù)據(jù)可視化的開發(fā),它在API設(shè)計方面參考了jQuery,使用,除了類似jQuery的鏈式調(diào)用,D3還有鮮明的特點是將功能拆得非常細,做到了函數(shù)級別,從數(shù)據(jù)解析,轉(zhuǎn)換到布局算法都有提供,這使得開發(fā)者可以十分靈活地進行組合,實現(xiàn)各種可視化的展現(xiàn),這使得D3非常適合拿來學習的可視化算法,而且還能很方便地將這些算法整合到自己的項目中。
D3的鏈式調(diào)用既是優(yōu)點也是缺點,對于沒有學過D3的人會完全看不懂,即便學過看都要花不少精力,如果只是想繪制常見圖表,沒必要直接用D3.
D3的接口基于DOM,用來操作SVG沒問題,但不推薦直接用來操作Canvas和WebGL,這使得D3無法用于大數(shù)據(jù)量及需要像素級別操作的特效。
總的來說D3是一款成功的可視化基礎(chǔ)設(shè)施,它的源碼值得學習,但不推薦直接使用它例子開發(fā)圖表,一方面基于它寫的代碼上手門檻高,另一方面是它的定位并非圖標庫。
ECharts
百度商業(yè)前端團隊嘗試基于canvas來開發(fā)圖表庫ECharts,比起SVG/VML,canvas雖然調(diào)試麻煩,但在大量數(shù)據(jù)點下性能更好。中文文檔的優(yōu)勢。
Echarts有不少自己獨特的功能,其中最亮點的就是Echarts-gl(基于WebGl做的真三維,可以配置光照,材質(zhì),陰影等,還有獨家的后期特效功能。),能實現(xiàn)三維圖表和地球的展示。
作為一個公司內(nèi)的開源產(chǎn)品,Echarts從功能和文檔方面都達到了商業(yè)產(chǎn)品的水平,還有主題編輯器和大量社區(qū)貢獻的案例,而且Echarts團隊在過去7年一直都有提交。
靠用戶貢獻的例子遠遠多于其他圖表庫,一定上緩解了API太多的學習成本,而且ECharts的Issues幾乎都有回復。趕上商業(yè)質(zhì)量的開源庫。
Gallery
Echarts4.0提供了canvas和svg兩種渲染方式,默認使用canvas渲染,而D3是以svg為主的。
總結(jié)
以上是生活随笔為你收集整理的echarts-学习笔记及扩展的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 为什么选择angular?-学习笔记
- 下一篇: yarn add webpack web