Stats 统计展示

基本用法

统计展示用于在方框中显示数值和数据。可通过dataSource属性传入数据

Offices

4

21% more than last month

const dataSource = [
  {
    title: "Offices",
    value: "4",
    desc: "21% more than last month",
  },
];

<Stats dataSource={dataSource} />;

垂直布局

默认统计展示布局为水平方向，通过可选字段direction设置统计展示布局为垂直方向。

Offices

4

21% more than last month

Employees2

2480

21% more than last month

Employees3

2480

21% more than last month

const dataSource = [
  {
    title: "Offices",
    value: "4",
    desc: "21% more than last month",
  },
  {
    title: "Employees2",
    value: "2480",
    desc: "21% more than last month",
  },
  {
    title: "Employees3",
    value: "2480",
    desc: "21% more than last month",
  },
];

<Stats dataSource={dataSource} direction="vertical" />;

扩展配置项

数据源字段 dataSource 支持配置项 title、value、desc、icon、place，分别对应标题、数值、描述、图标、位置。 其中 title、value、desc、icon 都支持扩展配置项 content, variant，

Offices

4

21% more than last month

Offices2

4

21% more than last month

Offices3

4

21% more than last month

const dataSource = [
  {
    title: {
      content: "Offices",
      variant: "primary",
    },
    value: {
      content: "4",
      variant: "primary",
    },
    desc: {
      content: "21% more than last month",
      variant: "primary",
    },
    icon: {
      content: "tabler:building",
      variant: "primary",
    },
  },
];

<Stats dataSource={dataSource} />;

统计展示每项内容的位置配置

通过可选字段 place 设置统计展示每项内容的位置。 可选 start、center、end，分别对应内容在左侧、中间、右侧。

Employees

24

21% more than last month

Employees

2480

21% more than last month

Templates

12

21% more than last month

const dataSource = [
  {
    title: "Employees",
    value: "24",
    desc: "21% more than last month",
    place: "start",
  },
  {
    title: "Employees",
    value: "2480",
    desc: "21% more than last month",
    place: "center",
  },
  {
    title: "Templates",
    value: "12",
    desc: "21% more than last month",
    place: "end",
  },
];

<Stats dataSource={dataSource} />;

API

Stats

参数	说明	类型	默认值
dataSource	数据源	StatItem[]	[]
direction	布局方向	'horizontal' | 'vertical'	'horizontal'
class	自定义类名	string	-

StatItem

参数	说明	类型	默认值
title	标题	string | StatItemBase	-
value	数值	string | StatItemBase	-
desc	描述	string | StatItemBase	-
icon	图标	string | StatItemBase	-
place	位置	'start' | 'center' | 'end'	'start'

StatItemBase

参数	说明	类型	默认值
content	内容	string	-
variant	颜色	'primary' | 'secondary' | 'neutral' 等	'primary'