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

Gauge 仪表盘

圆环型当前值仪表，4 种 tone。

基础用法

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

<CfGauge ... />

<CfGauge ... />

扫角度

sweep 决定圆环开口大小（180=半圆 270=三分之三 360=整圆）。

<CfGauge :value="42" :sweep="180" label="180°" unit="%" />
<CfGauge :value="60" :sweep="270" label="270°" unit="%" />
<CfGauge :value="78" :sweep="360" label="360°" unit="%" />

<CfGauge value={42} sweep={180} label="180°" unit="%" />
<CfGauge value={60} sweep={270} label="270°" unit="%" />
<CfGauge value={78} sweep={360} label="360°" unit="%" />

API

属性	类型	默认值	说明
`value`	`number`	`—`	当前值
`min / max`	`number`	`0 / 100`
`size`	`number`	`160`	直径
`thickness`	`number`	`10`	圆环厚
`sweep`	`number`	`270`	扫角度（180=半圆 270=三分之三 360=整圆）
`tone`	`'accent' \| 'success' \| 'warning' \| 'error'`	`'accent'`
`unit / label`	`string`	`—`