03 · 数据仪表盘

速览

产出	带图表的看板页面
用时	30 到 60 分钟
类型	「Dashboard」
难点	不在图表，在于先想清楚这个看板要回答什么问题

场景

要一个数据面板：给团队看的指标看板、给客户看的效果面板、或者内部工具的控制台。

做之前先回答一个问题

打开这个看板的人，想知道什么？

不是「想看什么数据」，是「想知道什么」。这两个的差别决定了看板是有用还是好看：

想看什么数据	想知道什么
日活、留存、转化率	昨天是不是出问题了
各渠道成本	这个月预算还够不够
工单量、响应时长	现在需不需要加人

右边那一列决定了什么该放大、什么该报警、什么可以折叠起来。左边那一列只能给你一堆卡片。

提示词

做一个数据看板。

使用者：[谁会打开它，多久打开一次]
他们打开时想知道：[一句话，一个问题]
如果答案是「有问题」，他们下一步会做什么：[具体动作]

数据：
[粘贴 CSV，或者描述数据结构和字段含义]

布局要求：
1. 最上面一行是回答那个核心问题的东西，不超过 3 个数字。
2. 中间是支撑这个判断的图表，最多 4 个。
3. 下面是明细表，默认折叠。

约束：
- 每个数字要有对比基准（环比、同比或者目标值），单独一个数没有意义
- 图表用当前设计系统的配色，不要 ECharts 默认色
- Y 轴从 0 开始
- 状态要全：加载中、无数据、数据异常、只有一天数据
- 数据如果是示例，明确标注
- 深色模式下图表也要是深色底

为什么这么写

「他们下一步会做什么」是最有用的一句。 有了它，看板才知道该在什么条件下变红、该把哪个数字放最大。没有它，所有指标都一样重要，等于都不重要。

「每个数字要有对比基准」是看板设计的第一条规则。 「昨日订单 1,240」什么都说明不了。「昨日订单 1,240，环比 -18%」才是信息。

「最上面不超过 3 个数字」 是在逼你排优先级。一行放六个 KPI 卡片是最常见的失败——观众的眼睛不知道该落在哪。

验收清单

• [ ] 打开三秒内能回答那个核心问题
• [ ] 每个数字都有对比基准
• [ ] 图表配色跟页面是一套
• [ ] Y 轴从 0 开始（不是的话有明确理由）
• [ ] 加载、空、异常三个状态都有
• [ ] 深色模式下图表不是白底
• [ ] 示例数据标注了
• [ ] 窄屏下图表能横向滚动，页面本身不横滚

变体

接真实数据

把图表的数据源改成从这个接口取：
GET /api/metrics?from=&to=

返回结构：
[粘贴一个真实的返回示例]

要处理：加载中、请求失败、返回空数组、返回字段缺失。
失败时要显示上一次成功的数据并标注「数据可能已过期」。

加时间范围切换

加一个时间范围切换：今天 / 7 天 / 30 天 / 自定义。

切换时所有图表联动。切换过程中显示加载态，不要让页面跳动。
用户选过的范围记住，下次打开还是那个。

做成给客户看的版本

基于这个看板做一个对外版本：
- 去掉所有内部指标（成本、人力、工单）
- 保留效果指标
- 每个图表下面加一句话解释这个数字意味着什么
- 顶部加客户 logo 和报告周期
- 支持导出 PDF

常见问题

图表太多，看不过来。

删。一个看板超过 6 个图表基本就没人看了。问自己：哪几个图是回答核心问题必需的，其余的折叠或者移到二级页面。

图表配色跟页面不搭。

明确说：「图表用设计系统里的色板，主色用于最重要的那条数据系列，其余用中性色阶」。

数据量大的时候卡。

在提示词里说清楚数据量级：「一次可能返回 5 万行，需要做聚合或者虚拟滚动」。不说的话它按小数据量做。

导出的 PDF 图表糊了。

图表要用矢量渲染，或者导出时提高 DPI。可以直接要求：「导出 PDF 时图表用 SVG 渲染，不要位图」。

相关

• PPT 工作坊 · 第 7 步 — 图表选型和数据诚实性
• 进阶 · Craft — 状态覆盖