1. 概述

本文将依次介绍每个控件类组件的配置方式。

2. 详细说明

选项卡

选项卡的入口如下图所示。

选项卡的典型应用场景，是通过选项卡的切换来控制其他组件的展示状态。详情可参考章节“快速入门->组件的配置->组件的交互配置”中“选项卡控制柱图/饼图展示切换”的例子。

可以直接修改静态JSON数据来调整选项卡的数据项。

也可以通过API或者数据模型，接入一个维度字段，读取数据项展示。

矩形卡片

矩形卡片的入口如下图所示。

矩形卡片通常可以作为一些图表的背景装饰。在样式面板，可以设置矩形卡片的标题、背景、边框、圆角等样式。

文字

文字组件的入口如下图所示。

可以直接修改静态JSON来设置要展示的文字内容。

也可以通过API或者数据模型，拖入一个文本字段来展示。

可以在样式面板修改文字的样式。

滚动文字

滚动文字的入口如下图所示。

滚动文字的设置项同文字组件基本类似。在文字组件的基础上，滚动文字支持设置文字的横向滚动效果。通常适合循环轮播显示一段较长的文字内容过。

图片

图片组件的入口如下图所示。

可以在静态数据中设置图片的URL地址。

也可以通过API或者数据模型，拖入一个含有图片URL地址的字段。 或者直接上传本地的图片文件。

网页iframe

网页iframe组件的入口如下图所示。

可以在大屏中嵌入一个网页。

视频流

视频流组件的入口如下图所示。

视频流组件的典型应用场景，是接入监控摄像头拍摄到的实时视频流。支持HTTP-FLV跟HLS两种协议。

多行文本

多行文本组件的入口如下图所示。

相比于文字组件，多行文本适合于展示较长的文字段落。

同时，多行文本还支持设置纵向的文字滚动轮播。

轮播图

轮播图组件的入口如下图所示。

可以上传多张图片，并设置自动轮播。

下拉单选

下拉单选组件的入口如下图所示。

下拉多选

下拉多选组件的入口如下图所示。

时间选择器

时间选择器组件的入口如下图所示。

事件时间轴

事件时间轴的入口如下图所示。

事件时间轴往往被用来轮播呈现大事记。

相关的数据配置如下图所示。

• 时间标题：大事节点的日期。
• 描述文字：大事节点的相关描述。

数据可来自静态JSON、API或数据模型。

事件时间轴可配置的图形样式如下图所示：

• 布局：设置时间轴的方向和节点分布。
• 轴线样式：设置轴线的线型、粗细和颜色。
• 点样式：设置选中以及未选中的节点形状和尺寸。
• 时间标题样式：设置时间标题的样式。
• 描述文字样式：设置描述文字的样式。
• 动效：设置组件的轮播效果，包括：是否轮播、轮播间隔、动画时长、是否联动。

事件时间轴的交互事件配置支持：联动、入场动画、写入参数、响应事件。

线条

线条的入口如下图所示。

线条组件常用于装饰大屏。

可为线条组件配置线条样式，包括线条的粗细、线型、颜色以及端点形状。

线条的交互事件配置支持：入场动画和响应事件。

全屏切换

全屏切换如下图所示。

全屏切换常用于对大屏展示状态的切换。阅览大屏时，点击即可进入全屏状态，再次点击，退出全屏状态。

图形样式的设置支持更改按钮样式，如下图所示，可以通过上传图片实现全屏和退出按钮的样式自定义。

全屏切换的交互事件配置支持：入场动画和响应事件。

开关

开关如下图所示。

开关用于联动控制其他组件。例如，利用开关控制图表的显示或隐藏状态。

可以在图形样式配置区域修改开关颜色，如下图所示。

开关目前支持的交互事件包括：入场动画、参数写入、以及响应事件配置。

开关组件的交互参数配置过程与其他组件有些许不同。开关组件在传递参数值时，不再需要选择字段，通过开关状态自动传入true或false，数据类型为布尔型。以下图为例，开关组件的传参逻辑为：当开关状态切换为”开启“时，”将true写入参数test“的动作被触发；当开关状态切换为”开启“时，”将false写入参数test“的动作被触发。

网页轮播

网页轮播组件如下图所示。

网页轮播组件功能一般用于需要展示多个网页的情况，较于网页iframe组件，网页轮播组件多了轮播能力。

网页轮播通过识别URL来实现网页的识别与展示。可以通过直接修改静态JSON或连接API或数据模型的方式实现数据更改。数据格式上，仅支持拖入一个有多值的字符串字段.

可以在样式配置区域对轮播效果进行配置。轮播设置内容如下图所示，可以改变轮播的时间间隔、切换速度、转场动画、以及切换器的显示。

网页轮播目前支持入场动画和响应事件的交互配置，如下图所示。

视频

视频组件如下图所示。

视频组件用于在大屏中实现视频播放。

可以在数据配置区写入URL完成视频插入，如下图所示。可以直接修改静态jSON，也可以通过接入API或数据模型实现数据写入。需要注意，视频组件只能读入一个字段的一个数值，多余数据将不生效。

也可以从视频样式配置区域进入，在“上传视频”区域选择本地视频导入。

视频的样式配置包括视频配置和滤镜配置：

• 视频配置：支持视频及封面上传、显示设置和播放设置。
• 滤镜配置：包括高斯哦胡、亮度。对比度、灰度、色相、饱和度和褐色调整。

视频组件支持的交互能力包括入场动画和响应事件设置。

注释框

注释框组件如下图所示。

注释框在大屏展示中起到信息提示作用，作用效果如下：光标hover显示提示信息。

注释框文本可以通过静态JSON直接编辑。

也可以通过连接API或数据模型导入注释文本。

注释框的图形样式配置包括：

• 图标样式：实现提示icon的样式调整，包括类型、颜色、尺寸、位置和边框样式。
• 注释框样式：配置hover显示的文本框样式，包括上间距、背景颜色和圆角程度。
• 注释文本：配置注释文本的显示样式，包括文字样式、大小、颜色、对齐、是否缩进、行间距及列表样式。

注释框支持的交互配置包括入场动画和响应事件的配置。

滤镜

滤镜组件如下图所示。

滤镜组件在编辑页展示为一个透明的矩形框，通过叠加在别的组件上实现滤镜遮罩的效果。

以黑白滤镜为例，其在图片组件上的覆盖效果对比如下图所示。

滤镜的样式设置包括：亮度、对比度、饱和度、复古、灰度、反相、色相和模糊。

滤镜组件支持的交互能力配置包括：入场动画、写入参数和响应事件配置。

轮播组

轮播组组件如下图所示。

与轮播图组件功能相同，用于展示多个图片，区别是展示形式有所区别。

• 轮播图：一次只展示一张图片，切换器在下方。
• 轮播组：一次可展示多张图片，切换器在两侧。

可以在数据配置区域配置待展示的图片URL。可以通过直接修改静态JSON，也可以通过接入API或数据模型的方式写入图片URL。

也可以在样式配置区域从本地上传图片。从样式配置区上传的图片展示优先级高于数据配置区写入的图片，因此如果样式区传入了图片，轮播组将展示上传图片而非数据区写入的图片。

轮播组的样式配置包括：

• 展示区配置：调整展示区尺寸、一次展示的图片个数、图片间距和不透明度。
• 切换器配置：调整背景样式及颜色，切换器button样式、粗细和颜色，是否展示缩略图。
• 动画效果配置：调整轮播动画效果，包括动画类型、轮播动画持续时间、停留时长。

轮播组支持的交互配置包括入场动画和响应事件。

树形选择器

树形选择器组件如下图所示。

树形选择器常用于选项间存在层级关系的场景，通过将选项分组展示，提高选项展示的清晰与美观程度。

可以在静态JSON区域直接写入选项。

也可以通过连接API或数据模型实现数据写入。

选中字段并将其拖入层级区域，字段中的值将按拖入顺序实现层级嵌套。以下图“地区-省份”为例，地区为一级字段，省份为二级字段。

树形选择器的图形样式设置包括：

• 选择框：配置下拉框未展开时，选择框的样式，包括边框、背景、文字内容及样式。
• 下拉框：配置下拉框的边框、背景和字体样式。

树形选择器具有的交互能力包括图表联动、入场动画、写入参数和事件响应。

图标联动有筛选、下钻、高亮三种类型：

• 筛选：被联动的图表只处理包含选中项的数据行，然后展示结果。
• 下钻：被联动的图表将处理选中项的下一级数据所在的数据行，然后展示结果。在开启下钻联动前，需要在被联动图表的数据配置区域对需要实现下钻的字段进行下钻配置

下图分别是下钻和筛选的联动结果。

热区

热区组件如下图所示。

热区组件是一个透明矩形框，一般覆盖在其他没有交互能力的组件上，为热区矩形范围内增加交互行为。

热区可配置的交互能力包括：图表联动、参数写入、入场动画和响应事件。

写入参数的触发时机除了点击组件外，还有鼠标移入或移除热区区域。