推薦一些有趣實(shí)用的前端可視化工具庫(kù)，提升我們開(kāi)發(fā)效率
前言
前端可視化一直是人們常談到的詞，隨著SVG，Canvas，WebGL等技術(shù)的發(fā)展，涌現(xiàn)了一大批的優(yōu)秀的可視化庫(kù)。本文將從中選擇一些有趣實(shí)用的推薦給大家，工具使用好了，開(kāi)發(fā)效率自然也就提升了。
ECharts
ECharts是一個(gè)基于 JavaScript 的開(kāi)源可視化圖表庫(kù)。我相信很多做過(guò)可視化相關(guān)項(xiàng)目的伙伴們都用過(guò)，可以說(shuō)是永遠(yuǎn)滴神了。
GitHub：https://github.com/apache/echarts
網(wǎng)站：https://echarts.apache.org/zh/index.html
makeapie
makeapie 是 ECharts社區(qū)資源集合地。網(wǎng)站里面有很多社區(qū)小伙伴的作品，如果你實(shí)在想不出實(shí)現(xiàn)效果，那就到makeapie看看，很可能就有你想要的。
網(wǎng)站：https://www.makeapie.com/explore.html
ZRender
ZRender是一個(gè)二維繪圖引擎，它提供 Canvas、SVG、VML 等多種渲染方式。ZRender 也是 ECharts 的渲染器。有興趣的小伙伴可以研究研究。
GitHub：https://github.com/ecomfe/zrender
網(wǎng)站：https://ecomfe.github.io/zrender-doc/public/
Chartjs
Chartjs是一個(gè)為設(shè)計(jì)人員和開(kāi)發(fā)人員提供簡(jiǎn)單而靈活的JavaScript圖表。風(fēng)格挺清新。
GitHub：https://github.com/chartjs/Chart.js
網(wǎng)站：https://www.chartjs.org/
中文：https://chartjs.bootcss.com/
D3.js
D3.js 是用于數(shù)據(jù)可視化的開(kāi)源的JavaScript函數(shù)庫(kù)，被認(rèn)為是很好的JavaScript可視化框架之一。相比于ECharts更靈活，也更復(fù)雜。
GitHub：https://github.com/d3/d3
網(wǎng)站：https://d3js.org/
AntV
AntV系列：包含各種數(shù)據(jù)可視化的解決方案，這一套很系統(tǒng)，包含了數(shù)據(jù)可視化的方方面面。
GitHub：https://github.com/antvis
網(wǎng)站：https://antv.vision/zh
AntV G2
AntV G2 是一套面向常規(guī)統(tǒng)計(jì)圖表，以數(shù)據(jù)驅(qū)動(dòng)的高交互可視化圖形語(yǔ)法，具有高度的易用性和擴(kuò)展性。
網(wǎng)站：https://g2.antv.vision/zh
AntV F2
AntV F2是一個(gè)專(zhuān)注于移動(dòng)端，面向常規(guī)統(tǒng)計(jì)圖表，開(kāi)箱即用的可視化引擎。
網(wǎng)站：https://f2.antv.vision/zh
AntV G6
AntV G6是一個(gè)簡(jiǎn)單、易用、完備的圖可視化引擎。
網(wǎng)站：https://g6.antv.vision/zh
AntV X6
AntV X6是一個(gè)圖編輯引擎，提供了一系列開(kāi)箱即用的交互組件和簡(jiǎn)單易用的節(jié)點(diǎn)定制能力，方便我們快速搭建 DAG 圖、ER 圖、流程圖等應(yīng)用。
網(wǎng)站：https://x6.antv.vision/zh
AntV L7
AntV L7是一個(gè)地理空間可視化分析引擎。
網(wǎng)站：https://l7.antv.vision/zh
SpriteJS
SpriteJS是一個(gè)跨平臺(tái)的高性能圖形系統(tǒng)，它能夠支持web、node、桌面應(yīng)用和小程序的圖形繪制和實(shí)現(xiàn)各種動(dòng)畫(huà)效果。
GitHub：https://github.com/spritejs/spritejs
網(wǎng)站：https://spritejs.org/#/zh-cn/index
Rough.js
Rough.js：可以用來(lái)繪制草圖外觀的圖形。
GitHub：https://github.com/rough-stuff/rough
網(wǎng)站：https://roughjs.com/
ThreeJS
ThreeJS 是一款開(kāi)源的主流3D繪圖JS引擎。
GitHub：https://github.com/mrdoob/three.js/
網(wǎng)站：https://threejs.org/
Pixi.js
Pixi.js是一個(gè)非常快的 2D sprite 渲染引擎，支持webgl。可以幫助我們顯示、動(dòng)畫(huà)和管理交互式圖形，這樣我們就可以輕松地使用JavaScript和其他HTML5技術(shù)制作游戲和應(yīng)用程序。
GitHub：https://github.com/pixijs/pixijs
網(wǎng)站：https://pixijs.com/
中文：https://pixijs.huashengweilai.com/
Phaser
Phaser是一個(gè)快速、有趣并且免費(fèi)的開(kāi)源H5游戲開(kāi)源框架。對(duì)H5游戲開(kāi)發(fā)感興趣可以看看 Pixi.js 這個(gè)庫(kù)。
GitHub：https://github.com/photonstorm/phaser
網(wǎng)站：http://phaser.io/
SVG.js
SVG.js是用于操縱SVG和設(shè)置SVG動(dòng)畫(huà)的輕量級(jí)庫(kù)。
GitHub：https://github.com/svgdotjs/svg.js
網(wǎng)站：https://svgjs.dev/docs/3.0/
Snap.svg
Snap.svg 是一個(gè)為現(xiàn)代web而生的JavaScript SVG庫(kù)。
GitHub：https://github.com/adobe-webplatform/Snap.svg
網(wǎng)站：http://snapsvg.io/
Fabric.js
Fabric.js 是一個(gè)操作canvas的庫(kù)，可以進(jìn)行svg和canvas的相互轉(zhuǎn)換。
GitHub：https://github.com/fabricjs/fabric.js
網(wǎng)站：http://fabricjs.com/
Easing functions
Easing functions 自定義參數(shù)隨時(shí)間變化的速率，幫助我們選擇正確的緩動(dòng)函數(shù)。
GitHub：https://github.com/ai/easings.net
網(wǎng)站：https://easings.net/en#
Animate.css
Animate.css 跨瀏覽器的CSS動(dòng)畫(huà)庫(kù)。
GitHub：https://github.com/animate-css/animate.css
網(wǎng)站：https://animate.style/
Anime.js
Anime.js 一個(gè)輕量級(jí)JavaScript動(dòng)畫(huà)庫(kù)，具有簡(jiǎn)單但功能強(qiáng)大的API。
GitHub：https://github.com/juliangarnier/anime
網(wǎng)站：https://animejs.com/
中文：https://www.animejs.cn/
Hover.css
Hover.css 純CSS3鼠標(biāo)滑過(guò)特效庫(kù)
GitHub：https://github.com/IanLunn/Hover
網(wǎng)站：http://ianlunn.github.io/Hover/
最后
暫時(shí)就分享這么多吧，上面這些庫(kù)的實(shí)用性都比較高的，而且有些還十分有趣。如果你也用過(guò)文章沒(méi)有，但是也很有趣或?qū)嵱茫瑲g迎分享~