1.1 版本

1.2 应用场景

对图片进行轮播，如下图所示：

1.3 功能介绍

• 在报表上图片轮播，支持左右和上下轮播，支持定时轮播。

• 本插件支持 FVS可视化看板。
  

• 本插件不支持 IE 浏览器，推荐使用谷歌浏览器或火狐浏览器。
  

• 本插件不支持移动端。

2.1 插件安装

点击下载插件：图片轮播插件

设计器插件安装方法请参见：设计器插件管理

服务器安装插件方法请参见：服务器插件管理

2.2 操作方法

2.2.1 功能入口

1）普通报表

• 从设计器菜单栏「插入>单元格元素>插入图表」或者「插入>悬浮元素>插入图表」 

• 普通报表上方工具栏点击 图标

显示 图表类型 窗口，选择「图片轮播」，如下图所示：

2）决策报表

在决策报表上方的图表工具栏，选择图片轮播图标，即可添加，如下图所示

3）FVS可视化看板

在 FVS 中添加表格组件，编辑表格组件。表格上方工具栏中选择插入图表，在图表类型窗口，选择「图片轮播」，如下图所示：

2.2.2 参数设置

选择右侧「单元格元素>设置」栏，如下图所示：

1）图片布局：图片显示的布局，包含如下类型：

• 布局1：被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

• 布局2：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。

• 布局3：被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

2）链接打开事件：点击轮播图片的触发链接跳转的鼠标事件，包括无鼠标事件，鼠标单击事件，鼠标双击事件，鼠标右击事件；若选择无鼠标事件，则点击图片不做任何链接跳转。

3）链接打开方式：点击轮播图片的触发链接跳转的打开方式，包括新窗口打开，当前窗口打开。

4）动画类型：图片轮播效果方向，有左右滑动和上下滑动。

5）显示控制按钮：若勾选中，则显示手动控制轮播的按钮。

6）自动播放：若勾选中，则会启动自动轮播图片效果。

7）图片文件>编辑：点击「编辑」按钮，可以编辑要轮播的图片，支持本地图片和网络图片，如下图：

   (1) 图片文件 

   磁盘文件：报表资源目录下\WEB-INF\resources的相对路径,例如\WEB-INF\resources\a.png，相对路径为 a.png 。

   绝对路径：网络图片的地址

   (2) 网页链接：鼠标点击轮播图片时跳转的链接，若链接为空则不跳转

   (3) 提示内容：鼠标放在轮播图片上，显示的提示内容

8）数据集：从数据集中获取图片配置。从数据集中获取图片路径,路径规则与 7) 中的规则一致，配置说明与 7) 一致。

2.2.3 图片缩放预览

 1）鼠标放在轮播图片上，图片的右上角会出现全屏图标，鼠标单击即可出现全屏图片预览界面

 2）在全屏图片预览界面，鼠标可以拖动图片，也可以用鼠标滑轮上下缩放图片

 3）点击全屏图片预览界面的右上角的退出图标，即可退出图片预览

3.1 图片准备

点击下载并解压获取示例图片：示例轮播图片.zip

将示例图片分别放入报表资源目录下的\WEB-INF\resources文件夹中，如下图所示：

3.2 报表设计

1）新建普通报表，合并一片单元格区域，点击上方工具栏插入图表按钮，插入「图片轮播」。

2）选择右侧「单元格元素>设置」栏，「基本」和「自动播放」属性默认设置即可，如下图所示：

3）在图片文件中点击「编辑」按钮，选择磁盘文件，分别选中示例图片，并添加对应网页链接和提示内容，如下图所示：

3.3 效果预览

保存报表，点击「PC端预览」，效果如应用场景中所示。

注：不支持移动端。

点击下载模板：图片轮播.cpt