本文为您介绍跑马灯的使用详情。
组件概述
跑马灯是一种文字组件,能够通过从右向左动态滚动的方式将组件中的溢出文本展示在可视化应用中。
若文字长度小于组件长度,则该组件内容不会滚动呈现。
使用场景
常用于在可视化应用中展示重要文字信息,使重要信息更加显眼,吸引用户注意。例如,提醒通知、弹幕评论等。
效果展示
单行文本
多行文本
前提条件
添加跑马灯
登录DataV控制台。
在工作台页面的数据看板区域,鼠标悬停至目标看板,单击编辑,进入看板的画布编辑页面。
在左侧导航栏的
列表下,单击跑马灯组件,添加该组件至画布。
您也可使用全局搜索添加相关组件。
接入业务数据
添加组件后,您可将已准备的业务数据接入组件进行显示。单击跑马灯,在右侧的数据源页签,即可选择该组件所要呈现的数据。
跑马灯接收的数据字段介绍如下。
字段
说明
value
组件显示的动态文本内容。
仅支持读取一个Value值进行展示,如有多个Value,默认读取第一个Value。
支持使用<br>标签换行。
示例跑马灯的数据结构及效果展示如下。
[ { "value": "DataV-Board是专业的数据看板搭建工具。<br>您可使用DataV-Board,创造属于您的大屏!" } ]
数据源的核心配置项介绍如下。
配置项
描述
选择数据源
支持接入CSV文件、API、各类数据库等多种类型数据,详情请参见支持的数据源类型。您可使用可视化表格或代码方式编辑数据字段。
配置过滤器(可选)
用于自定义过滤代码,实现数据的结构转换、筛选、展示和简单的计算,详情请参见管理数据过滤器。
配置数据映射
用于将所选数据源中的字段映射至组件对应的字段上,实现数据的实时匹配。单击图标可配置字段样式。
查看响应结果
用于实时展示组件所接入的数据。当组件数据源发生变化时,此处会对应展示最新数据。
单击数据响应结果,可查看编写的数据字段代码。
单击查看示例,可查看数据源接收的数组类型及代码示例。您可参考示例编写相关字段。
其他数据请求配置:
禁止加载态:勾选后,在组件更新或预览数据看板时,将不呈现组件初始化时的加载内容。
受控模式:勾选后,组件在初始化状态下不会请求数据。此时仅支持通过蓝图编辑器或全局变量事件发起数据请求。
自动更新请求:勾选后,平台会根据您设置的轮询时间,动态轮询更新数据;不勾选,则需手动刷新页面,或通过蓝图编辑器和全局变量事件来触发请求更新数据。
配置跑马灯
单击跑马灯组件,即可在右侧面板配置组件的基础样式、交互事件,以及蓝图交互配置。
样式配置
在样式面板,可配置跑马灯的文字大小、布局、动画时长等样式,相关配置项介绍如下。
您也可单击图标,通过关键词搜索,快速定位到所需配置项,搜索支持模糊匹配。详情请参见搜索配置项。
相关配置项介绍如下。
配置项 | 描述 | 图示 |
全局配置 | 定义组件在数据看板中的位置分布、透明程度、交互穿透。
| |
基础样式配置 | 定义组件文本的大小、字体、颜色,以及文字阴影等样式。 说明 文字阴影可叠加,但不能超过3个,过度使用可能会造成平台性能压力。 | |
动画配置 | 定义组件是否轮播,开启轮播后,组件内容才会以动画样式呈现。动画播放速率及时长配置如下:
|
高级配置
可定义跑马灯与其他组件间的交互。相关配置项介绍如下。
配置项 | 描述 | 图示 |
交互事件 | 定义与其他组件间的交互行为,实现组件联动。单击图标,即可定义相关交互事件及交互动作。 |
蓝图交互
可通过蓝图编辑器使用可视化连线方式,定义组件间的交互关系及行为逻辑。
操作步骤
在画布编辑页面,单击顶部菜单栏左侧的图标,进入蓝图编辑器。
在图层节点列表,鼠标悬停至跑马灯组件,单击图标,添加该组件至主画布。
通过连线方式,按需配置相关组件的蓝图交互效果。
示例如下。