开发预览更新于 2026-05-10

MetricCard 指标卡

数值 + 单位 + 涨跌 + 内嵌 sparkline 趋势。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景

今日 PV+8.4%

12,420

活跃用户-2.1%

3,180

付费转化+0.4%

6.2%

src/App.vue

<script setup lang="ts">
import { CfMetricCard } from '@chufix-design/vue';
</script>
<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%;">
    <CfMetricCard label="今日 PV" value="12,420" :delta="8.4" :trend="[40, 45, 50, 52, 60, 65, 72]" />
    <CfMetricCard label="活跃用户" value="3,180" :delta="-2.1" :trend="[80, 78, 82, 85, 79, 76, 73]" />
    <CfMetricCard label="付费转化" value="6.2" unit="%" :delta="0.4" :trend="[50, 52, 50, 55, 56, 58, 58]" />
  </div>
</template>

<script setup>
import { CfMetricCard } from '@chufix-design/vue';
</script>
<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; width: 100%;">
    <CfMetricCard label="今日 PV" value="12,420" :delta="8.4" :trend="[40, 45, 50, 52, 60, 65, 72]" />
    <CfMetricCard label="活跃用户" value="3,180" :delta="-2.1" :trend="[80, 78, 82, 85, 79, 76, 73]" />
    <CfMetricCard label="付费转化" value="6.2" unit="%" :delta="0.4" :trend="[50, 52, 50, 55, 56, 58, 58]" />
  </div>
</template>

import { CfMetricCard } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfMetricCard ... />
    </>
  );
}

网格布局

配 grid-template-columns: repeat(auto-fit, minmax(...)) 自适应密度。

背景

今日 PV+8.4%

12,420

活跃用户-2.1%

3,180

付费转化+0.4%

6.2%

平均停留0.0%

3:42

错误率-0.1%

0.18%

src/App.vue

<script setup lang="ts">
import { CfMetricCard } from '@chufix-design/vue';
function rand(n: number, base: number, jitter: number) {
  return Array.from({ length: n }, () => base + (Math.random() - 0.5) * jitter);
}
</script>
<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; width: 100%;">
    <CfMetricCard label="今日 PV" value="12,420" unit="" :delta="8.4" :trend="rand(20, 65, 30)" />
    <CfMetricCard label="活跃用户" value="3,180" :delta="-2.1" :trend="rand(20, 80, 20)" />
    <CfMetricCard label="付费转化" value="6.2" unit="%" :delta="0.4" :trend="rand(20, 55, 15)" />
    <CfMetricCard label="平均停留" value="3:42" unit="" :delta="0" :trend="rand(20, 50, 8)" />
    <CfMetricCard label="错误率" value="0.18" unit="%" :delta="-0.06" :trend="rand(20, 40, 25)" />
  </div>
</template>

<script setup>
import { CfMetricCard } from '@chufix-design/vue';
function rand(n, base, jitter) {
  return Array.from({ length: n }, () => base + (Math.random() - 0.5) * jitter);
}
</script>
<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; width: 100%;">
    <CfMetricCard label="今日 PV" value="12,420" unit="" :delta="8.4" :trend="rand(20, 65, 30)" />
    <CfMetricCard label="活跃用户" value="3,180" :delta="-2.1" :trend="rand(20, 80, 20)" />
    <CfMetricCard label="付费转化" value="6.2" unit="%" :delta="0.4" :trend="rand(20, 55, 15)" />
    <CfMetricCard label="平均停留" value="3:42" unit="" :delta="0" :trend="rand(20, 50, 8)" />
    <CfMetricCard label="错误率" value="0.18" unit="%" :delta="-0.06" :trend="rand(20, 40, 25)" />
  </div>
</template>

import { CfMetricCard } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfMetricCard label="…" value="…" delta={…} trend={[…]} />
    </>
  );
}

API

属性	类型	默认值	说明
`label`	`string`	`—`	顶部小标签
`value`	`string \| number`	`—`	主数值
`unit`	`string`	`—`	单位（数值后）
`delta`	`number`	`—`	涨跌百分比，正负染色
`trend`	`number[]`	`—`	内嵌 Sparkline 数据