跳到主要内容

统计数值

用于展示关键数据和指标的组件。

何时使用​

  • 当需要突出显示某个重要数值或统计数据时，例如：销售额、用户数量等。
  • 在仪表盘或数据分析页面中，使用数值统计可以快速传达关键信息。

一、属性​

1. 主要属性​

（1）数据 - 值​

值：统计数值组件提供两种绑定值的方式，默认是手动赋值。

  • 手动赋值：输入固定的数值或文本。
  • 字段：父级组件绑定 API 或查询模型后，可绑定其中某一字段。

image-20250604103910264

（2）功能 - 标题​

标题：统计数值的标题支持输入或结合多种组件实现，默认为输入模式。取消输入模式后，可在标题位置放入任意组件。

image-20240904133739516

  • 输入模式：标题支持三种值绑定方式，默认为手动赋值，标题内容为“数值标题”。

    • 手动赋值：输入固定文本，数据为静态。
    • 字段：父级组件绑定 API 或查询模型后，可绑定其中字段，数据为动态。
    • 成员变量：绑定页面内其他组件的值。

  • 设计模式：适用于标题包含其他组件的场景，可在标题区域添加任意组件。

image-20250604103944620 image-20250604105433465 image-20240904134609440

（3）功能 - 提示信息​

提示信息：默认为空，设置后以气泡提示框的形式显示在标题右侧。

image-20240904134708505 image-20240904140123479

（4）功能 - 千位分隔符​

千位分隔符：当数值达到四位数时，默认在千位位置使用 “,” 分隔。

image-20240904140217175 image-20240904140203289

（5）功能 - 设置小数点​

设置小数点：默认为 “.”，当设置精度不为 0 时，按照指定格式显示小数点。

示例：设置统计组件值为固定值 100000.000，精度为 2，小数点设置为 “:”，则显示结果如下：

image-20240904141106575 image-20240904142830175 image-20240904142739577

（6）功能 - 精度​

精度：设置小数点后的显示位数，默认不设置，展示全部小数位。

示例：设置固定值为 100000.0，精度为 2，则显示结果如下：

image-20250604110016376 image-20240904150015708

（7）功能 - 前缀​

前缀：可设置为文本或图标，默认使用值格式，显示在数值前方。

  • 前缀（值）：数值前显示设置文本。
  • 前缀（图标）：数值前显示设置图标。

image-20240904150112452 image-20240904151317716 image-20240904150431005 image-20240904150558368

（8）功能 - 后缀​

后缀：可设置为文本或图标，默认使用值格式，显示在数值后方。

  • 后缀（值）：数值后显示设置文本，常用于单位显示。
  • 后缀（图标）：数值后显示设置图标。

image-20240904150930396 image-20240904151254949 image-20240904150431005 image-20240904151217524

（9）状态 - 隐藏​

隐藏：默认关闭，开启后组件仍存在但在页面中不显示。

image-20240904151535966

二、样式​

无特殊样式配置，详见 通用样式。

三、常见使用场景​

1. 销售数据​

在电商平台中，使用统计数值展示每日销售额、总销售量等关键信息。

如下图所示，在垂直排列的间距组件中，放置一个统计数值组件展示每日销售额，再添加分割线，通过文本组件展示总销售量。

image-20240826095553109

2. 用户统计​

在社交媒体或应用中，使用统计数值展示活跃用户数、注册用户数等数据。

如下图所示，在间距组件中放置两个统计数值组件，设置组件宽度为 180px，并通过分割线分隔，分别展示活跃用户和注册用户数。

image-20240826095807835

3. 业绩指标​

在企业管理系统中，使用统计数值展示各部门业绩指标，便于管理层决策。

4. 数据对比​

在数据分析页面中，使用统计数值对比不同时间段的数据变化，帮助用户分析趋势。

如下图所示，结合统计数值组件与文本、图标展示当前值及对比情况。

image-20240826130350884

5. 实时监控​

在监控系统中，使用统计数值展示实时数据，例如服务器负载、网络流量等。

如下图所示，在卡片中放置间距组件，并在其中放置一个进度条组件和三个统计数值组件，用于展示内存使用情况。统计内存使用百分比的组件，设置了精度为 1，后缀为 “%”，宽度为 80px。

image-20240826112157815统计数值