初始化

2026-09-07 18:24:55 +08:00
1 parent 34474bd5fc
commit b638b541d0
@@ -0,0 +1,90 @@
+# 浅红色 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)