> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/frontend/0002-chang-yong-qian-duan-ku-gai-lan.md).

# 02 常用前端库概览

本文根据一些资料和日常开发，整理了 GitHub上一些优秀的前端库，包括常用工具、图片处理、文件处理、编辑器、数据可视化、React 相关、Vue 相关等库。

## JavaScript

### 常用工具类

* [**lodash**](https://www.lodashjs.com/)**：** 是一个一致性、模块化、高性能的 JavaScript 实用工具库，通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单；
* [**ramda**](https://ramda.cn/)**：** 专门为函数式编程风格而设计，特性如下：
  * Ramda 强调更加纯粹的函数式风格。数据不变性和函数无副作用是其核心设计理念；
  * Ramda 函数本身都是自动柯里化的；
  * Ramda 函数参数的排列顺序更便于柯里化；
* [**moment**](http://momentjs.cn/)： 一个JavaScript 日期处理类库；
* [**day.js**](https://dayjs.gitee.io/zh-CN/)**：** day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样，是 moment.js 的 2kB 轻量化方案；
* [**bignumber.js**](https://github.com/MikeMcl/bignumber.js/)： 一个用于任意精度十进制和非十进制算术的 JavaScript 库；
* [**decimal.js**](https://github.com/MikeMcl/decimal.js/)**：** 一个用于任意精度十进制类型计算的 JavaScript 库；
* [**big.js**](https://github.com/MikeMcl/big.js)**：** 一个用于任意精度十进制算术的小型快速 JavaScript 库（[big.js、bignumber.js 和 decimal.js 有什么区别？](https://github.com/MikeMcl/big.js/wiki)）；
* [**qs**](https://www.npmjs.com/package/qs)**：** 一个查询字符串解析和字符串化库，增加了一些安全性；
* [**query-string**](https://www.npmjs.com/package/query-string)： 一个解析和字符串化 URL查询字符串的库；

### 常用框架

* [**Axios**](https://www.npmjs.com/package/axios)**：** 一个基于 Promise 的 HTTP 库，可用在 Node.js 和浏览器上发起 HTTP 请求，支持所有现代浏览器，甚至包括 IE8+；
* [**mockjs**](https://www.npmjs.com/package/mockjs)： 一个生成随机数据和拦截 Ajax 请求的生成器，帮助前端开发和原型与后端进度分离，减少一些单调，特别是在编写自动化测试时；
* [**Superagent**](https://www.npmjs.com/package/superagent)**：** 一个小型渐进式客户端 HTTP 请求库，与具有相同 API 的 Node.js 模块，支持许多高级 HTTP 客户端功能；
* [**flyio**](https://www.npmjs.com/package/@oiinetech/flyio)**：** 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库，目前支持：Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器，这些平台的 JavaScript 运行时都是不同的。
* [**swiper**](https://www.npmjs.com/package/swiper)**：** 一个强大的 js 跨端触摸滑动库；
* [**fullPage.js**](https://www.npmjs.com/package/fullpage.js)**：** 一个简单易用的库，可创建全屏滚动网站（也称为单页网站或单页网站）并在网站的各个部分中添加横向滑块；
* [**better-scroll**](https://www.npmjs.com/package/better-scroll)**：** 一个移动端使用的滚动插件；
* [**fastclick**](https://www.npmjs.com/package/fastclick)**：** 一个简单易用的 JavaScript 库，用于消除 click 移动端浏览器上物理点击和触发事件之间的 300 毫秒延迟。
* [**vconsole**](https://www.npmjs.com/package/vconsole)**：** 一个用于移动端网页的轻量级、可扩展的前端开发调试工具，可以在 Vue、React、微信小程序及任何其他框架应用程序中使用它。
* [**JQuery**](https://www.npmjs.com/package/jquery)**：** jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单，它具有易于使用的 API，可在多种浏览器中使用；
* [**zepto**](https://www.npmjs.com/package/zepto)**：** Zepto 是一个用于现代浏览器的极简 JavaScript 库，具有很大程度上与 jQuery 兼容的 API，是JQuery 的轻量级版本, 适合移动端；

### 表单校验类

* [**Validator.js**](https://www.npmjs.com/package/validator)**：** 一个基于 Laravel 5.2 验证的客户端 JavaScript 校验库；
* [**validator.js**](https://www.npmjs.com/package/validator)**：** 一个校验和处理字符串的强大的 Javascript 库，**仅用于字符串**；
* [**validate.js**](https://www.npmjs.com/package/validate.js)**：** 一个提供跨框架和跨语言的数据验证方式的 Javascript 库；
* [**id-validator**](https://www.npmjs.com/package/id-validator)： 一个用于验证个人身份证号码（中国）的 Javascript 库；

### 图形图像处理

* [**html2canvas**](https://www.npmjs.com/package/html2canvas)**：** 一个强大的使用 Js 开发的浏览器网页截图工具，通过读取 DOM 和应用于元素的不同样式将当前页面呈现为 canvas 图像。

  **注意：** 该包仍处于**实验性的状态**，因此不建议在生产环境中使用它，也不要用它构建应用程序，因为后面可能进行重大更改。
* [**dom-to-image**](https://www.npmjs.com/package/dom-to-image)**：** 一个可以将任意 DOM 节点转换为用 JavaScript 编写的矢量（SVG）或光栅（PNG 或 JPEG）图像的库；
* [**pica**](https://www.npmjs.com/package/pica)**：** 一个在浏览器中调整图像大小，而不会出现像素失真，处理速度非常快的图片处理库；
* [**Lena.js**](https://www.npmjs.com/package/lena.js)**：** 一个轻量级的可以给你图像加各种滤镜的 js 库；
* [**Compressor.js**](https://www.npmjs.com/package/compressorjs)**：** 一个使用本地 canvas.toBlob API 进行图像有损压缩的 js 库，在不同的浏览器有**不同的压缩效果**。
* [**Fabric.js**](http://fabricjs.com/)**：** 一个强大的 Javascript 库，它让使用 HTML5 画布变得轻而易举；
* [**merge-images**](https://www.npmjs.com/package/merge-images)**：** 一个可以组合多张图片的 Javascript 库；
* [**cropperjs**](https://www.npmjs.com/package/cropperjs)**：** 一款强大的图片裁切库, 支持灵活的图片裁切方式；
* [**grade-js**](https://www.npmjs.com/package/grade-js)**：** 一个基于图像中的前 2 种主要颜色生成互补渐变背景的库；

### 文件处理

* [**file-saver**](https://www.npmjs.com/package/file-saver)**：** 一个在客户端保存文件的解决方案，非常适合在客户端上生成文件的 Web 应用程序；
* [**js-xlsx**](https://www.npmjs.com/package/js-xlsx)**：** 一个强大的解析和编写 excel 文件的库；
* [**jspdf**](https://www.npmjs.com/package/jspdf)： 一个基于 Javascript 生成 PDF 的库；
* [**pdfjs**](https://www.npmjs.com/package/pdfjs)： 一个面向服务器端和客户端的可移植文档格式 (PDF) 生成库；
* [**pdfh5.js**](https://www.npmjs.com/package/pdfh5)： 一个基于 pdf.j s和 jQuery 的 web|h5|移动端的支持手势缩放的 PDF 预览库。
* [**x-spreadsheet**](https://www.npmjs.com/package/x-data-spreadsheet)**：** 一个基于 JavaScript 快速构建 Web Excel 的库；
* [**file-viewer**](https://www.npmjs.com/package/file-viewer)**：** 一个使用 Svelte 构建的用于预览文件的自定义组件（Web 组件），可以在任何地方使用，无论框架如何，技持文件格式：.ppt, .pptx, .doc, .docx, .xls, .xlsx, .pdf, .png, .jpg, .jpeg, .gif，类似的有 [react-file-viewer](https://www.npmjs.com/package/@studyworld/react-file-viewer) ；
* [**html2md**](https://www.npmjs.com/package/html-to-md)： 一个用于转换 HTML 为 Markdown 的工具；
* [**marked**](https://www.npmjs.com/package/marked)**：** 一个用于解析 Markdown 的低级编译器；
* [**markdown-it**](https://www.npmjs.com/package/markdown-it)： 一个快速且易于扩展的 Markdown 解析器；
* [**handsontable**](https://handsontable.com/)，一个结合了数据网格特性的 JavaScript组件，类似于 Excel 编辑表格。

### 动画库

* [**threejs**](https://threejs.org/)**：** 一个跨浏览器的脚本，使用 JavaScript 函数库或 API 来在网页浏览器中**创建和展示动画的三维计算机图形库**；
* [**animejs**](https://www.npmjs.com/package/animejs)**：** 一个轻量级的 JavaScript 动画库，具有简单但功能强大的 API，适用于 CSS 属性、SVG、DOM 属性和 JavaScript 对象。
* [**velocity-animate**](https://www.npmjs.com/package/velocity-animate)**：** 一个动画引擎，其 API 与 jQuery 的 $.animate() 相同。它可以使用和不使用 jQuery。它的速度非常快，并且具有**彩色动画**、**变换**、**循环**、**缓**动、**SVG 支持**和**滚动**。它是 jQuery 和 CSS 过渡组合中最好的。
* [**Vivus**](https://www.npmjs.com/package/vivus)**：** 一个零依赖的 JavaScript 动画库，可以让 SVG 具有**被绘制**的效果；
* [**gsap**](https://www.npmjs.com/package/gsap)**：** 一个 JavaScript 动画库，用于创建高性能、零依赖、跨浏览器动画，已在超过 400 万个网站上使用，并且可以在 React、Vue、Angular 项目中使用；
* [**scrollreveal**](https://www.npmjs.com/package/scrollreveal)**：** 一个 JavaScript 库，用于在元素进入/离开视口时轻松设置动画；
* [**Kute.js**](https://www.npmjs.com/package/kute.js)**：** 一个基于 ES6+ 标准的现代 JavaScript 动画引擎，具有强大的 TypeScript 定义和最重要的 Web 功能，以及易于使用的方法来设置高性能、跨浏览器动画；
* [**Typed.js**](https://www.npmjs.com/package/typed.js)**：** 一个轻松实现打字效果的 JavaScript 库；
* [**mixitup**](https://www.npmjs.com/package/mixitup)**：** 一个用于动画 DOM 操作的高性能、无依赖库，使您能够过滤、排序、添加和删除带有漂亮动画的 DOM 元素；
* [**lottie-web**](https://www.npmjs.com/package/lottie-web)**：** 一个用于 Android，iOS，Web 和 Windows 的库，用于解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画，并在移动设备和网络上呈现它们；

### 鼠标/键盘相关

* [**Hotkeys**](https://www.npmjs.com/package/hotkeys-js)**：** 一个强大的 Javascript 库，用于捕获键盘输入和输入的组合键，无需其他依赖关系；
* [**sortablejs**](https://www.npmjs.com/package/sortablejs)**：** 一个用于可重新排序的拖放列表的 JavaScript 库；

### 其他

* [**uuid**](https://www.npmjs.com/package/uuid)： 一个用于创建 RFC4122 uuid 的库；
* [**md5**](https://www.npmjs.com/package/md5)： 一个用于生成 MD5 散列消息的 JavaScript 函数；
* [**crypto-js**](https://www.npmjs.com/package/crypto-js)： 一个用于加密的 JavaScript 库；
* [**javascript-obfuscator**](https://www.npmjs.com/package/javascript-obfuscator)： 一款功能强大的免费 JavaScript 混淆器，包含多种功能，可为您的源代码提供保护；
* [**nodemailer**](https://www.npmjs.com/package/nodemailer)：一个用 Node.js 发送电子邮件的库；
* [**clipboard.js**](https://www.npmjs.com/package/clipboard)： 一个 JS 实现的剪贴板功能，没有 flash，压缩后只有 3kb；
* [**qrcode**](https://www.npmjs.com/package/qrcode)**：** 一个二维码/二维条码生成器；
* [**nprogress**](https://www.npmjs.com/package/nprogress)**：** 一个顶部进度条组件；
* [**emoji-mart**](https://www.npmjs.com/package/emoji-mart)**：** 一个基于 React 的表情库，类似的还有 [emoji-mart-vue](https://www.npmjs.com/package/emoji-mart-vue)、[V-Emoji-Picker](https://www.npmjs.com/package/v-emoji-picker)、[@kevinfaguiar/vue-twemoji-picker](https://www.npmjs.com/package/@kevinfaguiar/vue-twemoji-picker)；
* [**watermarkjs**](https://www.npmjs.com/package/watermarkjs)**：** 一个用于在浏览器中为图像加水印的功能库，用 ES6 编写，并通过Babel提供给当前浏览器，支持 url、文件输入、blob 和页面图像；
* [**jsdoc**](https://www.npmjs.com/package/jsdoc)**：** 一个 JavaScript 的 API 文档生成器；
* [**array-to-tree**](https://www.npmjs.com/package/array-to-tree)： 一个将普通的节点数组（带有指向父节点的指针）转换为嵌套 JSON 数据结构的转换器；
* [**hammerjs**](https://www.npmjs.com/package/hammerjs)**：** 一个可以识别触摸、鼠标和点击事件等手势的开放源码类库，没有任何依赖项并且只有 **7.34 kB 缩小 + gzip压缩**!；

## CSS

* [**reset.css**](https://www.npmjs.com/package/reset.css)： 一个重置样式表的 CSS 文件，减少浏览器在默认行高、页边距和标题字体大小等方面的不一致，查看[CSS 工具：重置 CSS](https://meyerweb.com/eric/tools/css/reset/)。
* [**normalize.css**](https://www.npmjs.com/package/normalize.css)：一个很小的 CSS 文件，为 HTML 元素样式上提供了跨浏览器的高度一致性，相比于传统的 reset.css，Normalize.css 是一种现代的、为HTML5准备的优质替代方案，查看[来，让我们谈一谈 Normalize.css](https://jerryzou.com/posts/aboutNormalizeCss/)。
* [**hover.css**](https://www.npmjs.com/package/hover.css)**：** 一组 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等；
* [**animate.css**](https://www.npmjs.com/package/animate.css)**：** 一个现成的跨浏览器动画库；
* [**magic.css**](https://www.npmjs.com/package/magic.css)**：** 一个具有特殊效果的 CSS3 动画；
* [**kite**](https://hiloki.github.io/kitecss/)**：** 一个灵活的布局助手 CSS 库，使用 **`inline-block`**，而不是最新的 CSS 语法，适用于大多数浏览器，包括 IE8、Android2.3.x；
* [**csshake**](https://www.npmjs.com/package/csshake)**：** 一个使用 CSS3 实现的动画样式，实现多种不同样式的抖动效果；
* [**hint.css**](https://www.npmjs.com/package/hint.css)**：** 一个用纯 css 和 html 实现的提示库；

## React

* [**Create React App**](https://cra.docschina.org/)： 一个React 官方维护的创建 React 单页面应用的工具；
* [**React Native**](https://reactnative.cn/)： 一个基于 React 的移动端跨平台 UI；
* [**Ant design**](https://ant.design/index-cn)**：** 一个基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品；
* [**Ant design mobile**](https://mobile.ant.design/)**：** 一个基于 Ant Design 设计体系的 React UI 移动端组件库；
* [**MaterialUI**](https://mui.com/zh/getting-started/installation/)**：** 世界最受欢迎的基于质感设计的 React UI 库
* [**Fluent UI React**](https://developer.microsoft.com/en-us/fluentui)**：** 一组微软开源的 UX 框架的集合，用于创建共享代码，设计和交互行为的精美的跨平台应用程序；
* [**React desktop**](https://reactdesktop.js.org/)**：** 一个基于Facebook 的 React库构建的 JavaScript 库，旨在为网络带来原生桌面体验，包含许多 macOS Sierra 和 Windows 10 组件。 react-desktop与NW\.js和Electron.js完美配合，但可以在任何 JavaScript 驱动的项目中使用！
* [**zent**](https://youzan.github.io/zent/zh/guides/writing-themable-code)**：** 是有赞 PC 端 WebUI 规范的 React 实现，提供了一整套基础的 UI 组件以及一些常用的业务组件。
* [**react-virtualized**](https://www.npmjs.com/package/react-virtualized)**：** 一组用于高效渲染大型列表和表格数据的 React 组件；
* [**react-beautiful-dnd**](https://www.npmjs.com/package/react-beautiful-dnd)**：** 一个漂亮且易于访问的列表拖放 React 组件；
* [**react-dnd**](https://www.npmjs.com/package/react-dnd)**：** 一组 React 实用程序，可帮助您构建复杂的拖放界面，同时保持组件解耦；
* [**react-moveable**](https://www.npmjs.com/package/react-moveable)**：** 一个 React 组件，它创建可移动、可拖动、可调整大小、可缩放、可旋转、可变形、可收缩、可分组、可捕捉；
* [**react-grid-layout**](https://www.npmjs.com/package/react-grid-layout)**：** 一个基于 React 的，类似于 Packery 或 Gridster 的网格布局系统，具有响应性并支持断点；
* [**Halogen**](https://www.npmjs.com/package/halogen)**：** 一个 React 的加载动画的集合；
* [**react-loading**](https://www.npmjs.com/package/react-loading)**：** 一款基于 react 的轻量级加载动画库，支持按需导入， 开箱即用；
* [**react-move**](https://www.npmjs.com/package/react-move)**：** 一个漂亮的，基于数据驱动的 React 动画库；
* [**react-spring**](https://www.npmjs.com/package/react-spring)**：** 一个基于 spring-physics 的动画库；
* [**react-text-loop-next**](https://www.npmjs.com/package/react-text-loop-next)**：** 一个文字轮播动画库；
* [**react-image-crop**](https://www.npmjs.com/package/react-image-crop)**：** 一个基于 React 的无依赖图像裁剪工具；
* [**react-sparklines**](https://www.npmjs.com/package/react-sparklines)**：** 一个基于数据自动生成趋势线的 React 组件；
* [**joL-player**](https://www.npmjs.com/package/jol-player)**：** 一个简单、美观、功能强大的 React 播放器；

## Vue

* [**Vue CLI**](https://cli.vuejs.org/zh/guide/)**：** 一个基于 Vue.js 进行快速开发的完整系统；
* [**awesome-vue**](https://github.com/vuejs/awesome-vue)**：** 一个集合了大量由社区贡献的插件和库列表；
* [**element-ui**](https://element.eleme.io/#/zh-CN/component/quickstart)：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库；
* [**mint-ui**](https://mint-ui.github.io/#!/zh-cn)**：** 一个基于 Vue.js 的移动端组件库；
* [**Vant**](https://vant-contrib.gitee.io/vant/#/zh-CN/)： 一个轻量、可靠的移动端 Vue 组件库；
* [**weex**](http://doc.weex.io/zh/)**：** 一个可以使用现代化的 Web 技术开发高性能原生应用的框架；
* [**nuxtjs**](https://www.nuxtjs.cn/)：一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染（SSR）应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性；
* [**ant design vue**](https://antdv.com/docs/vue/introduce-cn/)： 是 ant design 的 Vue 实现，开发和服务于企业级后台产品；
* [**vue-native-core**](/knowledge/frontend/0002-chang-yong-qian-duan-ku-gai-lan.md)**：** 一个使用 JavaScript 构建跨平台原生移动应用程序的框架；
* [**vue-element-admin**](https://panjiachen.gitee.io/vue-element-admin-site/zh/)**：** 一个基于 vue 和 element-ui 实现的后台前端解决方案；
* [**VuePress**](https://vuepress.vuejs.org/zh/)： 一个基于 Vue 的静态站点生成器，最初是用来编写技术文档的工具，现在则发展成为一个小巧、紧凑、功能强大的无头 CMS；
* [**vue-fullscreen**](https://www.npmjs.com/package/vue-fullscreen)： 一个简单的全屏 Vue.js 组件，基于screenfull.js；
* [**async-validator**](https://www.npmjs.com/package/async-validator)： 一个异步的表单校验器；

## 富文本/JSON/可视化编辑器

* [**codemirror**](https://www.npmjs.com/package/codemirror)：是一个用 JavaScript 为浏览器实现的通用文本编辑器，**专用于编辑代码**，并带有 100 多种语言模式和实现更高级编辑功能的各种插件，**每种语言都带有功能齐全的代码和语法突出显示**，以帮助阅读和编辑复杂的代码，查看[CodeMirror中文说明文档](https://www.tun6.com/projects/code_mirror/keymaps/)；
* [**jsoneditor**](https://www.npmjs.com/package/jsoneditor)：一个基于 Web 的工具，用于查看、编辑、格式化和验证 JSON，具有树编辑器、代码编辑器和纯文本编辑器等多种模式；
* [**tinymce**](https://www.npmjs.com/package/tinymce)**：** 一个轻量级的基于浏览器的所见即所得的富文本编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持；
* [**wangeditor**](https://www.npmjs.com/package/wangeditor)**：** 一个轻量级 Web 富文本编辑器，配置方便，使用简单；
* [**braft-editor**](https://www.npmjs.com/package/braft-editor)**：** 一个基于draft-js 的 Web 富文本编辑器，适用于 React 框架，兼容现代主流浏览器；
* [**h5-dooring**](https://github.com/MrXujiang/h5-Dooring)**：** 一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主， 后台采用nodejs开发。
* [**dooringx**](https://www.npmjs.com/package/dooringx-lib)**：** 一款所见所得的低代码可视化编辑器；
* [**dooringx-lib**](https://www.npmjs.com/package/dooringx-lib)**：** 一款可视化搭建框架；

## 地图

* [**google-maps**](https://www.npmjs.com/package/google-maps)**：** 一个谷歌地图 api 的异步加载器；
* [**amap-jsapi-loader**](https://www.npmjs.com/package/@amap/amap-jsapi-loader)： 一个高德开放平台官网提供的地图 JSAPI 的加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法；
* [**react-baidu-map**](https://www.npmjs.com/package/@uiw/react-baidu-map)**：** 一个基于 React 封装的百度地图组件，帮助你轻松的接入地图到 React 项目中；
* [**vue-baidu-map**](https://www.npmjs.com/package/vue-baidu-map)： 一个基于 Vue 封装的百度地图组件；
* [**polymaps**](http://polymaps.org/)： 一个免费的 JavaScript 库，用于在现代 Web 浏览器中制作动态、交互式地图；

## 数据可视化

* [**antv**](/knowledge/frontend/0002-chang-yong-qian-duan-ku-gai-lan.md)**：** 蚂蚁集团全新一代数据可视化解决方案，包含 **G2（可视化图形语法）**、**S2（多维可视分析表格）**、**G6（关系数据可视化引擎与图分析）**、**X6（数据驱动的图编辑引擎）**、**L7（地理空间数据可视化框架）**、**F2（专注于移动端的可视化）**、\*\*AVA（可视分析）\*\*及一套完整的图表使用和设计规范, 提供强大的数据可视化需求；
* [**d3js**](https://d3js.org.cn/)： 一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据，遵循现有的 Web 标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化组件来驱动 DOM 操作；
* [**Apache ECharts**](https://echarts.apache.org/zh/index.html)： 一个免费的、强大的图表和可视化库，提供了一种简单的方法来向您的商业产品添加直观、交互式和高度可定制的图表，是用纯 JavaScript 编写的，基于zrender，这是一个全新的轻量级画布库；
* [**bizcharts**](https://bizcharts.net/)**：** 一个阿里通用图表组件库，致力于打造企业中后台高效、专业、便捷的数据可视化解决方案，基于 G2 与G2Plot 封装的 React 图表库，已经历阿里复杂业务场景长达三年的洗礼，在灵活性、易用性、丰富度上满足常规图表和高度自定义图表的业务实现；
* [**recharts**](https://recharts.org/en-US/)**：** 一个用 React 和 D3 构建的可组合图表库；
* [**Viser**](https://viserjs.github.io/)**：** 支持多种主流框架的可视化库；
* [**plotly.js**](https://www.npmjs.com/package/plotly.js)： 一个独立的 Javascript 数据可视化库，还支持plotly在各自的生态系统中命名的 Python 和 R 模块（称为 Plotly.py 和 Plotly.R），用于生成数十种图表类型和可视化，包括统计图表、3D 图表、科学图表、SVG 和平铺地图、财务图表等；
* [**pivottable**](https://www.npmjs.com/package/pivottable)： 一个 Javascript 数据透视表库，具有构建在 jQuery/jQueryUI 之上的拖放功能，最初由 Nicolas Kruchten 用 CoffeeScript 编写。

## 其他

* [**lucky-canvas**](https://www.npmjs.com/package/lucky-canvas)**：** 一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件；

## 参考资料

[总结100+前端优质库,让你成为前端百事通](https://mp.weixin.qq.com/s/AjNf21vV44hWx84Oeh379w)

[GitHub 上100个优质前端项目整理，非常全面！](https://cloud.tencent.com/developer/article/1751148)