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

  • 文档创建者:宋会青
  • 编辑次数:18次
  • 最近更新:Carly 于 2020-03-26
  • 1. 概述

    1.1 版本

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

    1.2 应用场景

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

    1.3 功能简介

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

    如下图所示:

    6igcGOm7Uh.gif

    2. 准备工作

    2.1 数据准备

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

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

    2.2 布局排版

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

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

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

    排版.png

    2.3 美化材料准备

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

    标题背景.png

    边框元素.png

    背景图片.png

    3. 操作步骤

    3.1 插件安装

    安装「扩展图表」插件。

    注:详情请参见扩展图表插件

    3.2 新建模板

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

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

    3.2.1 设置自适应属性

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

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

    2020-03-26_10-59-17.png

    3.2.2 设置布局方式

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

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

    1585192129365508.png

    3.3 新建数据集

    新建模板数据集,如下表所示:

    数据集
    SQL 语句
    ds1SELECT * FROM 总公司面板
    ds2SELECT * FROM 总公司面板 WHERE 分公司='${c}'
    ds3SELECT * FROM 总公司品牌 WHERE 分公司='${c}'
    ds4SELECT * FROM 总公司车系 WHERE 公司='${c}' ORDER BY 销量
    ds5SELECT * FROM 总公司员工 WHERE 公司='${c}'
    ds6SELECT * FROM 总公司月份  WHERE 分公司='${c}'
    ds7SELECT * FROM 总公司影响因素 WHERE 分公司='${c}'
    ds8SELECT * FROM 总公司销售分析 WHERE 分公司='${c}'

    3.4 设计报表

    3.4.1 组件拖放

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

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

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

    image.png

    3.4.2 组件设置

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

    3.5 设置联动

    以 chart0 联动 chart1 为例。

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

    • 表单对象:chart1

    • 联动动画:

    联动动画
    动画效果
    重新加载组件整体全部重新加载
    增量刷新组件在既有的基础上进行叠加更新
    • 参数:

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

    如下图所示:

    2020-03-26_11-21-14.png

    3.6 美化

    3.6.1 设置大屏背景

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

    2020-03-26_11-29-20.png

    3.6.2 设置标题背景

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

    1585208985105431.png

    3.6.3 设置图表块边框

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

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

    2020-03-26_15-55-35.png

    3.7 预览效果

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

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

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

    4. 已完成模板

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

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

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

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

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!