Preview Updated 2026-05-10

BulletChart

Single-value progress bar with a target marker and qualitative bands — better suited than Gauge for "compare against target" semantics.

Basic usage

Data is passed in via props and rendered as plain SVG — no third-party charting library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

背景

收入

留存率

src/App.vue

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

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

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

export default function Demo() {
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 360 }}>
          <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>
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 360 }}>
          <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>
    </>
  );
}

Bands + exceeding target

bands provides three colored segments and target draws a vertical line; when the value exceeds the target the bar extends past it.

背景

无质量带

3 段质量带

超过目标

src/App.vue

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

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

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

export default function Demo() {
  return (
    <>
      <CfBulletChart value={92} target={80} max={100} bands={bands} />
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfBulletChart value={92} target={80} max={100} bands={bands} />
    </>
  );
}

API

Prop	Type	Default	Description
`value`	`number`	`—`	Current value
`target`	`number`	`—`	Target value (vertical line)
`max`	`number`	`—`	Maximum value
`bands`	`{ upTo: number; tone? }[]`	`[]`	Qualitative bands (poor/ok/good)
`label`	`string`	`—`