wsk/deerflow-code

gozeros b638b541d0 初始化

2026-09-07 18:24:55 +08:00

4.2 KiB

Raw Permalink Blame History

浅红色 UI 规范 · 五、图表

返回规范目录　|　本篇：图表通用色序 · 公共元素 · 柱状/折线/甘特/饼环

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%）

返回规范目录