创建第一个大屏

概述

本文用一个门诊运营的小例子，走完 Sight Wall 的完整流程：新建空白大屏、建数据集、摆组件并绑定数据、点选联动、自检、保存、发布、预览与外链分享。全程使用内置数据集，不需要连接数据库。

功能入口

系统菜单「大屏设计」>「大屏管理」>「新建大屏」。设计器界面分区见大屏概述与设计器界面。

操作步骤

1. 新建空白大屏

1. 在「大屏管理」点击右上角「新建大屏」，弹出「新建大屏」对话框。
2. 「选择起点」里选「空白大屏」（只创建画布和演示数据集，主题为星耀蓝），点击「继续创建」。
3. 在「创建大屏」对话框填写「大屏名称」（必填，例如 门诊运营大屏），「用途说明」和「分类标签」可选，点击「创建并进入设计器」。设计器在新标签页打开。

提示：想从整屏模板起步，在第 2 步改选模板，可用「查看详情」先看结构，详见模板、模块与素材。

2. 确认画布

1. 在右栏「画布」页签的「基础」里确认「分辨率」。新建大屏默认 1920 × 1080，适配模式为「完整显示」，比例为 16:9。
2. 需要其他尺寸时，在「分辨率」下拉选预设，或选「自定义」后填「宽度」「高度」。详见画布与页面设置。

3. 建一个内置数据集

1. 在左栏切到「数据集」页签，点击「新建数据集」>「内置数据集」，打开「编辑内置数据集」对话框。
2. 「数据集名称」填 科室就诊。
3. 点击「粘贴数据」，把下面的表格（首行为列名，制表符分隔）粘进文本框，点击「确定导入」。系统会识别列类型，并替换现有的全部列和数据。

dept	visits
内科	1280
外科	960
儿科	720
妇产科	540
急诊	1100

4. 点击「确定」保存。左栏列表出现「科室就诊」，可用「数据预览」查看字段与行。

4. 摆放组件

在左栏「资源库」>「基础组件」中，把下面四个预设拖到画布（也可以用 Ctrl / Cmd + K 的「快捷插入」搜索）：

拖动组件边框调整位置与大小；选中多个组件后可用工具栏的对齐与等距按钮整理。

5. 绑定数据

标题：选中标题，在右栏「组件」>「内容设置」的「主标题」输入 门诊运营大屏。

指标卡：选中指标卡，在「内容设置」的「基本信息」里把「指标名称」输入为 总就诊量。把「指标数值」的来源由「固定值」切成「数据集」，「数据集」选 科室就诊，「字段」选 visits，「取值策略」选「求和」。

柱状图：选中图表，在「内容设置」点击「编辑图表配置（数据 / 系列 / 样式）」，在弹出的「图表配置」对话框的「数据」页签里，「数据集」选 科室就诊，「类别字段(X轴)」选 dept；「系列配置模式」选「字段名」，在「系列配置」里添加一行：系列名称填 就诊量，数据字段选 visits，汇总方式选「求和」。图表配置的完整说明见图表组件。

排行：选中排行，在「内容设置」的「数据」段，「榜单来源」选「数据集」，「数据集」选 科室就诊，「名称字段」选 dept，「数值字段」选 visits。

6. 加一条联动

大屏在预览里，点柱子、榜单项或表格行就能按该值过滤本屏，不需要配置（见交互与联动）。需要显式联动时：

1. 选中柱状图，切到右栏「交互」页签。
2. 在「加一条联动」里，「什么时候」选「点击数据项」，「做什么」选「高亮同名项」。
3. 点击「加这条联动」。

配置后，点击柱状图某一项，本页其他图表里的同名项会一起高亮，再点一次取消。

7. 自检、保存、发布

1. 点击工具栏「自检」，查看是否有指向不存在数据集的绑定、仍显示写死内容的组件等，见自检与快捷键。
2. 点击顶栏「保存」，提示「大屏已保存」。
3. 点击顶栏「发布」，在「发布版本」里填「版本说明」（最多 200 字），点击「发布」，提示「大屏已发布」。
4. 点击顶栏「预览」，在新标签页看运行效果，试一下点击联动和右键菜单。

8. 外链分享

1. 回到「大屏管理」，找到这块大屏，点击卡片上的「外链分享」图标。
2. 在「外链分享」对话框打开「开启外链」，设置「访问密码」和「IP 白名单」，点击「保存」，再点「复制」得到外链地址。

发布、版本与分享的细节见预览、发布与分享。

示例

完成后的大屏应包含：一个标题、显示 4600 的「总就诊量」指标卡（1280 + 960 + 720 + 540 + 1100）、一张五根柱子的柱状图、一份按就诊量排序的科室排行。预览中点「内科」柱子，本屏引用 科室就诊 的组件按 dept = 内科 过滤，屏幕顶端出现「正在按「内科」过滤本屏」提示条，点「取消」恢复。

注意事项

注意：「预览」和外链默认读取已发布的版本。保存后没有发布的修改，只有在运行页地址后加 ?version=draft 才能看到。

注意：新建大屏时选的是空白大屏，它带有一份演示数据集；上线前把组件绑定到自己的数据集，并用「自检」确认没有组件还在显示写死内容。

相关文档

• 大屏概述与设计器界面
• 组件总览
• 数据接入
• 交互与联动
• 预览、发布与分享