统计数值 Statistic

展示统计数值

何时使用

• 当需要突出某个或某组数字时
• 当需要展示带描述的统计类数据时使用

基本使用

Show Code

<template>
  <Row>
    <Col :span="12">
      <Statistic title="Active Users" :value="112893" />
    </Col>
    <Col :span="12">
      <Statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
    </Col>
  </Row>
</template>

添加前缀和后缀

Show Code

<script setup lang="ts">
import { LikeOutlined } from '@ant-design/icons-vue'
</script>
<template>
  <Row :gutter="16">
    <Col :span="12">
      <Statistic title="Feedback" :value="1128">
        <template #suffix>
          <LikeOutlined />
        </template>
      </Statistic>
    </Col>
    <Col :span="12">
      <Statistic title="Unmerged" :value="90">
        <template #suffix>
          <span>%</span>
        </template>
      </Statistic>
    </Col>
  </Row>
</template>

在卡片中使用

Show Code

<script setup lang="ts">
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue'
</script>
<template>
  <div style="width: 425px; background: #ececec; padding: 30px; border-radius: 8px;">
    <Row :gutter="16">
      <Col :span="12">
        <Card>
          <Statistic
            title="Feedback"
            :value="11.28"
            :precision="2"
            suffix="%"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <ArrowUpOutlined />
            </template>
          </Statistic>
        </Card>
      </Col>
      <Col :span="12">
        <Card>
          <Statistic title="Idle" :value="9.3" :precision="2" suffix="%" :value-style="{ color: '#cf1322' }">
            <template #prefix>
              <ArrowDownOutlined />
            </template>
          </Statistic>
        </Card>
      </Col>
    </Row>
  </div>
</template>

自定义数值样式

Worth

$1,600,000/ 天

Show Code

<template>
  <Statistic
    title="Worth"
    :value="1600000"
    :value-style="{ color: '#3f8600' }"
    prefix="$"
    suffix="/ 天" />
</template>

设置数值精度

Precision

100,000,000.10

Show Code

<template>
  <Statistic
    title="Precision"
    :value="100000000.1"
    :precision="2" />
</template>

自定义分隔符

Precision

100;000;000.100

Show Code

<template>
  <Statistic
    title="Precision"
    :value="100000000.1"
    separator=";"
    :precision="3" />
</template>

自定义数值展示

Formatter

1年有 365 天

Show Code

<script setup lang="ts">
function formatter (value: string): string {
  console.log('value', value)
  return '1年有 ' + value + ' 天'
}
</script>
<template>
  <Statistic
    title="Formatter"
    :value="365"
    :value-style="{ color: '#1677ff' }"
    :formatter="formatter" />
</template>

APIs

Statistic

参数	说明	类型	默认值
title	数值的标题	string	undefined
value	数值的内容	string | number | slot	undefined
valueStyle	设置数值的样式	CSSProperties	{}
precision	数值精度	number	0
prefix	设置数值的前缀	string | slot	undefined
suffix	设置数值的后缀	string | slot	undefined
separator	设置千分位标识符	string	,
formatter	自定义数值展示	Function	(value: string) => value

Slots

名称	说明	类型
title	自定义数值的标题	v-slot:title
default	自定义数值的内容	v-slot:default
prefix	自定义数值的前缀	v-slot:prefix
suffix	自定义数值的后缀	v-slot:suffix