91 lines
4.2 KiB
Markdown
91 lines
4.2 KiB
Markdown
# 浅红色 UI 规范 · 五、图表
|
||
|
||
> 返回 [规范目录](README.md) | 本篇：图表通用色序 · 公共元素 · 柱状/折线/甘特/饼环
|
||
|
||
---
|
||
|
||
## 25. 图表（Charts）
|
||
|
||
> 图表配色以**柔和色系**为主（保证大面积色块不刺眼），强调线 / 排行榜可叠加主色红渐变。多分类图表的色序按"用几色取几色"，从下表对应行从左到右取用。
|
||
|
||
### 25.1 图表通用色序（权威）
|
||
|
||
> 如需更多色值，请 UI 设计师按系统整体风格在同色系内扩展。
|
||
|
||
| 分类数 | 色序（从左到右） |
|
||
|--------|------------------|
|
||
| 三色 | `#FA9196` `#97EBCD` `#80BCFF` |
|
||
| 四色 | `#FA9196` `#FFCC80` `#97EBCD` `#A2E1F9` |
|
||
| 五色 | `#FA9196` `#FFCC80` `#97EBCD` `#A2E1F9` `#80BCFF` |
|
||
| 六色 | `#FA9196` `#FFCC80` `#BAE1B3` `#97EBCD` `#A2E1F9` `#80BCFF` |
|
||
| 七色 | `#FA9196` `#FCA58F` `#FFCC80` `#BAE1B3` `#97EBCD` `#A2E1F9` `#80BCFF` |
|
||
| 八色 | `#FA9196` `#FCA58F` `#FDB887` `#FFCC80` `#BAE1B3` `#97EBCD` `#A2E1F9` `#80BCFF` |
|
||
| 九色 | `#FA9196` `#FCA58F` `#FDB887` `#FFCC80` `#DCD69A` `#BAE1B3` `#97EBCD` `#A2E1F9` `#80BCFF` |
|
||
| 十色 | `#FA9196` `#FCA58F` `#FDB887` `#FFCC80` `#DCD69A` `#BAE1B3` `#97EBCD` `#9EE4EA` `#A2E1F9` `#80BCFF` |
|
||
|
||
- 色值映射：`#FA9196`(ZS-001-06 浅红) / `#FCA58F`·`#FDB887`(橙红过渡) / `#FFCC80`(FS-001-06 浅橙) / `#DCD69A`(黄绿过渡) / `#BAE1B3`·`#97EBCD`(FS-002-06 浅绿) / `#9EE4EA`·`#A2E1F9`(FS-003-06 浅青) / `#80BCFF`(ZS-002-06 浅蓝)
|
||
- 取色原则：序列从暖（红）到冷（蓝）渐变排布，相邻类别对比清晰
|
||
|
||
### 25.2 图表公共元素
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 坐标轴线 | `1px solid #E8E8E8` (FS-004-04) |
|
||
| 网格线 | `1px dashed #F5F5F5` (FS-004-03) |
|
||
| 轴刻度文字 | `12px`，`#A6A6A6` (FS-004-07) |
|
||
| 图例文字 | `12px`，`#575757` (FS-004-09)，前置色块圆角 `2px` |
|
||
| Tooltip 浮层 | 背景 `rgba(34,34,34,0.85)`（FS-004），文字 `#FFFFFF` `12px`，圆角 `4px` |
|
||
| 数值标注气泡 | 背景 `#7F7F7F` (FS-004-08)，白字（如悬停值 `59.32`） |
|
||
| 高亮选区（band） | 填充 `rgba(245,34,45,0.08)`，中线 `1px dashed #F5222D` (ZS-001-09) |
|
||
|
||
### 25.3 柱状图（Bar）
|
||
|
||
| 形态 | 配色 |
|
||
|------|------|
|
||
| 堆叠柱 / 分组柱 | 各序列按 §25.1 取色（如 Paper 绿 `#97EBCD`、Project 橙 `#FFCC80`、Book 红 `#FA9196`） |
|
||
| 单序列柱 / 条形 | 主序列 `#FA9196`（浅红） |
|
||
| 排行榜（TOP 渐变条） | 进度条填充 `linear-gradient(90deg, #F5222D 0%, #FF9900 100%)`（红→橙），轨道 `#F5F5F5`，名称 `#222222`、数值 `#222222` 右对齐 |
|
||
|
||
- 柱体圆角 `2px`，柱间距按类目自适应
|
||
|
||
### 25.4 折线图（Line / Area）
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 主折线 | `#F5222D` (ZS-001-09)，线宽 `2px` |
|
||
| 面积填充 | `linear-gradient(180deg, rgba(245,34,45,0.15), rgba(245,34,45,0))` |
|
||
| 数据点 | 描边 `#F5222D` + 白色填充，悬停放大并实心 |
|
||
| 多序列线 | 用饱和主色保证细线可辨：红 `#F5222D` / 蓝 `#0079FE` / 橙 `#FF9900` / 绿 `#2FD69A` |
|
||
| 涨跌双色线 | 上行 `#F5222D`（红）/ 下行 `#2FD69A`（绿） |
|
||
| 堆叠面积 | 各层按 §25.1 柔和色 + 各自浅色渐变填充 |
|
||
| 悬停辅助线 + tooltip | 竖虚线 `#F5222D`，tooltip 见 §25.2（如"异常率 12.3%"） |
|
||
|
||
### 25.5 甘特图（Gantt）
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 行背景斑马纹 | 浅红 `#FEF6F6` (ZS-001-02) 与 `#FFFFFF` 交替 |
|
||
| 任务条 | 按 §25.1 取色（每类任务一色），圆角 `2px`，末端可带箭头 |
|
||
| 网格线 | `1px solid #F5F5F5` (FS-004-03) |
|
||
| 时间轴 / 月份标签 | `12px`，`#A6A6A6` (FS-004-07) |
|
||
| 图例 | 圆点 + 文字，圆点取对应任务色，文字 `#575757` |
|
||
|
||
### 25.6 饼图 / 环形图（Pie / Donut）
|
||
|
||
支持三环至八环（即 3~8 个分类），扇区按 §25.1 对应行取色。
|
||
|
||
| 元素 | 配色 |
|
||
|------|------|
|
||
| 扇区 | §25.1 通用色序 |
|
||
| 中心主数字（如 `34801`） | `#222222` (FS-004)，D-DIN |
|
||
| 中心说明（XXX总数） | `12px`，`#A6A6A6` (FS-004-07) |
|
||
| 引导线 + 标签 | 引导线同扇区色，标签文字 `#575757` (FS-004-09)，百分比同行 |
|
||
| 扇区间隙 | `2px` 白色描边分隔，环宽适中（甜甜圈留中心空 ≥ 50%） |
|
||
|
||
---
|
||
|
||
|
||
---
|
||
|
||
> 返回 [规范目录](README.md)
|