面积图
趋势与累计规模。建议英文标识：AreaChart。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.area-chart |
| 名称 | 面积图 |
| 二级分类 | 图表（charts） |
| 用途 | 趋势与累计规模 |
| 描述 | 建议英文标识：AreaChart。 |
预览
渲染为 echarts canvas 容器 <div data-slot="area-chart">；line 系列 + areaStyle（透明度 fillOpacity 缺省 0.25）；堆叠时顶部线为总量。
DSL 结构
{
"type": "AreaChart",
"props": {
"data": "${data.daily}",
"xKey": "date",
"yKeys": [
"pv",
"uv"
],
"stacked": true,
"fillOpacity": 0.3
}
}何时用
何时使用
- 趋势 + 累计规模感（流量、容量、库存水位）。
- 多系列堆叠构成随时间变化。
何时不用
- 纯趋势无规模诉求：LineChart 更轻。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 渐变面积 | 单系列透明填充 | 单指标水位感 |
| 堆叠面积 | 多系列层叠 | 构成 + 总量趋势 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data / xKey / yKeys | — | — | 同 LineChart |
stacked | boolean | false | 堆叠面积 |
fillOpacity | number | 0.25 | 填充不透明度（0-1） |
colors / title / height / onSelect | — | — | 同 LineChart |
使用规范
- 堆叠面积系列数 ≤ 4，底部系列颜色最深。
- fillOpacity 超过 0.5 会遮挡网格与标签。
正例
- ✓ 一年的流量构成：stacked AreaChart（直接/搜索/社交三系列）。
反例
- ✕ 非堆叠的多系列面积图（填充互相遮挡不可读）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。