数据看板 / 可视化报表设计规范

> 适用于：制作数据看板、可视化报表、数据长图、运营驾驶舱类页面时遵循的统一设计规范。

> 风格定位：冰蓝毛玻璃 · 柔光渐变 · 轻质浮层 · 呼吸感留白。

〇、视觉风格总纲

整体风格关键词：冰蓝毛玻璃 · 柔光渐变 · 轻质浮层 · 呼吸感留白。

设计语言偏向 Apple Human Interface Guidelines 的"材质"理念——半透明叠加、饱和度增强模糊、极浅投影、大圆角、渐变光晕背景。

一、背景与氛围层

1.1 页面背景（必须完整还原）

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: #1a2332;
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(ellipse 800px 600px at 15% 10%, rgba(165,195,245,.55), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 20%, rgba(140,175,235,.5),  transparent 60%),
    radial-gradient(ellipse 900px 700px at 50% 60%, rgba(175,200,250,.55), transparent 65%),
    radial-gradient(ellipse 600px 500px at 80% 75%, rgba(210,190,240,.45), transparent 60%),
    radial-gradient(ellipse 650px 500px at 20% 80%, rgba(150,185,240,.5),  transparent 60%),
    linear-gradient(135deg, #edf2fb 0%, #e8eef8 100%);
  background-attachment: fixed;
}

• 5 层椭圆径向渐变叠加在 135° 线性底色上，营造不均匀的冰蓝-淡紫光晕
• background-attachment: fixed 保证滚动时背景不动，产生视差深度

1.2 浮动光球（呼吸动画）

body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}
body::before {
  width: 700px; height: 700px; top: -150px; left: -100px;
  background: radial-gradient(circle, rgba(160,190,245,.4), transparent 70%);
  animation: float1 22s ease-in-out infinite;
}
body::after {
  width: 650px; height: 650px; bottom: -200px; right: -100px;
  background: radial-gradient(circle, rgba(160,170,235,.35), transparent 70%);
  animation: float2 26s ease-in-out infinite;
}
@keyframes float1 {
  0%,100% { transform: translate(0,0) scale(1) }
  50%     { transform: translate(60px,40px) scale(1.08) }
}
@keyframes float2 {
  0%,100% { transform: translate(0,0) scale(1) }
  50%     { transform: translate(-50px,-60px) scale(1.1) }
}

• 两个 700/650px 的模糊圆形光球，60px 高斯模糊，缓慢浮动
• 动画周期 22s/26s 错开，避免同步感

二、设计令牌（Design Tokens）

2.1 CSS 变量（必须原样使用）

:root {
  /* 卡片 */
  --card: rgba(255,255,255,.45);
  --card-hover: rgba(255,255,255,.6);
  --card-solid: #fff;
  /* 边框 */
  --border: rgba(255,255,255,.5);
  --border-soft: rgba(200,210,230,.35);
  /* 文字三级 */
  --text:  #1a2332;   /* 标题/主体数值 */
  --text2: #5a6a80;   /* 卡片标题/次要文字 */
  --text3: #8c9ab0;   /* 标签/辅助说明 */
  /* 色板 */
  --blue:  #4a7cff;
  --blue2: #6c9cff;
  --green: #22c55e;
  --amber: #f59e0b;
  /* 圆角 */
  --radius:    18px;   /* 卡片 */
  --radius-sm: 10px;   /* 按钮/输入框/小组件 */
  /* 阴影 */
  --shadow:    0 4px 24px rgba(80,100,160,.08);
  --shadow-lg: 0 12px 40px rgba(80,100,160,.12);
}

2.2 色彩语义

2.3 字体体系

三、毛玻璃材质系统

3.1 卡片

.card {
  background: var(--card);                    /* rgba(255,255,255,.45) */
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border);            /* rgba(255,255,255,.5) */
  border-radius: var(--radius);               /* 18px */
  padding: 20px 24px;
  box-shadow: var(--shadow);
  transition: all .3s;
}
.card:hover {
  background: var(--card-hover);              /* rgba(255,255,255,.6) */
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

• 关键：saturate(180%) blur(20px) 先增饱和再模糊，颜色更鲜润
• 边框半透明白，和背景光晕融合

3.2 顶部导航栏

.topbar {
  position: sticky; top: 0; z-index: 300;
  background: rgba(255,255,255,.4);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

3.3 控件（筛选器/按钮）

.control {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);            /* 10px */
}

3.4 弹出面板（时间选择器/下拉菜单）

.panel {
  background: rgba(255,255,255,.95);          /* 接近不透明，保证可读 */
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(30,40,60,.15); /* 比卡片更深 */
}

四、整体布局原则

4.1 页面结构

• 顶部 sticky 导航栏（logo + 视图切换 + 筛选器 + 导出按钮）
• 按业务模块分 section，每个 section 有 section-title 一级标题
• 内容区 max-width 1280px 居中，大屏一屏可看完主体
• 底部 footer 标注数据截止时间和更新频率

4.2 卡片标题装饰

• 所有卡片标题带左侧竖线（::before 伪元素，3px × 14px，圆角 2px）
• 不同 section 用不同颜色，避免全蓝单调
• 标题居左，筛选器（日/周/月）用 margin-left:auto 推到右端

4.3 栅格比例

• 两张同类图表并排：1fr 1fr 等宽
• 左图右列表：3fr 2fr 或 2fr 3fr
• 左小指标 + 右大图表：1fr 2fr
• 三列等宽：repeat(3, 1fr)
• 并排卡片默认 stretch 撑满同行高度
• 移动端断点 1024px / 640px 逐级单列

五、图表规范

5.1 尺寸与比例

• 折线/柱状/堆叠/面积图：aspect-ratio: 2/1 + min-height: 180px
• 饼图/环图：方形 canvas 居中，不随卡片拉伸
• 地图（ECharts）：360-400px 高，zoom 放大主体
• 热力图：标题在顶部，图表用 flex wrapper 在剩余空间垂直居中

5.2 地图交互

• hover 保持 visualMap 原色（areaColor: 'inherit'），只叠加白色描边 + 阴影
• 禁用 select 态

5.3 环图交互

• 点击色块联动细分图表/列表
• 图例可点击高亮

5.4 图表选型速查

根据数据性质 → 图表类型选择，不要乱配：

选型红线：

• 禁用 3D 图表、禁用雷达图（除非明确要求）、禁用词云
• 类别 ≥ 6 时不用饼/环图，改用表格或条形
• 时间序列 ≥ 2 个指标时优先折线，不用分组柱状
• 占比类图表旁必配图例 + 数值百分比，不能只看颜色

5.5 图表排布宽高规范

单张图表的容器尺寸（卡片内的 chart-wrap）：

卡片内嵌多元素时的行高：

• 卡片 padding: 20px 24px
• 卡片标题 margin-bottom: 16px
• 图表和下方说明文字（图例/时间轴标签）间距: 6-8px
• 指标网格（stat-group-body）行间距: 10-14px

并排卡片的行高对齐：

• 默认 stretch 撑满同行最高者
• 内部图表用 flex wrapper 居中填充剩余空间
• 双环图所在卡片比表格卡片短时，不要硬拉高，让高度自然差

响应式断点下的图表缩放：

• max-width: 1024px：双列变单列，图表宽度自动扩展到满宽，高度按 aspect-ratio 重算
• max-width: 640px：地图高度可降至 280px；环图 canvas 降至 110×110
• 所有 Chart.js 实例必须设 maintainAspectRatio: false + responsive: true

5.6 迭代红线：新增/调整卡片时必做检查

每次新增卡片、新增横向数据、改变栅格比例时，必须显式检查以下三项：

常见翻车：

• 只改列数没加 gap → 卡片紧贴或间距不均
• inline style 写死 grid → 移动端仍然挤成多列不可读
• B 端的 class 拿到产品看板用 → 样式没生效导致布局崩坏

六、数据指标卡片

6.1 统一样式

• 数值 22px / 800 / 居左
• 单位 11px / 500 / --text3
• 标签 11px / --text3 / margin-top 4-6px
• 增长标记 10.5px / 绿或红 / 同行
• 严禁居中

6.2 分组

• stat-group 分组，grid 2-3 列
• 分组标题带竖线装饰
• 不加虚线分隔

七、列表与分页

• 每页 5 行（双列时 10 条）
• 极简分页器 ‹ 1/N › 居中
• 排行前 3 用圆形彩色序号

八、图片网格

• 小尺寸模式：8 列、1:1 方形、5px gap、圆角 5px
• 叠加用户昵称 + 日期（9px/8px 缩小字号）
• 概览 1 行（8 张）、详情 3 行（24 张）
• 带分页器

九、交互组件

9.1 时间选择器

• 320px 毛玻璃面板、日期范围输入 → 单月日历 → 快捷按钮（一行 nowrap）→ 取消/确定
• 选中态蓝底白字、区间浅蓝底

9.2 视图切换器

• logo icon 30×30 + 视图名 + ▽ + 副标"点击切换视图"
• 毛玻璃下拉菜单

9.3 对象选择器（单选 + 搜索）

• 点击弹出带搜索框的单选列表
• 列表按热度/权重降序
• 仅展示对象名，选中态蓝色 + 勾
• 支持白名单过滤（如仅显示当前用户有权限的对象）

十、视觉禁忌

十一、技术栈

• Chart.js 4.x（折线/柱状/环图）
• ECharts 5.x（中国地图、热力图）
• 纯 CSS Grid/Flex，无 UI 框架
• 单 HTML 自包含（CSS + JS inline）
• createPager() 统一分页