折线图
连续趋势。建议英文标识：LineChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.line-chart |
| 名称 | 折线图 |
| 二级分类 | 图表（charts） |
| 用途 | 连续趋势 |
| 描述 | 建议英文标识：LineChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="line-chart">（默认高 256px）；缺省配色取 --chart-1..5 语义令牌；多系列自动配图例；交互点击数据点触发 onSelect。events.onSelect 的 ${event} 载荷为 { name, value, seriesName, dataIndex }（echarts click 规范化）。
DSL 结构
{
"type": "LineChart",
"props": {
"data": "${data.visits}",
"xKey": "month",
"yKeys": [
"visits",
"signups"
],
"smooth": true
},
"events": {
"onSelect": {
"action": "setState",
"params": {
"picked": "${event}"
}
}
}
}何时用
何时使用
- 连续时间序列的趋势表达（访问量、温度、余额走势）。
- 多系列趋势对比（yKeys 多字段）。
何时不用
- 离散类目比较：用 ColumnChart（柱形强调对比量）。
- 累计规模强调：用 AreaChart。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 平滑曲线 | smooth: true | 趋势概览，弱化逐点抖动 |
| 面积折线 | showArea: true，线下 0.25 透明填充 | 趋势 + 量级感知 |
| 堆叠 | stacked: true | 多系列构成总量随时间变化 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, unknown>[] | [] | 数据行数组（表达式解析结果） |
xKey | string | — | 类目字段（通常为时间） |
yKeys | string[] | ['value'] | 数值字段，多系列传多个 |
smooth | boolean | false | 平滑曲线 |
showArea / stacked | boolean | false | 面积填充 / 堆叠 |
colors | string[] | — | 系列颜色覆盖（按序循环） |
title / height | `string / number | string` | — / 256 |
onSelect | (payload: ChartSelectPayload) => void | — | 点击数据点（DSL：events.onSelect） |
使用规范
- 系列超过 3 条时启用 stacked 或拆分图表，避免线团。
- 时间类目保持等距排序，缺失日期补空行不断线误导。
- 颜色缺省走令牌，仅品牌定制场景用 colors 覆盖。
正例
- ✓ 近 30 天访问趋势：xKey=date，yKeys=['pv', 'uv']，smooth 开概览、关报表。
反例
- ✕ 用折线图表达枚举类目的对比（视觉暗示连续关系，应用柱状图）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。