数据大屏：聊聊常见可视化大屏的产品实现.docx

数据大屏：聊聊常见可视化大屏的产品 实现
今天和大家聊聊一种比拟常见的数据可视化形式：大屏
数据大屏，无论是搞数据还是不搞数据的，应该都不陌生。对搞数据的人而言, 往往是不屑一顾，觉得大屏就是鸡肋，食之无味，没技术含量；对于不搞数据的 朋友，可能大屏承载了大家对「大数据」、「人工智能」的全部认知。
凡事存在即合理，一味的否认也不是客观的态度。正好快618大促了，各个公 司肯定又开始搞大屏了。咱们今天详细聊聊数据大屏。
一.大屏的应用场景
说到大屏，咱们先上几个图吧，看看一般大屏的呈现。
比方，阿里双十一的公关大屏:

未命名
e
资源
0S
电£面板引用面板
师目过逊8回河管理 全局蜘 电件更新
0 O
回收站 its
臼
导出
a
发布
««
辅助
交互
日他 定制
页面设9E
1000
1200
1*»
1600
1W0
ms
旦他
本面内闻
万用图
hull
堆a柱状图
3DWH
解恋大小
大屏准荐尺寸1920ro80
1920
1080
敢©图
'ii iihil il
基本柱状图
涔■色
232630
超格向距
水平堆4条形图
按住室将可施动画布1920x1080 45%
,放出・
封面
•按舸此例适配
翔斯硒
原比例展示溢电案动
微屏

视因调整用助设・
通过上图可以看出，编辑界面主要包括了以下区域：
・ 画布区：即中间的核心编辑页面
・ 组件选择区：即折线图、柱形图等一系列的可视化图表选择
・ 图层区：当组件被拖拽到画布上时，左侧图层呈现右侧组件的list信息
・ 设置区：右侧进行页面、组件、数据等内容的配置
其他细节功能不一展开了。
3.组件简介 组件，是可视化配置大屏中的核心内容了。一个完整的大屏就是由许许多多个单 独的组件进行拼装而成的。每个组件相当于一块乐高积木。搞定了组件，就搞定 了一大半的大屏配置。
下面，我们把一些配置大屏常见的组件进行一个概括介绍。下面的list还是比拟 全面了。
组件类型 组件描述
常规组件 常规组件中包括柱形图、折线图、饼图、散点图和其他常规组件
柱形图：包括基本柱形图、基本条形图、轮播排行柱状图、极坐标柱状图、3D 柱图、双向轴图标、双向柱图、条形排名占比图、排行条形图等组件
折线图：包括基本面积图、基本折线图、表格折线图、预测面积图、双轴折线图 饼图：包括单值占比图、3D饼图、基本饼图、基本环图、基本玫瑰图、多色玫 瑰图、轮播饼图等组件
散点图：包括定点气泡图、力学气泡图、线性回归图
其他常规组件：包括万用图、雷达图、基本三角图、象形图、漏斗图、等级占比 图等组件
文字组件 包括图标、轮播表格、词云、链接、弹幕组件、弹幕文本、渐变文字、子项表格
组、轮播行、新闻列表、点状时间轴
辅助组件 包括图片、形状组件、状态背景、天气组件、当前时间、自定义路径、跟踪路
径、闪点
指标组件 包括翻牌器、基本水位图、仪表盘、百分比条、分类占比条、栅格进度条、状态 卡片、图形栅格占比、图标占比图、储水图
地图组件 包括3D地球、2D中国地图、边界地图、高德地图、3D边界地图、3D城市、3D
园区
交互组件 包括选项卡、iframe、iframe切换、下拉菜单、交互组件、视频Tab、时间轴、 滚动Tab、滚动选择器
其他组件 包括视频、视频流播放器、声音、开场视频、模型、3D圆形指标、数据容器
上面是该平台提供的所有组件库。具体每个组件的内容我就不展开说明了，感兴
趣的朋友可以自行研究。确实还是覆盖比拟全面的。
插一句，这些组件的实现，真的是检验前端工程师能力的试金石。
4.配置栏简介
选中某一个组件，右侧会出现该组件的配置栏。
＜石化化工智慝园区
蟠并
flBff
9乙，
AH 动怒面板引网面板
400 g
军 tit
里目过我H回・管理
(2)
O
蛆件更新
自 。国 臼 13 a
通知 号* mx 发布
1 ma边电
| - M« 交互|
背景一 18886916 | 一新版8 |
1 BMv2.5
、王■风格②
・本

＞ e＞人员鳖氏
按住空格可拖动画花3840x1080 22%
3834 W J 1078
> BB片
＞日大%髭

位置尺寸 0 X I 0
＞ e＞装置发控 。
＞日产品出厂
＞ b原科康存 §
＞ e＞底加我理
＞ &筝・注监 §
iSI
配置栏主要分为样式、数据、交互三项。可以对组件的各项参数进行设定。
• 样式：配置组件的位置、尺寸、各类样式（颜色字体动画等）；
• 数据：对接该组件所需的数据源；
• 交互：通过回调、交互等方式配置组件的交互动作。
不同组件千差万别，因此各项配置参数也是完全不同的。
四,一些设计技巧
上面讲的是产品化的内容。最后和朋友们提供一下大屏设计落地过程中的一些技 巧。
首先，打底的图片就有讲究：要有驾驶舱的那种视野感，这样显得高大上、开阔。

其次，但凡设计地图的内容，就上地图。地图打底就是万金油,怎么弄都高级感 /两/两。
如果没有地图的数据内容，就多呈现流程结构图:
没GIS那就走流程/结构的路子

另外，一定要有个主视觉区，让观众的视野一下子就能集中的区域。不然过于分 散，不利于整体层次结构。
关于数据大屏，我们今天就聊这些吧,感谢朋友们关注。
全球交易
100
00ft8:2i
162个
已成交国家/地区总数
$825,339 ,无线成交占比：79%
• &0
250 I成交金额（亿＞
全国区城
流订单・
山东
300万
块递网络
3
中心数量
商家销售排行榜
, • •
- 3,信用蹲加
4, C&A旗懈
消费省
地区排行
上海
•正常
•轻度繁忙
繁忙
5,马克华菲旗舰店?」
今日累计电子订单■ ,66,981
.¥1,215,032,341
8卖螃
号熊X女装
全球狂裳茸
00:08:20
丽（小时）
全国人口统计大屏：
全国人口琉计起经
2022.05.10 23:23:52 •
•性别构成 ...
厂.男性人口 厂.女性人口
19517弓人 .■ 17234万人
o总人口愎割比
2022 IOS.II
2021 -^―^―- 89 31
1020 ， ， 79.23
2019 1・ . 98 21
•她区分布 .
■东之龙区eo %
■苏儒的X 23、
■ BfftttX 23、
•中酉侬8 B4、
・历年总第 ..
•金・A0 ... - —年均・?》•
50.11
usn
Anw®
•户别人口
・住户总u .
•年M构成
•民族/城多分布
城缜人口
XWAQ
62,7
衣网人口
9517
.体户人口 .
208 U7
,2
4140
•ISKLt
rrHdJJ
还有很多类似的吧，就不举例了。感兴趣的朋友随便百度一搜索，就有一把的案
例呈现：
数据大屏
百度一下
少东woody
百度苜页
网页 视频 0图片 知道
恒资讯：' 贴吧 C文库一地图 包采购 更多
找到相关图片妁731.000张 版权 高清
最新 动图全部尺寸
全部题色
.索材翻横板.显示
图片合辑
更多高清美图
在线大屏数据可视化设计，0代生成，150…
g背景.效果图.动态图.设计电裔看板列表.gif .地SI >
大屏，潮流新品，好货热卖，更多优惠尽.. 可视化数樨大屏•百度无需SQL和任何编一 可视化数据大屏
图片合辑•更多高清…
数据可视化大屏 被雄可视化大屏界面… 图smartbi臬地旅游大数据可视化大屏33. 数据可视化大廨展示 数据可视化大屏企业数据分析的重要麻口
大数据可视化科技感数据大屏后台 数据可视化源码带后台java工程大隔弟数据可视化 数据可视化,大屏展示,哪家公用做的不错？

总结一下，大屏主要的应用场景有以下这些：
1 .管理监控与决策监控与决策，应该是数据大屏最原始的出发点。可视化大屏可以面向业务监控、 运营指挥、运维监控等场景，实时、直观地展示与跟踪数据。当异常出现时，可 以及时响应，并为科学指挥提供依据，起到实时监控的作用。
在这一点上，其实和PC端或者APP端的BI系统没有本质区别，只是形式上呈 现更大、集体一同观看而已。
但是实践过程中，真正制作大屏进行监控与决策的比例，我很难给出。反正我经 历和接触过的企业，没有通过大屏进行监控与决策的。可能在一些传统行业中（比 如交管系统、大型工厂），有这种场景诉求，需要一堆人在大厅中看大屏决策。
欢迎对这方面有接触过的朋友可以留言提供素材哈~
2 .领导参观与视察
这个应该是比拟常见的场景。大公司通常都有个展厅，安装几个组合的大屏幕, 24小时播放数据看板，表达公司的整体运行情况。另外经常有些政府，落地的 数字化工程，会有这种大屏，供上级领导视察的时候查看。
30.230 .
nwi ■芦1
130> M aw
0X5
30.230
130-
■
私即 • ♦
M, IfrU
-crotM &X9 —■ 0.56
慈溪市智量水利
2626 02 20
18:20 20 ■天 o “ a
4 > 13. 69«
.".u
M' 3,347 . \J) 3,347 .
夕 3,347 3 3,347
S 3.347」 9 3,347
◎ L945 O 24*7

到底是不是面子工程，这个就见仁见智吧，很难说。虽然是形象工程，但是确实 如果脸面都不好，也很难表达自己的实力、落地效果能有多好。
3 .公司宣传与展示
这种场景其实和领导参观视察比拟类似，也是为了向外界show肌肉的。
比方开头呈现的阿里双十一大屏。我记得前几年，双十一前夜以及当天，阿里邀 请各路媒体记者、合作伙伴在大会议室里，实时看成交数据。在这种情况下，大 屏是不二的选择。最后各路媒体都会用大屏的照片作为媒体稿进行发布。当然, 这两年，阿里低调了，21年好像就没再搞公开的。
二、大屏的通用特征
上面聊了大屏的一些常见场景，其实从侧面说明，大屏还是有价值的。只不过更 多的是一种品牌形象、业绩表现等比拟难量化的价值。
我总结了一下，大屏的一些通用特征，让大家能更深入地理解大屏。主要包括以 下几个方面。
数据大屏的呈现，首要就是酷炫
呈现的都是比拟核心的大指标
大屏的数据都是实时刷新的
大屏通常的应用周期比拟短，大部使用一两天就尘封了
固定的呈现或者滚动式交互，用户一般不参与点击

1 .样式酷炫性
数据大屏的最典型的特征，就是酷炫。可以说，"无酷炫，不大屏”。
基本都是深颜色打底，增加各种酷炫的元素，一些3D效果呀、可视化图形、地 图呀，反正能实现的酷炫效果，尽可能往上装。在通常意义的数据dashboard 中，一般不会搞得太花里胡哨。但大屏是走向了另一个方向。
本质上，和大屏主要是展示公司形象、供领导视察这些场景决定的。这倒是给了 UI设计师和前端研开展示能力的空间。
2 .数据实时性
大屏的数据要动起来，不动的大屏是个死屏，也就丧失了意义。
通常我们很多分析工具的数据都是离线计算的，因此时效性都是T+1的。但对 于大屏而言，离线数据显然不满足应用场景。你想，这么多人就盯着大屏看数据 呢，如果一直是个死数，那还看啥……看一眼就可以撤了。
时效性通常都会要求到秒级更新，毕竟分钟级更新甚至小时级更新，都比拟慢了。
3 .需求临时性
大屏的需求一般都是比拟临时的，比方大促的大屏看板。基本也就用大促高峰的 那一天，其他时间就废弃了。
当然，对于一些给领导视察使用的大屏，相对就能稳定与长期很多。
4 .指标核心性
由于大屏增加了很多的可视化效果，所以其实真正能放的数据内容也是比拟有限 的。而且大屏由于是看整体的内容，所以给出的指标肯定是业务侧、公司层最关 注的指标。
这局部可以参考《北极星指标》。

5.交互
定性

最后，交互层面。由于大屏一般是固定播放的，所以观看者和大屏是没有交互的。
不像我们在私人PC上，可以进行各种下钻、点击、分析、切换等操作。
但是为了整体效果，也为了呈现更多的信息,大屏的交互往往会采取轮播的形式, 切换不同维度的数据。
三、产品化实现
最后，我们聊聊大屏的产品化实现。
上文也提到了 ,大屏本质上就是一个dashboard ,所以产研自行开发一个酷炫 的看板，没啥太大问题。但是由于大屏往往是比拟低频的诉求，而且通常看板的 酷炫程度很难显著提升。因此，行业中催化了不少专门做大屏的公司。他们提供 一些可配置的界面服务。咱们详细看看。
1 .产品架构
产品架构图如下，供参考

应用层
驾驶舱
公开集接提供
加密发布
自定义应用集成

配置层 自定义布局 组件样式配置 交互动作设定 数据接入映射 数据交互配置 控制端界面配置 远程事件纲定
自定义组件
预置组件、模版、素材
: 常规图表
文字组件
辅助图形
数值指标
二三维地图

自定义组件开发平台 1

交互组件 音视频流媒体
数据容器
自定义模版
素材库

组件开发规范 ]

1 数据源类型
数据接入处理
RDBMS
Restful API
CSV静态数据
音视频流媒体
其他常见数据源

查询条件横入
在线格式转换I

BS架构
Node纯前端轻量

其实整体的过程，仍然是数据接入、面板配置、应用部署发布的那一套，可以参
考《阿里QuickBI产品流程》
2 .编辑页面概览
以下是某公司提供的大屏配置的付费产品核心界面。