Chart Topic
Donut Chart
Sat Mar 14 2026
用于 part-to-whole 结构表达的环形图，适合流量来源、预算分配和市场份额。
为什么它适合做专题页
donut chart 很常见，但也很容易被滥用。把它做成单独专题，反而能帮助之后每次使用时更有判断依据。
"use client";import { Pie, PieChart } from "recharts";import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig,} from "@/components/ui/chart";const data = [ { key: "search", value: 38, fill: "var(--color-search)" }, { key: "direct", value: 24, fill: "var(--color-direct)" }, { key: "community", value: 18, fill: "var(--color-community)" }, { key: "email", value: 12, fill: "var(--color-email)" }, { key: "ads", value: 8, fill: "var(--color-ads)" },];const chartConfig = { search: { label: "Search", color: "var(--new-home-accent-1)", }, direct: { label: "Direct", color: "var(--new-home-accent-2)", }, community: { label: "Community", color: "var(--new-home-accent-3)", }, email: { label: "Email", color: "var(--new-home-accent-4)", }, ads: { label: "Ads", color: "var(--new-home-accent-5)", },} satisfies ChartConfig;export function DonutChartDemo() { return ( <ChartContainer config={chartConfig} className="min-h-[320px] w-full"> <PieChart> <ChartTooltip content={<ChartTooltipContent nameKey="key" hideLabel />} /> <ChartLegend content={<ChartLegendContent nameKey="key" className="flex-wrap" />} /> <Pie data={data} dataKey="value" nameKey="key" innerRadius={62} outerRadius={104} paddingAngle={4} cornerRadius={10} strokeWidth={0} /> </PieChart> </ChartContainer> );}适合什么场景
- 只有几个主要组成部分的占比关系
- 需要在一个紧凑空间里快速讲清结构
- 与文案、标签或中心数字搭配使用的摘要型模块
不太适合的地方
- 切片一多，可读性会直线下降
- 如果用户需要精确比较比例，柱状图往往更准
- 多个 donut 并排时，视觉噪音会上升得很快
实现要点
- 把切片数量控制在 3 到 5 个核心部分。
- 配色要有主次，不要每块都争抢注意力。
- 如果信息更偏“摘要”，可以在圆心补一个总数或主结论。
代码说明
这份代码适合作为“份额 / 占比”类图表的基础模板。后续你可以继续扩成 semi-donut、带中心 KPI 的营销版，或者更偏 editorial 的标注版。