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

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

❞

1 前期调研

❝

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

❞

1.1 调研对象

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

• 阿里云（DataV）🔗[2]

• 腾讯云（腾讯云图（DataV）🔗[3]

• 网易有数（EasyScreen）🔗[4]

• 百度智能云（Sugar）🔗[5]

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

1.2 功能解析

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

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

❝

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

❞

• luban(鲁班 H5) 🔗[6]

• h5-Dooring 🔗[7]

2.开发

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

2.1 控件区域

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

动态图太大，只能改为静态

2.1.1 图表库的选择

在调研中，我们参考了鲁班 h5 的可视化搭建，发现鲁班使用了echart作为图表控件的渲染图表库，可以看链接[8]

而我们在图表库的选型是使用蚂蚁金服的 antv 的G2Plot🔗[9]，而且 antv 也推出基于 G2Plot 的 AntV 在线图表制作工具chartCube🔗[10]，可以在线演示和预览不同图表数据渲染效果

其他诸如文本框、图片、时间器等等控件都是自定义，如果想看源码的童鞋可以参考 鲁班 h5 的plugins🔗[11]

2.1.2 组件的注册和初始化

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

但是这种方式如果随着后期维护的控件多了，导致在画布中根据类型判断渲染组件的时候，会有很多冗余代码，这个时候我们可以用通过 vue 的is属性动态渲染组件操作，如下所示

2.1.3 关于拖拽到画布

关于控件的拖拽，使用的是vuedraggable 链接 🔗[12]，它是基于Sortable.js实现的 vue 拖拽插件, 实现如下

🌲 拓展阅读

2.2 画布模块

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

2.2.1 响应式画布

✏️ 编辑模式

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

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

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

📺 预览模式

编辑模式我们是允许可以有滚动条的出现， 但预览模式下的 dashboard 是用于展示，通常是不允许滚动条出现的。那这种场景我们如何实现，我理想效果是无论窗口怎么变，我们的内容都保持原来的比例，并尽量占满窗口

我参考了这个方案: 大屏上的全屏页面的自适应适配方案[13]

2.2.2 全屏展示

数据大屏最终的展现形式是全屏展示，本质上就是只显示画布区域，隐藏所有编辑区域和配置区域，我们通过 isEdit来控制除画布之外的其他区域的是否展示

• 如何对全屏事件监听

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

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

2.2.3 大屏快照

我们想给大屏生成一张图片，而快照的生成，使用的是domtoimage🔗[14],可以将 code 转化为图片，同类工具还有html2canvas，对比中 domtoimage 无论在图片质量还是拓展方面都更胜一筹，下面是具体的使用

2.2.4 控件大小拖拽

❝

上一节我们提过，画布其实是由控件区域拖拽构成的，画布中有我们自定义的控件，而这些控件应该是可以是自定义进行大小拖拽，我们 fork 了vue-draggable-resizable🔗[15]，然后在它的基础上做一些调整，当然你也可以自己造轮子。

❞

使用如下 👇，包括其中一些 api 的使用

• draggable: 用来识别是否为编辑模式，编辑模式控件不可移动

• dragstop: 监听控件拖拽结束，这个时候我们画布中控件位置信息都改变了，这个时候需要跟右侧工具栏数据同步，用来做更新工具拦表单数据

• resizstop: 缩放结束后再进行接口请求更新数据

• delete: 我们在 vue-draggable-resizable 原有基础上添加的keyEvent事件用来判断键盘的 delete 事件

• activated: 监听点击控件，进行选中处理

2.2.5 画布缩放

❝

控件支持缩放，画布应该也是支持缩放的，我们定义 scale，可以进行操作改变其缩放数值，然后通过计算一个 zoomstyle 来改变画布的属性

❞

3.1 控件配置区域

❝

控制配置区域分为两个模块，一个模块是用来管理画布中控件的属性，其中包括高度、宽度、大小、字体大小、字体类型等等这些基础属性，像其他控件，文本有对齐方式、图片有图片上传模块、填充模式，时钟有时间格式选择等等，这里不一一罗列。本质上是动态表单的一种配置，感兴趣的童鞋可以看看之前的《前端那些事》从 0 到 1 开发动态表单[16]，其次是数据管理

❞

3.1.1 数据管理

❝

通常我们数据管理是用来配置控件诸如图表的数据，一般支持 json 静态数据、csv 表格数据导入、api 接口动态配置。

❞

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

前言：这是一篇迟到的下集，上次分享了如何从0到1搭建一个可视化数据大屏，介绍了数据搭配的前期调研、控件区域的开发、画布模块的开发等等。上篇的链接点我???? 从0到1开发可视化数据大屏（上） 而下集主要围绕.控件管理模块、数据管理模块、图层管理模块这几个模块来介绍。

❞
1.控件管理区域
❝
控制配置区域分为两个模块，控件属性配置模块是用来管理画布中控件的属性，其中包括高度、宽度、大小、字体大小、字体类型等等这些基础属性，像其他控件，文本有对齐方式、图片有图片上传模块、填充模式，时钟有时间格式选择等等，其次是数据管理模块，主要用来配置控件诸如图表的数据，一般支持json静态数据、csv表格数据导入、api接口动态配置等

❞
1.1 控件属性配置模块
❝
基于内部源码不开源的缘故，我们通过开源案例来进行分析，???? 下图为开源的表单生成器解决方案 form-generator ???? ，红色边框区域本质上就是配置区域，只不过是表单属性配置

❞

而数据大屏的控件属性配置模块同理，本质上都是组件属性可视化修改，是实现将json配置展现出来，实现自定义的表单设置，我们知道每个控件都有自己的一个默认配置，然后再进行自定义修改。

下面我们通过解析这个开源项目，来介绍如何搭建控件属性配置模块

上图是属性配置中按钮类型的属性配置，通过类型属性区分来展示不同的配置模块。更多属性配置参考可点击???? 链接????

❝
????‍????：啊乐同学：那属性配置区域和画布区域的控件、以及图层区域是如何联动的？

❞
主要是包含以下几个方面：

1.2.1 控件区域带动的图层区域、画布区域的联动
❝
当从控件区域拖拽控件到画布，通过拷贝控件一份默认的配置，我们上节提到拖拽库使用的是vuedraggable，其中有个clone的api，当对控件进行拖拽时，我们可以对控件区域属性进行拷贝（默认属性）. 至于画布区域、配置区域、图层区域的联动，主要是监听控件区域vuedraggable的onEnd事件来跟其他模块进行联动，比如创建一个新的图层，大致流程实现如下????

❞

image.png
1.2.2 画布区域带动的图层区域、属性配置区域的联动
❝
点击画布其中的一个控件，right-panel区域展示为该控件的属性配置模块，通过上文提到的activeDate来传递，与该开源表单生成器不同，我在上集也提到画布的拖拽使用的是vue-draggable-resizable, 基于需要支持大小自由拖拽，通过监听其activated事件，来捕获画布中选中控件事件，以此来变更属性配置区域

❞

carbon (7).png
当修改属性配置区域，画布中控件视图发生变更，再或者手动改变画布区域，同步属性配置区域的修改，本质上画布区域跟属性配置区域是双向数据流，无论其中哪个区域数据修改，都会同步到另一个区域

❝
????‍????：啊乐同学：你通过activated作为props让画布区域和控件区域做数据流通，我记得props是单向流向，而且如果子组件控件区域修改了activated这个prop, Vue会在浏览器的控制台中发出警告吧？

❞
答：是的，vue官网中介绍：prop 使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

但是当父组件的传值是数组或者对象时，子组件中不仅能够直接修改，还不会报错，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

原因是：父组件传递给子组件的，实际上只是一个引用地址，当子组件修改这个对象时，是真的修改了在堆空间中保存的数值，当然父组件中的值也会发生变化，但是引用地址没有进行修改

1.2 数据源配置模块
❝
通常我们数据管理是用来配置控件诸如图表的数据，一般支持json静态数据、csv表格数据导入、api接口动态配置，而对于一些常见模块，文本、图片等，该tab是不展示。视图参考如下????。重点聊聊api数据源

❞

image.png
1.2.1 关于api数据源
❝
通过定义请求方式、访问的api、请求头header等，维护好不同的数据源之后，通过在控件属性配置区域绑定数据源dataSourceUrl，然后绑定过程中发出请求，同步到数据响应结果面板，最终展示到控件在画布区域视图的变更。

❞

❝
????‍????：啊乐同学：那你这样，数据还是静态的，最终数据大屏也是静态的数据展示？

❞
答：我们是通过将数据源的dataSourceUrl以及轮训时间间隔等配置绑定到控件属性中，然后当用户从编辑模式切换到全屏预览模式下，再发出请求，大致原理参考如下????

image.png
????思考：如果请求很多的情况，如何优化？

2.图层管理模块
❝
上文我们提及了图层受控件区域的联动，但它本质影响的最多的是画布区域，比如复制图层、删除图层等，会对画布区域进行视图更新，下面是图层区域的缩略展示????

❞

image.png
❝
????‍????：啊乐同学：图层是怎么去影响画布区域的堆叠顺序？

❞
答：图层本质上也是支持上下拖拽移动的，同样也是基于vuedraggable, 但是不同的是，当拖动上下层级的时，会影响到z-index的改变，也就是设置元素的堆叠顺序（来调整画布中控件的堆叠顺序）实现如下????

❝
????‍????：啊乐同学：图层右击出现的那个操作面板是如何实现的？

❞
答：可以通过监听vue的@contextmenu.prevent事件，是h5的新特征，不过兼容性比较差

请你喝杯???? 记得三连哦～
1.阅读完记得给???? 酱点个赞哦，有???? 有动力

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

3.文章收录在Github frontendThings 感谢Star✨
————————————————
版权声明：本文为CSDN博主「树酱」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u013655559/article/details/116549995