图表
基于 ECharts 5 的移动端图表规范。全部使用纯色（禁用渐变），单系列强制主色 #2A7F8B，面积填充以 16% 透明度叠加；轴标签 10px，Tooltip 11px。
08 · CHART · 图表
Chart · 折线 / 柱状 / 环形 · 多系列与降级
空腹血糖 · 近 7 日
11/0111/0311/0511/07
睡眠构成（小时）
周一周二周三周四周五
营养构成
碳水 42%
蛋白质 31%
脂肪 20%
膳食纤维 7%
折线 / 柱状 / 环形 · 全部纯色
血压 · 收缩压 / 舒张压
收缩压舒张压
达标率
80%
7 天中 5 天达标
未达标：11/03、11/06
未达标：11/03、11/06
Skeleton 与空状态降级
加载中用骨架占位；无数据用 EmptyState，不画空图表
多系列 ≤ 4 条 · Tooltip confine:true
图表色板
系列色 10 档按色相环偏移取色，任意 2 色 ΔE ≥ 30，色盲友好。分类色板仅用于多分类饼图/环图，顺序固定，不随意调换。
| 序 | 系列色 | HEX | 面积填充（16%） |
|---|---|---|---|
| 1 | Primary | #2A7F8B | rgba(42,127,139,.16) |
| 2 | Blue | #4388FF | rgba(67,136,255,.16) |
| 3 | Amber | #FEBC41 | rgba(254,188,65,.20) |
| 4 | Orange | #FF9946 | — |
| 5 | Green | #02C456 | rgba(2,196,86,.16) |
| 6–10 | Purple / Pink / Teal / Rose / Indigo | #A855F7 #EC4899 #14B8A6 #F43F5E #6366F1 | — |
轴与网格
| 元素 | 色值 | 规格 |
|---|---|---|
| 坐标轴线 | #E4E4E7 | 1pt 实线 |
| 网格分割线 | #F4F4F5 | 1pt 虚线 |
| 主轴标签 | #71717A | 10px（移动端） |
| 次轴标签 | #A1A1AA | 10px |
| Tooltip 背景 | rgba(24,24,27,.92) | 圆角 8pt，confine:true |
| Tooltip 文字 | #FFFFFF | 11px |
| 环形轨道 | #F0F0F2 | seriesSoft.track |
使用原则
- 禁用渐变：series / area / ring / bar 全部纯色，需要层次感时用透明度。
- 主色优先：单系列图表强制使用
#2A7F8B。 - 色彩有意义：涨绿跌红，仅在「数值越大越好」语义下成立。
- 禁用 3D：不使用 ECharts 3D 效果，违反扁平化原则。
- 多系列 ≤ 4 条，超出改为小倍数图（small multiples）分屏展示。
- 空状态降级：无数据显示 EmptyState，不显示空坐标系骨架。