DataWind 数字大屏作为平台重要的数据可视化呈现展示模块,可实现数据故事设计实施一体化,0 门槛低学习成本帮助用户实现酷炫效果数字大屏搭建。数字大屏相对仪表盘来说更加着重数据可视化,重点在展现层,产出物更适合面向领导层、公众、全体员工,数据上的汇总度相对更高。通过本篇入门指南,我们希望能帮助您快速了解数字大屏的基本功能和使用流程。
章节 | 学习任务 | 任务简介 |
---|---|---|
第 1 章快速了解 | ||
1 | 了解大屏产品亮点、与仪表盘的不同以及产品功能整体介绍 | |
第 2 章正式使用 | ||
1 | 学习接入组件数据源 | |
2 | 学习大屏搭建的布局、配色、字体和设计准则 | |
3 | 学习使用可视化组件搭建大屏,了解组件特性 | |
4 | 学习使用装饰素材丰富大屏页面效果 | |
5 | 学习使用资源管理快速查看画板模版与设计素材 | |
6 | 学习从画板或者从列表页右键菜单进行发布 | |
第 3 章案例演示 | ||
1 | 了解大屏的应用场景及效果 | |
第 4 章进阶学习 | ||
1 | DevTools 搭建助手能根据预置规则监测用户当前的搭建行为是否正确/合理,发现当前大屏中的问题并给出修改建议 | |
2 | 学习将大屏共享为模板并在项目内使用 | |
3 | 学习配置大屏自动轮播方案 | |
4 | 熟悉版本管理的发布设置、回滚、修改名称、锁定、删除等操作 | |
5 | 了解大屏的交互功能,包括交互配置、筛选器、元点击事件、图表联动、VFormula 语言定义、参考线和下钻 |
流程 | 流程名称 | 流程含义 | 概览 |
---|---|---|---|
第一步 | 进入大屏 | 在顶部组件,点击「大屏」进入。 | |
第二步 | 新建大屏 | 通过「从空白画布搭建数字大屏」和「从模板搭建数字大屏」两种方式新建一个大屏。 | |
第三步 | 添加组件 | 在画布左侧可以选择可视化图表组件,进行添加。 | |
第四步 | 数据准备 | 当选择可视化图表组件后,支持 5 种数据接入方式,包括 HTTP API、静态数据(Static)、数据集(Dataset)、JavaScript、数据连接。其中数据连接支持连接 MySQL、飞书表格和飞书多维表格三种数据来源。共计支持接入 7 种数据来源。 | |
第五步 | 调整样式布局 | 布局有 16:9 的常用信息屏布局和 32:9 的拼接屏布局,根据大屏最终呈现效果进行选择。 | |
第六步 | 增加素材/装饰美化大屏 | 在装饰模块中,有主标题背景、小标题背景、装饰线、图标等 20+素材可供选择,也可以上传自定义组件和素材,对大屏进行美化。 | |
第七步 | 预览、保存并发布 | 支持从当前页或者从首页预览,预览后保存大屏并进行发布。 | |
第八步 | 设置大屏演播方案 | 支持配置大屏自动轮播方案,可以自行设定轮播的大屏以及轮播时间。 |
(1)进入到大屏模块,点击「大屏」功能按钮,来到功能模块界面,如下所示。
(2)点击新建大屏,跳转到新建页面。如果您有完善的设计稿且对大屏设计的结果明确,可以选择从空白画布新建;如果您暂时无明确的制作思路,可以使用我们提供的模版进行快速搭建。
(1) 如果您选择从模版搭建数字大屏,此处以【今日消耗实时监控】模板为例,点击即可使用此模版。
(2)新建大屏时,您可以自定义大屏的名称和大屏保存地址,完成后点击确定。
(3)创建成功后,会自动跳转到大屏的画布编辑器页面,您可以看到刚才选择的【今日数据实时监控】大屏模板。
(1)如果您选择创建空白画布,点击「使用空白大屏」。对大屏进行命名,并选择大屏的保存地址,完成之后点击确定。创建成功后会跳转到大屏的画布编辑器页面,可以看到一个空白画布。
(2) 根据您的需要,从左边的组件栏目中选择目标图表组件,图表组件的详细用法见图表组件。此处以百分比条形图为例。从左侧「组件」中选择「图表」的「百分比条形图」,点击之后即可在右侧画布中看到图表。
数据的来源类型有 API、静态数据、数据集、JavaScript、数据连接,详见大屏数据来源。
在资产模块,选择组件后,对组件的数据源数据进行选择。大屏模板的数据默认为静态数据,您可以替换为实际业务数据类型。此处以静态数据为例,建议您提前准备好目标数据,在 Excel 数据表中创建好数据复制过来。
按照如下步骤操作:
(1)在「图层」中点击某个图表组件,比如点击「折线图」,该图表组件会被选中。
对于某一些分组的图表,如下「今日累计消耗」点击之后,在左边的 Group 被选中,点击 Group 下的翻牌器,可以看到画布中的图表被选中,且右侧出现数据配置。即可进行下一步操作。
(2)此处以「今日累计消耗」的翻牌器图表为例,在画布下方的表格中复制您准备的数据。
(3)将您配置好的字段,拖拽到「指标」上。
(4)在右侧的「数据配置」里,您可以对指标进行自定义配置(字段展示名称、字段用途、字段聚合方式、数字保留几位小数、是否自动更新等)。
其他图表数据如需修改或者配置,可参考上述步骤做修改和新建。
通过上述步骤的搭建,大屏已然初具雏形。为了进一步提升大屏的美感,突出重点内容,让大屏更加丰富,您可以从以下几个方面对大屏进行优化。
当完成数据、样式的调整配置之后,点击右上角的「预览」按钮即可进行大屏的效果预览,支持「从当前页预览」和「从首页预览」,预览大屏效果满意后,点击保存大屏。
保存大屏后,来到「列表」页,可以对大屏进行发布、查看、下载、编辑、授权、共享为模版等操作。
制作好单个大屏后,我们也可以在「演播厅」界面配置大屏的自动轮播方案,根据自身需求和展示目的,设定轮播的大屏以及轮播时间。