图表

TreemapChart

整体的组成部分——当部分多到饼图撑不住、而且还会嵌套时。

什么时候用它

饼图在六项时就已经失效，矩形树图在五十项时还读得动。项目少于十几个、而且要读排名时，柱状图的长度是更精确的编码。

示例

default

nested

整体的组成部分——当整体的部分多到饼图撑不住、而且这些部分还会嵌套时。

矩形树图把值编码成面积，眼睛读面积比读长度差、但比读角度好得多，而且它是这里唯一一种到五十项还读得动的形式。两条规则让它保持诚实：不能有负值（面积不可能是负的），以及各块加总起来要是读者认得出的那个“整体”。

项目少于十几个、而且排名才是重点时，改用 <BarChart>——柱子的长度是更精确的编码，而矩形树图的布局本来就不会单纯按值给色块排序。

TreemapChart props
属性	类型	默认值	说明
data必填	`TreemapNode[]`		这棵树。一层就是一组平铺的色块；两层才是嵌套的矩形树图。
title必填	`string`		这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。
aspectRatio	`number`	`4 / 3`	色块被推向正方形的程度。就是 Recharts 自己的 squarify 参数。
chartProps	`TreemapExtras`		—
children	`ReactNode`		悬停面板。
className	`string`		最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。
config	`ChartConfig`	`{}`	色块名 → 它的标签和上色。可选：没有指定的色块由色阶接手。
dataKey	`string`	`'size'`	叶子节点上存放每个色块数值的字段。
description	`ReactNode`		标题下面的一行——单位、时间窗口、需要提醒的地方。
hideDataTable	`boolean`	`false`	去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。
showLabels	`boolean`	`true`	在色块上印出它的名字——前提是这块地方装得下。
showTitle	`boolean`		把标题印在图上方，而不是藏起来。
variant	`TreemapVariant`	`'ramp'`	—

TSX

export type TreemapVariant = 'ramp' | 'nested'
export type TreemapExtras = Omit<ComponentProps<typeof RechartsTreemap>, 'data' | 'dataKey'>