Legend
legend独立图例 · 彩标记 + 系列名 + 可选数值 · dot/square/line 三标记 × row 横排换行/column 竖排 · 缺省色按序取 chart-1..6(与 Chart 同套 token) · onItemClick 后条目成按钮(aria-pressed)·显隐受控 · 给自绘图形(Sparkline/Heatmap/贡献墙/地图)配图例(零依赖·RSC)
用法
基础用法
彩点 + 系列名，缺省色按序取 chart-1..6，与 Chart 同一套 token。
- Opened
- Closed
- Merged
tsx
<Legend items={[{ label: "Opened" }, { label: "Closed" }, { label: "Merged" }]} />配自绘图形
recharts 的 Legend 出不了图外——自绘 Sparkline / Heatmap / 贡献墙的图例用这个。
- 本周1.2k
- 上周980
tsx
<div className="flex items-center justify-between">
<Legend
marker="line"
items={[
{ label: "本周", color: "primary", value: "1.2k" },
{ label: "上周", color: "muted", value: "980" },
]}
/>
<Sparkline data={[3, 7, 4, 9, 6, 11, 8]} variant="bar" />
</div>竖排 · 带数值
layout="column" 时 value 自动右对齐，适合饼图旁的系列表。
- 自然流量48%
- 付费投放31%
- 私域复购21%
tsx
<Legend
layout="column"
marker="square"
items={[
{ label: "自然流量", value: "48%" },
{ label: "付费投放", value: "31%" },
{ label: "私域复购", value: "21%" },
]}
/>可点切换系列
传 onItemClick 后条目成按钮（aria-pressed 表达开关）；显隐是受控的，状态由调用方持有。
tsx
const [hidden, setHidden] = useState<Record<string, boolean>>({ merged: true })
<Legend
items={series.map((i) => ({ ...i, hidden: hidden[i.id] }))}
onItemClick={(item) => setHidden((h) => ({ ...h, [item.id]: !h[item.id] }))}
/>何时用
给自绘图形配一份图例：Sparkline、Heatmap、ContributionGraph、WorldMap、Funnel，或卡片右上角那两行「彩点 + 系列名」。
recharts 的 <Legend> 只能长在 recharts 图里（Chart 已内置），图外场景此前只能在业务侧手搓一个圆点加一段文字，颜色还各写各的。本组件统一了标记形状与缺省配色——缺省按序取 chart-1..6，和 Chart 同一套 token，两种图表并排时颜色对得上。
导入
ts
import { Legend, type LegendItem } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items* | LegendItem[] | — | { label, color?, value?, hidden?, id? }[] |
| marker | "dot" | "square" | "line" | "dot" | 标记形状；line 对齐折线图的线样 |
| layout | "row" | "column" | "row" | row 横排自动换行 / column 竖排（value 右对齐） |
| size | "sm" | "md" | "md" | 尺寸 |
| onItemClick | (item, index) => void | — | 传了则每条可点，条目渲染成按钮 |
| className | string | — | 透传类名；其余原生属性一并透传 |
LegendItem
| 字段 | 类型 | 说明 |
|---|---|---|
| label* | ReactNode | 系列名 |
| color | string | 语义色名（primary/success/chart-3…）或任意 CSS 色；缺省按序取 chart-1..6 |
| value | ReactNode | 标签后的数值/占比 |
| hidden | boolean | 该系列已关闭：整条置灰（不删条目，否则点不回来） |
| id | string | number | 回调里回传，便于识别系列 |
禁忌 / 坑
- 显隐是受控的：组件不自管开关状态，
hidden由调用方给。这样图例与图形永远同一份真源，不会出现「图例灭了但线还在」。 - hidden 只置灰不删条目——删掉用户就点不回来了。
- 用在 recharts 图上属于重复：Chart 自带 recharts
<Legend>，别再叠一层。
相关
Chart · Sparkline · ContributionGraph · Heatmap · Stat
Playground
- Opened42
- Closed
- Merged
<Legend
items={[{ label: "Opened" }, { label: "Closed" }]}
/>