ECharts艘虎,一個使用 JavaScript 實現(xiàn)的開源可視化庫斋射,可以流暢的運行在 PC 和移動設(shè)備上,兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11蕾额,Chrome早芭,F(xiàn)irefox,Safari等)诅蝶,底層依賴矢量圖形庫 ZRender退个,提供直觀,交互豐富调炬,可高度個性化定制的數(shù)據(jù)可視化圖表语盈。
我為什么要使用ECharts繪制圖表?
豐富的可視化類型:ECharts 提供了常規(guī)的折線圖缰泡、柱狀圖刀荒、散點圖、餅圖、K線圖缠借,用于統(tǒng)計的盒形圖干毅,用于地理數(shù)據(jù)可視化的地圖、熱力圖泼返、線圖硝逢,用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap符隙、旭日圖趴捅,多維數(shù)據(jù)可視化的平行坐標(biāo),還有用于 BI 的漏斗圖霹疫,儀表盤拱绑,并且支持圖與圖之間的混搭。
幾乎你想到的圖表丽蝎,ECharts都支持猎拨。動態(tài)數(shù)據(jù):ECharts 由數(shù)據(jù)驅(qū)動,數(shù)據(jù)的改變驅(qū)動圖表展現(xiàn)的改變屠阻。因此動態(tài)數(shù)據(jù)的實現(xiàn)也變得異常簡單红省,只需要獲取數(shù)據(jù),填入數(shù)據(jù)国觉,ECharts 會找到兩組數(shù)據(jù)之間的差異然后通過合適的動畫去表現(xiàn)數(shù)據(jù)的變化吧恃。配合 timeline 組件能夠在更高的時間維度上去表現(xiàn)數(shù)據(jù)的信息
填入、刪除數(shù)據(jù)麻诀,通過圖表的動畫效果體現(xiàn)數(shù)據(jù)在時間痕寓、空間上的演進(jìn)。
ECharts需要編碼蝇闭,我能做到么呻率?
官方提供相當(dāng)多的實例,你可以更改其中的數(shù)據(jù)呻引,使圖表變成自己所需的結(jié)果礼仗。并且筆者在代碼部分逐條增加了注釋,相信即便是完全沒有接觸過前端代碼的讀者逻悠,也能夠理解每行代碼的意義元践。
筆者并不是很懂javaScript,但僅僅根據(jù)官方文檔童谒,仍然粗淺的了解了一些Echarts使用方法和技巧单旁。本文一方面記錄筆者的Echarts使用過程,另一方面也會簡單介紹數(shù)據(jù)可視化的個人經(jīng)驗惠啄。
本文主要用于筆者個人的回顧,也應(yīng)當(dāng)適合數(shù)據(jù)可視化的初學(xué)者學(xué)習(xí)。文中出現(xiàn)的全部數(shù)據(jù)均來源于網(wǎng)絡(luò)撵渡,或者是作者生成的隨機(jī)數(shù)據(jù)融柬。