关于javascript:从0到1开发可视化数据大屏上

前言：大数据时代，以大屏为载体的数据可视化需要日渐增多，数据大屏成为越来越多企业绩效展现，报表展现，业务监控等等的一种模式，大屏的上线带来的是便捷，无需编码，用户能够间接将所要出现的组件拖拽到画布上，而后进行随便配置和布局，所见及所得。前段时间咱们上线了外部的本人的可视化数据大屏 beta 版本

1 后期调研

各云服务商也都推出本人的数据大屏整体解决方案，比方阿里云的 datav、腾讯云的腾讯云图、网易的网易无数、百度的 Sugar，都在给自家产品赋能后推出本人的可视化计划，你能够会有纳闷🤔，他人有成熟的计划，为啥咱们还要本人造轮子？无非一方面思考的是业务场景的不同，尽管目前服务商曾经提供了很多业务场景的大屏模版供用户抉择，其次是私有化部署老本低等等

1.1 调研对象

上一篇对于举荐几个数据大屏可视化开发工具提到目前国内现有优良的数据大屏解决方案提供商

• 阿里云（DataV）🔗
• 腾讯云（腾讯云图（DataV）🔗
• 网易无数（EasyScreen）🔗
• 百度智能云（Sugar）🔗

如果你对目前的报价好奇，上面是百度 Sugar 的报价

1.2 性能解析

调研并体验了后面提到的解决方案，我对数据大屏性能进行了拆解，大略梳理了一个简略的数据大屏可视化编辑所须要的性能包含如下

1.3 开源社区现有可视化编辑计划

数据大屏 dashboard 实质上跟 H5、Web 等在线页面可视化编辑的逻辑是雷同的，实质上还是拖拽、控件治理、画布、组件属性治理、预览等等，只是数据大屏强调的更多是数据的可视化，重点在图表通过数据的渲染，上面分享几个开源社区的可视化编辑解决方案，有需要的童鞋能够参考借鉴

• luban(鲁班 H5) 🔗
• h5-Dooring 🔗

2. 开发

上一节咱们拆解了数据大屏的功能模块，次要分为控件区域、画布区域、控件属性配置区域、图层区治理等等几个模块，因为波及外部的隐衷，我这里以网易无数为参照来做展现，大略模块如下

2.1 控件区域

控件区域包含大屏控件的展现、控件组件的注册与初始化，控件反对拖拽到画布等性能，以下是控件区域的交互演示图👇

2.1.1 图表库的抉择

在调研中，咱们参考了鲁班 h5 的可视化搭建，发现鲁班应用了 echart 作为图表控件的渲染图表库，能够看链接

而咱们在图表库的选型是应用蚂蚁金服的 antv 的G2Plot🔗，而且 antv 也推出基于 G2Plot 的 AntV 在线图表制作工具chartCube🔗，能够在线演示和预览不同图表数据渲染成果

其余诸如文本框、图片、工夫器等等控件都是自定义，如果想看源码的童鞋能够参考 鲁班 h5 的 plugins🔗

2.1.2 组件的注册和初始化

举个例子注册一个文本控件，你可能说我能够这样挨个配置啊，如下所示👇

然而这种形式如果随着前期保护的控件多了，导致在画布中依据类型判断渲染组件的时候，会有很多冗余代码，这个时候咱们能够用通过 vue 的 is 属性动静渲染组件操作，如下所示

2.1.3 对于拖拽到画布

对于控件的拖拽，应用的是 vuedraggable [链接🔗](https://github.com/SortableJS…
)，它是基于Sortable.js 实现的 vue 拖拽插件, 实现如下

🌲拓展浏览

2.2 画布模块

画布是用来搁置控件，作为控件拖拽拉伸的区域限度。画布模块设置背景图片或背景色设置、控件的编排、画布比例的设置、响应式画布、全屏展现等等等。

2.2.1 响应式画布

✏️ 编辑模式

当咱们拉伸调整浏览器窗口视图大小的时候，咱们通过监听 onresize 事件，onresize 事件会在窗口或框架被调整大小时产生，个别画布的比例设置大多以 16:9 或者 4:3 两种比例居多, 咱们看看上面这个成果

编辑模式的画布，咱们这里以 16:9 比例为例子, 以画布区域的宽度更新来计算，不过这种成果欠佳

ps: 咱们通过判断是否在全屏展现模式下，如果不是，则给画布视图保留一部分空白区域

📺 预览模式

编辑模式咱们是容许能够有滚动条的呈现，但预览模式下的 dashboard 是用于展现，通常是不容许滚动条呈现的。那这种场景咱们如何实现，我现实成果是无论窗口怎么变，咱们的内容都放弃原来的比例，并尽量占满窗口

我参考了这个计划: 大屏上的全屏页面的自适应适配计划

2.2.2 全屏展现

数据大屏最终的展示模式是全屏展现，实质上就是只显示画布区域，暗藏所有编辑区域和配置区域，咱们通过 isEdit来管制除画布之外的其余区域的是否展现

• 如何对全屏事件监听

通过监听 fullscreenchange 事件，退出全屏则从新计算画布视图大小

ps: 出于平安思考全屏只能从用户操作的事件触发，而不能用代码间接触发，会报错

2.2.3 大屏快照

咱们想给大屏生成一张图片，而快照的生成，应用的是domtoimage🔗, 能够将 code 转化为图片，同类工具还有html2canvas，比照中 domtoimage 无论在图片品质还是拓展方面都更胜一筹，上面是具体的应用

2.2.4 控件大小拖拽

上一节咱们提过，画布其实是由控件区域拖拽形成的，画布中有咱们自定义的控件，而这些控件应该是能够是自定义进行大小拖拽，咱们 fork 了vue-draggable-resizable🔗，而后在它的根底上做一些调整，当然你也能够本人造轮子。

应用如下👇，包含其中一些 api 的应用

• draggable: 用来辨认是否为编辑模式，编辑模式控件不可挪动
• dragstop: 监听控件拖拽完结，这个时候咱们画布中控件地位信息都扭转了，这个时候须要跟右侧工具栏数据同步，用来做更新工具拦表单数据
• resizstop: 缩放完结后再进行接口申请更新数据
• delete: 咱们在 vue-draggable-resizable 原有根底上增加的 keyEvent 事件用来判断键盘的 delete 事件
• activated: 监听点击控件，进行选中解决

2.2.5 画布缩放

控件反对缩放，画布应该也是反对缩放的，咱们定义 scale，能够进行操作扭转其缩放数值，而后通过计算一个 zoomstyle 来扭转画布的属性

3.1 控件配置区域

管制配置区域分为两个模块，一个模块是用来治理画布中控件的属性，其中包含高度、宽度、大小、字体大小、字体类型等等这些根底属性，像其余控件，文本有对齐形式、图片有图片上传模块、填充模式，时钟有工夫格局抉择等等，这里不一一列举。实质上是动静表单的一种配置，感兴趣的童鞋能够看看之前的《前端那些事》从 0 到 1 开发动静表单，其次是数据管理

3.1.1 数据管理

通常咱们数据管理是用来配置控件诸如图表的数据，个别反对 json 静态数据、csv 表格数据导入、api 接口动静配置。

下期跟大家聊聊对于数据管理如何实现、图层是如何进行治理、以及应用中的一些心得体会

请你喝杯🍵 记得三连哦～

1. 浏览完记得给🌲 酱点个赞哦，有👍 有能源

2. 关注公众号 前端那些趣事，陪你聊聊前端的趣事

3. 文章收录在 Github frontendThings 感激 Star✨