数据大屏

数据大屏用于会议室、展厅、值班中心、运营监控和项目展示。和仪表盘相比，大屏属于固定尺寸可视化画布：先确定画布比例，再把标题、指标、图表、表格、说明和装饰按层级排好，最后用全屏方式展示。

入口：顶部菜单选择“数据大屏”。

列表页用于管理所有大屏资源。新建前先选目录；编辑前先确认是否为正式页面；参考内置示例时，可以先打开预览，再复制到自己的目录中修改。正式项目不应直接修改示例原件，避免后续无法对照。

先认识列表页

列表页是所有大屏的管理入口。日常使用时，先在左侧选择文件夹，再在右侧打开预览、编辑、复制、移动或删除。

选中一个大屏后，可以先查看详情。详情页适合确认资源名称、所属目录、创建人、更新时间和当前状态。

详情页用于确认资源基本信息。修改前先查看更新时间和创建人；上线前先检查预览效果；准备删除或替换时，先查看是否被分享、引用或作为演示页面使用。

创建前先想清楚

创建大屏前，应先明确“谁看、看什么、在哪块屏幕看”，再进入组件和配色配置。

可先按以下示例结构绘制草图，再进入系统创建：

1. 顶部：大屏标题、业务范围、更新时间。
2. 第一行：4 到 6 个核心指标卡。
3. 中间：主要趋势图、排行图、结构图。
4. 右侧或底部：风险、告警、明细表。
5. 最底部：指标口径、数据来源或刷新频率。

从零创建大屏

在数据大屏列表点击“新建”后，会进入空白设计器。新建页面默认只有画布、图层区和右侧大屏配置。

空白画布截图展示了新建后的初始状态。左侧通常是图层和资源区域，中间是画布，右侧是大屏配置。第一步先设置画布尺寸、背景、配色和名称，再添加图表。

右侧配置区中的“尺寸、基础配置、背景、配色”是创建大屏的基础。常见问题是组件完成后才发现画布比例不合适。比例一旦改动，组件位置和字号通常都要重新调整。

第一步：搭页面骨架

高质量大屏依赖稳定的页面结构，而不是单个组件的视觉效果。建议先按区域放置组件，再逐个绑定数据。

标题、说明、更新时间和指标口径通常用文本组件完成。创建骨架时，可以先添加一个富文本作为标题，再复制几个文本组件作为区块标题。这样页面结构会先稳定下来，后续添加图表时更容易保持层级一致。

一个常见的示例结构：

创建时不宜一次性铺满所有组件。先做一行标题和指标，再做中间核心图表，最后补充明细和说明。

第二步：添加图表组件

点击顶部“图表”，会打开组件选择面板。大屏里常用的组件包括指标卡、仪表盘、水波图、明细表、汇总表、折线图、柱状图、分布图、关系图和双轴图。

组件面板用于添加图表。大屏中的组件可以点击添加，也可以拖到画布。首次配置建议先添加指标卡、折线图、条形图、明细表，等页面结构稳定后再加入漏斗、矩阵、地图等复杂组件。

选择图表时应按业务问题选择，而不是按图形外观选择：

添加组件后，先把它放到大致区域。组件位置、大小和层级后续可继续调整。

第三步：绑定数据

大屏组件的配置逻辑和仪表盘一致：选数据集，拖维度和指标，检查预览结果，再调整样式。

如果还没有可用数据集，先回到“数据集”章节准备模型。大屏不适合直接处理未清洗数据，应使用已经整理好的数据集：字段名称清楚、日期类型正确、指标口径明确、缓存或直连方式已经验证。

操作顺序：

1. 选中画布上的图表组件。
2. 在右侧切到数据配置。
3. 选择数据集。
4. 把维度拖到分类、时间轴、系列或行列位置。
5. 把指标拖到数值位置。
6. 点击刷新或更新图表。
7. 检查数值是否和数据集预览一致。

配置不同组件时要注意：

如果图表没有数据，先清空筛选，再回到数据集预览。确认数据正常后再调整样式。

绑定数据时建议每做完一个组件就保存一次。大屏组件较多，等全部组件都完成后再保存，一旦浏览器刷新或网络异常，可能丢失较多配置。

配置大屏导出按钮

v1.5.5 起，数据大屏支持“导出按钮”组件。它适合在大屏上放一个明确的下载入口，让用户按当前筛选条件导出某个表格视图。

导出按钮通常和明细表或汇总表配合使用：

配置步骤：

导出按钮不是简单截图下载。表格视图导出会结合当前筛选、联动、外部参数、Web 参数和钻取上下文生成 Excel。正式大屏中建议把导出按钮放在明细表附近，并用清晰文案说明导出范围。

实战：做出示例里的关键组件

内置大屏里有几类组件适合复用：累积流图、阶段漏斗、投入产出矩阵、明细表、趋势图和时效排行。下面按“组件效果、示例字段、编辑器配置”说明。示例字段只用于演示配置思路，正式页面应替换为企业自己的需求、项目、人员、质量或经营字段。

部署需求累积流图

这张图用于看需求在不同阶段的堆积情况。面积越厚，说明该阶段积压越多；整体上升，说明需求池总量在增长；某个颜色持续变厚，通常代表该阶段成为瓶颈。

演示示例配置：

创建步骤：

使用提醒：累积流图依赖“每日阶段快照”。如果只有当前状态，没有历史快照，就无法还原阶段变化，只能做当前阶段分布。

可以按以下样例准备数据。字段名不必完全一样，但含义要对应：

如果数据源是一条需求一行，也可以先在 SQL 或数据集中按日期和阶段聚合成这种结构，再给大屏使用。

阶段周期漏斗

这张图用于展示每个阶段的数量、平均耗时、P90 耗时和超期数量。它比普通漏斗更适合研发交付场景，因为用户能同时看到“量”和“耗时主要集中在哪些阶段”。

演示示例配置：

创建步骤：

使用提醒：漏斗的重点不是视觉宽度，而是清晰呈现阶段差异。阶段太多时，优先保留主流程阶段，把过细状态归并。

阶段周期漏斗的字段可以从需求流转记录中计算出来。示例结构如下：

如果没有 P90 字段，可以先用平均耗时和超期数做简化版。等数据口径成熟后，再补 P90。

人力投入-需求产出矩阵

矩阵图用于比较投入和产出。横轴看人力投入，纵轴看交付需求数，气泡大小看需求工时，颜色代表效率等级。它适合回答“哪些团队高产高投、哪些团队低产高投”。

演示示例配置：

创建步骤：

使用提醒：矩阵图最怕口径不清。投入人天、需求数和需求工时的统计周期必须一致，否则象限判断会误导用户。

矩阵图的数据结构可以按团队、人员或供应商聚合。示例：

配置象限时，基线不应随意设置。建议使用团队平均值、预算基线或历史中位数。这样用户看到“低产高投”时，知道判断依据是什么。

需求流动明细表

明细表用于承接上方图表的下钻。用户看到阶段堆积或效率异常后，需要在表里找到具体需求、项目、负责人和在库天数。

演示示例配置：

创建步骤：

使用提醒：大屏表格不是 Excel。字段要少、列名要短、排序要明确，建议只展示需要现场处理的记录。

吞吐量月度趋势

趋势图用于看交付节奏。示例中用月份做 X 轴，同时展示进入需求数和交付需求数。

配置方式：

创建时要注意：日期维度要能正确排序；如果展示月度趋势，建议统一成 YYYY-MM，不要混用中文月份和日期文本。

如果要放到大屏主图区，趋势图建议只放 2 到 3 条线。线条过多时，观众难以远距离辨认。需要展示更多部门时，可以改成部门筛选或排行图。

分段时效 P90

这张图用于比较各阶段平均耗时和 P90 耗时。P90 比平均值更能暴露长尾问题。

配置方式：

创建时建议把 P90 和平均值使用不同颜色。若阶段名称较长，横向条形图比竖向柱状图更容易阅读。

P90 的含义要在页面上说清楚。可以在图表标题或说明里写“P90 表示 90% 的需求在该天数内完成”。如果观众不熟悉统计指标，只写 P90 会影响理解。

第四步：调整样式

数据正确后，再做样式。大屏样式的目标是“远距离可读”，而非开启所有视觉效果。

编辑器截图适合对照右侧样式面板。选中不同组件，右侧配置项会变化。调整样式时先统一标题、字号和单位，再处理颜色、边框、背景和动画。

选中组件后，右侧会显示该组件的配置项。先调整位置、尺寸和层级，再调数据和样式。大屏制作中不要频繁手工拖出不同尺寸，建议同一行组件保持相同高度，相邻组件保持一致间距。

样式调整顺序：

1. 标题：先统一大屏标题、图表标题和指标标题的字号。
2. 数字：核心指标数字要最大，单位要贴近数字。
3. 颜色：同类指标使用同一颜色，异常和风险使用固定警示色。
4. 背景：每个组件可以有轻微底色，但背景不能影响文字识别。
5. 标签：只显示必要标签，密集图表不宜全开标签。
6. 图例：系列多时保留图例，系列少时可以关闭。
7. 边距：组件之间保持一致间距，避免挤在一起。

复刻示例大屏效果时，可按以下方法：

第五步：管理图层

左侧“图层管理”用于管理组件层级。大屏组件多时，图层比鼠标点选更可靠。

常用操作：

实际制作时，建议先放背景和装饰，调整完成后锁定；再放指标、图表和表格。复制组件后，立即修改标题、字段和说明，避免出现多个组件展示同一份数据。

第六步：添加查询和弹窗

数据大屏一般以展示为主，但值班中心、会议汇报和项目看板经常需要筛选。

查询组件配置步骤：

1. 点击顶部“查询组件”。
2. 把筛选器放到弹窗区或页面边角。
3. 绑定要影响的目标图表。
4. 选择目标字段。
5. 设置默认值。
6. 预览时切换条件，确认所有目标图表同步变化。

不常用的筛选器建议放在弹窗区。主画面只保留展示内容，操作人员需要时再打开筛选。

第七步：预览、保存、发布

编辑器里的画布不等于最终展示效果。每做完一轮布局，都要保存并预览。

预览页接近最终用户看到的效果。上线前必须用预览检查一次，尤其是全屏适配、文字是否被截断、表格是否能滚动、图例是否遮挡数据、刷新后图表是否仍能加载。

预览时检查：

1. 是否铺满屏幕，没有黑边、裁切和滚动条。
2. 核心数字是否能远距离看清。
3. 图表是否全部加载。
4. 表格是否能滚动或完整展示。
5. 图例、标签、坐标轴是否清楚。
6. 背景和装饰是否影响阅读。
7. 刷新后数据是否稳定。

确认无误后再发布。发布后，授权用户才能看到正式版本。修改已发布大屏时，建议先复制一个副本，确认没问题后再替换正式页面。

使用内置示例

Crest 内置了多张示例大屏，可作为学习模板使用。建议按布局、组件、字段和样式顺序查看。

学习示例时不建议直接复制颜色。先按以下顺序拆解：

1. 这张大屏解决什么业务问题。
2. 顶部指标卡回答什么问题。
3. 主图区用什么图说明趋势、瓶颈或结构。
4. 明细表帮助用户追到哪些记录。
5. 哪些字段可以替换成自己的字段。

示例不是强制模板。它们提供的是一种组织方式：先总览，再分析，再下钻，再说明口径。

连锁零售经营驾驶舱

这是经营类示例。它的价值不在于固定使用零售字段，而是展示“指标总览 + 趋势 + 排行 + 转化 + 明细”的组织方式。换成制造、教育、医疗或项目管理场景时，可以保留结构，替换字段。

这个大屏适合学习经营类驾驶舱的布局。顶部用一句话说明业务范围，中间用指标卡展示销售、订单、会员、客单价、毛利率和履约率，下面用趋势、排行、漏斗、结构和明细覆盖经营闭环。

学习重点：

1. 第一行指标卡负责回答“现在整体怎么样”。
2. 趋势图回答“最近有没有变化”。
3. 门店排行和商品排行回答“谁贡献最大”。
4. 漏斗和履约率回答“转化和交付有没有问题”。
5. 明细和预警回答“需要追到哪一项处理”。

如果要改成自己的经营大屏，可按这个顺序替换：

1. 把标题改成自己的业务主题。
2. 用自己的销售额、订单数、会员数替换指标卡。
3. 用门店、区域、产品、渠道字段替换排行图。
4. 保留“趋势 + 排行 + 结构 + 预警”的布局。
5. 最后替换颜色、Logo 和口径说明。

复刻这张示例时，可按以下顺序做：

字段替换示例：

研发经营总览大屏

这是管理层总览示例。它把多个主题放在一屏，但仍然有清晰顺序：核心指标在前，需求流动、人力、交付、成本和风险依次展开。复用时不宜继续增加主题，应优先保持页面可读。

这个大屏适合学习研发管理总览。它把吞吐量、人力容量、DORA 交付、预算执行和风险下钻放在一个页面里，适合管理层快速判断研发组织是否健康。

阅读顺序：

1. 查看顶部指标卡：交付需求、活跃需求、容量匹配度、投入工时、代码净行数、供应商 SLA。
2. 再看累积流图：需求是否在某个阶段堆积。
3. 看吞吐量和容量对比：交付速度是否匹配人力投入。
4. 看 DORA 和预算：交付效率和成本是否异常。
5. 最后看项目明细：定位具体项目。

复用建议：

• 适合做“公司级研发总览”。
• 指标卡数量不要再增加，过多会削弱重点。
• 下方明细表保留，用于从总览追到项目。

复刻这张示例时，可按以下顺序：

复刻时不宜把研发活动指标全部放入同一屏。管理层总览的重点是“交付结果、投入产出、风险”，代码提交、缺陷、工时等细节可以放到二级大屏。

需求流动与交付效率大屏

这是流程效率示例，适合学习“从总量到瓶颈再到明细”的设计方法：累积流看堆积，漏斗看阶段，P90 看长尾，明细表定位具体需求。

这个大屏围绕需求生命周期设计，适合跟踪需求从进入需求池到发布上线的流动效率。

学习重点：

1. 累积流图看阶段堆积。
2. 漏斗看每个阶段数量。
3. P90 时效用于定位耗时瓶颈。
4. 吞吐趋势看交付节奏。
5. 明细表用于定位具体需求。

创建同类大屏时，数据集至少要有：需求编号、阶段、进入阶段时间、离开阶段时间、负责人、项目、优先级、状态。没有阶段时间，难以做出时效分析。

复刻这张示例时，可按以下顺序：

如果没有完整的阶段快照，可以先做简化版：顶部指标卡 + 当前阶段分布 + 阶段耗时排行 + 明细表。等数据补齐后，再升级成累积流图。

人力容量与供应商经营大屏

这是资源经营示例。它适合用在人力、供应商、预算、产能这类主题。复用时要特别注意单位统一：人数、人天、工时和金额不能混在一个指标里解释。

这个大屏适合学习资源管理类页面。它把人力投入、角色分布、供应商 SLA、预算执行和人员明细放在一起，用于判断资源是否够、成本是否合理、供应商是否稳定。

复用时注意：

1. 容量类指标要明确单位，是人天、工时还是人数。
2. 供应商指标要写清统计周期。
3. 预算图要明确是预算执行率、预算余额还是实际成本。
4. 人员明细通常包含敏感信息，对外展示前要脱敏。

复刻这张示例时，可按以下顺序：

字段替换时要统一单位：人数、人天、小时、金额不能混在一个图里直接比较。确实需要比较时，用两个指标或双轴，并在标题里写清楚。

工程活动与代码效能大屏

这是工程效能示例，适合学习如何把活动量、交付结果和质量结果放在一起看。复用时不应只做代码行数排行，应结合需求、发布和缺陷指标一起判断。

这个大屏适合学习工程效能类页面。它把工时、代码变更、DORA 趋势和明细追踪放在一起，关注研发活动是否转化为有效交付。

使用建议：

1. 不应只看代码行数，必须结合需求、工时和发布结果。
2. DORA 指标适合看趋势，不适合孤立比较单日数值。
3. 工时分类要有清晰口径，避免把会议、支持和返工混在一起。
4. 明细表保留项目、负责人和周期，便于复盘。

复刻这张示例时，可按以下顺序：

工程效能类大屏容易被误用。建议在页面说明里写清楚：代码行数和提交次数只代表活动量，不直接等于价值；价值判断要结合需求交付、质量和业务结果。

质量稳定性与风险预警大屏

这是风险预警示例，适合学习如何用颜色和层级突出异常。复用时要先定义风险等级，再配置颜色和阈值；红色不应仅作为装饰色使用。

这个大屏适合学习风险预警页面。它关注缺陷密度、生产问题、变更失败、恢复时间和项目风险清单，适合质量例会和发布风险评审。

复用建议：

1. 顶部放核心风险指标，用户先判断风险等级。
2. 中间用矩阵或趋势图展示风险变化。
3. 底部保留风险清单，方便责任人跟进。
4. 风险颜色要固定，例如红色代表高风险，黄色代表关注。
5. 对外展示时避免暴露客户名称、事故细节和人员信息。

复刻这张示例时，可按以下顺序：

风险类页面不应追求“颜色越多越突出”。颜色是告警语言：红色必须代表需要处理，黄色代表关注，绿色代表正常。规则一旦确定，就不应在不同图表里随意改变。

如何把示例改成自己的大屏

效率较高的做法不是从空白画布开始，而是复制一个结构相近的示例，再逐步替换。

替换时常见出错点是字段口径。比如示例里的“销售额”可能是近 180 天含税销售额，实际数据集可能是本月不含税销售额。标题、单位和说明必须一起改。

替换顺序建议固定为“标题 → 数据集 → 字段 → 单位 → 颜色 → 说明”。不能只改标题和颜色，否则页面视觉上已经调整，数据却仍然是示例口径。

替换完成后做一次对照检查：

清晰可读的设计规则

1. 一屏只突出一个主题。
2. 主标题要明确，不写口号式标题。
3. 指标卡最多 6 个，超过 6 个会失去重点。
4. 字号按层级设置：主标题最大，指标数字次之，图表标题再小。
5. 同一类图表使用同一种颜色规则。
6. 背景、边框、装饰只用于分区，不抢数据。
7. 表格不宜放置过多列，否则远距离难以阅读。
8. 动效少用，值班和会议场景以稳定阅读为主。
9. 大屏底部保留口径说明和更新时间。
10. 发布前一定用目标设备全屏检查。

常见问题