从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 链接🔗，它是基于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✨