StatisticCard 指标卡

指标卡结合统计数值用于展示某主题的核心指标,结合 Ant Design Charts 图表库丰富数值内容,满足大多数数值展示的场景。

注意 demo 中的所有图表示例可以到 charts 的官网中找到,这里不再给出实际代码示例,仅以图片进行代替,所以相关交互是没有的。

若有内容撑开卡片的情况请设置内容宽度为 100% 或设置定宽。

何时使用

  • 1)在页面内的重要位置,展示重要信息;
  • 2)在概览页面展示系统功能。

代码演示

基本使用

使用数值统计配置 statisticchart 完成基本的指标卡。

只有图表

当图表单独展示在卡片中时。

额外指标

  • footer 用于设置额外的指标展示区域。
  • 你可以设置 Statistic 组件的布局方式layouthorizontal 来展示横向指标。

总分/主次关系

总分/业绩目标

分组指标

你可以嵌套指标卡组件来将指标分组, 以及 Divider 子组件来分隔这些指标。

分组指标带图表

公式计算指标

Operation 可以接受子元素,借此可以实现各种各样的公式计算指标。

状态展示

你可以给每个数值统计配置 status 展示其状态。

图标展示

你可以给每个数值统计配置 icon 展示其图标。

卡片布局

配合 ProCard 的卡片切分能力可以实现复杂的卡片布局。

图表在右

配置 chartPlacementright 可以指定图表在数值统计的右边。默认为上下结构。

图表在左

配置 chartPlacementleft 可以指定图表在数值统计的左边。

指标页签联动

结合 Statistic 可以实现带指标统计的页签。

环比趋势

你可以使用 Statistic 组件配置布局 layoutinline 以及 trend 来展示环比趋势。

API

StatisticCard

参数说明类型默认值
title卡片标题string|ReactNode-
extra卡片右上角的操作区域string|ReactNode-
loading当卡片内容还在加载中时,可以用 loading 展示一个占位booleanfalse
bordered是否有边框booleantrue
chart图表卡片ReactNode-
statistic数值统计配置,布局默认为 vertical参数见下 Statistic-
chartPlacement图表位置,相对于 statistic 的位置left | right | bottom-
footer额外指标展示ReactNode-

更多参考 ProCard,支持 ProCard 的所有 API。

Statistic

参数说明类型默认值
prefix设置数值的前缀string | ReactNode-
suffix设置数值的后缀string | ReactNode-
title数值的标题string | ReactNode-
tip标题提示string| ReactNode-
value数值内容string | number-
icon图标ReactNode-
status设置状态点, 同 Badge 组件Enum{ 'success', 'processing, 'default', 'error', 'warning' }-
valueStyle设置数值的样式style-
description描述性标签React.ReactNode | () => React.ReactNode-
layout布局horizontal | vertical | inlineinline
trend趋势up | down |-

更多 API 参考 Statistic,支持 Statistic 的所有 API。

Divider

用于在将数值统计进行分组时进行分隔。

参数说明类型默认值
type分隔类型horizontal | vertical-

Operation

用于操作符渲染。

Group

属性同 StatisticCard,会取消卡片内容边距,用于将多个卡片进行分组。