图表配色与规格备忘
2026 年 9 月 18 日 可视化 备忘
本站图表遵守的可视化规范:五色系列、标记尺寸、图例规则,改图表前先读这页。
看板的图表不是随手配的颜色,五个系列色通过了色觉障碍(CVD)安全校验,顺序即语义,不要重排、不要循环生成新色。
系列色(已校验)
| 槽位 | 色名 | 色值 | 用于 |
|---|---|---|---|
| 1 | 朱砂 | #c8401f | 品牌强调、编码、打卡”完成” |
| 2 | 靛蓝 | #2e6bd7 | 阅读、单色量级图(支出) |
| 3 | 松绿 | #1b7a4f | 锻炼 |
| 4 | 赭金 | #ab7300 | 第四系列 |
| 5 | 紫 | #8b4f9e | 第五系列 |
新增第六个系列时:不要造第六色,**合并为”其他”**或改用分面。
硬规矩
- 一个轴。永远不要双 Y 轴——两个量纲就拆成两张图。
- 颜色跟实体走。筛选后剩下的系列保持原色,不重新上色。
- 大小比较用单一色系,不按类别染色(支出图因此全是靛蓝)。
- 标记规格:条形 ≤ 24px 粗、条尾 4px 圆角、基线端直角;折线 2px;相邻填色之间留 2px 纸色间隙。
- 单序列不放图例;两序列以上必须有图例,数字标注要克制(只标末点/极值)。
- 文字永远用墨色系(
#1c1b18/#6d675c),不用系列色写字。 - 每张图都带”数据表”折叠——颜色之外永远有文字兜底。
定义在 src/components/charts/palette.ts,改之前先跑校验脚本。