历史版本26 :决策报表组件重叠 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

制作决策报表时,为了布局规范,设计者常常使用样式相同的图表或报表块。FineReport 提供决策报表内组件复制粘贴,并且在「绝对布局」下,支持组件重叠放置。

1.1 预期效果

示例将实现,中国地图上,三个不同省份的销量以柱状图展示、柱状图时间为一周,坐标为星期。如下图所示:

image.png

1.2 实现思路

以地图为底层图层,将柱形图叠放于上,直观地展示区域数据。

2. 示例编辑

2.1 新建模板

1)点击设计器左上角「文件>新建决策报表>新建空白模板」,点击确定,进入新建的决策报表中。

2)点击顶部菜单栏「模板>PC端自适应属性」,将报表布局修改为「绝对布局>不自适应」,这样可确保组件位置不会有大的变动。如下图所示:

Snag_228e030a.png

2.2 准备数据

新增 内置数据集,为地图和柱状图准备数据。如下图所示:

image.png

2020-10-25_16-56-13.png

2.3 添加地图

1)在图表中,将「地图」拖入决策报表 body 中,如下图所示:

1570674594712532.png

2)地图数据和样式设置可参考 区域地图 设置并修改,最终样式如下图所示:

image.png

2.4 添加柱形图

1)在图表中,将「柱形图」拖入决策报表 body 中,调整大小,叠放于地图上西藏自治区,如下图所示:

1570674817450326.png

2)设置柱形图圆角属性和柱子宽度,设置可参考 自定义柱形圆角属性和宽度,最终样式如下图所示:

image.png

3)选中柱形图,复制粘贴两次,柱形图组件重叠错开放置。如下图所示:

注:为避免组件重叠覆盖,请先选中处于上层的组件,再进行粘贴 

image.png

4)粘贴完成后,修改其数据、大小和位置,效果如下图所示:

image.png

2.5 效果预览

2.5.1 PC 端

保存模板,点击「PC端预览」,效果如下图所示:

image.png

2.5.2 移动端

移动端默认勾选了「手机重布局」,则会根据模板组件顺序依次展示。如下图所示:

Snag_228809ed.png

若取消勾选「手机重布局」,如下图所示:

Snag_22854afc.png

则预览效果如下图:

Snag_229042c9.png

3. 模板下载编辑

已完成模板可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\frm\决策报表组件重叠.frm

点击下载模板:决策报表组件重叠.frm