跳到主要内容

统计

在大屏数据展示中，通常会使用数据统计，积木BI新增了常用的统计组件，可直接设置数据进行统计

统计概览的卡片模式、背景模式和高亮模式 设置都是相同的，以下以高亮模式为例

一、效果展示​

1. 统计概览(卡片模式)​

2. 统计概览(背景模式)​

3. 统计概览(高亮模式)​

二、配置步骤​

1. 添加统计组件​

2. 统计设置​

2.1 基本设置​

配置统计组件的基本显示样式，包括背景填充和内边距设置。

  • 填充类型：选择背景填充方式(无、颜色、图片)
    • 图片：此示例中使用图片作为背景
    • 其他选项：支持纯色、渐变等填充方式
  • 背景图片：当填充类型为"图片"时，设置背景图片路径
    • 例如：drag/lib/img/bg0
    • 支持上传图片或输入图片路径
  • 其他边距等样式设置

2.2 字段映射​

配置数据源字段与组件显示字段的映射关系，将数据中的字段映射到对应的显示位置。

  • 标题字段：name（可自定义）

    • 映射数据源中的标题字段，对应数据格式中的 name 字段
    • 用于显示统计项的标题文本，例如："总车辆数"、"在线车辆数"等

  • 数值字段：value（可自定义）

    • 映射数据源中的数值字段，对应数据格式中的 value 字段
    • 用于显示统计项的主要数值，例如：385、300等

  • 单位字段：suffix（可自定义）

    • 映射数据源中的单位字段，对应数据格式中的 suffix 字段
    • 用于显示数值的单位，例如："辆"、"升"、"公里"等

以下映射字段用于中部数据显示时，例如有环比、同比、数据上升时

  • 对比字段：compareValue（可自定义）

    • 映射数据源中的对比数值字段，对应数据格式中的 compareValue 字段
    • 用于与当前数值进行对比，计算变化趋势；例如："120"等

  • 标签字段：compareLabel（可自定义）

    • 映射数据源中的对比标签字段，对应数据格式中的 compareLabel 字段
    • 用于显示对比项的标签文本，例如："环比"、"同比"等

  • 状态字段、上升值、下降值：compareState（可自定义）

    • 映射数据源中的状态字段，对应数据格式中的 compareState 字段
    • 用于标识数值的变化状态（上升、下降等），当状态等于1时，显示为上升，当状态等于0时，显示为下降
    • 状态值可自定义

提示：字段映射中的字段名需要与"3、数据格式"中返回的数据字段名保持一致，才能正确显示数据。

2.3 卡片样式​

当填充类型为“无”或“颜色时”，可配置卡片的显示样式

2.4 上部配置​

配置统计组件上部区域的显示样式，包括内容类型、布局、字体样式和渐变效果。

  • 内容类型：对应“2.2 字段映射”，选择数值、同比或标题展示在上部位置

2.5 中部配置​

配置统计组件中部区域的显示样式，包括显示控制、布局、标签样式、数值样式以及上涨/下降颜色设置。

2.5.1 显示设置​
  • 显示：控制中部区域是否显示，通过开关控制显示/隐藏
  • 内容类型：选择中部区域显示的内容类型
    • 可选：数值、同比/环比、标题等;对应"2.2 字段映射"中配置的字段
  • 其他边距等设置
2.5.2 标签设置​

配置中部区域标签文本的样式。

2.5.3 数值设置​

配置中部区域数值文本的样式。

2.5.4 上涨设置​

配置数值上涨时的显示颜色。

2.5.5 下降设置​

配置数值下降时的显示颜色。

提示：上涨和下降的颜色设置需要配合"2.2 字段映射"中的状态字段（compareState）使用，当状态字段值为上升状态时显示上涨颜色，为下降状态时显示下降颜色。

2.6 下部配置​

配置统计组件下部区域的显示样式，包括显示控制、布局和文本样式设置。

2.6.1 显示设置​
  • 显示：控制下部区域是否显示，通过开关控制显示/隐藏
  • 内容类型：选择下部区域显示的内容类型
    • 可选：标题、数值、同比/环比等，对应"2.2 字段映射"中配置的字段
  • 文本样式配置

提示：下部配置通常用于显示标题或其他辅助信息，内容类型选择"标题"时，会显示"2.2 字段映射"中配置的标题字段（name）内容。

2.7 高亮配置​

配置统计组件的高亮显示样式，支持为不同的数据项设置不同的高亮效果，包括主数值样式和单位样式的配置。

2.7.1 序号配置​
  • 序号：设置当前高亮配置的序号，根据数据返回个数从0开始，例如实例中序号为2，实际是第三组数据设置为高亮
2.7.2 样式配置​

配置高亮状态下主数值、单位、标题的显示样式。

提示：高亮配置允许为不同的数据项设置不同的显示样式，通过序号区分多个高亮规则。当数据满足特定条件时，会应用对应的高亮样式，使重要数据更加突出显示。

3. 数据格式​

3.1 统计概览(卡片模式)​

[
  {
    "id": "1",
    "name": "成本已支付金额",
    "value": 96790,
    "suffix": "万元",
    "compareLabel": "环比",
    "compareValue": "120%",
    "compareState": "1"
  },
  {
    "id": "2",
    "name": "成本未付款金额",
    "value": 96.79,
    "suffix": "%",
    "compareLabel": "同比",
    "compareValue": "120%",
    "compareState": "1"
  },
  {
    "id": "3",
    "name": "租赁应收未回金额",
    "value": 10790,
    "suffix": "元",
    "compareLabel": "同比",
    "compareValue": "120%",
    "compareState": "1"
  },
  {
    "id": "4",
    "name": "租赁项目欠款金额",
    "value": 86790,
    "suffix": "元",
    "compareLabel": "同比",
    "compareValue": "120%",
    "compareState": "0"
  }
]

3.2 统计概览(背景模式)​

[
  {
    "id": "1",
    "name": "成本已支付金额",
    "value": 96790,
    "suffix": "万元",
    "compareLabel": "环比",
    "compareValue": "120%",
    "compareState": "1"
  },
  {
    "id": "2",
    "name": "成本未付款金额",
    "value": 96.79,
    "suffix": "%",
    "compareLabel": "同比",
    "compareValue": "120%",
    "compareState": "1"
  },
  {
    "id": "3",
    "name": "租赁应收未回金额",
    "value": 10790,
    "suffix": "元",
    "compareLabel": "同比",
    "compareValue": "120%",
    "compareState": "1"
  },
  {
    "id": "4",
    "name": "租赁项目欠款金额",
    "value": 86790,
    "suffix": "元",
    "compareLabel": "同比",
    "compareValue": "120%",
    "compareState": "0"
  }
]

3.3 统计概览(高亮模式)​

[
  {
    "id": "1",
    "name": "总车辆数",
    "value": 385,
    "suffix": "辆"
  },
  {
    "id": "2",
    "name": "在线车辆数",
    "value": 300,
    "suffix": "辆"
  },
  {
    "id": "3",
    "name": "离线车辆数",
    "value": 85,
    "suffix": "辆"
  },
  {
    "id": "4",
    "name": "加油总量",
    "value": 6790,
    "suffix": "升"
  },
  {
    "id": "5",
    "name": "作业总里程",
    "value": 16790,
    "suffix": "公里"
  }
]