从0到1设计通用数据大屏搭建平台

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

​作者：vivo 互联网大数据团队- Wang Lei

一、前言

一直以来，许多产品平台都在尝试通过可视化搭建的手段来降低 GUI 应用的研发门槛，提高生产效率。随着我们业务的发展，数据建设的完善，用户对于数据可视化的诉求也日益增多，而数据大屏是数据可视化的其中一种展示方式，它作为大数据展示媒介的一种，被广泛运用于各种会展、公司展厅、发布会等。

相比于传统手工定制的图表与数据仪表盘，通用大屏搭建平台的出现，可以解决定制开发, 数据分散带来的应用开发、数据维护成本高等问题，通过数据采集、清洗、分析到直观实时的数据可视化展现，能够多方位、多角度、全景展现各项指标，实时监控，动态一目了然。

本文将通过敏捷BI平台的通用大屏搭建能力的实现方案，来讲解一下通用可视化搭建平台整体的设计思路。

二、快速了解可视化大屏

2.1 什么是数据可视化

从技术层面上来讲，最直观的就是前端可视化框架：Echart、Antv、Chart.js、D3.js、Vega 等，这些库都能帮我们快速把数据转换成各种形式的可视化图表。

从业务层面来讲， 其最主要的意义就在于通过数据 -> 图表组合 -> 可视化页面这一业务流程，来帮助用户更加直观整体的分析不同行业和场景的趋势和规律。

所以在数据领域里，对于复杂难懂且体量庞大的数据而言，图表的信息量要大得多，这也是数据可视化最根本的目的。

2.2 可视化大屏都有哪些部分

主要由 可视化组件 + 事件交互 + 坐标关系 组成，效果如下图所示：

2.3 可视化大屏和常见的BI报表看板的区别

经常会有同学会问到，可视化大屏和BI报表看板的区别是什么？

这里简单的做一下介绍：

1. 大屏和报表看板都只是BI的其中一种展现方式，大屏更多是通过不同尺寸的显示器硬件上进行投屏，而报表看板更多是在电脑端进行展示使用。
2. 大屏更加注重数据动态变化 ，会有极强的视觉体验和冲击力，提供丰富的轮播动画、表格滚动等动画特效。而报表看板更注重交互式数据探索分析，例如上卷下钻、排序、过滤、图表切换、条件预警等。

三、设计思路

3.1 技术选型

• 前端框架：React 全家桶（个人习惯）
• 可视化框架：Echarts[DataV-React](https://blog.csdn.net/biggbang) (封装度高，json结构的配置项易拓展) D3.js（可视化元素粒度小、定制能力强）
• 拖拽插件：dnd-kit （满足树状结构视图的跨组件拖拽）
• 布局插件：React-Grid-Layout（网格自由布局，修改源码，支持多个方向的拖拽，自由布局、锁定缩放比等）

3.2 架构设计

下图是我们搭建平台的整体架构设计：

<