历史版本13 :实例二:轮播自动联动播放的大屏实例 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 版本编辑

  报表设计器版本 JAR 包扩展图表插件版本  
  10.0 2019-03-01  V2.2

2. 描述编辑

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

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

如下图所示:

6igcGOm7Uh.gif

3. 准备工作编辑

3.1 插件安装

安装「扩展图表」插件:

3.2 材料准备

确定需求,准备好数据库表、背景图片、边框元素

此文档模板所需的材料请点击下载:

材料准备.zip

注:文件中的数据表,需使用第三方软件(可点击下载:navicat premium 软件)导入内置 FRDemo 数据库。

3.3 布局排版

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

1)常见的排版布局请参见 如何制作一个大屏模板(实例)

2)根据需要设计出此文档的布局排版,如下图所示的:

排版.png

4. 操作步骤编辑

4.1 模板制作

新建一个决策报表,详细步骤请参见 决策报表入门示例 。

4.1.1 新建数据集

新建模板数据集如下:

ds1:SELECT * FROM 总公司面板

ds2:SELECT * FROM 总公司面板 WHERE 分公司='${c}'

ds3:SELECT * FROM 总公司品牌 WHERE 分公司='${c}'

ds4:SELECT * FROM 总公司车系 WHERE 公司='${c}' ORDER BY 销量

ds5:SELECT * FROM 总公司员工 WHERE 公司='${c}'

ds6:SELECT * FROM 总公司月份  WHERE 分公司='${c}'

ds7:SELECT * FROM 总公司影响因素 WHERE 分公司='${c}'

ds8:SELECT * FROM 总公司销售分析 WHERE 分公司='${c}'

4.1.2 组件拖放

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

控件名数据集组件形式
chart0ds1轮播目标齿轮
chart1ds2粒子计数器
chart2ds2水球图
chart3ds3饼图
chart4ds4条形图
chart5ds5词云
chart6ds6面积图
chart7ds7雷达图
chart8ds8柱形图
report00
报表块

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

image.png


4.1.3 组件设置

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

4.2联动设置

以 chart0 联动 chart1 为例

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

  • 表单对象:chart1

  • 联动动画

联动动画应用场景
重新加载组件整体全部重新加载
增量刷新(此模板适用)组件在既有的基础上进行叠加
  • 参数:

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

如下图所示:

s3.png


4.3 美化

4.3.1 大屏背景

点击body>样式>填充>选择图片,打开材料准备中的背景图片.png,点击确定,如下图所示:

背景.png


4.3.2 labe10 背景设置

点击 labe10 设置属性中的样式,选择材料准备>标题背景.png,具体操作请参见上述4.3.1 大屏背景 。

注:图片的主体背景选择「拉伸」。

4.3.2 边框元素

给 chart2-chart8 添加边框元素,以 chart2为例。

1)拖放一个报表块 report4 ,放在 chart2 的位置,并调整控件位置和控件大小,如下图所示:

s2.png

2)点击 report4 ,选择属性中的样式,图片选择材料准备>边框元素.png,具体操作请参见上述4.3.1 大屏背景

注:图片的主体背景选择「拉伸」。

3)将 report4 置于底层,如下图所示:

s1.png


5 预览效果编辑

保存模板,选择分页预览,效果如描述中所示。

注:扩展图表暂时不支持 APP 和 HTML5 的预览。

6. 已完成模板编辑

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

点击下载模板