数字滚动对比 <CountCompare />

左右两张卡片各一个大数字，进入时从 0 滚动到目标值；中间箭头和变化量胶囊。右边那张反色，代表现在。

分组: 数据 · 前后两个数字
组件: CountCompare · #count-compare

适合

一个指标的前后变化，变化本身就是结论
发布、复盘、季度对比

不适合

超过两个数字：用 MetricBars
需要过程：用 LineChart

内容上限

1	before / after：label ≤ 8 字，note ≤ 20 字，unit ≤ 4 字
2	change ≤ 8 字符

字段

字段	类型
`kicker` · 必填	`string`	小节名，2–8 字
`title` · 必填	`string \| string[]`	标题；数组手动断行
`lead`	`string`	一两句导语，≤ 60 字
`source`	`string`	事实出处
`before` · 必填	`{ label, value, decimals?, unit?, note? }`	之前
`after` · 必填	`{ label, value, decimals?, unit?, note? }`	之后
`change` · 必填	`string`	变化量，例如 +19 个

示例代码

<CountCompare
  kicker="这一期"
  title="模板从 67 个增加到 86 个"
  before={{ label: '第 1 期结束', value: 67, unit: '个' }}
  after={{ label: '第 2 期结束', value: 86, unit: '个' }}
  change="+19 个"
  source="src/kit/catalog.ts"
/>