重拾技術-可視化(一)

OverView

從技術的角度來看,可視化技術與傳統的前端技術(React / Vue)是兩個完全不同的方向,但在我們日常開發實踐中,其實是會相互用到的。比如我們做任何的項目,多少都會有遇到對應配套的Admin類型的管理系統,對終端進行管理,其中大概率會有的一個模版就是Dashboard,會有圖表內容,進行數據展示,這也就是用到了可視化的技術,例如 EChart,來進行Dashboard內容的繪制。


前端技術與可視化.png

可視化領域的工具

  • 圖表庫
    繪制大量的圖表,比如,柱狀圖、折線圖、餅圖
    ChartJS

    ChartJS.png

  • 地理庫
    一座城市的交通線路和建筑物三維模型,或者一個園區的立體建筑模型等等,我們可能要依賴專業的 GIS 地圖庫
    Mapbox

    Mapbox.png

deck.gl

deck.gl.png

  • 渲染庫

2D:
SpriteJS

3D:
SpriteJS 3D Exension

SpriteJs.png

Three.js
Case :
FF 91

demo.png

  • 數據驅動框架
    專注于處理數據的組織形式,而將數據呈現交給更底層的圖形系統(DOM、SVG、Canvas)或通用圖形庫(SpriteJS、ThreeJS)去完成。

D3.js
個人理解,是一種專注于3D抽象數據,通過數據構成,形成圖形。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容