1.模板内容
这是一张集团销售驾驶舱仪表板,分别从战区销售、单品销售、销售走势等几个方面进行分析与展示来总体反映集团的销售状况。
模板实现效果如下:
模板下载:https://market.fanruan.com/template/20000549
模板特色功能:超链接、参数控件
2.模板构成
序号 |
组件类型 |
个数 |
涉及功能 |
效果展示 |
1 |
指标卡 |
6 |
|
|
2 |
明细表 |
4 |
|
|
3 |
图表 |
4 |
面积图*2、饼图、柱形图 |
|
4 |
控件 |
8 |
|
|
3.布局与属性设置
布局采用自适应布局,组件间间隔设定为10,整体背景颜色选择了一个极淡的灰色(颜色的rgb颜色值为246,246,250,十六进制颜色码为#F5F7FA),body内边距全部设定为4,组件间隔设置为8。body的大小为945*532
4.组件实现
1)参数控件
参数查询的步骤:定义参数>添加控件>设置参数面板样式
①定义数据集参数
使用场景:类似通信、监控,每天都有海量数据生成,数据库表中总数据量非常大,而报表中往往只要获取某个时间段的几百条数据就可以了。如果使用模板参数,就需要先取出所有数据,再进行过滤,取数+过滤,将消耗大量时间,极大影响报表的查询效率。而数据集参数在数据库查询时就已经完成了数据过滤,所以使用数据集参数设计的查询报表会比使用模板参数的效率高。【参数的种类与区别-https://help.fanruan.com/finereport/doc-view-156.html】
定义过程:定义数据集:通过在 SQL 语句中添加 ${para}格式的内容,即可定义数据集参数。定义完成后,使用方法和模板参数一致。下拉框选择xx,点击查询,只查询出报表中xx的销售信息。参照【数据集参数-https://help.fanruan.com/finereport/doc-view-158.html】
举例:
比如拿[单品销售TOP10]这个数据集来举例:单品销售TOP10是通过SQL语句从demo数据库中按照条件提取相应字段得到的,其中where中定义了数据集参数"y"和"m"。那么在每次提取数据的时候SQL语句会根据形式参数y和m的值来筛选,而y和m恰好是用来选择年和月的控件,也就是当我们用下拉框选择某个年份和月份的时候就是在给y和m赋值,带有数据集参数的 SQL 语句写好后,点击数据集定义界面「预览」按钮时,若显示出定义的数据集参数。则表明数据集参数定义成功,那么SQL语句就根据条件筛选出来相应的数据,也就是数据集[单品销售TOP10]。
其余几个数据集也类似
②新建一个决策报表,将参数界面拖入到body上方在组件设置列表中显示的组件名称为 para ,与 body 为同一层级。参照【参数面板-https://help.fanruan.com/finereport/doc-view-1233.html】
③将控件区的所需要的标签控件、下拉框控件、搜索按钮拖入到参数界面中,在属性中将控件分别重命名为“label3”、“Labely”、“ y”、“Labelm”、“ m”、“Labely1”、“ y1”、“Search”(顺序分别对应控件从左到右,其中y、m、y1为①中数据集定义的参数,名称需保持一致)
④将以上控件的位置和大小分别调整为如下(对应从左到右)
⑤给所有控件添加控件值并为下拉框控件添加数据字典。其中标签控件的控件值直接在属性中输入相应文本即可;下拉框控件需要添加数据字典,然后给定一个控件值作为默认选项。分别为y、m、y1下拉框控件添加自定义数据字典和控件值。参照【控件默认值-https://help.fanruan.com/finereport/doc-view-1008.html】【数据字典-https://help.fanruan.com/finereport/doc-view-219.html】
⑥预览效果
拓展:
参数应用学习路径-https://help.fanruan.com/finereport/doc-view-4219.html
下拉框控件-https://help.fanruan.com/finereport/doc-view-255.html
控件默认值-https://help.fanruan.com/finereport/doc-view-1008.html
数据字典-https://help.fanruan.com/finereport/doc-view-219.html
控件简介与分类-https://help.fanruan.com/finereport/doc-view-1170.html
参数的种类与区别-https://help.fanruan.com/finereport/doc-view-156.html
2)指标卡
①将报表块拖入到body
②选择相对应的数据集
③可以根据自己的设计和实际需要插入小图标、文本等
④调整组件大小
⑤预览效果
同样步骤可以做出其他类似指标卡
3)行式报表
①将报表块拖入到body中【行式报表-https://help.fanruan.com/finereport10.0/doc-view-144.html】
②A1~F1 单元格写入表格标题信息
③将数据集中的相关数据列按照标题字段依次拖入到 A2~F2 单元格,其中A1是序号列,插入seq()函数
④给表头一行添加双行下划线
⑤设置背景间隔变色,背景颜色的十六进制码为#F4FBFC 【间隔背景色https://help.fanruan.com/finereport10.0/doc-view-315.html】
⑥预览效果
同样步骤可以做出其他行式报表
4)面积图
①将图表栏的面积图图标拖入到body中,参照【面积图-https://help.fanruan.com/finereport/doc-view-3379.html】
②类型选择第一种
③选择相对应的数据集
④调整图表的颜色等
⑤调整组件大小
⑥预览效果
拓展:
其他更多面积图展现形式可见:https://market.fanruan.com/reuse
更多面积图实现方法如下:
百分比堆积面积图-https://help.fanruan.com/finereport/doc-view-1314.html
垂直和曲线面积图-https://help.fanruan.com/finereport/doc-view-1315.html
范围面积图-https://help.fanruan.com/finereport/doc-view-3773.html
5)饼图
①将图表栏的饼图图标拖入到body中,参照【玫瑰图-https://help.fanruan.com/finereport/doc-view-4320.html】
②样式选择第三种—不等弧度玫瑰图
③选择相对应的数据集
④在样式中设置图表颜色、标签等
⑤调整组件大小
⑥预览效果
拓展:
其他更多饼图展现形式可见:https://market.fanruan.com/reuse
更多饼图实现方法如下:
半圆饼图-https://help.fanruan.com/finereport/doc-view-1307.html
环形饼图-https://help.fanruan.com/finereport/doc-view-1308.html
多分类饼图-https://help.fanruan.com/finereport/doc-view-1310.html
轮播环形图:https://help.fanruan.com/finereport/doc-view-3324.html
6)柱形图
①将图表栏的柱形图图标拖入到body中,参照【柱形图-https://help.fanruan.com/finereport/doc-view-1400.html】
②类型选择第一种
③选择相对应的数据集
④在样式中设置图表颜色、柱宽等
⑤调整组件大小
⑥预览效果
拓展:
其他更多柱形图展现形式可见:https://market.fanruan.com/reuse
更多柱形图实现方法如下:
渐变柱形图-https://help.fanruan.com/finereport/doc-view-3548.html
弧形柱形图-https://help.fanruan.com/finereport/doc-view-2664.html
特殊图形柱形图-https://help.fanruan.com/finereport/doc-view-3776.html
占比柱形图-https://help.fanruan.com/finereport/doc-view-3563.html
7)添加超链接
本模板设置超链接,参照【超链接到有参数的模板—https://help.fanruan.com/finereport/doc-view-947.html】
选中 “大区销售明细”表的A2 单元格,点击超级链接,添加网络报表。/销售服务类方案/销售目标达成/按区域/XX公司销售驾驶舱(大区).frm,链接打开于新窗口,设置参数area=$$$
设置参数 area=$$$ 的目的:前端预览时点击哪个扩展出来的数据,就将这个数据作为参数area传递给子模板。设置界面如下图所示:
被链接的模板:在接收到上面的模板传过来的参数a的值之后,被链接的模板根据在模板数据集进行数据库查询时在SQL语句中定义的查询条件筛选出符合条件的数据集进行展示。
预览效果
拓展:
超级链接:https://help.fanruan.com/finereport/doc-view-223.html
超级链接-网络报表:https://help.fanruan.com/finereport/doc-view-4199.html
超级链接传参:https://help.fanruan.com/finereport/doc-view-914.html
超级链接到有参数的模板:https://help.fanruan.com/finereport/doc-view-947.html
|