构成条 <ShareBar />

每行一根 100% 堆叠横条，2–5 段，段内写百分比；可指定一段在所有行里都变成强调色；顶部是图例。

Template and style descriptions are currently available in Chinese only.

Group: 分配 · 一个整体怎么切分
Component: ShareBar · #share-bar
Interaction: 横条从左生长；悬停一段时其他段变淡。

Good for

预算、时间、渠道、流量的构成
几行之间比较构成怎么变化

Avoid when

各部分加起来不是 100%：用 MetricBars
只有一行：用 BigStat 写最关键的那一段

Content limits

1	legend 2–5 段，每段 ≤ 6 字
2	rows 3–6 行；每行 values 与 legend 一一对应，加起来是 100
3	小于 7% 的段不显示数字
4	label ≤ 10 字；note ≤ 16 字；footnote ≤ 50 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`legend` · required	`string[]`	段名
`rows` · required	`{ label, values, note? }[]`	各行
`focus`	`number`	强调的段
`footnote`	`string`	底部说明

Example

<ShareBar
  kicker="渠道组合"
  title="预算随上市阶段换重心"
  legend={['品牌', '内容与搜索', '付费投放', '销售拓展']}
  focus={0}
  rows={[
    { label: '上市前', values: [40, 40, 5, 15] },
    { label: '上市当月', values: [30, 15, 35, 20] },
  ]}
  source="示意"
/>