Appearance
仪表盘
在完成了基础数据模型的搭建后,信息化系统往往还会需要通过各类图形化的报表,来更好的展示业务系统中的各类信息,方便用户直观的获取业务进展情况,进行数据分析和价值挖掘。织信的仪表盘模块为用户提供了高度可视化的自定义图表配置工具,支持更具业务需求,配置由多种卡片类型组成的可视化数据看板。
典型使用场景
- 应用工作台:可以作为特定角色的工作台,将与角色相关的主要工作内容通过仪表盘集中展示在一个界面。比如销售人员可以看到当日的业绩概览、待办事项以及销售漏斗等关键信息。
- 数据看板:实时展示关键业务数据,帮助企业决策者快速了解业务情况。例如,管理层可以通过数据看板查看整体业绩、KPI 完成情况及趋势分析等。
- 数据报表:将系统中的数据以多维度、图表化的方式展示,并支持用户根据需要生成特定的报表,比如按部门、地区、时间段等维度生成的销售报表。
功能边界
如果图表具备复杂的动态效果,请使用组件编辑器完成仪表的动态效果。如多个TAB标签滚动显示;世界人口统计,随年份变化的动态人口数量等。
设计逻辑
仪表盘的数据大多时候来自于已经配置好的数据表中,一般情况下,我们需要先配置好数据表
,完成基础数据信息的录入,然后再进行图表卡片的创建,最后将创建好的卡片调整成合适的仪表盘布局。
卡片设置
卡片设置包含仪表盘中所有卡片的配置,其中仪表盘布局
、卡片样式
、过滤参数
、按钮
都是统一的设置。不同卡片之间只有卡片配置
不一致,在此过滤参数
将会放到后面的仪表盘过滤条件
一起讲解。
仪表盘布局
在仪表盘中的卡片,可以通过网格布局的方式,进行大小调整和位置移动。卡片布局默认使用的是24列网格布局,将卡片的布局区域宽度等分为24份,作为列宽,即卡片的最小宽度单位。而仪表盘设置的行高,则为卡片的最小高度单位。
卡片样式
我们可以统一对卡片的样式进行调整,包含标题
、边框
、背景
、内边距
、主题样式
等。具体配置效果如下图
按钮
在卡片的配置过程中,我们可能需要在卡片上添加相关的操作按钮,以完成卡片的扩展能力。平台也支持嵌入卡片按钮,具体卡片的配置效果如下图
图表参数
可控制仪表盘的背景
、全屏展示卡片
、布局参数
等仪表盘相关的参数
在屏幕宽度发生变化的时候自动调整排列
如果在【图表参数】中开启了在屏幕宽度发生变化的时候自动调整排列
,网格布局的列数将会随着屏幕宽度发生变化。具体如下:
宽度<768px | 宽度>=768px | 宽度>=996px | 宽度>=1200px | |
---|---|---|---|---|
列数 | 4 | 6 | 10 | 12 |
仪表盘容器的高度铺满全屏
如果在【图表参数】中开启了仪表盘容器的高度铺满全屏
,网格布局的行数将固定为栅格行数
的配置,每一行的高度会随着屏幕高度发生变化。
过滤条件
支持仪表盘模块的全局过滤条件,该过滤条件可以在所有卡片内使用。卡内通过在过滤器中使用查询条件
参数,可以完成仪表盘的联动数据过滤
TIP
如果仪表盘过滤条件标识符与卡片内过滤参数的标识符一致,并且都有值的情况下,以卡片过滤条件为准。
以下我们通过一个人员年龄分布的例子去讲解过滤条件的使用
过滤条件地址栏传参
仪表盘的过滤条件可以通过地址栏参数设置默认值,地址栏的参数名和过滤条件标识符一致。如,过滤条件最小年龄
的标识符为minAge
,通过地址栏设置最小年龄
的值为12。
仪表盘链接为:https://next.informat.cn/app/i1mwqy35y88hl/dashboard/eaqvb0rrkuotk
通过地址栏传参后的地址为:https://next.informat.cn/app/i1mwqy35y88hl/dashboard/eaqvb0rrkuotk?minAge=12