Preview Updated 2026-05-10

MetricCard

Value + unit + delta + embedded sparkline trend.

Basic usage

Data is passed via props; pure SVG rendering with no third-party chart library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

背景

今日 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 (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 12, 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>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 12, 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>
    </>
  );
}

Grid layout

Pair with grid-template-columns: repeat(auto-fit, minmax(...)) for adaptive density.

背景

今日 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={[…]} />
    </>
  );
}

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

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

API

Prop	Type	Default	Description
`label`	`string`	`—`	Small top label
`value`	`string \| number`	`—`	Main value
`unit`	`string`	`—`	Unit (after the value)
`delta`	`number`	`—`	Percentage change; tinted by sign
`trend`	`number[]`	`—`	Embedded sparkline data