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

DonutChart 环形图

中空饼图，可在中心放数值/标签。

基础用法

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

背景视口

Chrome 65.0%
Safari 18.0%
Firefox 9.0%
Edge 5.0%
Other 3.0%

src/App.vue

<script setup lang="ts">
import { CfDonutChart } from '@chufix-design/vue';
const segments = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <CfDonutChart :segments="segments" :size="200" :thickness="28" center-value="100%" center-label="访问占比" />
</template>

<script setup>
import { CfDonutChart } from '@chufix-design/vue';
const segments = [
  { name: 'Chrome', value: 65 },
  { name: 'Safari', value: 18 },
  { name: 'Firefox', value: 9 },
  { name: 'Edge', value: 5 },
  { name: 'Other', value: 3 },
];
</script>
<template>
  <CfDonutChart :segments="segments" :size="200" :thickness="28" center-value="100%" center-label="访问占比" />
</template>

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

export default function Demo() {
  const segments = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <CfDonutChart segments={segments} size={200} thickness={28} center-value="100%" center-label="访问占比" />
    </>
  );
}

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

export default function Demo() {
  const segments = [
    { name: 'Chrome', value: 65 },
    { name: 'Safari', value: 18 },
    { name: 'Firefox', value: 9 },
    { name: 'Edge', value: 5 },
    { name: 'Other', value: 3 },
  ];
  return (
    <>
      <CfDonutChart segments={segments} size={200} thickness={28} center-value="100%" center-label="访问占比" />
    </>
  );
}

不同厚度

thickness 控制环厚度（同 size 时，越厚越偏饼图，越薄越偏 ring）。

背景视口

src/App.vue

<script setup lang="ts">
import { CfDonutChart } from '@chufix-design/vue';
const segments = [
  { name: '已完成', value: 78 },
  { name: '进行中', value: 14, colorIndex: 4 },
  { name: '未开始', value: 8, colorIndex: 5 },
];
</script>
<template>
  <div class="demo-row" style="gap: 32px; align-items: center;">
    <CfDonutChart :segments="segments" :size="160" :thickness="14" :show-legend="false" center-value="78%" center-label="完成率" />
    <CfDonutChart :segments="segments" :size="160" :thickness="22" :show-legend="false" center-value="78%" center-label="完成率" />
    <CfDonutChart :segments="segments" :size="160" :thickness="32" :show-legend="false" center-value="78%" center-label="完成率" />
  </div>
</template>

<script setup>
import { CfDonutChart } from '@chufix-design/vue';
const segments = [
  { name: '已完成', value: 78 },
  { name: '进行中', value: 14, colorIndex: 4 },
  { name: '未开始', value: 8, colorIndex: 5 },
];
</script>
<template>
  <div class="demo-row" style="gap: 32px; align-items: center;">
    <CfDonutChart :segments="segments" :size="160" :thickness="14" :show-legend="false" center-value="78%" center-label="完成率" />
    <CfDonutChart :segments="segments" :size="160" :thickness="22" :show-legend="false" center-value="78%" center-label="完成率" />
    <CfDonutChart :segments="segments" :size="160" :thickness="32" :show-legend="false" center-value="78%" center-label="完成率" />
  </div>
</template>

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

export default function Demo() {
  const segments = [
    { name: '已完成', value: 78 },
    { name: '进行中', value: 14, colorIndex: 4 },
    { name: '未开始', value: 8, colorIndex: 5 },
  ];
  return (
    <>
      <div className="demo-row" style={{ gap: 32, alignItems: "center" }}>
          <CfDonutChart segments={segments} size={160} thickness={14} showLegend={false} center-value="78%" center-label="完成率" />
          <CfDonutChart segments={segments} size={160} thickness={22} showLegend={false} center-value="78%" center-label="完成率" />
          <CfDonutChart segments={segments} size={160} thickness={32} showLegend={false} center-value="78%" center-label="完成率" />
        </div>
    </>
  );
}

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

export default function Demo() {
  const segments = [
    { name: '已完成', value: 78 },
    { name: '进行中', value: 14, colorIndex: 4 },
    { name: '未开始', value: 8, colorIndex: 5 },
  ];
  return (
    <>
      <div className="demo-row" style={{ gap: 32, alignItems: "center" }}>
          <CfDonutChart segments={segments} size={160} thickness={14} showLegend={false} center-value="78%" center-label="完成率" />
          <CfDonutChart segments={segments} size={160} thickness={22} showLegend={false} center-value="78%" center-label="完成率" />
          <CfDonutChart segments={segments} size={160} thickness={32} showLegend={false} center-value="78%" center-label="完成率" />
        </div>
    </>
  );
}

API

属性	类型	默认值	说明
`segments`	`DonutSegment[]`	`—`	{ name, value, colorIndex? }[]
`size`	`number`	`180`	直径
`thickness`	`number`	`24`	环厚
`centerValue / centerLabel`	`string \| number`	`—`	中心文本
`showLegend`	`boolean`	`true`	显示图例
`ariaLabel`	`string`	`—`	透传给根 `<svg>` 的 `aria-label`

Events

Vue 事件	React 回调	载荷类型	说明
`item-enter`	`onItemEnter`	`DonutChartInteractionPayload`	鼠标进入某扇区时触发
`item-leave`	`onItemLeave`	`DonutChartInteractionPayload`	鼠标离开扇区时触发

类型

interface DonutChartInteractionPayload {
  segment: DonutSegment;
  dataIndex: number;
  /** 该段占总和的比例（0..1）。 */
  pct: number;
  nativeEvent?: PointerEvent;
}