历史版本2 :大屏模板制作技巧 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

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

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

2. 相关知识编辑

2.1 了解大屏数据可视化

2.2 决策报表

2.2.1 决策报表简介

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

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

2.2.2 组件介绍

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

详情请参见:决策报表组件介绍

2.3 可视化组件

2.3.1 基础图表

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

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

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

2.3.2 扩展图表

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

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

3. 快速入门编辑

3.1 前期准备

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

  • 确定可视化图表类型

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

    1557383938101526.jpeg111111.png

3.2 排版布局

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

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

1558614882510067.png

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

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

3.3 配色

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

3.3.1 Body 背景

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

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

1557908243227322.png

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

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

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

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

image.png

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

设置大屏主标题

统一组件标题大小和颜色

设置方式:

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

3.png

3.4 点缀

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

image.png

3.5 动态效果

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

3.5.1 大屏可视化插件(扩展图表)

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

官网4.gif

3.5.2 动态效果索引

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

4. 注意事项编辑

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 分辨率的电脑上制作模板。