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

BulletChart 子弹图

单值进度条 + 目标线 + 质量带，比 Gauge 更适合"对比目标"语义。

基础用法

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

背景

收入

留存率

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

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <CfBulletChart label="收入" :value="780" :target="900" :max="1200" :bands="[{upTo: 400, tone: 'error'}, {upTo: 700, tone: 'warning'}, {upTo: 1200, tone: 'success'}]" />
    <CfBulletChart label="留存率" :value="62" :target="70" :max="100" :bands="[{upTo: 40, tone: 'error'}, {upTo: 70, tone: 'warning'}, {upTo: 100, tone: 'success'}]" />
  </div>
</template>

<CfBulletChart ... />

质量带 + 超过目标

bands 三段染色 + target 垂直线，超过目标时 value 条会延伸过 target。

背景

无质量带

3 段质量带

超过目标

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

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 360px;">
    <CfBulletChart label="无质量带" :value="65" :target="80" :max="100" />
    <CfBulletChart
      label="3 段质量带"
      :value="65"
      :target="80"
      :max="100"
      :bands="[{upTo: 40, tone: 'error'}, {upTo: 75, tone: 'warning'}, {upTo: 100, tone: 'success'}]"
    />
    <CfBulletChart
      label="超过目标"
      :value="92"
      :target="80"
      :max="100"
      :bands="[{upTo: 50, tone: 'error'}, {upTo: 80, tone: 'warning'}, {upTo: 100, tone: 'success'}]"
    />
  </div>
</template>

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