本文來盤點(diǎn)前端數(shù)據(jù)可視化的各種常用工具庫！

圖片

圖表

ECharts

ECharts是一個(gè)基于JavaScript的開源數(shù)據(jù)可視化庫，它由百度開源，現(xiàn)在由 Apache 基金會維護(hù)。ECharts提供了豐富的圖表類型、靈活的配置選項(xiàng)和強(qiáng)大的交互功能，使得開發(fā)者能夠輕松構(gòu)建出美觀且功能強(qiáng)大的數(shù)據(jù)可視化應(yīng)用。

圖片

Github：https://github.com/apache/echarts

AntV

AntV 是螞蟻集團(tuán)旗下的一款強(qiáng)大的數(shù)據(jù)可視化解決方案。它提供了一系列的圖表庫和工具，旨在幫助開發(fā)者輕松地創(chuàng)建和管理復(fù)雜的數(shù)據(jù)可視化項(xiàng)目。AntV 的主要產(chǎn)品包括 Ant Design Charts、 G2、G6、X6、L7等，這些產(chǎn)品支持多種圖表類型，如折線圖、柱狀圖、餅圖、散點(diǎn)圖、地圖等，同時(shí)也提供了豐富的交互功能和定制選項(xiàng)。

圖片

Github：https://github.com/antvis

VChart

VChart 是字節(jié)跳動開源可視化解決方案 VisActor 的核心圖表組件庫。它基于可視化語法庫 VGrammar 和渲染引擎 VRender 進(jìn)行封裝，在滿足數(shù)據(jù)呈現(xiàn)的同時(shí)，還支持面向敘事場景的動畫編排、豐富的交互能力和定制化的圖表風(fēng)格，簡單易用的配置大大降低了用戶的學(xué)習(xí)成本。

圖片

Github：https://github.com/VisActor/VChart

Chart.js

Chart.js 是一個(gè)基于 HTML5 的 JavaScript 圖表庫，它通過 Canvas 元素創(chuàng)建美觀的圖表，支持多種常見的圖表類型，如折線圖、柱狀圖、餅圖等。它的設(shè)計(jì)理念是簡單易懂，讓開發(fā)者能夠快速上手，同時(shí)保持足夠的靈活性，滿足各種需求。

圖片

Github：https://github.com/chartjs/Chart.js

BizCharts

BizCharts 是由阿里巴巴開源的一個(gè)基于 G2 封裝的 React 圖表庫，具有 G2、React 的全部優(yōu)點(diǎn)，可以讓用戶以組件的形式組合出無數(shù)種圖表;并且集成了大量的統(tǒng)計(jì)工具，支持多種坐標(biāo)系繪制，交互定制，動畫定制以及圖形定制等等。

圖片

Github：https://github.com/alibaba/BizCharts

shadcn/ui

Shadcn/ui 是一個(gè)爆火的現(xiàn)代UI組件集合，它并不是傳統(tǒng)意義上的組件庫或UI框架，而是一個(gè)提供可復(fù)用組件的集合，允許開發(fā)者通過復(fù)制粘貼的方式將組件源代碼直接集成到項(xiàng)目中，最近它推出了 Recharts 的圖表組件，簡單精美，易于使用。

圖片

Github：https://github.com/shadcn-ui/ui

圖形

Fabric.js

Fabric.js 是一個(gè)開源的 JavaScript 圖形庫，用于在HTML5 Canvas上進(jìn)行交互式的對象模型操作和渲染。它簡化了在Canvas上繪制圖形、文本、圖像和其他視覺元素的過程，并提供了豐富的交互功能，如選擇、拖動、縮放、旋轉(zhuǎn)等。

圖片

Github：https://github.com/fabricjs/fabric.js

konva.js

Konva.js 是一個(gè)基于 HTML5 Canvas 的高性能 2D JavaScript 圖形庫，提供豐富的API和靈活的圖層管理功能，用于實(shí)現(xiàn)復(fù)雜的圖形交互和動畫效果。

圖片

Github：https://github.com/konvajs/konva

PixiJS

PixiJS 是一個(gè)開源的 2D WebGL 渲染器，同時(shí)也支持 Canvas 渲染。它是一個(gè)高性能、輕量級的JavaScript庫，用于創(chuàng)建具有復(fù)雜圖形、動畫和交互性的 Web 應(yīng)用。PixiJS 廣泛應(yīng)用于游戲開發(fā)、廣告和互動內(nèi)容等領(lǐng)域。

圖片

Github：https://github.com/pixijs/pixijs

地圖

AntV-L7

L7 是由螞蟻金服 AntV 數(shù)據(jù)可視化團(tuán)隊(duì)推出的基于 WebGL 的開源大規(guī)模地理空間數(shù)據(jù)可視分析開發(fā)框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能為全球位置數(shù)據(jù)提供可視分析的能力。L7 以圖形符號學(xué)為理論基礎(chǔ)，將抽象復(fù)雜的空間數(shù)據(jù)轉(zhuǎn)化成 2D、3D 符號，通過顏色、大小、體積、紋理等視覺變量實(shí)現(xiàn)豐富的可視化表達(dá)。

圖片

Github：https://github.com/antvis/L7

Leaflet.js

Leaflet 是一個(gè)輕量級開源 JavaScript 庫，專為移動友好的交互式地圖設(shè)計(jì)。它的大小僅為約42KB，但包含了大多數(shù)開發(fā)者所需的地圖功能。Leaflet注重簡單性、性能和易用性，能夠在所有主流桌面和移動平臺上高效運(yùn)行。此外，它還可以通過大量插件進(jìn)行擴(kuò)展，擁有美觀、易用且文檔齊全的API。

Github：https://github.com/Leaflet/Leaflet

3D

Three.js

Three.js 是一款基于 WebGL 的開源 JavaScript 庫，旨在簡化在網(wǎng)頁上創(chuàng)建和顯示3D圖形的過程，使得即使是沒有深厚圖形學(xué)背景的開發(fā)者也能輕松上手。Three.js 通過提供一系列高級API，隱藏了WebGL的復(fù)雜性，使得開發(fā)者可以專注于創(chuàng)意和邏輯實(shí)現(xiàn)，而不是底層的圖形渲染細(xì)節(jié)。

圖片

Github：https://github.com/mrdoob/three.js

React Three Fiber

React Three Fiber是一個(gè)用于React的Three.js渲染器，它允許開發(fā)者使用React的聲明式編程范式來創(chuàng)建和控制3D圖形。這個(gè)庫旨在將React的易用性和Three.js的強(qiáng)大3D渲染能力結(jié)合起來，使得在Web應(yīng)用中構(gòu)建復(fù)雜的3D界面變得更加簡單和直觀。

圖片

Github：https://github.com/pmndrs/react-three-fiber

基礎(chǔ)

D3.js

D3(Data-Driven Documents)是一個(gè) JavaScript 庫，用于使用 Web 標(biāo)準(zhǔn)將數(shù)據(jù)可視化。D3 可以使用SVG、 Canvas 和 HTML 將數(shù)據(jù)變?yōu)楝F(xiàn)實(shí)。D3 將強(qiáng)大的可視化和交互技術(shù)與數(shù)據(jù)驅(qū)動的DOM操作方法相結(jié)合，讓你擁有現(xiàn)代瀏覽器的全部功能，并可以自由地為數(shù)據(jù)設(shè)計(jì)合適的可視化界面。

Github：https://github.com/d3/d3

其他

流程圖

Mermaid

Mermaid是一個(gè)基于JavaScript的開源工具，用于在Markdown文檔中繪制流程圖、序列圖、甘特圖等圖表。它允許開發(fā)者通過簡單的文本描述來定義圖表的結(jié)構(gòu)，然后將這些描述轉(zhuǎn)換為SVG格式的圖形。

圖片

Github：https://github.com/mermaid-js/mermaid

React Flow

React Flow 是一個(gè)基于React的可視化工作流庫，它主要用于構(gòu)建和渲染流程圖、工作流程、數(shù)據(jù)流圖等可視化圖表。React Flow提供了豐富的功能和靈活的擴(kuò)展性，可以幫助開發(fā)者快速構(gòu)建出高質(zhì)量的可視化工作流應(yīng)用。

圖片

Github：https://github.com/xyflow/xyflow

flowchart.js

Flowchart.js是一個(gè)基于JavaScript的開源庫，用于在網(wǎng)頁上繪制流程圖。它允許開發(fā)者通過簡單的文本描述來定義流程圖的結(jié)構(gòu)，然后將這些描述轉(zhuǎn)換為SVG格式的圖形。

圖片

Github：https://github.com/adrai/flowchart.js

甘特圖

Frappe Gantt

Frappe Gantt是一個(gè)用于生成甘特圖的JavaScript庫，支持交互式繪制、拖拽、縮放、任務(wù)依賴關(guān)系和時(shí)間刻度等功能。

圖片

Github：https://github.com/frappe/gantt

gantt-task-react

gantt-task-react是一個(gè)基于React和TypeScript的交互式甘特圖組件。它允許用戶快速創(chuàng)建美觀、可交互的甘特圖，并提供了各種配置選項(xiàng)，使得開發(fā)者可以自定義甘特圖的背景色、時(shí)間刻度、任務(wù)欄等樣式。

圖片

Github：https://github.com/MaTeMaTuK/gantt-task-react

Vue Ganttastic

Vue Ganttastic 是一個(gè)基于Vue 3的簡單、交互式且高度可定制的甘特圖組件。它可以在Web應(yīng)用中展示任務(wù)和進(jìn)度，支持拖拽、縮放和事件處理等交互特性。

圖片

Github：https://github.com/zunnzunn/vue-ganttastic

詞云圖

wordcloud2.js

wordcloud2.js 是一個(gè)基于 JavaScript 的詞云生成庫，它允許開發(fā)者通過簡單的配置項(xiàng)快速生成詞云圖。詞云圖是一種數(shù)據(jù)可視化形式，它將文字按照出現(xiàn)的頻率進(jìn)行排列和展示，使得高頻詞匯更加突出。

Github：https://github.com/timdream/wordcloud2.js

echarts-wordcloud

echarts-wordcloud是基于echarts的一個(gè)詞云庫，用于在echarts可視化圖表中創(chuàng)建詞云。它能夠和echarts.js完美融合，使用起來非常方便，支持自定義詞云的顏色、形狀、布局和樣式等多種設(shè)置。

Github：https://github.com/ecomfe/echarts-wordcloud

d3-cloud

d3-cloud 是一個(gè)基于 D3.js 的 JavaScript 庫，用于生成詞云圖。

Github：https://github.com/jasondavies/d3-cloud