1. 版本
| 报表服务器版本 |
|---|
| 11.0 |
2. 描述
应用场景：当需要从一大堆数据里提取出有用的数据，同时需要一眼就清晰明了的了解这些数据并做出准确的判断时，可以通过可视化大屏来完成。
功能介绍：将需要用到的信息根据一定的逻辑排布在同一界面上展示，帮助用户进一步分析各数据之间的关系。
如下图所示：
3. 准备工作
3.1 插件安装
安装「扩展图表」插件：扩展图表
3.2 材料准备
确定需求，准备好数据库表、背景图片、边框元素
此文档模板所需的材料请点击下载：
注：文件中的数据表，需使用第三方软件（可点击安装：navicat premium 软件 ）导入内置 FRDemo 数据库。
3.3 布局排版
根据实际需求，确定大屏的主要信息和对应的展示形式，以及其他需要的次要信息和展示形式。
1）常见的排版布局请参见 驾驶舱布局 。
2）此文档是用地图组件和其余六个组件进行一个逻辑上联系的一个排版布局，如下图所示的：
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）为了方便数据设置，在拖放组件时可以将组件、对应的标题组件、数据集及组件形式对应起来，如下表所示：
| 控件名 | 标题组件 | 数据集 | 组件形式 |
|---|---|---|---|
| report0 | report 标题 | 报表块 | |
| chart0 | ds1、ds2 | 地图 | |
| chart1 | report1 标 | ds4 | 柱形图 |
| chart2 | report2 标 | ds6 | 饼图 |
| chart3 | report3 标 | ds8 | 条形图 |
| report4 | report4 标 | ds7 | 报表块 |
| chart5 | report5 标 | ds3 | 饼图 |
| report6 | report6 标 | ds11 | 报表块 |
2）根据布局排版将所有组件按照上表顺序拖放到对应位置，如下图所示：
4.1.3 组件设置
图表设计请参见 图表简介 ，报表块设计请参见 单元格样式 。以 chart0 为例：
1）拖入「地图」图表，点击编辑，设置类型、数据、样式、特效，如下图所示：
注：由于选的组合地图，所以设置的时候不要遗漏，详细设置请参见 组合地图
特例：
间隔背景设计
1）点击编辑 report0
在 A2 单元格输入公式：RANDBETWEEN(123451111, 123459999)
在 B2 单元格输入公式：SPLIT(A2, "")
2）设置 B2 单元格扩展为「横向扩展」，背景为蓝色
C2 设计为空格，左父格为 B2，详细请参见 大屏FAQ 。
report6 报表块实现跑马灯效果
1）单击report6，点击编辑，冻结第 1 行，如下图所示：
2）单击 report6 ，选择事件>添加事件>编辑初始化后1，输入代码，如下图所示：
代码如下：
setTimeout(function(){
_g().getWidgetByName('report6').startMarquee()
}, 500);注：详细介绍请参见 跑马灯 。
4.2 美化
4.2.1 大屏背景
大屏背景此处用的是素材里的主题背景.jpg，具体设置请参见 轮播时自动联动其他组件 。
4.2.2 边框元素
1）主标题边框
在report 标题两侧拖入报表块，并设置控件属性中的样式，以report 左为例，如下图所示：
2）其他边框
其他边框不需要再另外添加组件，直接设置属性即可，详细操作请参见4.2.2 边框元素。
此模板标题边框用的是标题背景带渐变框.png，其他用的是边框元素.png。
4.3 效果预览
保存模板，点击分页预览，效果如描述中所示。
5. 模板下载
已完成模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\chart\extend\大屏模板示例一.frm
点击下载模板及素材：大屏模板示例一.rar
