MetricCard 指标卡
数值 + 单位 + 涨跌 + 内嵌 sparkline 趋势。
基础用法
数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。
配色取自 --viz-1..8 token，色盲友好。
12,420
3,180
6.2%
<CfMetricCard ... /><CfMetricCard ... />网格布局
配 grid-template-columns: repeat(auto-fit, minmax(...)) 自适应密度。
12,420
3,180
6.2%
3:42
0.18%
<CfMetricCard label="…" value="…" :delta="…" :trend="[…]" /><CfMetricCard label="…" value="…" delta={…} trend={[…]} />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | — | 顶部小标签 |
value | string | number | — | 主数值 |
unit | string | — | 单位（数值后） |
delta | number | — | 涨跌百分比，正负染色 |
trend | number[] | — | 内嵌 Sparkline 数据 |
反馈与讨论
MetricCard 指标卡 的讨论