Preview Updated 2026-05-10

Gauge

Ring-style current-value gauge with four tones.

Basic usage

Data is passed in via props. Pure SVG rendering, no third-party chart library dependency. Colors come from the --viz-1..8 tokens and are colorblind-friendly.

背景

<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 angle

sweep controls the size of the ring opening (180 = half circle, 270 = three-quarter, 360 = full circle).

背景

<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

Prop	Type	Default	Description
`value`	`number`	`—`	Current value
`min / max`	`number`	`0 / 100`
`size`	`number`	`160`	Diameter
`thickness`	`number`	`10`	Ring thickness
`sweep`	`number`	`270`	Sweep angle (180 = half, 270 = three-quarter, 360 = full circle)
`tone`	`'accent' \| 'success' \| 'warning' \| 'error'`	`'accent'`
`unit / label`	`string`	`—`