从0到1开发可视化数据大屏（上）

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

1 前期调研

各云服务商也都推出本身的数据大屏总体解决方案，好比阿里云的datav、腾讯云的腾讯云图、网易的网易有数、百度的Sugar，都在给自家产品赋能后推出本身的可视化方案，你能够会有疑惑🤔，别人有成熟的方案，为啥咱们还要本身造轮子？无非一方面考虑的是业务场景的不一样，虽然目前服务商已经提供了不少业务场景的大屏模版供用户选择，其次是私有化部署成本高等等前端

1.1 调研对象

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

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

若是你对目前的报价好奇，下面是百度Sugar的报价node

1.2 功能解析

调研并体验了前面提到的解决方案，我对数据大屏功能进行了拆解，大概梳理了一个简单的数据大屏可视化编辑所须要的功能包括以下git

1.3 开源社区现有可视化编辑方案

数据大屏dashboard本质上跟H五、Web等在线页面可视化编辑的逻辑是相同的，本质上仍是拖拽、控件管理、画布、组件属性管理、预览等等，只是数据大屏强调的更可能是数据的可视化，重点在图表经过数据的渲染，下面分享几个开源社区的可视化编辑解决方案，有需求的童鞋能够参考借鉴github

luban(鲁班 H5) 🔗web
h5-Dooring 🔗面试

2.开发

上一节咱们拆解了数据大屏的功能模块，主要分为控件区域、画布区域、控件属性配置区域、图层区管理等等几个模块，由于涉及内部的隐私，我这里以网易有数为参照来作展现，大概模块以下json

2.1 控件区域

控件区域包括大屏控件的展现、控件组件的注册与初始化，控件支持拖拽到画布等功能，如下是控件区域的交互演示图👇 canvas

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✨