历史版本2 :银行驾驶舱仪表板 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

1.模板内容

这是一张集团销售驾驶舱仪表板,分别从战区销售、单品销售、销售走势等几个方面进行分析与展示来总体反映集团的销售状况。

模板实现效果如下:

1-1.png

模板下载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

3-1.png

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]。

1)-1.png

其余几个数据集也类似

②新建一个决策报表,将参数界面拖入到body上方在组件设置列表中显示的组件名称为 para ,与 body 为同一层级。参照【参数面板-https://help.fanruan.com/finereport/doc-view-1233.html

1)-10.png

③将控件区的所需要的标签控件、下拉框控件、搜索按钮拖入到参数界面中,在属性中将控件分别重命名为“label3”、“Labely”、“ y”、“Labelm”、“ m”、“Labely1”、“ y1”、“Search”(顺序分别对应控件从左到右,其中y、m、y1为①中数据集定义的参数,名称需保持一致)

1)-11.png

④将以上控件的位置和大小分别调整为如下(对应从左到右)

⑤给所有控件添加控件值并为下拉框控件添加数据字典。其中标签控件的控件值直接在属性中输入相应文本即可;下拉框控件需要添加数据字典,然后给定一个控件值作为默认选项。分别为y、m、y1下拉框控件添加自定义数据字典和控件值。参照【控件默认值-https://help.fanruan.com/finereport/doc-view-1008.html】【数据字典-https://help.fanruan.com/finereport/doc-view-219.html

⑥预览效果

1)-23.png


拓展:

参数应用学习路径-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中

2)-1.png

②选择相对应的数据集

2)-2.png

③可以根据自己的设计和实际需要插入小图标、文本等

2)-3.png

2)-4.png

④调整组件大小

2)-5.png

⑤预览效果

2)-6.png

同样步骤可以做出其他类似指标卡


3)行式报表

①将报表块拖入到body中【行式报表-https://help.fanruan.com/finereport10.0/doc-view-144.html

3)-1.png

②A1~F1 单元格写入表格标题信息

③将数据集中的相关数据列按照标题字段依次拖入到 A2~F2 单元格,其中A1是序号列,插入seq()函数

④给表头一行添加双行下划线


⑤设置背景间隔变色,背景颜色的十六进制码为#F4FBFC 【间隔背景色https://help.fanruan.com/finereport10.0/doc-view-315.html

3)-5.png

⑥预览效果

3)-6.png

同样步骤可以做出其他行式报表

4)面积图

①将图表栏的面积图图标拖入到body中,参照【面积图-https://help.fanruan.com/finereport/doc-view-3379.html

②类型选择第一种

③选择相对应的数据集

4)-3.png

④调整图表的颜色等

⑤调整组件大小


⑥预览效果

4)-6.png


拓展:

其他更多面积图展现形式可见: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

②样式选择第三种—不等弧度玫瑰图

③选择相对应的数据集

5)-3.png

④在样式中设置图表颜色、标签等

 

⑤调整组件大小

⑥预览效果

拓展:

其他更多饼图展现形式可见: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

6)-1.png

②类型选择第一种

6)-2.png

③选择相对应的数据集

④在样式中设置图表颜色、柱宽等

⑤调整组件大小

6)-5.png

⑥预览效果

6)-6.png


拓展:

其他更多柱形图展现形式可见: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传递给子模板。设置界面如下图所示:

7)-1.png

被链接的模板:在接收到上面的模板传过来的参数a的值之后,被链接的模板根据在模板数据集进行数据库查询时在SQL语句中定义的查询条件筛选出符合条件的数据集进行展示。

7)-2.png

预览效果

7)-3.gif

拓展:

超级链接: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