深蓝色 UI 规范 · 04 图表（§35–§41）
《深蓝色 UI 规范》分册之一。基础令牌见 00-基础-色彩字体间距.md，可 import 的变量见 tokens.css，总目录与 §索引见 README.md。§N 编号全局唯一。
本篇目录：35 图表通用规范 · 36 柱状图 · 37 折线图 · 38 甘特图 · 39 环形图 · 40 关系图/散点图 · 41 图表色值
35. 图表通用规范（Chart 基础）
对应设计稿「8. 图表」系列（柱状图 / 折线图 / 甘特图）。本节先约定所有图表共用的容器、标题、坐标轴、网格、图例、Tooltip、配色与空状态；§36 起按图表类型补充各自细则。配色一律取自 §1.1.8 图表配色与 §1.1.5 深蓝系，不另造色。
35.1 图表容器
| 属性 |
取值 |
来源 |
| 背景 |
#0C1836 (ZS-004-09)，嵌入卡片时随 §22 卡片 #122347 |
§3.1 |
| 圆角 |
4px |
§4.1 |
| 内边距 |
--spacing-5 (24px) |
§7.1 |
| 多图并排间距 |
--spacing-6 (32px) |
§7.1 |
| 边框（可选） |
1px solid #1A2F5A (ZS-004-07) |
— |
35.2 图表标题
设计稿中标题统一为「主色蓝竖条 ▌ + 文字」的小标题样式。
| 元素 |
规格 |
来源 |
| 左侧竖条 |
3px × 14px，#1677FF (ZS-002-06)，圆角 1px |
§1.1.6 |
| 竖条 → 文字间距 |
--spacing-2 (8px) |
§7.1 |
| 标题文字 |
16px Bold，#FFFFFF（或 #C5CFE0） |
§2.1.2 |
| 标题 → 图表区间距 |
--spacing-4 (16px) |
§7.1 |
| 副标题 / 单位 |
12px Regular，#6E88B0 (ZS-004-04) |
— |
部分卡片标题不带竖条（如「标题（BW）」「数据采集XXX」），此时直接用 16px Bold #C5CFE0，与 §22 卡片标题一致。
35.3 坐标轴
| 元素 |
色值 / 规格 |
来源 |
| 轴线（X / Y 基线） |
1px solid #2D4473 (ZS-004-06) |
§6.1 |
| 刻度文字（轴标签） |
12px Regular，#6E88B0 (ZS-004-04) |
— |
| 轴标题 / 类目名（如「类型」「2012」） |
12px Regular，#4096FF (ZS-002-05) 或 #6E88B0 |
— |
| 刻度线（tick） |
通常隐藏，仅留网格线 |
— |
| 轴名称单位 |
12px，#6E88B0，置于轴末端 |
— |
35.4 网格线（splitLine）
| 类型 |
色值 |
样式 |
使用场景 |
| 主网格（默认） |
#2D4473 (ZS-004-06) |
1px dashed |
柱状 / 折线的 Y 向参考线 |
| 弱化网格 |
#1A2F5A (ZS-004-07) |
1px dashed |
密集图表、次要参考 |
深色背景下网格一律用虚线且低对比，避免抢戏；纵向类目方向通常不画网格。
35.5 图例（Legend）
| 属性 |
取值 |
来源 |
| 位置 |
右上角（多数）或顶部居中 |
— |
| 色块（marker） |
10px 方块 / 圆点，取系列色 |
§1.1.8 |
| 色块 → 文字间距 |
--spacing-1 (4px) |
§7.1 |
| 图例文字 |
12px Regular，#C5CFE0 (ZS-004-02) |
— |
| 项间距 |
--spacing-3 (12px) |
§7.1 |
| 未选中态（点击隐藏系列） |
色块 + 文字置灰 #4A6491 (ZS-004-05) |
§1.1.5 |
35.6 Tooltip（悬浮提示）
鼠标悬停时跟随的浮层（如折线图「1月10日 异常率12.9%」、「5.32」）。
| 属性 |
取值 |
来源 |
| 背景 |
rgba(12,24,54,0.92)（ZS-004-09 92%） |
§3.1 |
| 边框 |
1px solid #1A2F5A (ZS-004-07) |
— |
| 圆角 |
4px |
§4.1 |
| 阴影 |
0 4px 16px rgba(6,14,36,0.6) |
§3.1.4 |
| 内边距 |
上下 --spacing-2，左右 --spacing-3 |
§7.1 |
| 标题行（日期 / 类目） |
12px Medium，#FFFFFF |
— |
| 数值行 |
12px Regular，色块（系列色）+ 名称 #6E88B0 + 数值 #C5CFE0 |
— |
| 指示线（axisPointer） |
1px dashed #4096FF (ZS-002-05)，或半透明竖向高亮带 rgba(22,119,255,0.12) |
§6.1 |
设计稿中数据点 hover 常显示一个实心小标签（如圆点 + 数值 5.32）：标签背景 #122347，文字 #FFFFFF，圆点取系列色，圆角 2px。
35.7 数据点与标记
| 元素 |
规格 |
来源 |
| 折线拐点（默认） |
不显示或 2px 实心点 |
— |
| 折线拐点（hover / 强调） |
空心圆，描边 2px 系列色，填充 #0C1836，直径 6px |
— |
| 高亮竖带（选中区间） |
rgba(22,119,255,0.12) 矩形，无边框 |
§3.1 |
35.8 图表配色引用
| 用途 |
色序 |
来源 |
| 多系列（面积大：柱 / 折线 / 饼） |
#1677FF → #13C2C2 → #4096FF → #36CFC9 → #69B1FF → #5CDBD3 → #91CAFF → #87E8DE |
§1.1.8 通用图表色序 |
| 小面积（散点 / 迷你图 / 徽标） |
#4096FF → #36CFC9 → #FF4D4F → #FFA39E → #6388FF → #478880 |
§1.1.8 小面积色序 |
| 语义系列（成功 / 警告 / 错误） |
绿 --func-success / 橙 --func-warning / 红 #F5222D |
§27.4 / §1.1.2 |
设计稿柱状图出现的「绿(Paper) / 橙(Project) / 蓝(Book)」三系列，对应语义化分类：绿取 §27.4 成功绿、橙取 §27.4 警告橙、蓝取主色 #1677FF；若为无语义的并列分类，应改用通用图表色序避免误读。
35.9 空状态 / 加载
| 状态 |
表现 |
| 加载中 |
图表区居中显示旋转图标 #4096FF + 文字「加载中…」12px #6E88B0（沿用 §5.4.2） |
| 无数据 |
居中占位插画 / 文字「暂无数据」14px #6E88B0 |
36. 柱状图（Column / Bar）
对应设计稿「8.1 图表-柱状图」。涵盖堆叠柱 / 分组柱 / 条形图（横向）/ 排行进度条四种形态。容器、坐标轴、网格、图例、Tooltip 全部沿用 §35。
36.1 通用规格
| 属性 |
取值 |
来源 |
| 柱体圆角 |
顶部 2px（堆叠柱仅最顶段圆角） |
§4.1 |
| 柱宽 |
类目宽度的 40%~60% |
— |
| 同组柱间距 |
--spacing-1 (4px) |
§7.1 |
| 类目（组）间距 |
自适应等分 |
— |
| 数值标签（可选） |
12px Regular，#C5CFE0，置柱顶上方 --spacing-1 |
— |
36.2 堆叠柱状图（如「标题」Paper/Project/Book）
| 元素 |
配色 |
来源 |
| 系列 1（Book / 底段） |
#69B1FF (ZS-002-04) 或主色 #1677FF |
§1.1.3 |
| 系列 2（Project / 中段） |
--func-warning（橙） |
§27.4 |
| 系列 3（Paper / 顶段） |
--func-success（绿） |
§27.4 |
| 段间分隔 |
1px 容器底色 #0C1836 描边，制造堆叠缝隙 |
— |
| Y 轴类目标签「类型」 |
12px，#4096FF (ZS-002-05) |
§35.3 |
36.3 分组柱状图（如「标题（BW）」「标题」双系列）
| 元素 |
配色 |
来源 |
| 系列依次取色 |
通用图表色序 #1677FF / #13C2C2 / #4096FF … |
§1.1.8 |
| 设计稿 BW 三色变体 |
蓝 #69B1FF / 绿 --func-success / 橙 --func-warning |
§35.8 |
| 双系列变体 |
蓝 #69B1FF(ZS-002-04) + 橙 --func-warning |
— |
36.4 条形图（横向，如「标题」x 轴 0–400）
| 属性 |
取值 |
来源 |
| 方向 |
水平，类目在 Y 轴、数值在 X 轴 |
— |
| 条体颜色 |
#69B1FF (ZS-002-04)（单系列）或图表色序 |
§1.1.3 |
| 条体圆角 |
右端 2px |
§4.1 |
| 类目标签「类型」 |
左对齐，12px #6E88B0 |
§35.3 |
| X 轴刻度 |
0 / 100 / 200 / 300 / 400，12px #6E88B0 |
§35.3 |
36.5 排行进度条（如「数据采集XXX」TOP1–5）
横向「标签 + 渐变进度条 + 数值」的榜单形态。
TOP1 项目任务名称一 15,465
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓
TOP2 项目任务名称二 15,234
■■■■■■■■■■■■■■■■■■■■■■■■■▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
| 元素 |
规格 / 配色 |
来源 |
| 排名 + 名称（TOPn 项目任务名称） |
14px Regular，#C5CFE0 (ZS-004-02) |
— |
| 数值（右对齐） |
16px D-DIN Regular，#FFFFFF |
§2.1.2 |
| 进度条高度 |
8px，圆角 4px |
§4.1 |
| 进度填充 |
渐变 linear-gradient(90deg, #1677FF 0%, #13C2C2 100%)（主色蓝→主色青） |
§1.1.8 |
| 进度轨道（底槽） |
#1A2F5A (ZS-004-07) |
§1.1.5 |
| 行间距 |
--spacing-4 (16px) |
§7.1 |
| 名称行 → 进度条间距 |
--spacing-2 (8px) |
§7.1 |
36.6 交互
| 行为 |
动效 |
| 入场 |
柱体由 0 向目标高度 / 长度增长，scaleY/scaleX 0→1，400ms ease-out，按系列依次 60ms 错峰 |
| Hover 柱 |
该柱亮度 +8%，弹出 §35.6 Tooltip，axisPointer 高亮该类目竖带 |
| Hover 进度条 |
数值放大或显示绝对值 Tooltip |
37. 折线图（Line / Area）
对应设计稿「8.2 图表-折线图」与「8.3 多系列折线」。涵盖迷你面积图 / 单线（含异常点 Tooltip）/ 长时序面积图（带缩略轴）/ 多系列折线。容器、轴、网格、图例、Tooltip 沿用 §35。
37.1 线条与面积
| 元素 |
规格 |
来源 |
| 线宽 |
2px |
— |
| 线条颜色 |
取图表色序，单线默认 #1677FF (ZS-002-06) |
§1.1.8 |
| 平滑 |
smooth（曲线）或折线，按数据性质选用 |
— |
| 面积填充（单线） |
自顶向下渐变 rgba(22,119,255,0.32) → rgba(22,119,255,0) |
§3.1 |
| 拐点 |
默认隐藏，hover 显示空心圆（§35.7） |
— |
37.2 迷你面积图（如左上「图表标题」+ 已选/未选 标签）
| 元素 |
规格 / 配色 |
来源 |
| 顶部切换标签（已选 / 未选） |
§29 标签：选中 #1677FF 实心白字 / 未选 transparent + 1px #6E88B0 边、#6E88B0 字 |
§29 |
| 线条 |
2px #4096FF (ZS-002-05) |
— |
| 面积渐变 |
rgba(64,150,255,0.32) → 0 |
— |
当前值标签（如 59.32） |
实心小牌 #122347 背景 / #FFFFFF 文字，圆角 2px，定位于末端点 |
§35.6 |
| 轴标签（日期） |
12px #6E88B0 |
§35.3 |
37.3 单线异常点图（如中部「5-1…5-12」+「1月10日 异常率12.9%」）
| 元素 |
规格 / 配色 |
来源 |
| 主线 |
2px #1677FF |
— |
| 面积渐变 |
rgba(22,119,255,0.32) → 0 |
— |
| 选中竖带 |
rgba(22,119,255,0.12) 矩形高亮当前 X 区间 |
§35.7 |
| 异常点标记 |
空心圆 6px，描边 #FAAD14（警告橙），填充 #0C1836 |
§27.4 |
| Tooltip（日期 + 指标） |
§35.6；指标行如「异常率 12.9%」用 --func-warning 橙强调 |
§35.6 |
| Y 轴（0–2500） |
12px #6E88B0，虚线网格 #2D4473 |
§35.3 / §35.4 |
37.4 长时序面积图 + 缩略轴（如底部「图表标题」1986–2024）
| 元素 |
规格 / 配色 |
来源 |
| 主线 |
2px #36CFC9（标准青）或 #4096FF |
§1.1.4 |
| 面积渐变 |
rgba(54,207,201,0.24) → 0 |
— |
数据点标签（如 2.43） |
实心小牌（§35.6），定位于选中点上方 |
— |
| 缩略轴（dataZoom，右下迷你图） |
缩略折线 #4A6491；滑窗手柄 #1677FF，选中区 rgba(22,119,255,0.16) |
§1.1.5 / §1.1.6 |
| X 轴年份 |
12px #6E88B0，密集时隔项显示 |
§35.3 |
37.5 多系列折线图（如「图表标题」XXX/XXX/都是/无反应）
| 元素 |
规格 / 配色 |
来源 |
| 图例（顶部居中） |
方块 marker + 文字，项间距 --spacing-3 |
§35.5 |
| 系列 1（XXX） |
红 #FF4D4F (ZS-001-05) |
§1.1.2 |
| 系列 2（XXX） |
蓝 #1677FF (ZS-002-06) |
§1.1.3 |
| 系列 3（都是） |
橙 --func-warning |
§27.4 |
| 系列 4（无反应） |
绿 --func-success 或青 #36CFC9 |
§27.4 / §1.1.4 |
| 线宽 |
2px，多系列不填充面积（避免互相遮挡） |
— |
| 拐点 |
全程显示 4px 空心圆（描边系列色，填充 #0C1836） |
§35.7 |
| 选中竖带 + Tooltip |
hover 竖带 rgba(22,119,255,0.12)，Tooltip 列出各系列值（如 5.32） |
§35.6 |
| Y 轴（0–10） / X 轴（年份） |
12px #6E88B0，横向虚线网格 #2D4473 |
§35.3 / §35.4 |
37.6 交互
| 行为 |
动效 |
| 入场 |
线条沿路径绘制 stroke-dashoffset 动画，600ms ease-out；面积同步淡入 |
| Hover |
显示 §35.6 Tooltip + 竖向 axisPointer 高亮带；对应拐点放大为空心圆 |
| 图例点击 |
切换系列显隐，隐藏态图例置灰 #4A6491（§35.5） |
| 缩略轴拖拽 |
主图 X 轴范围实时联动，100ms 节流 |
38. 甘特图（Gantt）
对应设计稿「甘特图」。以时间为横轴、任务行为纵轴的进度条排期图。深蓝背景上以交替行底纹 + 渐变任务条 + 箭头收尾呈现，配色取 §1.1.8 图表色序与语义色。
38.1 结构
1 2 3 … 15 16 17 … 31 ← 时间刻度表头
Jan ▐▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▶ ← 任务条（带箭头收尾）
Feb ▐▓▓▓▓▓▓▓▓▓▶
Mar ▐▓▓▓▓▓▓▓▶
…
Dec ▐▓▓▓▓▓▓▓▓▓▓▓▶
● Lorem ipsum 1 ● Lorem ipsum 2 … ← 底部图例
38.2 表格框架
| 元素 |
规格 / 配色 |
来源 |
| 容器背景 |
#0C1836 (ZS-004-09) |
§35.1 |
| 时间刻度表头（1–31 / 月） |
12px Regular，#C5CFE0 (ZS-004-02) |
§35.3 |
| 行标签（Jan…Dec） |
14px Regular，#C5CFE0 |
— |
| 行高 |
28px，行间距 --spacing-1 (4px) |
§7.1 |
| 行底纹（轨道） |
#122347 (ZS-004-08)，整行通栏，圆角 2px |
§1.1.5 |
| 行底纹（隔行可选） |
奇偶交替 #122347 / #0F1C3D |
— |
| 列分隔（可选） |
1px dashed #1A2F5A (ZS-004-07) |
§6.2 |
38.3 任务条
| 元素 |
规格 / 配色 |
来源 |
| 条高 |
16px，垂直居中于行内 |
— |
| 圆角 |
2px（左端）；右端收箭头三角表示方向 |
§4.1 |
| 填充 |
沿条向右渐变（系列色 0% → 同色 70% 透明 100%），叠加斜纹/点纹理增强层次 |
§1.1.8 |
| 纹理 |
repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 4px, transparent 4px 8px) |
— |
| 箭头收尾 |
与条同色实心三角，6px，指向时间推进方向 |
— |
| 进度（可选） |
条内再叠一段高饱和系列色表示完成比例 |
— |
38.4 任务分类配色（对应底部图例 Lorem ipsum 1–5）
| 图例 |
圆点 / 任务条主色 |
来源 |
| Lorem ipsum 1 |
橙 --func-warning |
§27.4 |
| Lorem ipsum 2 |
红 #FF4D4F (ZS-001-05) |
§1.1.2 |
| Lorem ipsum 3 |
青绿 #36CFC9 (ZS-003-05) |
§1.1.4 |
| Lorem ipsum 4 |
浅蓝 #91CAFF (ZS-002-03) |
§1.1.3 |
| Lorem ipsum 5 |
主色蓝 #1677FF (ZS-002-06) |
§1.1.3 |
38.5 图例与表头
| 元素 |
规格 |
来源 |
| 底部图例圆点 |
10px 圆形，取 §38.4 分类色 |
§35.5 |
| 图例文字 |
14px Regular，#C5CFE0 |
— |
| 图例项间距 |
--spacing-5 (24px) |
§7.1 |
| 表头 → 首行间距 |
--spacing-3 (12px) |
§7.1 |
38.6 交互
| 行为 |
动效 |
| 入场 |
任务条由左端起点向右展开 scaleX 0→1（transform-origin:left），400ms ease-out，按行错峰 60ms |
| Hover 任务条 |
整条亮度 +8%，弹出 §35.6 Tooltip（任务名 / 起止日期 / 进度） |
| Hover 行 |
行底纹由 #122347 → #1A2F5A (ZS-004-07) |
| 今日线（可选） |
一条 1px dashed #4096FF (ZS-002-05) 竖线标注当前日期 |
38.7 CSS Token 参考（§35–§38 共用）
:root {
/* 图表容器与标题 */
--chart-bg: #0C1836; /* ZS-004-09 */
--chart-title-bar: #1677FF; /* ZS-002-06 标题竖条 */
--chart-title-text: #FFFFFF;
--chart-subtitle: #6E88B0; /* ZS-004-04 */
/* 坐标轴与网格 */
--chart-axis-line: #2D4473; /* ZS-004-06 */
--chart-axis-label: #6E88B0; /* ZS-004-04 */
--chart-axis-cat: #4096FF; /* ZS-002-05 类目名 */
--chart-grid: #2D4473; /* ZS-004-06 虚线网格 */
--chart-grid-weak: #1A2F5A; /* ZS-004-07 */
/* 图例 / Tooltip */
--chart-legend-text: #C5CFE0; /* ZS-004-02 */
--chart-legend-off: #4A6491; /* ZS-004-05 未选中 */
--chart-tooltip-bg: rgba(12,24,54,0.92);
--chart-tooltip-border:#1A2F5A; /* ZS-004-07 */
--chart-tooltip-title: #FFFFFF;
--chart-tooltip-value: #C5CFE0;
--chart-axispointer: #4096FF; /* ZS-002-05 */
--chart-highlight-band:rgba(22,119,255,0.12);
/* 通用图表色序（面积大） */
--chart-c1: #1677FF; --chart-c2: #13C2C2; --chart-c3: #4096FF; --chart-c4: #36CFC9;
--chart-c5: #69B1FF; --chart-c6: #5CDBD3; --chart-c7: #91CAFF; --chart-c8: #87E8DE;
/* 小面积图表色序 */
--chart-s1: #4096FF; --chart-s2: #36CFC9; --chart-s3: #FF4D4F;
--chart-s4: #FFA39E; --chart-s5: #6388FF; --chart-s6: #478880;
/* 排行进度条（§36.5） */
--rank-bar-fill: linear-gradient(90deg, #1677FF 0%, #13C2C2 100%);
--rank-bar-track: #1A2F5A; /* ZS-004-07 */
--rank-value: #FFFFFF;
/* 甘特图（§38） */
--gantt-track: #122347; /* ZS-004-08 行底纹 */
--gantt-row-hover: #1A2F5A; /* ZS-004-07 */
--gantt-c1: #FAAD14; /* 警告橙 */
--gantt-c2: #FF4D4F; /* ZS-001-05 */
--gantt-c3: #36CFC9; /* ZS-003-05 */
--gantt-c4: #91CAFF; /* ZS-002-03 */
--gantt-c5: #1677FF; /* ZS-002-06 */
--gantt-today: #4096FF; /* ZS-002-05 今日线 */
}
项目当前未引入图表库；若后续接入 ECharts，可将以上 token 注入主题（backgroundColor / axisLine.lineStyle.color / splitLine.lineStyle / color[] 色序 / tooltip.backgroundColor 等），保持与本规范一致。
关于多系列填充色：§36–§38 表格中标注的系列色用于说明语义映射；实际多系列图表的系列填充色一律以 §41 图表色值（设计稿 8.7）为准——即淡色系 #FA9196 / #FFCC80 / #97EBCD / #A2E1F9 / #80BCFF …，按系列数量取对应色序。§1.1.8 的高彩度色序仅用于需要强对比的强调场景（如单色进度条渐变、KPI 高亮）。
39. 环形图（Donut / Ring）
对应设计稿「8.3 图表-环形图」。中心带总量数字的占比环图，按分类数量分三环 / 四环 / 五环 / 六环 / 七环 / 八环等变体。环段配色取 §41 图表色值（淡色系列），中心总量与引导标签取深蓝系字体色。
39.1 结构
三环 / 四环 …（标题）
╭──────────╮
Media│ │Social
28% │ 34801 │ 36%
│ XXX总量 │
╰──────────╯
News 28%
39.2 环体规格
| 属性 |
取值 |
来源 |
| 外径 |
容器短边的 60%~70% |
— |
| 内径（中空比） |
外径的 62%（环宽约 38%） |
— |
| 环段间隙 |
2px（用容器底色 #0C1836 描边分隔） |
§35.1 |
| 环段圆角 |
2px（段端微圆角，可选） |
§4.1 |
| 环段配色 |
按分类数取 §41 对应「N 色」色序 |
§41 |
| 起始角 / 方向 |
顶部 90° 起，顺时针 |
— |
39.3 中心与标签
| 元素 |
规格 / 配色 |
来源 |
中心主数值（如 34801） |
26px Bold D-DIN，#FFFFFF |
§2.1.2 |
中心说明（如 XXX总量） |
12px Regular，#6E88B0 (ZS-004-04) |
— |
引导标签名（如 Social） |
12px Regular，#C5CFE0 (ZS-004-02) |
— |
引导标签占比（如 36%） |
12px Regular，#FFFFFF 或对应环段色 |
— |
| 引导线 |
1px solid #4A6491 (ZS-004-05) 折线，从环段引至外侧标签 |
§6.1 |
| 变体标题（三环 / 四环…） |
14px Medium，#C5CFE0，居中于图上方 |
§35.2 |
39.4 交互
| 行为 |
动效 |
| 入场 |
环段沿顺时针扫出 0°→终值，600ms ease-out，按段错峰 60ms |
| Hover 环段 |
该段沿半径外扩 4px（offset），中心数值切换为该段值 + 占比，弹出 §35.6 Tooltip |
| 图例点击 |
切换分类显隐，其余环段占比按比例重算 |
40. 关系图 / 散点图（Network / Scatter）
对应设计稿「8.6 图表-散点图」「关系图」。用于展示账号、节点间关系的力导向网络图与散点分布。深蓝背景上以发光节点 + 渐隐连线 + 平台聚类呈现，节点配色取主色蓝 / 警告橙 / 危险红做分类，节点尺寸映射权重。
40.1 节点（Node）
| 元素 |
规格 / 配色 |
来源 |
| 形状 |
圆形（普通节点）/ 头像圆（账号节点，2px 描边）/ 六边形（聚合节点） |
— |
| 直径 |
8px ~ 40px，按权重（连接数 / 数值）线性映射 |
— |
| 分类色 A（本方 / 主） |
#1677FF (ZS-002-06) |
§1.1.3 |
| 分类色 B（异常 / 外部） |
--func-warning（橙） |
§27.4 |
| 分类色 C（高危 / 标红） |
#FF4D4F (ZS-001-05) |
§1.1.2 |
| 节点发光（重点节点） |
0 0 12px 同色 40% 透明外发光 |
§3.1 |
| 节点文字（数值 / 名称） |
12px Regular，#FFFFFF（节点内）/ #C5CFE0（节点外） |
— |
| 中心 / 焦点节点 |
加大直径 + 强发光，橙色 --func-warning 高亮 |
— |
40.2 连线（Edge）
| 元素 |
规格 / 配色 |
来源 |
| 线宽 |
1px（普通）/ 2px（强关系） |
— |
| 颜色 |
#4A6491 (ZS-004-05) 半透明，或取起点节点分类色 40% 透明 |
§1.1.5 |
| 渐隐 |
由中心向外渐隐（opacity 0.6 → 0.15），弱化边缘视觉噪声 |
— |
| 方向（有向） |
末端箭头 4px，同线色 |
— |
| 高亮态（hover 节点时） |
关联边升为节点分类色满饱和、2px，无关边降至 opacity 0.08 |
— |
40.3 散点图（Scatter，纯坐标分布）
| 元素 |
规格 / 配色 |
来源 |
| 散点 |
实心圆 6px ~ 16px（尺寸可映射第三维） |
— |
| 配色 |
小面积色序（§41 或 §1.1.8 小面积），分类着色 |
§41 |
| 坐标轴 / 网格 |
沿用 §35.3 / §35.4 |
§35 |
| 气泡变体 |
半透明填充 35% + 1px 同色描边，避免重叠遮挡 |
— |
| 元素 |
规格 |
来源 |
| 聚类标签 |
平台名 14px Medium，对应聚类主色（如蓝 / 橙 / 红） |
— |
| 聚类辅文 |
数值 12px Regular，#6E88B0 |
— |
| 图例（XXX / XXX） |
方块 marker + 文字，置右下角 |
§35.5 |
| 更新提示（如「近30分钟更新数据」） |
12px Regular，#6E88B0，右下角 |
— |
40.5 控制区（关系图侧栏）
设计稿左侧含「选择目标」下拉 + 分类勾选列表（主页发帖 / 群组发帖 / 私信 / 点赞 / 转发 / 帖子评论 / Pages内容 / 目标的主页帖子）+「添加账号 / 全选账号」按钮。
| 元素 |
规格 |
来源 |
| 「选择目标」下拉 |
沿用 §15 选择器 |
§15 |
| 分类列表项 |
14px Regular，前缀分类色圆点 8px，沿用 §16 多选 |
§16 |
| 「添加账号」 |
§5.2.2 默认按钮（含 + 图标） |
§5.3.2 |
| 「全选账号」 |
§5.2.3 文本按钮 |
§5.2.3 |
| 刷新图标（右上 ⟳） |
16px，#6E88B0，hover #4096FF |
§8.2.5 |
40.6 交互
| 行为 |
动效 |
| 力导向布局 |
节点入场后力导向收敛，tick 动画 ~800ms 后静止 |
| Hover 节点 |
高亮关联边与邻接节点（§40.2），其余降透明；弹出 §35.6 Tooltip（节点名 / 类型 / 指标） |
| 点击节点 |
居中聚焦该节点并展开其一度关系；可下钻 |
| 缩放 / 平移 |
滚轮缩放 0.5×~3×，拖拽平移画布 |
| 拖拽节点 |
可手动拖拽固定节点位置 |
41. 图表色值（Chart Palette · 多系列色序）
对应设计稿「8.7 图表-色值」。这是全站图表多系列填充的权威色序（淡色系，深蓝背景上柔和、区分度高）。按系列数量从「三色」到「十色」各有固定取色顺序——系列数为 N 时直接取「N 色」整行，不要自行截取或乱序。如需超过十色或特殊场景，由 UI 设计师按整体风格补充。
41.1 基础色板
| 色名 |
色值 |
色相 |
| 粉红 |
#FA9196 |
红 |
| 橙红 |
#FCA58F |
橙红 |
| 橙 |
#FDB887 |
橙 |
| 浅橙 |
#FFCC80 |
黄橙 |
| 黄绿 |
#DCD69A |
黄绿 |
| 浅绿 |
#BAE1B3 |
绿 |
| 青绿 |
#97EBCD |
青绿 |
| 浅青 |
#9EE4EA |
青 |
| 浅蓝 |
#A2E1F9 |
天蓝 |
| 蓝 |
#80BCFF |
蓝 |
41.2 按系列数取色序
| 系列数 |
取色顺序 |
| 三色 |
#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、末色恒为 #80BCFF，保证冷暖两端锚定不变。
41.3 与既有规范的关系
| 色序 |
用途 |
来源 |
| §41 淡色系列（本节） |
图表多系列填充（柱 / 折线 / 环形 / 散点分类）默认色序 |
设计稿 8.7 |
| §1.1.8 通用图表色序（高彩度） |
强对比强调：单色渐变进度条、KPI 高亮、需要醒目的单系列 |
§1.1.8 |
| §27.4 / §1.1.2 语义色 |
带语义的系列（成功 / 警告 / 错误 / 信息） |
§27.4 |
三者优先级：有语义 → 用语义色；多分类并列 → 用 §41；需强调单值 → 用 §1.1.8 高彩度。§36–§40 中标注的具体系列色为语义示例，实际并列分类应回落到本节色序。
41.4 CSS Token 参考
:root {
/* §41 图表多系列色板（淡色系，设计稿 8.7） */
--chart-p-red: #FA9196;
--chart-p-redorange:#FCA58F;
--chart-p-orange: #FDB887;
--chart-p-amber: #FFCC80;
--chart-p-olive: #DCD69A;
--chart-p-green: #BAE1B3;
--chart-p-teal: #97EBCD;
--chart-p-cyan: #9EE4EA;
--chart-p-skyblue: #A2E1F9;
--chart-p-blue: #80BCFF;
}
// 按系列数取色序（接入 ECharts 时用作 option.color）
export const CHART_PALETTES = {
3: ['#FA9196', '#97EBCD', '#80BCFF'],
4: ['#FA9196', '#FFCC80', '#97EBCD', '#A2E1F9'],
5: ['#FA9196', '#FFCC80', '#97EBCD', '#A2E1F9', '#80BCFF'],
6: ['#FA9196', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
7: ['#FA9196', '#FCA58F', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
8: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
9: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#DCD69A', '#BAE1B3', '#97EBCD', '#A2E1F9', '#80BCFF'],
10: ['#FA9196', '#FCA58F', '#FDB887', '#FFCC80', '#DCD69A', '#BAE1B3', '#97EBCD', '#9EE4EA', '#A2E1F9', '#80BCFF'],
}
