ECharts.js 數據處理js套件

ECharts.js 數據處理js套件

在接觸前端時其實最怕的就是碰到data需要用圖形來表示,這是我覺得最麻煩的一塊,處理data圖形要自己手刻,不只技術連時間都是一大問題,要花很久時間來寫特效再依照抓到的物件資料讓他能自動畫出圖形。

不過這些前人都已經解決,我們只要用他們的套件就能簡單使用。

ECharts.js 是一個用原生js來實現開源可視化圖形庫,可以再PC跟手機上運行,相容性非常好,向下支援到IE8非常的強大,不過IE8……

豐富的可視化類型

ECharts提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖,用於統計的盒形圖,用於地理數據可視化的地圖、熱力圖、線圖,用於關係數據可視化的關係圖、treemap、旭日圖,多維數據可視化的平行坐標,還有用於BI的漏斗圖,儀錶盤,並且支持圖與圖之間的混搭。

除了已經內置的包含了豐富功能的圖表,ECharts還提供了自定義系列,只需要傳入一個renderItem函數,就可以從數據映射到任何你想要的圖形,更棒的是這些都還能和已有的交互組件結合使用而不需要操心其它事情。

範例連結:https://www.echartsjs.com/examples/zh/editor.html?c=area-simple

使用方式

npm

npm install echarts --save

在 webpack 中使用 echarts

CDN

https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js

https://www.jsdelivr.com/package/npm/echarts

夾尾巴

不知道甚麼端的工程師,低薪努力中

Related Posts

Smooth Scrollbar 平滑滾動條 JS 套件 可讓滾輪更自然

Smooth Scrollbar 平滑滾動條 JS 套件 可讓滾輪更自然

Swiper.js 輪播JS 套件

Swiper.js 輪播JS 套件

fabric.js-HTML5 Canvas 加強套件

fabric.js-HTML5 Canvas 加強套件

No Comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *