历史版本12 :实例一:大屏模板实例 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 版本编辑

  报表设计器版本 JAR 包APP 版本HTML5
  10.0 2017-12-1510.0V10

2. 描述编辑

应用场景:当需要从一大堆数据里提取出有用的数据,同时需要一眼就清晰明了的了解这些数据并做出准确的判断时,可以通过可视化大屏来完成。

功能介绍:将需要用到的信息根据一定的逻辑排布在同一界面上展示,帮助用户进一步分析各数据之间的关系。

如下图所示:

1GHO6HQ7bX.gif

3. 准备工作编辑

3.1 插件安装

安装「扩展图表」插件:

3.2 材料准备

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

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

素材准备.zip

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

3.3 布局排版

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

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

2)此文档是用地图组件和其余六个组件进行一个逻辑上联系的一个排版布局,如下图所示的:

image.png

4. 操作步骤编辑

4.1 模板制作

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

4.1.1 新建数据集

新建模板数据集如下:

ds1:SELECT pid,销售额,${INT(RAND()*100000)}+销售额 AS 新销售额 FROM 地图 WHERE PID IS NOT NULL AND PID NOT IN('天津市') ORDER BY RANDOM() LIMIT 5

ds2:SELECT * FROM 地图

ds3:SELECT * FROM 新老用户对比

ds4:SELECT * FROM 保费地区排名

ds5:SELECT * FROM 表单联动柱形图

ds6:SELECT * FROM 地区保费构成

ds7:SELECT * FROM 年度累计总保费

ds8:SELECT * FROM 热销产品

ds9:SELECT * FROM 销售数据地图

ds10:SELECT * FROM 增长折线

ds11:SELECT * FROM 最新交易数据

4.1.2 组件拖放

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

控件名标题组件数据集组件形式
report0report 标题
报表块
chart0
ds1、ds2地图
chart1report1 标ds4柱形图
chart2report2 标ds6饼图
chart3report3 标ds8条形图
report4report4 标ds7报表块
chart5report5 标ds3饼图
report6report6 标ds11报表块

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

a1.png

4.1.3 组件设置

图表设计请参见 [新]图表 ,报表块设计请参见 单元格样式 。

其中report0中数字动态效果的详细设计请参见 大屏FAQ 。

4.2 美化

4.2.1 大屏背景

大屏背景此处用的是素材里的主题背景.jpg,具体设置请参见 轮播时自动联动其他组件4.3 美化

4.2.2 边框元素

1)主标题边框

report 标题两侧拖入报表块,并设置控件属性中的样式,以report 左为例,如下图所示:

a2.png

2)其他边框

其他边框不需要再另外添加组件,直接设置属性即可,详细操作请参见4.2.2边框元素

此模板标题边框用的是标题背景带渐变框.png,其他用的是边框元素.png。

5 预览效果编辑

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

5.1 PC端

PC端效果如描述中所示。

5.2 APP

a4.gif

5.3 HTML5

a3.gif

6. 已完成模板编辑

已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\大屏模板示例一.frm

点击下载模板