一步一步带你开发可视化大屏编辑器（一）

导读：本文的主要内容有

1. 可视化大屏编辑器包含哪些必要的功能模块
2. 可视化大屏应用场景
   

后续连载主要讲可视化大屏编辑器的技术实现。

名词简称：可视化大屏编辑器后文简称“大屏编辑器”

关于作者：

雷庭，任职于北京优锘科技，前端架构师，从事前端开发及架构工作17年，擅长可视化领域的前端开发，前端沟通交流可加作者微信ltlt820706

大屏编辑器

大屏编辑器诞生背景

传统的大屏开发一般使用H5+JavaScript模式，但是大屏的业务多变，使用场景多变，同一个业务内容的大屏，观众不同，展示样式可能也不同，如果使用传统方式开发，要么外包，要么招几个程序员。

如果外包，每次修改都要付出额外的费用，如果招专门做大屏的程序员，大屏开发完成以后程序员就会间歇性闲置，造成人力浪费。

大屏编辑器实现了无代码，通过拖拽方式任意组合拼装一个大屏场景，即使不会代码开发，只要会用PPT这类软件就可以自己搭建一个大屏场景。

大屏编辑器常见使用流程

1.从设计图开始搭建大屏场景

一般大屏在制作前都会先设计效果图，大屏编辑器可以采用两种方式还原设计图到真实大屏场景：

• 从设计图开始自动识别
• 使用大屏编辑器手动拖拽容器，把图表组件摆放到设计图的同样位置；并把设计图进行分割、切图，然后手动摆放到对应的容器里

2.从模板开始搭建大屏场景

对于企业常见的业务场景，可以复用模板的方式开始搭建场景，局部差异点重新搭建即可，这种方式最大程度提高场景搭建的效率。

3.从空白场景自建

大屏编辑器同样也支持像画图工具一样自己搭建场景，编辑器会提供容器，常用布局，组件库，容器定位辅助线等，制作完成的场景可同时保存成模板下次复用，从零开始搭建场景更灵活，但也更耗时。

大屏编辑器必要功能模块

1.画布编辑器模块

画布编辑器特指大屏编辑器中间黑色的部分，属于一个可以脱离大屏编辑器独立运行的部分，可以嵌入到任何系统中使用。

画布编辑器功能：

• 导出画布中所有元素到JSON文件及附件（也有导入解析功能）
• 管理画布中所有元素的布局
• 为画布中所有图表组件提供渲染适配器接口
• 将画布中所有图表组件对接数据桥接到数据管理器
• 提供画布中元素拖拽功能及保障拖拽易用性的对齐线、距离线、吸附等功能
• 接管画布中所有元素的浏览器事件进行统一处理
• 提供对外的动画接口
• 提供对外的布局算法注册机制

2.Photoshop解析器模块

Ps解析器是安装在Photoshop中的插件，类似于蓝湖，可以对设计图进行标注、约束、动画设置等功能，事实上这是一个对设计图的末端管控工具，其功能如下：

• 对设计图进行不同类型的标注
• 对模块将来在实际大屏中的出场和入场动画进行设定
• 解析设计图中所有图层的位置及图层关系
• 分模块按标注导出切图
• 将设计图解析成大屏编辑器所需的JSON布局文件，在画布中可以进行解析生成真实大屏场景
• 将解析后的布局JSON，切图等文件上传到资源服务器统一管理，分解后的设计图每个部分就是数字孪生细颗粒度对象

3.组件库模块

组件库分为2个部分，组件库画廊和组件在线开发工具，

• 画廊主要供组件使用者挑选组件，下载组件（下载组件会将组件中使用到的外部库[如:echarts]、关联的字体、图片等全部打包下载）功能
• 组件在线开发工具供组件开发者开发组件使用，组件开发完成会发布到画廊中

组件画廊包含的功能：

• 组件浏览、搜索、收藏、下载
• 组件收藏管理，对收藏的组件进行分类管理
• 项目管理（将组件添加到大屏项目），按项目对组件进行分类
• 我的组件，对开发者自己的组件进行分类管理
• 组件使用文档入口

组件在线开发工具包含的功能：

• 代码编辑器窗口，用户可以在此编码、调试
• 组件预览窗口，开发完成后可以在此预览组件效果
• 属性管理模块，对组件的分类、名称进行修改的可视化页面
• 工具栏，提供组件预览、保存、发布的工具
• Imagination

它是一个可扩展的功能模块，为组件开发者提供组件开发过程中所需的必要外挂功能和插件，目前包含：

• 通过Echarts Gallery中的图表链接导入图表
• 粘贴Echarts Gallery中的代码到代码编辑器中，并直接将其代码编译成本工具可用
• 上传和使用图片资源（这里也可以直接使用Ps解析器所上传的图片资源）
• 在线引用外部的Js库，下载组件时会跟着打包下载
• 引用系统提供的工具类方法
• 引入外部字体资源

4.数据管理模块

数据管理模块包含数据适配器和订阅管理两项功能

• 数据适配器，提供外部数据对接功能（RestAPI、websocket、数据库、表格文件等），将返回的数据可使用JavaScript进行进一步加工和处理
• 订阅管理，画布中的组件可以通过数据管理模块的订阅接口订阅数据适配器取回的数据（可以订阅数据适配器中所有取回的数据或部分数据），当数据适配器中数据发生变化时反向通知订阅者更新页面视图

5.属性设置模块

属性设置模块提供可视化页面对画布中的组件、容器等进行设置，其设置的内容包含：

• 外观：颜色，透明度，背景图
• 位置尺寸、放缩约束
• 转场动画
• 图层管理：容器打组、容器上下移动、对齐、增删等功能
• 图表组件特有的属性设置（在组件开发过程中可以对组件单独设定可配置的属性）

可视化大屏应用场景

可视化大屏场景案例

如上图所示，场景是天猫双十一实时交易数据展现的大屏，内容包含：

• 交易金额
• 分类商品销售金额趋势
• 商铺销售金额排行
• 地图呈现买家区域分布热力图

天猫双十一大屏投放场景属于媒体中心大屏，实时展示天猫双十一交易情况，其目的主要是宣传造势。

除此之外，大屏的常用场景还有：

• 城市展示中心
• 大型商场广场中心点
• 机场、火车站、港口等集散地
• 媒体中心
• 交易所
• 电力、银行、运输等大型企业的总控中心ECC

大屏展示主要元素

大屏观看距离远，用户停留时间短的特征决定了它无法向观众展示更多的细节，一般大屏会展示图片、汇总数据、过程概览图、地图、3D场景等，展示内容可分为两大类：

统计类

天猫双十一大屏中间莫大的数字翻牌器就是属于统计数据，除此之外还有柱状图、饼图等常用统计类图表；

信息传达类

示意图，流程图等都属于信息传达类，这类的特点是和数据关系不大，主要为观众展示过程向导、流程进行时等。

大屏展示的作用

• 辅助决策
• 参观接待
• 媒体宣传
• 广告投放
• 信息向导