574 lines
27 KiB
Markdown
574 lines
27 KiB
Markdown
# 深蓝色 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) 竖线标注当前日期 | §6.2 |
|
||
|
||
### 38.7 CSS Token 参考（§35–§38 共用）
|
||
|
||
```css
|
||
: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` 同色描边，避免重叠遮挡 | — |
|
||
|
||
### 40.4 平台聚类与图例（如 Facebook / Twitter / 微博 / TikTok）
|
||
|
||
| 元素 | 规格 | 来源 |
|
||
|------|------|------|
|
||
| 聚类标签 | 平台名 `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 参考
|
||
|
||
```css
|
||
: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;
|
||
}
|
||
```
|
||
|
||
```js
|
||
// 按系列数取色序（接入 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'],
|
||
}
|
||
```
|
||
|
||
---
|
||
|