BulletChart 子弹图
单值进度条 + 目标线 + 质量带，比 Gauge 更适合"对比目标"语义。
基础用法
数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。
配色取自 --viz-1..8 token，色盲友好。
收入
留存率
<CfBulletChart ... /><CfBulletChart ... />质量带 + 超过目标
bands 三段染色 + target 垂直线，超过目标时 value 条会延伸过 target。
无质量带
3 段质量带
超过目标
<CfBulletChart :value="92" :target="80" :max="100" :bands="bands" /><CfBulletChart value={92} target={80} max={100} bands={bands} />API
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | — | 当前值 |
target | number | — | 目标值（垂直线） |
max | number | — | 最大值 |
bands | { upTo: number; tone? }[] | [] | 质量带（poor/ok/good） |
label | string | — |
反馈与讨论
BulletChart 子弹图 的讨论