数据

BarList

一个排行榜——条形在名字**后面**，而不是旁边。

什么时候用它

来源排行、最慢的接口、最大的客户。横向柱状图会把三分之一的宽度花在一根重复标签的坐标轴上，而这些标签本来就可以直接写在行里。

示例

default

limit

一个排行榜——条形在名字后面，而不是旁边。

它回答的是「来源排行」「最慢的接口」「最大的客户」，而且比横向柱状图答得更好：横向柱状图会把三分之一的宽度花在一根重复标签的分类轴上，而这些标签本来就可以写进行里。从坐标轴上读一个名字再去对应一根柱子是两步；直接在柱子上读它是零步。

它是一个 <table>，因为它本来就是：两列、一行表头、一个条目一行。条形是名字那一格的背景，所以它永远不会变成读屏软件还要多走一遍的第二个元素。

当分类少而固定、坐标轴确实在干活时——读者需要照着刻度读数值，而不是扫一眼排名——改用 <BarChart orientation="horizontal">。

BarList props
属性	类型	默认值	说明
items必填	`BarListItem[]`		—
label必填	`string`		这个榜排的是什么。必填：它就是这张表对读屏软件的名字。
className	`string`		—
formatValue	`(value: number) => string`	`defaultTick`	格式化每个值。默认沿用坐标轴那套紧凑写法。
limit	`number`		只保留前 N 项，其余折进一行「Other」。
max	`number`		刻度的上限。不传就取最大的那一行。两个榜要并排比较时一定要把它固定下来——各自独立取刻度的话，两边的第一名都会填满整条轨道，两个差得很远的数字看起来一模一样。
showLabel	`boolean`	`false`	把标签印在列表上方，而不是藏起来。
sort	`boolean`	`true`	渲染前先按降序排序。