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

编辑
  • 文档创建者:宋会青
  • 浏览次数:5192次
  • 编辑次数:15次
  • 最近更新:Kevin-s 于 2019-06-01
  • 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

    轮播时自动联动其他组件.zip


    附件列表


    主题: 大屏数据可视化
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]