大屏模板制作技巧

数据可视化在数据分析中的作用不言而喻，主要是借助于图形化手段，清晰有效地传达与沟通信息。交互式可视化能够让决策者快速理解数据背后的意义，深入了解细节层次，为决策分析提供了精准的意见。

通过本章节的学习，可以掌握基本技巧，学会如何快速有效地做出一张大屏。

2.1 了解大屏数据可视化

• 大屏数据可视化介绍
  

• 大屏数据可视化设计指南

2.2 决策报表

2.2.1 决策报表简介

FineReport 决策报表采用了画布式操作界面，专为大屏和移动端而生，通过简单的拖拽操作即可帮助用户构建强大、全面的「管理驾驶舱」，在同一个页面整合不同的企业数据，完美地展示企业的各类业务指标，实现数据的多维度分析。

详情请参见：决策报表简介

2.2.2 组件介绍

决策报表中添加了所有的组件，帮助大家理解各个组件的含义，如下图所示：

2.3 可视化组件

2.3.1 基础图表

帆软自主研发的 HTML5 图表，具有优秀的动态效果和强大的交互体验，提供超强的个性化设置项，能在多种终端设备完美展示。

我们介绍一些典型的新图表制作方法，并介绍了如何设置图表的样式，让用户能够独立制作出专业精美的分析图表。

详情请参见：[新]各图表的使用场景列举

2.3.2 扩展图表

为了满足大屏等场景下的动画及自动播放效果，帆软团队基于 WebGL 等技术新开发了此插件。插件中包含了一些展示形态新颖或展示效果酷炫的新图表，同时此插件将保持持续更新，确保内容的丰富性。

详情请参见：扩展图表插件

3.1 前期准备

• 进行业务需求调研、根据业务场景抽取关键指标

• 确定可视化图表类型

  可视化的最终目的是为了更清晰地传递信息，也就是说，用什么图形展示数据，非常重要。同一个指标的数据，从不同维度分析就有不同结果。在我们确定了某个数据关系类型后，就可以根据该数据的使用场景查找出相对应的图表和使用建议，并在其中进行选择。

  
  

3.2 排版布局

明确大屏展现的目的，首要是服务于业务的。要让业务内容、数据合理的展现，就要避免误入疯狂堆砌指标的歧途，要分清主次。主要指标是什么？是反应核心业务内容的。次要指标是什么？通常是用于进一步阐述主要指标的。一定要让数据之美绽放在数据价值体现的基础上。

下面推荐几个常见版式给大家：

上面几个版式，不是金科定律，只是通常推荐的主次分布版式，能让信息一目了然。实际项目中，可能会遇到更加复杂的情况，有更多的指标要展示。

除了主次分布，还有平均分布，根据我们的基本原则进行微调就好

3.3 配色

合理的布局能让业务内容更富有层次，合理的配色能让观看者更舒适。

3.3.1 Body 背景

背景的选择要遵从两点基本原则：深色调&一致性

如下所示给大家几个推荐的配色方案：

并不是说背景一定要用颜色，也可以采用深色系的图片，可以搭配其他一些现实特性可以让整体看着更有科技感。推荐使用一些带有星空、条纹、渐变线、点缀效果之类的图片等。

3.3.2 统一图表系列、标签配色

设置单一图表背景通常为无，统一设置系列颜色，修改标签、坐标轴颜色

技巧：预先设置好图表预定义配色，统一给图表系列更换配色

3.3.3 设置标题字体大小、颜色

设置大屏主标题

统一组件标题大小和颜色

设置方式：

组件>样式>自定义>标题

3.4 点缀

在大屏展现上，细节会极大的影响整体效果，需要通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果，能帮助提升整体美观度。

3.5 动态效果

动效的范围很广，可以从很多角度解读，丰富的动态效果能让大屏看上去科技感十足，让大屏展示效果更加炫酷。合理的利用动态效果，可以帮助我们快速理解数据间的关系，为决策分析提供了指导性的意义。

3.5.1 大屏可视化插件（扩展图表）

基于 WebGL 等技术新开发，目的在于让每一个用户通过简单拖拽即可实现自动播放、3D 动画特效等多种效果，同时也能多维度地展示数据，提升大屏的视觉效果

3.5.2 动态效果索引

tab轮播、图表轮播、报表块监控刷新、图表监控刷新、地图监控刷新并动态弹出数据提示、图表闪烁 、 报表块滚动、图表开启自动数据点提示轮播接口、轮播时自动联动其他组件

4.1 小分辨率的显示器预览大屏模板出现滚动条

问题描述：

使用分辨率较大的显示器制作大屏模板，在小分辨率的显示器上预览时会出现滚动条的现象，需要再次调整模板，比较麻烦。

原因分析：

注：body 大小设置的像素和屏幕分辨率之间的关联请参见：决策报表简介 的 6.1 节内容。

高分辨率做的模板拿到低分辨率上预览会出现滚动条，因为最小缩放比为 0.4 ，低分屏很容易低于 0.4 从而取 0.4 产生滚动条。

body 大小设置的像素表示的是画布真实大小，如果 body 大小设置的像素是 3840×2160 和屏幕分辨率是 3840×2160 ，设计器不存在缩放（body 的组件大小与 body 像素大小一致），模板展示以真实大小，不会做缩放。
相反如果 body 大小设置的像素是 3840×2160 ，屏幕分辨率是 1920*1080 ，就以两倍的效果缩小，效果就是以前区域的1/4，这样之前能显示全的地方，因为最小缩放比为 0.4， 低分屏很容易低于 0.4 从而取 0.4 产生滚动条。

解决方案：

建议在低分辨率下做模板，需要开启 字体自适应 ，放到高分辨率下如果还有细微问题，只需微调就能解决。
例如：客户大屏是 3840×2160 ，以及常用分辨率都是 1920*1080 ，那么最好在 1920*1080 的电脑上制作模板，比如客户平常用的 1920*1080 以及 1366*766 ，那么最好在 1366*766 或者更低，比如 960×540 分辨率的电脑上制作模板。