轮播表格

文档基于轮播表格v1.1.23版本

组件说明

轮播表格组件整体结构如组件结构图所示，组件支持列表内容支持超链接配置，同时也支持图片格式的列表内容，轮播表格通过轮播动画的方式，将数据信息以列表的形式展示在可视化应用中。

效果案例

组件结构

*轮播表格组件结构说明

一、样式

在样式中可以设置组件的基本属性、全局、行配置和列配置。

1、基本属性

位置尺寸

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

基本柱状图组件尺寸不影响组件内容显示、组件动画。

默认隐藏

勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。

2、全局

行数

默认显示5行数据，在此可自由配置显示数据行数。

行间距

数据行之间间距。

动画

列表数据实际条数多于展示数据时，可以启用组件动画进行行数据轮播。

当行数据少于或等于展示数据时，启用动画也不对仅有数据做轮播。

动画类型

组件预置两种动画模式：逐条、全部。

*动画类型配置项说明

动画类型-全部动画配置项说明：

配置项	说明
动画形式	分为从下而上、翻牌两种动画形式。
轮播间隔	轮播动画时间间隔。
背景固定	轮播时行背景是否保持固定，或跟随行数据滚动。

动画类型-逐条动画配置项说明：

配置项	说明
动画衔接	分为从头开始、首尾衔接两种动画形式。
轮播间隔	轮播动画时间间隔。
背景固定	轮播时行背景是否保持固定，或跟随行数据滚动。

水平滚动

当轮播表格横向距离较窄时，可以设置水平滚动来滚动显示数据。

轨道

可配置轨道粗细、颜色及轨道圆角值。

滑块

可配置滑块粗细、颜色及滑块圆角值。

3、行配置

表头

如下示例图所示，表头内是配置轮播表格内表头的配置项。分为表头行高、文本样式、对齐方式和背景四项。

*表头配置项

行高

即设置表头行高值。

文本样式

配置序号列中文本的样式，可配置文本字体大小、颜色、粗细及字体。

配置项	说明
大小	配置文本的大小
颜色	配置文本的颜色
字体粗细	配置文本的粗细
字体	配置文本的字体

对齐方式

表头内数据对齐方式，分为左对齐、右对齐和居中对齐三种方式。

背景

表头背景当前有颜色、自定义两种背景填充方式方式。

纯色

设置单一纯色。

自定义

可上传一张自定义图片。

行

针对数据行背景填充自定义配置。

行配置项说明：

配置项	配置项说明
行	此处的行非绝对数值，如下“行配置项示例图”所示，北京为“行1”，因为只配置了3行，所以在第4行时仍然延续了“行1”的配置。
背景	对应行背景色，可配置为颜色和自定义，选择自定义时上传自定义图片即可。
描边	对应行描边线色彩及粗细。
圆角	数据行圆角值，如下“行配置项示例图”所示，“行2”圆角值配置为"36%"。
偏移量	数据行偏移量。

*行配置项示例图

选中高亮

当鼠标点击选中某一行数据时的颜色变化。分为单选和多选两种选中高亮方式。

文本样式

配置选中行文本样式，可配置文本字体大小、颜色、粗细及字体。

阴影

在此设置选中行数据阴影颜色和阴影值。

背景

即选中高亮行北京，背景分为颜色、自定义两种填充方式，当选择为自定义时上传图片文件即可。

匹配值高亮

当表格内某字段值匹配匹配值内设置的条件时可触发字段高亮，如下示例图所示，当"column1"内字段值等于“北京”时，该行数据红色高亮。

*匹配值高亮配置项

匹配值高亮配置项说明：

配置项	配置项说明
匹配值	设定的字段匹配条件，即当某字段值等于某值时出发字段高亮。
文本样式	高亮字段文本样式。
阴影	高亮字段文本阴影色彩。
背景	高亮字段背景，可配置为颜色和自定义两种方式，当配置为自定义时上传自定义图片即可。

4、列配置

序列号

轮播表格内序列号自定义配置项：

配置项	配置项说明
标题	默认为"#"，可自定义为其他符号。
起始值	默认起始值为1，只能配置为数字。
列宽	序列号列列宽。
列间距	序列号列与最左侧组件边框间距。
对齐方式	分为左侧、居中和右侧三种对齐方式。
样式指定	可对特定序列号进一步进行配置，可配置文本样式、偏移量及背景，北京可填充颜色或自定义图片。

如下示例图所示将"2"序列号文本样式配置为红色，同时背景填充颜色。

*序列号配置项

列

组件默认显示三列数据，在此可对每一列进行自定义配置，如想增加一列数据，首先需要增加一列，然后在数据内增加对应列数据即可。

列配置项说明：

配置项	配置项说明
映射	在对接数据时需要进行字段映射，即把已有数据以映射的方式映射到组件字段，如需要增加一列“客户等级”，可配置字段名为"column4"，显示名配置为“客户等级”。
列宽	指定列列宽度。
列间距	指定列与其他列列间距。
偏移	指定列列偏移量。
对齐方式	分为左侧、局中和右侧对齐三种方式。

内容类型

轮播表格内容支持文本、数字、进度条、图片、状态图片，默认为文本。以下分别对不同状态进行介绍。

1. 文字

a.文字溢出

组件预置当数据长度较长无法显示完全时三种显示状态，省略号、换行、跑马灯。

当设置为跑马灯时可以设置文字滚动时间，时间越短速度越快。

b. 文本样式

可单独配置文本字体、大小、颜色、加粗、倾斜、字距和行距等。

c.样式指定

可根据字段值显示指定文本样式，如下示例图所示，部分城市数据设置为未达标，部分城市设置为达标，根据指定字段值显示不同颜色。

*文字类型样式指定

2. 数字

文本样式	配置数字文本样式，配置项包括字体、字体大小、颜色、加粗、倾斜、字距和行距。
后缀	后缀文本及文本样式。
千分位分割	开启千分位分割后可分割千分位后小数。
样式指定	可自由配置文字反问样式，比如单独配置"0-1"、"1-2"数字样式。

如下示例图所示，第4列为数字，对0-1范围内数值配置为红色。

*数字类型样式指定

3. 图片

*图片类型相关配置项｜对应数据类型

数据源对应列数据为图片URL资源。

遮罩：

可上传图片遮罩调整图片形状，此处仅为图片遮罩，图片文件地址需要写在数据中。

*遮罩配置使用案例

4. 状态图片

当配置为状态图片时，可根据不同状态区间来显示不同图片，如下示例图所示，状态值为"1"时配置为“飞机图片”，当column5列数值为1时显示为飞机状态。

*状态图片示例

二、数据

组件数据格式

字段	说明
column1	文本，第一列值。
column2	文本，第二列值。
column3	文本，第三列值。
isSticked	bool类型，是否置顶显示。
isSelected	bool类型，是否被选中。

JSON数据案例

[
	{
		"column1": "北京",
		"column2": 87.2,
		"column3": "超预期",
		"isSticked": false,
		"isSelected": false
	},
	{
		"column1": "上海",
		"column2": 80.5,
		"column3": "达标",
		"isSticked": false,
		"isSelected": false
	},
	{
		"column1": "杭州",
		"column2": 72.3,
		"column3": "达标",
		"isSticked": false,
		"isSelected": false
	},
	{
		"column1": "重庆",
		"column2": 65.5,
		"column3": "未达标",
		"isSticked": false,
		"isSelected": false
	},
	{
		"column1": "成都",
		"column2": 58.4,
		"column3": "未达标",
		"isSticked": false,
		"isSelected": false
	},
	{
		"column1": "厦门",
		"column2": 52.5,
		"column3": "未达标",
		"isSticked": false,
		"isSelected": false
	},
	{
		"column1": "云南",
		"column2": 40.2,
		"column3": "未达标",
		"isSticked": false,
		"isSelected": false
	}
]

数据配置项说明

配置项	说明
数据源	数据源类型、数据源选择等
数据过滤器	勾选启用数据过滤器，单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见数据过滤器使用说明
数据响应结果	展示数据请求的响应结果
自动更新	选中后可以设置数据请求时间间隔

数据对接详情

数据对接详情请见以下文档👇

项目交付——数据对接入门

三、交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

配置项	说明
渐隐渐显	启用是
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))
方向	动画方向
持续时间	载入动画持续时间，单位为ms
延时	载入动画延时长，单位为ms