图表

PieChart

一个整体的若干部分。

什么时候用它

只回答“大概占多少”，再精确就不行了。要排序或比较扇区——尤其是跨两张饼图比较——那是 BarChart 的活。

示例

default

shape

labels and emphasis

Labelled

One wedge is the point

一个整体的若干部分。

有必要说白：饼图只回答“大概占多少”，再精确就不行了。用眼睛比较两个相邻扇区，超过五个左右就不可靠；跨两张饼图比较更糟。当读者需要排序或比较时，<BarChart> 能把同一个问题回答得更好。

PieChart props
属性	类型	默认值	说明
children必填	`ReactNode`		组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。
config必填	`ChartConfig`		扇区名 → 它的标签和上色。键必须和 `nameKey` 的取值对得上。
data必填	`TData[]`		图表要画的数据行。每一条对应一个点、一根柱或一个分类。
dataKey必填	`keyof TData & string`		存放每个扇区数值的数据字段。
nameKey必填	`keyof TData & string`		存放每个扇区名称的数据字段。
title必填	`string`		这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。
chartProps	`ComponentProps<typeof RechartsPieChart>`		通往原始 Recharts 图表元素的逃生口。
className	`string`		最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。
defaultSelectedSector	`string \| null`	`null`	首次渲染时点亮的扇区。
description	`ReactNode`		标题下面的一行——单位、时间窗口、需要提醒的地方。
hideDataTable	`boolean`	`false`	去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。
isLoading	`boolean`	`false`	把标记换成一张动画骨架，并保留已测量的高度，这样数据到位时页面不会跳。
onSelectionChange	`(selection: { name: string; value: number } \| null) => void`		选中项变化时触发；被清除时传 null。
showTitle	`boolean`		把标题印在图上方，而不是藏起来。

TSX

export type PieVariant = 'gradient'