不少用户在设计大屏时没有合理地规划好每个模块的图表类型,导致在制作时频繁更换图表类型却始终不满意。实际上,大屏常用的图表类型和普通报表或驾驶舱存在一定区别,大屏图表的特点是:
1)业务逻辑更为简单:大屏的使用场景更偏向于展示或演示,而非在PC端进行细致的数据分析,因而图表反应的逻辑更为简单,让观看者可以”一看就懂“;
2)视觉效果需要重点考虑:公司对外展示或内部公示的大屏对视觉效果都有一定要求,因而在选择图表时也要讲究图表在大屏上的整体视觉效果;
3)酷炫图表使用更多:在普通报表中用不到的酷炫图表,如3D效果、动效等在大屏上是很常见的,这些图表对展示的硬件性能要求也更高。
*上图中的图表都来源于扩展图表插件,非FR内置图表,使用方法见:扩展图表插件
一、大屏常用图表概览
本文介绍大屏中常用的图表类型,为大家设计大屏模板时提供参考。
一般情况下,大屏使用的图表类型中柱形图&条形图>=饼图&圆环图>=折线图&面积图>仪表盘类>=地图类>雷达图>词云=漏斗图>……
常用程度 | 图表分类 | 细分类型或变体 | 帮助文档 | 推荐指数 |
---|---|---|---|---|
一梯队 | 柱形图&条形图 | 普通柱形图 | 柱形图 | ☆☆☆☆☆ |
特殊形状柱形图 | 特殊图形柱形图 | ☆☆☆ | ||
普通条形图 | 条形图 | ☆☆☆☆ | ||
轮播条形图 | 轮播条形图 | ☆☆☆ | ||
自定义形状条形图 | 图表用图片填充系列 | ☆☆☆ | ||
堆积柱形图; 堆积条形图 | ☆☆☆☆ | |||
双向条形图(旋风图) | 人口金字塔 | ☆☆☆ | ||
饼图&环形图 | 普通饼图 | 饼图 | ☆☆☆☆☆ | |
普通环形图 | 饼图 | ☆☆☆☆☆ | ||
轮播饼图 | 轮播饼图 | ☆☆☆☆ | ||
多层饼图 | 多层饼图 | ☆☆☆ | ||
折线图&面积图 | 普通折线图 | 折线图 | ☆☆☆☆☆ | |
普通面积图 | 面积图 | ☆☆☆☆☆ | ||
柱形折线组合图 | 柱形图-折线图 | ☆☆☆☆☆ | ||
指标卡&表格 | 普通指标卡(通过报表块制作) | 报表块 | ☆☆☆☆☆ | |
轮播指标卡; 粒子计数器 | ☆☆☆☆ | |||
普通表格(通过报表块制作) | 报表块 | ☆☆☆☆☆ | ||
二梯队 | 仪表盘 | 环形仪表盘 | 百分比圆环仪表盘 | ☆☆☆☆☆ |
轮播仪表盘 | 轮播夜光仪表盘 产品级协助 | ☆☆☆☆ | ||
水球图 | 水球图 | ☆☆☆☆ | ||
像素点图 | ☆☆☆ | |||
地图 | 点地图 | 点地图 | ☆☆☆☆ | |
流向地图 | 流向地图 | ☆☆☆☆ | ||
区域地图 | 区域地图 | ☆☆☆☆☆ | ||
轮播gis点地图; 轮播三维组合地图 | ☆☆☆☆☆ | |||
场景地图 | 场景切换地图简介 | ☆☆☆☆☆ | ||
目录类 | 轮播目录齿轮 | 轮播目录齿轮 产品级协助 | ☆☆☆☆ | |
智慧树图 | 智慧树图 | ☆☆☆☆ | ||
三梯队 | 雷达图 | —— | 雷达图 | ☆☆☆ |
漏斗图 | —— | 漏斗图 | ☆☆☆ | |
词云图 | —— | 词云图 | ☆☆☆ |
二、常用图表对应场景
1、柱形图&条形图类
1)柱形图:
普通柱形图是大屏上最常用的图表类型,用于体现有横向对比关系的数据。
2)特殊形状柱形图:
若普通柱形图的视觉效果不满足大屏设计要求,可考虑有三维效果或三角、弧形效果的特殊形状柱形图。
3)条形图:
条形图和柱形图一样易于形成对比关系,同时由于图形纵向排列,更适合展示排名数据。
4)轮播条形图:
轮播条形图是普通条形图的升级版,将系列名、数值、排名和百分比条形图结合显示,且有动态轮播的效果。
5)自定义形状条形图:
自定义形状条形图用和图表信息高度相关的图标填充图表系列,让可视化效果更生动。
6)堆积柱形图&条形图:
在展示多分类、多系列的数据时最常用的图表类型,以直观的柱形、条形效果展示更丰富的对比数据。
7)双向条形图(旋风图):
不仅在条形图的从左到右方向上形成对比,两方向的条形长度同样形成对比,男女性数据对比是最常见的场景之一。
2、饼图&环形图
1)饼图:
饼图用于展示数据占比,可以一眼看出一组数据中不同类别数据的分布状况。
2)环形图:
用法与饼图相同,环形的半径占比可以调节,视觉效果更丰富。
3)轮播饼图:
自动轮播饼图(环形图)的每一个系列,可以在环形中央或外部显示维度名称、数值或百分比,显示更多信息的同时让大屏效果更具动感。
4)多层饼图:
多层饼图的最内层是最大的维度分类,往外不断细分数据维度,相当于多个环形图的嵌套效果。
3、指标卡&表格
1)指标卡:
指标卡并不属于图表类型,但有一些关键指标数据需要用最直接的方式突出显示时,指标卡是最合适的方式。使用report块制作,在单元格中注入动态数据列数据,并以单元格背景图的方式插入小图标,一个简单的指标卡就制作好了。
2)轮播指标卡:
轮播指标卡可以轮播展示同类型不同维度的数据指标,同时富有动态效果,制作方法也较为简单,和普通图表一样直接配置数据即可。
3)表格:
大屏上有些明细信息无法通过图表和指标卡体现,必须要用到列表甚至明细表,那么用report块制作的表格是必备的元素。
4、仪表盘
1)环形仪表盘:
仪表盘用于展示百分比形式的重要指标,如目标的完成率、利润率等,仪表盘用圆环的色彩填充将百分比图形化,结合指标名称、指标值和百分比,紧凑且充分地展示该百分比指标的信息。
2)轮播仪表盘:
若同类型的重要指标不止一个,可以使用轮播仪表盘,自动轮播每个维度的指标信息;轮播夜光仪表盘自带的渐变色效果也使得大屏更富动感。
3)水球图:
水球图是仪表盘的一种特殊形式,用一个透明球体和水波表示百分比,除了生动直观外,其视觉效果也广受青睐。
4)像素点图:
像素点图也是仪表盘的一种特殊形式,用点亮的方形像素点数量表示百分比数据,也可以进行多维度数据的轮播。
5、地图
1)点地图:
点地图是通过区域名或定位经纬度,用散点来表示所在位置的数据指标。
2)流向地图:
流向地图用于展示地点之间的物流运输关系,在制造业、交通行业应用尤其多;FR图表的流向地图具有动态流线效果,样式点还可以自定义图标,让地图的可视化效果更突出。
3)区域地图:
区域地图是按照国家、省市行政区划分,用来展现地理信息,以及与地理位置有关的信息,指标的多少可以用颜色深浅区分。
4)轮播地图:
FR中的轮播地图一共有两种,都可以自动轮播展示多组地理数据,根据业务场景需要选取即可。
轮播gis点地图:
在gis图层上轮播不同数据点,并有高空滑过的视觉效果。
轮播三维组合地图:
可轮播点、柱形、线型、区域4种不同数据样式的地图。
5)场景地图:
场景地图可以自动或点击按钮手动轮播多场景数据,每个场景的地图轮廓和数据样式、内容可以不一样。场景切换的同时还可以联动周围的组件,且场景地图的背景酷炫,在展示大屏上广为使用。
6、目录类
1)轮播目录齿轮:
轮播目录齿轮可以轮播多个维度的数据指标,目录齿轮的形态容易形成视觉聚焦效果,适合做大屏首页的目录导航。
2)智慧树图:
智慧树图自动轮播每个气泡中的指标名称和指标值,使用场景与轮播目录齿轮类似,也适合作为大屏首页的目录导航。
7、雷达图
雷达图将多个维度的数据量映射到起始于同一个圆心的坐标轴上,可直观展示数据分布的高低,检查数据是否有异常,在一些监控性质的大屏场景中很实用。
8、漏斗图
漏斗图由多个梯形从上而下叠加而成,从上到下的项有逻辑上的顺序关系,由于漏斗图形象直观且配色饱满,在大屏上使用也较多。
9、词云图
词云是文本数据的视觉化展示,以字体大小或颜色深浅表示每个词的重要程度,可用于公司印象、客户评价等信息的展示,在展示性质的大屏场景中很常见。