You need to enable JavaScript to run this app.
导航
数字大屏入门指南
最近更新时间:2025.01.24 15:17:02首次发布时间:2022.07.01 18:46:37

1.数字大屏入门概述

DataWind 数字大屏作为平台重要的数据可视化呈现展示模块,可实现数据故事设计实施一体化,0 门槛低学习成本帮助用户实现酷炫效果数字大屏搭建。数字大屏相对仪表盘来说更加着重数据可视化,重点在展现层,产出物更适合面向领导层、公众、全体员工,数据上的汇总度相对更高。通过本篇入门指南,我们希望能帮助您快速了解数字大屏的基本功能和使用流程。

2.用户试用准备
  • 如果未采购数据大屏,您可以在火山引擎官网中注册智能数据洞察 SaaS 专业版并登录,即可进行 30 天免费试用(每个在火山引擎官网新注册的用户都可以获得 30 天免费试用机会,详情请见免费试用开通)。
  • 如果您所在的公司或您个人已经购买智能数据洞察 SaaS 专业版、数字大屏-高级版或者数字大屏-尊享版,可以直接登录使用。
  • 如果您需要使用数字大屏相关的增值功能:开发数字孪生项目或者三维大屏看板,欢迎您联系商务人员进行咨询。

3.数字大屏学习路径

章节

学习任务

任务简介

第 1 章快速了解

1

数字大屏概述

了解大屏产品亮点、与仪表盘的不同以及产品功能整体介绍

第 2 章正式使用

1

数字大屏数据来源概述

学习接入组件数据源

2

数字大屏搭建技巧

学习大屏搭建的布局、配色、字体和设计准则

3

可视化组件概述

学习使用可视化组件搭建大屏,了解组件特性

4

数字大屏装饰

学习使用装饰素材丰富大屏页面效果

5

数字大屏资源管理

学习使用资源管理快速查看画板模版与设计素材

6

数字大屏发布功能

学习从画板或者从列表页右键菜单进行发布

第 3 章案例演示

1

数字大屏效果

了解大屏的应用场景及效果

第 4 章进阶学习

1

数字大屏 DevTools 搭建助手

DevTools 搭建助手能根据预置规则监测用户当前的搭建行为是否正确/合理,发现当前大屏中的问题并给出修改建议

2

数字大屏自定义模板

学习将大屏共享为模板并在项目内使用

3

数字大屏演播厅

学习配置大屏自动轮播方案

4

数字大屏版本管理

熟悉版本管理的发布设置、回滚、修改名称、锁定、删除等操作

5

数字大屏事件交互

了解大屏的交互功能,包括交互配置、筛选器、元点击事件、图表联动、VFormula 语言定义、参考线和下钻

4.数字大屏使用流程

流程

流程名称

流程含义

概览

第一步

进入大屏

在顶部组件,点击「大屏」进入。

Image

第二步

新建大屏

通过「从空白画布搭建数字大屏」和「从模板搭建数字大屏」两种方式新建一个大屏。

Image

第三步

添加组件

在画布左侧可以选择可视化图表组件,进行添加。

Image

第四步

数据准备

当选择可视化图表组件后,支持 5 种数据接入方式,包括 HTTP API、静态数据(Static)、数据集(Dataset)、JavaScript、数据连接。其中数据连接支持连接 MySQL、飞书表格和飞书多维表格三种数据来源。共计支持接入 7 种数据来源。

Image

第五步

调整样式布局

布局有 16:9 的常用信息屏布局和 32:9 的拼接屏布局,根据大屏最终呈现效果进行选择。

Image

第六步

增加素材/装饰美化大屏

在装饰模块中,有主标题背景、小标题背景、装饰线、图标等 20+素材可供选择,也可以上传自定义组件和素材,对大屏进行美化。

Image

第七步

预览、保存并发布

支持从当前页或者从首页预览,预览后保存大屏并进行发布。

Image

第八步

设置大屏演播方案

支持配置大屏自动轮播方案,可以自行设定轮播的大屏以及轮播时间。

Image

5.从 0-1 搭建数字大屏

5.1 新建大屏

(1)进入到大屏模块,点击「大屏」功能按钮,来到功能模块界面,如下所示。

(2)点击新建大屏,跳转到新建页面。如果您有完善的设计稿且对大屏设计的结果明确,可以选择从空白画布新建;如果您暂时无明确的制作思路,可以使用我们提供的模版进行快速搭建。

5.1.1 从模板搭建数字大屏

(1) 如果您选择从模版搭建数字大屏,此处以【今日消耗实时监控】模板为例,点击即可使用此模版。

  • 说明:模板中的【职场重点指标实时监控】、【电商客服核心指标监控】、【今日消耗实时监控】、【今日新开实时监控】属于仪表盘+素材图的一类大屏;【线上繁荣度大屏】和【今日文旅线上繁荣度大屏】属于地理信息+动效的一类大屏,可以根据需求使用模板。

Image
(2)新建大屏时,您可以自定义大屏的名称和大屏保存地址,完成后点击确定。

(3)创建成功后,会自动跳转到大屏的画布编辑器页面,您可以看到刚才选择的【今日数据实时监控】大屏模板。

5.1.2 从空白画布搭建数字大屏

(1)如果您选择创建空白画布,点击「使用空白大屏」。对大屏进行命名,并选择大屏的保存地址,完成之后点击确定。创建成功后会跳转到大屏的画布编辑器页面,可以看到一个空白画布。

(2) 根据您的需要,从左边的组件栏目中选择目标图表组件,图表组件的详细用法见图表组件。此处以百分比条形图为例。从左侧「组件」中选择「图表」的「百分比条形图」,点击之后即可在右侧画布中看到图表。

5.2 数据准备

数据的来源类型有 API、静态数据、数据集、JavaScript、数据连接,详见大屏数据来源
在资产模块,选择组件后,对组件的数据源数据进行选择。大屏模板的数据默认为静态数据,您可以替换为实际业务数据类型。此处以静态数据为例,建议您提前准备好目标数据,在 Excel 数据表中创建好数据复制过来。
按照如下步骤操作:
(1)在「图层」中点击某个图表组件,比如点击「折线图」,该图表组件会被选中。

对于某一些分组的图表,如下「今日累计消耗」点击之后,在左边的 Group 被选中,点击 Group 下的翻牌器,可以看到画布中的图表被选中,且右侧出现数据配置。即可进行下一步操作。

(2)此处以「今日累计消耗」的翻牌器图表为例,在画布下方的表格中复制您准备的数据。

(3)将您配置好的字段,拖拽到「指标」上。

(4)在右侧的「数据配置」里,您可以对指标进行自定义配置(字段展示名称、字段用途、字段聚合方式、数字保留几位小数、是否自动更新等)。

其他图表数据如需修改或者配置,可参考上述步骤做修改和新建。

5.3 修改图表展现样式

  • 若需要对图表的大小修改,可以直接选中该图表,出现如图所示白色边框,可以使用鼠标进行拖拽移动。
  • 若需要对图表的位置等进行调整,可以在上述状态下使用鼠标进行位置的移动。
  • 若需要对图表样式,比如颜色、字体等进行修改,可以在右侧样式上进行调整,更多操作说明见条形图

5.4 优化大屏

通过上述步骤的搭建,大屏已然初具雏形。为了进一步提升大屏的美感,突出重点内容,让大屏更加丰富,您可以从以下几个方面对大屏进行优化。

  • 在布局方面,建议你合理的分区和排列,确保重要信息能够第一时间吸引观众的注意力,同时保证整体画面的平衡与和谐。详细内容参考《布局》。
  • 在素材方面,我们不仅提供 20+ 种素材,也支持您上传自定义素材,增强大屏的层次感和美观度。详细内容参考《装饰》、《资源管理》。
  • 在配色方面,大屏配色通常存在两种:多种颜色的色板配色,以及相同色彩不同明度的连续配色。您可以选择一组既能够营造出舒适视觉氛围,又能与展示内容相得益彰的颜色对大屏进行配置。详细内容参考《配色》。
  • 在字体方面,大屏工具内置了数十种可商用字体,使用列表中的字体无需担心法务风险。详细内容参考《字体》。
  • 为了更好的帮助您搭建大屏,我们推出 DevTools 搭建助手,能够依据您预置的规则,实时监测当前的搭建行为是否正确合理。一旦发现当前大屏中存在的问题,DevTools 搭建助手会给出精准且实用的修改建议,助力您打造出更加完美的大屏。详细内容参考《数字大屏 DevTools 搭建助手》。

5.5 预览并保存

当完成数据、样式的调整配置之后,点击右上角的「预览」按钮即可进行大屏的效果预览,支持「从当前页预览」和「从首页预览」,预览大屏效果满意后,点击保存大屏。

5.6 发布并上线

保存大屏后,来到「列表」页,可以对大屏进行发布、查看、下载、编辑、授权、共享为模版等操作。

5.7 演播厅

制作好单个大屏后,我们也可以在「演播厅」界面配置大屏的自动轮播方案,根据自身需求和展示目的,设定轮播的大屏以及轮播时间。