数据可视化大屏设计器开发-依赖介绍

开头

本文是数据可视化开始的开发细节第一章。介绍关于当中一些主要依赖包的信息。
万事开头难，在开始自己的码路前，首先要构思好大致的架子和功能。

开始

ui

antd

这个应该不用多说了，大家应该都知道。
顺带提一句，在实现相关业务逻辑时，偶然发现了一个小bug，关于Input使用prefix | suffix时，点击输入框边框或prefix | suffix无法获取焦点，并且提交了PR。

@scena/react-ruler

标尺组件，偶然在github上别人的项目中实现的标尺，功能很强大，包括下面的react-selecto，均来自于该项目，并且当中还包含了很多通用的工具库，比如：

moveable

类似于下面介绍`react-rnd`，但是拥有更丰富的功能，但是无法完全满足本项目，故放弃了。  

guides

引导线组件。  

有兴趣的可以关注下作者

react-selecto

多选插件，通过鼠标拖拽选中相关目标元素，支持

nprogress

页面顶部的进度条效果。
用于在数据保存时的交互。

monaco-editor

网页端在线代码编辑器，

react-shepherd

简单的引导页效果。

react-spinners

各种样式不错的loading效果。

react-tiny-fab

页面固定小按钮，并且支持展开收起更多小按钮。

react-color

颜色选择器组件。

react-json-view

配置项丰富的JSON数据查看器。

animate.css

非常丰富的css3动画。

以下是非本项目核心的依赖

matter-js

炫酷的2d物理引擎库。
首页的小组件使用的就是该库。

parallax-js

视差动画，官网做的相当的炫酷。
权限相关页面的动画来源于此项目。

css-doodle

利用css实现非常有趣的图案，利用自己的想象力可以实现各种各样的效果。
并且官网也提供了非常多的例子供参考。

vivus

svg动画，可以用它实现简单的路径动画。

组件

echarts

非常知名的可视化图表库，从一众图表库中选中了它。
并附上社区实现的图表效果网站：https://www.isqqw.com/。

echarts-liquidfill

基于Echarts自定义图表模块开发的水球图表。

echarts-wordcloud

基于Echarts自定义图表模块开发的词云图表。
该作者的个人主页做的很不错，推荐看看。

bootstrap-icons

非常丰富的图标库。

countup.js

数字翻牌器效果。

qrcode

二维码生成库。

react-fast-marquee

简单的跑马灯效果。

react-player

视频播放器。

react-select

丰富API，可定制性强的下拉选择组件。
为什么不选择antd组件就是因为此组件定制性更高。

react-slick

样式丰富的轮播组件，可以使用它来实现轮播列表。

react-text-loop-next

简单的文字垂直滚动轮播效果。

typed.js

打字机效果。

DataV-React

此也是一个图表库，提供了非常多类似于阿里云datav效果的图表。
本项目引用了它当中的svg的边框和装饰，svg的图形做到了尺寸的自适应，非常适合大屏需要适应设备大小的性质。

viewerjs

交互良好的图片预览工具。

@svgdotjs/svg.js

同样是一个svg动画控制库，使用它实现了简单的路径动画。

功能

react-rnd

同时拥有拖拽和缩放的库。
其实内部源码即是同时依赖了缩放（re-resizable）和拖拽（react-draggable）。

re-resizable

操作非常流畅的元素大小缩放工具。
为什么已经使用了react-rnd还要使用此库，电脑端当中的组件，采取的是绝对定位，使用react-rnd，而在移动端，组件是由上而下的流式布局，再使用绝对定位的react-rnd就不合适了，并且组件不需要拖拽位置的功能，故使用此项目。

react-dnd

简单好用的元素拖拽放置库。

react-sortable-hoc

简单的拖拽排序库。
大屏项目中关于数据过滤器的执行顺序，使用它来进行排序。

ahooks

拥有非常多，功能覆盖广，实用的react hook。
比如其中的useHover、useSize、useUnmount、useDebounce、useRafState、useUpdateEffect等在一些场景下面简化了很多的代码。

axios

这个库应该不用多说了，大家应该都知道，github👍快破100k了。

classnames

方便组合组件的多个className，并且支持条件控制，非常方便。

clipboard

使用简单的内容复制粘贴库。

color

用于转换或获取各种格式的颜色数据的库。

array-move

用于切换数组当中元素位置的库。

react-undo-component

本人自己实现的react状态管理库，通过class wrapper或者hooks来控制组件state的前进后退等功能。
并且该库也导出了通用的状态控制方法，用于在原生javascript中控制数据状态。

chunk-file-upload

这个也是本人实现的一个库，用于文件分片上传的功能。
大屏项目的后端也是有自己开发，因为服务器的资源有限，所以需要控制媒体资源存储，防止出现重复资源，故在这里对于图片资源，也需要对其进行md5计算来判断文件资源是否在服务器中存在。

eventemitter3

功能强大的自定义事件库。
大屏项目中经常出现几个层级不同的组件同时存在一定的依赖关系，通过自定义事件来进行相互关联，非常的方便。（这是本人自己的歪办法）

file-saver

前端文件下载库。

html2canvas

html页面转canvas，用于截取页面。

mustache

这是一个非常🐂的插值语法的库，可以解析字符串中的插值语法，和vue中的写法一样，{{variable}}。

is-mobile

一个用于判断当前浏览器环境是否是移动端的库。

localforage

前端浏览器本地缓存库。

lodash

各种各样实用函数库。

mockjs

生成各种各样的假数据。
此库用于完成大屏项目中关于mock数据相关的功能。

moment

功能强大的时间处理库。

nanoid

生成唯一id的库。

结束

结束🔚。

顺便在下面附上相关的链接。

试用地址
试用账号
静态版试用地址
操作文档
代码地址