Skip to content

仪表盘

在完成了基础数据模型的搭建后,信息化系统往往还会需要通过各类图形化的报表,来更好的展示业务系统中的各类信息,方便用户直观的获取业务进展情况,进行数据分析和价值挖掘。织信的仪表盘模块为用户提供了高度可视化的自定义图表配置工具,支持更具业务需求,配置由多种卡片类型组成的可视化数据看板。

典型使用场景

  • 应用工作台:可以作为特定角色的工作台,将与角色相关的主要工作内容通过仪表盘集中展示在一个界面。比如销售人员可以看到当日的业绩概览、待办事项以及销售漏斗等关键信息。
  • 数据看板:实时展示关键业务数据,帮助企业决策者快速了解业务情况。例如,管理层可以通过数据看板查看整体业绩、KPI 完成情况及趋势分析等。
  • 数据报表:将系统中的数据以多维度、图表化的方式展示,并支持用户根据需要生成特定的报表,比如按部门、地区、时间段等维度生成的销售报表。

功能边界

如果图表具备复杂的动态效果,请使用组件编辑器完成仪表的动态效果。如多个TAB标签滚动显示;世界人口统计,随年份变化的动态人口数量等。

设计逻辑

仪表盘的数据大多时候来自于已经配置好的数据表中,一般情况下,我们需要先配置好数据表,完成基础数据信息的录入,然后再进行图表卡片的创建,最后将创建好的卡片调整成合适的仪表盘布局。 仪表盘配置

卡片设置

卡片设置包含仪表盘中所有卡片的配置,其中仪表盘布局卡片样式过滤参数按钮都是统一的设置。不同卡片之间只有卡片配置不一致,在此过滤参数将会放到后面的仪表盘过滤条件一起讲解。

仪表盘布局

在仪表盘中的卡片,可以通过网格布局的方式,进行大小调整和位置移动。卡片布局默认使用的是24列网格布局,将卡片的布局区域宽度等分为24份,作为列宽,即卡片的最小宽度单位。而仪表盘设置的行高,则为卡片的最小高度单位。

仪表盘布局

卡片样式

我们可以统一对卡片的样式进行调整,包含标题边框背景内边距主题样式等。具体配置效果如下图

卡片样式

按钮

在卡片的配置过程中,我们可能需要在卡片上添加相关的操作按钮,以完成卡片的扩展能力。平台也支持嵌入卡片按钮,具体卡片的配置效果如下图

按钮

图表参数

可控制仪表盘的背景全屏展示卡片布局参数等仪表盘相关的参数

在屏幕宽度发生变化的时候自动调整排列

如果在【图表参数】中开启了在屏幕宽度发生变化的时候自动调整排列,网格布局的列数将会随着屏幕宽度发生变化。具体如下:

宽度<768px宽度>=768px宽度>=996px宽度>=1200px
列数461012

仪表盘容器的高度铺满全屏

如果在【图表参数】中开启了仪表盘容器的高度铺满全屏,网格布局的行数将固定为栅格行数的配置,每一行的高度会随着屏幕高度发生变化。

高度响应

过滤条件

支持仪表盘模块的全局过滤条件,该过滤条件可以在所有卡片内使用。卡内通过在过滤器中使用查询条件参数,可以完成仪表盘的联动数据过滤

TIP

如果仪表盘过滤条件标识符与卡片内过滤参数的标识符一致,并且都有值的情况下,以卡片过滤条件为准。

以下我们通过一个人员年龄分布的例子去讲解过滤条件的使用

过滤条件地址栏传参

仪表盘的过滤条件可以通过地址栏参数设置默认值,地址栏的参数名和过滤条件标识符一致。如,过滤条件最小年龄的标识符为minAge,通过地址栏设置最小年龄的值为12

仪表盘链接为:https://next.informat.cn/app/i1mwqy35y88hl/dashboard/eaqvb0rrkuotk

通过地址栏传参后的地址为:https://next.informat.cn/app/i1mwqy35y88hl/dashboard/eaqvb0rrkuotk?minAge=12