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

Gauge 仪表盘

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

基础用法

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

背景

<script setup lang="ts">
import { CfGauge } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-row" style="gap: 32px;">
    <CfGauge :value="42" label="CPU" unit="%" tone="success" />
    <CfGauge :value="78" label="Memory" unit="%" tone="warning" />
    <CfGauge :value="92" label="Disk" unit="%" tone="error" />
  </div>
</template>

<CfGauge ... />

扫角度

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

背景

<script setup lang="ts">
import { CfGauge } from '@chufix-design/vue';
</script>

<template>
  <div class="demo-row" style="gap: 24px;">
    <CfGauge :value="42" label="180°" unit="%" :sweep="180" />
    <CfGauge :value="60" label="270°（默认）" unit="%" :sweep="270" />
    <CfGauge :value="78" label="360°" unit="%" :sweep="360" />
  </div>
</template>

<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`	`—`