1. 概述编辑
1.1 版本
| 报表服务器版本 | 插件版本 | 功能变更 |
|---|---|---|
| 11.0 | 3.0.1 | 新增图片放大预览、提示和链接跳转功能 |
1.2 应用场景
当企业官网想要展示企业文化、产品和服务,电子商务平台想要展示最新商品、促销活动等场景时,希望实现动态展示图片,提升页面视觉效果和用户体验,同时希望实现点击图片进行网页链接跳转。如下图所示:

1.3 功能介绍
帆软提供「图片轮播」插件,主要用于动态展示图片。
支持左右和上下方向的轮播
支持点击图片跳转网页链接
支持自动播放,自定义持续时间和间隔
不支持 IE 浏览器,推荐使用谷歌浏览器或火狐浏览器
不支持移动端
2. 插件介绍编辑
2.1 插件安装
点击下载插件:图片轮播插件
设计器插件安装方法请参见:设计器插件管理
服务器安装插件方法请参见:服务器插件管理
2.2 功能入口
1)普通报表
选中单元格并调整到合适大小,点击上方工具栏插入图表按钮,插入「图片轮播」。如下图所示:

2)FVS可视化看板
在 FVS 中添加表格组件。编辑表格,上方工具栏中选择插入图表,在图表类型窗口,选择「图片轮播」,如下图所示:
注:FVS,仅支持在「表格组件」中插入图片轮播使用,不支持直接在「图表组件」中使用图片轮播。

3)决策报表
在决策报表上方的图表工具栏,选择图片轮播图标,即可添加,如下图所示:
注:决策报表,支持在报表块或图表块中使用图片轮播。

2.3 属性设置
选择右侧「单元格元素>设置」栏,如下图所示:

具体说明如下表所示:
| 设置 | 说明 | |
|---|---|---|
| 基本 | 图片布局 | 图片显示的布局,包含如下类型:
|
动画类型 | 图片轮播效果方向,包括:
| |
| 显示控制按钮 | 若勾选中,则显示手动控制轮播的按钮 | |
链接打开事件 | 点击轮播图片的触发链接跳转的鼠标事件,包括:
若选择无鼠标事件,则点击图片不做任何链接跳转。 | |
链接打开方式 | 点击轮播图片的触发链接跳转的打开方式,包括:
| |
| 自动播放 | 若勾选自动播放,则会启动自动轮播图片效果 支持自定义 动画持续时间(毫秒)和 动画间隔(毫秒) | |
| 图片文件 | 编辑 | 点击「编辑」按钮,可以编辑要轮播的图片,支持本地图片和网络图片,如下图:
|
| 数据集 | 从数据集中获取图片配置。 路径规则、配置说明均与「图片文件>编辑」中的规则一致。 | |
2.4 图片缩放预览
「分页预览」下,支持图片全屏缩放预览:
1)鼠标放在轮播图片上,图片的右上角会出现全屏图标
,鼠标单击即可出现全屏图片预览界面
2)在全屏图片预览界面,鼠标可以拖动图片,也可以用鼠标滑轮上下缩放图片
3)点击全屏图片预览界面的右上角的退出图标
,即可退出图片预览
3. 示例编辑
3.1 准备图片
点击下载并解压获取示例图片:示例轮播图片.zip
将示例图片分别放入报表资源目录下的 \WEB-INF\resources 文件夹中,如下图所示:

3.2 新建图表
1)新建一张普通报表
2)将单元格调整到合适大小,选中单元格。
3)点击上方工具栏插入图表按钮,插入「图片轮播」。

3.3 设置图表属性
1)选中图表所在单元格,点击「单元格元素」。
2)选择「设置」栏
「基本」:勾选显示控制按钮,其余属性默认设置
「自动播放」:勾选自动播放,其余属性默认设置
「图片文件」:点击「编辑」按钮,选择磁盘文件,分别选中示例图片,并添加对应网页链接和提示内容,如下图所示:

3.4 效果预览
保存报表,点击「分页预览」,效果如 1.2 节应用场景中所示。
注:不支持移动端。
4. 模板下载编辑
点击下载模板:图片轮播.cpt


