实例二：轮播自动联动播放的大屏实例

1.1 版本

1.2 应用场景

当大屏图表（扩展图表插件）播放或刷新至某个点时，触发被联动图表的加载动画或增量刷新，并且使用大屏会有更加酷炫的效果。

1.3 功能简介

动态效果播放时自动触发其他组件数据跟随联动，通过联动对组件进行更为具体的分析。

如下图所示：

2.1 数据准备

准备需要的数据表，将数据表导入内置 FRDemo 数据库：数据表.rar

注：详情请参见 使用第三方软件迁移内置FRDemo数据库到指定数据库

2.2 布局排版

根据实际需求，确定轮播的主要信息和对应的轮播形式，以及其他需要的次要信息和展示形式。

本文示例是用轮播目标齿轮联动其余八个组件，因此设计出的布局排版，如下图所示：

2.3 美化材料准备

准备报表块、大屏背景图片：

标题背景.png

边框元素.png

背景图片.png

3.1 插件安装

安装「扩展图表」插件。

• 点击下载插件：扩展图表插件

• 设计器插件安装方法参照：设计器插件管理

• 服务器安装插件方法参照：服务器插件管理

3.2 新建模板

新建一个决策报表，存储为%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\轮播时自动联动其他组件.frm

注：详情请参见 决策报表入门示例 

3.2.1 设置自适应属性

点击菜单模板>表单报表块自适应属性，取消勾选使用全局配置，选择字体不自适应、表格双向自适应，如下图所示：

注：详情请参见 自适应属性

3.2.2 设置布局方式

选中 body，选择属性，设置布局方式为绝对布局、缩放逻辑为适应区域。如下图所示：

注：详情请参见 决策报表布局方式 。

3.3 新建数据集

新建模板数据集，如下表所示：

3.4 设计报表

3.4.1 组件拖放

1）为了方便数据设置，在拖放组件时可以将组件、拖放顺序、数据集对应起来，如下表所示：

2）根据布局排版将所有组件按照上表顺序拖放到对应位置，如下图所示：

3.4.2 组件设置

扩展图表设计请参见 [新]扩展图表 ，其他图表设计请参见 [新]图表 ，报表块设计请参见 单元格样式 。

3.5 设置联动

以 chart0 联动 chart1 为例。

编辑 chart0 ，选择播放>添加联动>编辑，设置表单对象、联动动画、参数。

• 表单对象：chart1

• 联动动画：

• 参数：

文档设定的参数为 分公司='${c}' ，且 chart1 中设置「节点名称」为「分公司」，此时参数 c 应选择「节点名称」。

如下图所示：

3.6 美化

3.6.1 设置大屏背景

选中body，点击属性>样式，设置填充图片，打开背景图片.png，设置图片格式为拉伸，如下图所示：

3.6.2 设置标题背景

选中报表块report10，点击属性>样式，设置填充图片，打开标题背景.png，设置图片格式为拉伸，如下图所示：

3.6.3 设置图表块边框

给图表块chart2~chart8设置边框，以 chart2 为例。

选中图表块chart2，点击属性>样式，设置填充图片，打开标题背景.png，设置图片格式为拉伸，如下图所示：

3.7 预览效果

保存模板，选择分页预览，效果如1.3 功能简介中所示。

注1：扩展图表不支持移动端预览。

注2：扩展图表仅支持 Chrome 浏览器。

已完成模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\轮播时自动联动其他组件.frm

点击下载模板：轮播时自动联动其他组件.frm

点击下载数据表：数据表.rar

点击下载背景边框图片：背景边框图片.rar