作者：vivo互联网大数据团队-王磊
一、简介
长期以来，很多产品平台都试图通过可视化构建的方式来降低GUI应用的开发门槛，提高生产效率。 随着我们业务的发展和数据建设的建立，用户对数据可视化的需求也与日俱增，而大数据屏就是数据可视化的展示方式之一。 作为一种大数据展示媒介，广泛应用于各类展会、公司展馆、新闻发布会等。
与传统的手动定制图表和数据仪表板相比，通用大屏构建平台的出现可以解决数据分散带来的定制开发、应用开发和数据维护成本高等问题。 通过数据采集、清洗、分析，直观、实时的数据可视化解读，可以多方向、多角度、全景解读各项指标，实时监控，动态一目了然。
本文将通过敏捷BI平台通用大屏构建能力的实施方案来阐述通用可视化构建平台的整体设计思路。
2.快速了解可视化大屏
2.1 什么是数据可视化
从技术角度来看，最直观的就是后端可视化框架：Echart、Antv、Chart.js、D3.js、Vega等，这些库可以帮助我们快速将数据转换为各种可视化图表。
从业务层面来说，其最重要的意义是通过数据->图表组合->可视化页面的业务流程，帮助用户更加直观、全面地分析不同行业、不同场景的趋势和规律。
因此，在数据领域，对于复杂、难以理解、体量较大的数据，图表中的信息量要大得多，这也是数据可视化最根本的目的。
2.2 可视大屏由哪几部分组成
主要由视觉组件+事件交互+坐标关系组成，效果如下图所示：
2.3 可视化大屏与常见BI报表看板的区别
经常有同学会问，可视化大屏和BI报表板有什么区别？
这里简单介绍一下：
大屏、报表板只是BI的解读方式之一。 大屏多用于不同规格的显示器硬件上的投射，而报表板多用于笔记本端的显示。
大屏幕越来越注重数据的动态变化，将会产生强烈的视觉体验和冲击力，并提供丰富的轮播动画、表格滚动等动画特效。 报表看板更注重交互式数据探索和分析，如滚动钻取、排序、过滤、图表切换、条件预警等。
3、设计思路
3.1 技术选型
3.2 架构设计
下图是我们平台的整体架构设计：
整个大屏构建平台包括四个非常重要的子系统和模块：
3.3 施工流程
通过上面提到的大屏的要素，我们可以分析总结出构建大屏的主要流程如下图所示：
4、核心功能实现
接下来我们一一分析平台的几个核心功能的实现：
1.大屏自适应布局
背景：解决页面混乱问题，实现各种码率的大屏适配：
思考：首先我们想到了vh、vw、rem以及font.js+rem的组合，兼容主流移动端。 第一种方案主要是通过媒体查询来定义parent的大小，然后使用rem作为组件的height、margin、padding等各种css属性的单位，并继承parent的设置和其他单位（1vw）从而达到适应性的适应。 第二种解决方案是参考第三方脚本，在main.js中编写代码估算，并使用rem进行继承，实现适配。
① vh、vw、rem 的组合
//vw vh单位 w3c的官方解释 vw：1% of viewport’s width vh：1% of viewport’s height//例如，设计稿的宽度为1920px，则1vw=19.2px，为了方便计算，我们将html元素的font-size大小设置为100px，也就是5.208vw=100px。body,html {font-size:5.208vw}
②字体。 js + 雷姆
//监听窗口的oversize事件，来动态计算根节点字体大小，再配合rem做适配(function(doc, win) {const docEl = doc.documentElementconst resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'const recalc = function() {let clientWidth = docEl.clientWidthif (!clientWidth) returndocEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'}if (!doc.addEventListener) returnwin.addEventListener(resizeEvt, recalc, false)doc.addEventListener('DOMContentLoaded', recalc, false)})(document, window)
缺陷：当我们大屏上使用的第三方插件使用px作为样式单位时，比如line-height设置为20px，此时无法自适应列宽echarts搭建报表，会出现重叠等混乱问题。或者我们使用postcss-px2rem插件进行全局替换，但是在使用过程中需要注意已经处理适配的插件，比如Ant Design ，否则引入的antd控件会出现样式乱的问题
解决方案：采用css3的缩放变换：scale(X,Y)属性，主要是通过监听浏览器窗口的onresize事件来实现。 当窗口尺寸发生变化时，我们只需要根据大屏容器的实际宽度和高度来估计相应的放大和缩小比例即可实现布局的自适应。 我们还提供了不同的布局适配效果，比如等高缩放、等宽缩放、全屏全屏等，不同的缩放方式决定了我们预估宽高比栏的优先级。 因此，我们正在研究画布的缩小功能，我们也可以直接使用这些方案来实现。
// 基于设置的设计稿尺寸 换算对应的宽高比useEffect(() => {const wR = boxSize.width / viewWidth;const hR = boxSize.height / viewHeight;setBgScaleRatio(wR);setBgHeightScaleRatio(hR);}, [boxSize, viewWidth, viewHeight]);//根据等宽、等高、全屏等不同的缩放比例 计算scale值const getScale = (proportion, x, y) => {if (proportion === 'radioWidth') {return `scaleX(${x})`}if (proportion === 'radioHeight') {return `scaleY(${y})`}return `scale(${x}, ${y})`}
2、大屏组件通用开发流程设计
背景：随着可视化组件的增多，添加组件的过程冗长晦涩，为了防止重复造轮子以及后续引入第三方组件，需要制定一个通用的组件开发流程：
设计思想：组件=组件组件体+schema组件配置协议层+组件定义层（类型、隶属关系、初始化宽高等）
① 组件组件体：
// initialization echartsconst renderNewEcharts = () => {// 1. new echarts instanceconst echartObj = updateEChartsOption();// 2. bind eventsbindEvents(echartObj, onEvents || {});// 3. on chart readyif (typeof onChartReady === 'function') onChartReady(echartObj);// 4. on resizeechartObj.resize();};// bind the eventsconst bindEvents = (instance, events) => {const _bindEvent = (eventName, func) => {instance.on(eventName, (param) => {func(param, instance);});};// loop and bindfor (const eventName in events) {if (Object.prototype.hasOwnProperty.call(events, eventName)) {_bindEvent(eventName, events[eventName]);}}};// dispose echarts and clear size-sensorconst dispose = () => {if ($chartEl.current) {clear($chartEl.current);// dispose echarts instance(echartsLib || echarts).dispose($chartEl.current);}};
const DataV: React.FC = (props) => {const { config } = props;const [renderCounter, setRenderCounter] = useState(0);const $dataVWarpEl = useRef(null);const $componentEl = useRef(null);useEffect(() => {// 绑定容器size监听const resizefunc = debounce(() => {$componentEl.resize();}, 500)// fixmeaddResizeListener($dataVWarpEl.current, resizefunc);return () => {// 清除订阅removeResizeListener($dataVWarpEl.current, resizefunc);};}, []);return (<DataVWarp ref={$dataVWarpEl}><CompRender config={config} ref={$componentEl} /></DataVWarp>);};
② schema组件配置协议层+组件定义层（类型、隶属关系、初始化宽高等）
我们定制了一套模式组件DSL，结构协议层。 通过DSL规定组件的配置契约，包括组件的可编辑属性、编辑类型和初始值。 之所以定义一致的协议层，主要是为了方便后期的组件扩展和配置。
{headerGroupName: '公共配置', //配置所属类型headerGroupKey: 'widget', //配置所属类型key值 相同的key值都归属一类name: '标题名称', //属性名称valueType: ['string'], //属性值类型optionLabels: [], //服务下拉列表、多选框等控件的标签名optionValues: [], //服务下拉列表、多选框等控件的标签值tip: false, //配置项的 Tooltip 注解ui: ['input'], //使用的控件类型class: false, //控件类名，定制控件样式css: { width: '50%'}, //修改控件样式dependencies: ['widget,title.show,true'], //属性之间的联动，规则['配置所属类型, 属性key, 属性值']depContext: DepCommonShowState, //属性之间的校验回调方法compShow: ['line'], //哪些组件可配置dataV: { key: 'title.text', value: '' }, //配置的key值和默认value值},
好处：以上是我们定制的DSL结构协议层。 用户只需填写Excel表单即可创建动态表单，实现组件配置项分类、配置复用、配置项间联动、属性标注等功能。 目前属性配置器已经支持15种常用的配置UI控件。 通过定制的DSL结构协议层，可以快速完成组件配置接口的初始化，为组件素材中心的后续规划做好准备。
3. 拖动器的实现
背景：React-Grid-Layout拖拽插件不支持不同经度组件的自由布局和拖拽：
解决方案：通过分析源码，重新绘制不同经度的拖拽风暴和拖拽目标碰撞风暴，同时还扩展了锁定长宽比、旋转透明度等功能。
源码分析：
调整大小功能得到改进（优化）。 拖动时，除了改变容器的宽度和高度外，还动态调整组件的坐标位置
// CSS Transforms support (default)if (useCSSTransforms) {if (activeResize) {const { width, height, handle } = activeResize;const clonePos = { ...pos };if (["w", "nw", "sw"].includes(handle)) {clonePos.left -= clonePos.width - width;}if (["n", "nw", "ne"].includes(handle)) {clonePos.top -= clonePos.height - height;}style = setTransform(clonePos, this.props.angle);} else {style = setTransform(pos, this.props.angle);}}
堆叠显示，自由布局（优化）echarts搭建报表，通过控制布局是否压缩，动态调整拖放目标的分层zIndex，实现多视口组件操作交互和自由定位。
// 每次拖拽时zIndex要在当前最大zIndex基础上 + 1，并返回给组件使用const getAfterMaxZIndex = useCallback(i => {if (i === curDragItemI) {return;}setCurDragItemI(i);setMaxZIndex(maxZIndex => maxZIndex + 1);return maxZIndex;}, []);
改造后疗效展示
4.大屏状态推送
背景：大屏后期维护需要版本发布自行更新和大屏离线。 这时就需要一套消息通知机制，通过命令来控制大屏的运行状态。
解决方案：基于websocket通信机制，建立长链接，实现脉冲和重连机制，在线发布后实时更新或离线管理大屏。
5.效果预览
六、总结
本文对如何通过可视化页面构建、无/低代码平台、Schema动态表单等技术思路来设计和开发通用数据大屏构建平台进行分析和讲解。
目前的设计方案基本满足大数据屏的核心能力建设要求。 如果我们想要实现一个更具诠释性、满足更多场景的大屏平台，就需要进一步提高平台的可扩展性，建立整体的素材生态。 具体计划如下：
结尾
这里有最新的开源信息、软件更新、技术干货等。
点击这里↓↓↓记得关注星星哦~
