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

Gauge 仪表盘

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

基础用法

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

背景视口

src/App.vue

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

<script setup>
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>

import { CfGauge } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-row" style={{ gap: 32 }}>
          <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>
    </>
  );
}

import { CfGauge } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div className="demo-row" style={{ gap: 32 }}>
          <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>
    </>
  );
}

扫角度

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

背景视口

src/App.vue

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

<script setup>
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>

import { CfGauge } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfGauge value={42} sweep={180} label="180°" unit="%" />
      <CfGauge value={60} sweep={270} label="270°" unit="%" />
      <CfGauge value={78} sweep={360} label="360°" unit="%" />
    </>
  );
}

import { CfGauge } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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`	`string`	`—`	数值右侧的单位（如 `%`）
`label`	`string`	`—`	数值下方的小字标签
`ariaLabel`	`string`	`—`	透传给根 `<svg>` 的 `aria-label`

Events

Vue 事件	React 回调	载荷类型	说明
`click`	`onClick`	`GaugeClickPayload`	点击 gauge 区域

类型

interface GaugeClickPayload {
  value: number;
  /** value 在 min..max 区间的归一比例（0..1）。 */
  ratio: number;
  nativeEvent?: PointerEvent | MouseEvent;
}