跳到主要内容

Statistic 统计数值

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

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

一、属性

1.主要属性

1)数据 - 值

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

​ a. 手动赋值:即输入固定的数值或文本。

​ b. 字段:父级组件绑定API或查询模型后,可绑定其中某一字段。

image-20250604103910264

2)功能 - 标题

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

image-20240904133739516

​ 标题 - 输入:标题支持三种值绑定方式,默认为手动赋值且标题为“数值标题”。

image-20250604103944620

​ a. 手动赋值:即输入固定的文本,数据是静态的。

​ b. 字段:父级组件绑定API或查询模型后,可绑定其中某一字段,数据是动态的。

​ c. 成员变量:本页面内其他组件的值。

​ 标题 - 设计:设计适用于标题包含其他组件时使用,可在标题区域添加其他组件。

image-20250604105433465

image-20240904134609440

3)功能 - 提示信息

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

image-20240904134708505

image-20240904140123479

4)功能 - 千位分隔符

​ 千位分隔符:即数值在达到四位数之后,在千位后的分隔符,默认为“,”。

image-20240904140217175

image-20240904140203289

5)功能 - 设置小数点

​ 设置小数点:默认是”.”,当精度设置不为0时,按照指定格式显示小数点。

image-20240904141106575

​ 如设置统计组件的值为固定值100000.000,精度为2,设置小数点为“:”,则统计数值组件最终的值显示如下。

image-20240904142830175

image-20240904142739577

6)功能 - 精度

​ 精度:设置数值小数点后的显示位数,默认不设置,不设置的情况下,默认展示所有小数位。

image-20250604110016376

​ 如设置统计组件的值为固定值100000.0,精度为2,则统计数值组件最终的值显示如下。

image-20240904150015708

7)功能 - 前缀

​ 前缀:有两种设置格式可选,默认是值格式,设置后显示在数据的前方。

image-20240904150112452

image-20240904151317716

​ 前缀 - 值:在数值前显示设置的文本。

image-20240904150431005

​ 前缀 - 图标:在数值前显示设置的图标。

image-20240904150558368

8)功能 - 后缀

​ 后缀:有两种设置格式可选,默认是值格式,设置后显示在数据的后方。

image-20240904150930396

image-20240904151254949

​ 后缀 - 值:在数值后显示设置的文本,常设置为数值的单位。

image-20240904150431005

​ 后缀 - 图标:在数值后显示设置的图标。

image-20240904151217524

9)状态 - 隐藏

​ 隐藏:默认关闭,开启后此统计数值组件仍存在,但在页面不显示。

image-20240904151535966

二、样式

无特殊样式配置,详见通用样式 .

三、常见使用场景

  1. 销售数据

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

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

    image-20240826095553109

  2. 用户统计

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

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

    image-20240826095807835

  3. 业绩指标

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

  4. 数据对比

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

    如下,通过统计数值组件结合文本以及图标,展示数据及与其他时间段的对比情况。

    image-20240826130350884

  5. 实时监控

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

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

    image-20240826112157815