基于培训公司零售场景进行培训,并深度应用。
FVS培训大纲场景说明:

一、FVS功能介绍
FineVis数据可视化简介
https://help.fanruan.com/finereport/doc-view-4222.html
说明:FVS是之前FRM的全新框架的升级版,开发效果会更高,很多复杂的JS也内嵌成功能可直接配置使用。
二、实操案例需求说明
2.1 设置脑图
需分析的指标进行拟定。

2.2 初步DEMO分布图
分析零售数据,大致按维度

2.3 数据库表说明
绿色是标识出需要用到的维度,橙色是对应的指标


三、实操步骤
3.1 基础操作说明
打开帆软后,点击“文件——新建可视化看板”

默认的分辨率进入即可

开发报表时可先进行保存:
注:不要直接放在跟目录下,需创建一个文件夹,再把报表放入文件架里面
按要求命名:文件名:工号_姓名_零售主题分析

FVS 可视化看板的制作界面如下图所示:
FVS界面概览 https://help.fanruan.com/finereport/doc-view-4733.html

3.2 数据连接配置-HANA数据库
HANA驱动配置前,先检查驱动是否存在:
如HANA驱动还未放入,找到自己电脑安装的如下路径:

如不知道安装在电脑哪个位置了,用之前教的快速方法进入到文件夹。
操作:随便选中一个文件或文件夹,点击“打开所在文件夹”位置

回退到WEB-INF层下再进入lib放驱动即可。
例如我的电脑的路径参考:D:\帆软\FineReport_11.0\webapps\webroot\WEB-INF\lib

注:新放入HANA驱动包后,需设计器重启后生效
HANA连接基础配置:命名规范(HANABI_领域名_账号名,HANA_领域名_账号名)
连接名称:HANABI_FRPX
新建JDBC:
注:本地使用HANA数据库里,选择数据库为Others,服务器端可直接选择SAP HANA数据库
驱动器(直接手输,不要去下拉选择):com.sap.db.jdbc.Driver
URL:jdbc:sap://10.15.249.14:30015?reconnect=true

3.3 背景及图片引用
材料1:大屏背景图

材料2:标题背景图

(1)如何上传本地图片当背景或辅助标题背景及小图标?
默认进去后,选择右边的页面,可进行“自定义上传”相关图片。

(2)上传图片如下图说明:

(3)选中大背景图,完成即可。

(4)标题背景如何放:

(5)自定义标题图片进行上传

(6)位置进行放好

(7)再上面加上对应的标题文字

3.4 数据集SQL配置及说明
按需写对应的数据集SQL,一般情况下每个图表都是一个模板数据集
(1)除非是没有维度的指标,可以写在一个结果数据集里
(2)维度一致的不同指标的结果也可以写在一个数据集里
(3)多个维度的数据集显示不同的图表维度也不一致,不建议在图表中重新聚合展现,还是直接SQL结果显示效率会更高。
3.4.1 报表用到的表字段说明:
用到的表字段相关说明:"TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN"
--维度:
DEALER_ID as "所属组织ID"
,ORG_NAME as "所属组织"
,CONTRACT_DATE as "合同日期"
,SPEAC_DISPLAY as "空间"
,PRODUCT_NO as "货号"
,PROVINCE_NAME as "省"
,RETAIL_CENTER_CODE as "所属运营中心编码"
,RETAIL_CENTER_NAME as "所属运营中心"
,AREA_DIRECTOR_CODE as "大区负责人工号"
,AREA_DIRECTOR_NAME as "大区负责人"
,SUPERVISOR_CODE as "督导工号"
,SUPERVISOR_NAME as "督导负责人"
--度量:
,DEAL_AMT as "行成交金额"
,ORDER_QTY as "数量"
3.4.2 参数写法参考:
${if(len(START_DATE) == 0,"","and contract_date>=('" + START_DATE + "')")}--合同日期DATA类型
${if(len(END_DATE) == 0,"","and contract_date<= ('" + END_DATE + "')")}
${if(len(SH_START_DATE) == 0,"","and AUDIT_TIME>= '" + SH_START_DATE +"'")}--审核日期时间戳形式
${if(len(SH_END_DATE) == 0,"","and AUDIT_TIME<= '" + SH_END_DATE + " 23:59:59'")}
--审核结束日期
${if(len(STATUS_CODE) == 0,"","and STATUS_CODE in ('" + STATUS_CODE + "')")} --订单状态(多值查询)
${if(len(BUSI_DEPT_CODE) == 0,"","and BUSI_DEPT_CODE in ('" + BUSI_DEPT_CODE + "')")} --事业部(多值查询)
${if(len(RETAIL_CENTER_CODE) == 0,"","and RETAIL_CENTER_CODE in ('" + RETAIL_CENTER_NAME + "')")} --中心(多值查询)
${if(len(SUPERVISOR_CODE) == 0,"","and SUPERVISOR_CODE in ('" + SUPERVISOR_CODE + "')")} --督导(多值查询)
${if(len(SALES_ORDER_NO) == 0,"","and SALES_ORDER_NO like '%" + SALES_ORDER_NO +"%'")}--订单号(模糊查询)
${if(len(ORG_NAME) == 0,"","and ORG_NAME like '%" + ORG_NAME +"%'")}--组织名称(模糊查询)
${if(len(DEAL_AMT_START) == 0,"","and TOTAL_DEAL_AMT >= ('" + DEAL_AMT_START + "')")}--整单金额(数字区间)
${if(len(DEAL_AMT_END) == 0,"","and TOTAL_DEAL_AMT <=('" + DEAL_AMT_END + "')")}
3.4.3 具体使用这张FVS报表的SQL写法如下
(1)空间占比
因灌入的数据没有最新的数据,默认的开始时间和结束时间可以选择2022年
select
MAP(SPEAC_DISPLAY,NULL,'其它',SPEAC_DISPLAY) as SPEAC_DISPLAY,
round(sum(deal_amt)/10000,0) as deal_amt_w
from
"TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" T
where 1=1
${IF(LEN(START_DATE) == 0,"","AND T.CONTRACT_DATE>=('" + START_DATE + "')")}
${IF(LEN(END_DATE) == 0,"","AND T.CONTRACT_DATE<= ('" + END_DATE + "')")}
group by
MAP(SPEAC_DISPLAY,NULL,'其它',SPEAC_DISPLAY)
order by deal_amt_w desc
(2)货号TOP100排行,表格显示
可设置表格轮播,因需要地图点击下钻,参数需多加一个省份。默认不选择前,代表的是总体。
select PRODUCT_NO
,round(sum(DEAL_AMT)/10000,0) as DEAL_AMT_W
,sum(ORDER_QTY) as ORDER_QTY
from "TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" T
where PRODUCT_NO like '90.%'
${IF(LEN(START_DATE) == 0,"","AND T.CONTRACT_DATE>=('" + START_DATE + "')")}
${IF(LEN(END_DATE) == 0,"","AND T.CONTRACT_DATE<= ('" + END_DATE + "')")}
${if(len(PROVINCE_NAME ) == 0,"","and T.PROVINCE_NAME in ('" + PROVINCE_NAME + "')")} --中心
group by PRODUCT_NO
order by ORDER_QTY desc
limit 100
(3)当年零售额,同期增长率%
--当年零售额
select
ROUND(DEAL_AMT/10000,0) as DEAL_AMT_W,
(DEAL_AMT-TQ_DEAL_AMT)/TQ_DEAL_AMT as TQL--同比增长率
FROM (
select
round(sum(CASE WHEN to_char(T.CONTRACT_DATE,'yyyy')= to_char('${END_DATE}','yyyy') THEN
DEAL_AMT END),2) as DEAL_AMT--当年值
,round(sum(CASE WHEN to_char(add_months(T.CONTRACT_DATE,+12),'yyyy')= to_char('${END_DATE}','yyyy')
and to_char(add_months(T.CONTRACT_DATE,+12),'yyyy-MM-dd')<=to_char('${END_DATE}','yyyy-MM-dd')
THEN
DEAL_AMT END),2) as TQ_DEAL_AMT--当年同期值
from "TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" T
where to_char(T.CONTRACT_DATE,'yyyy')= to_char('${END_DATE}','yyyy')
or to_char(add_months(T.CONTRACT_DATE,+12),'yyyy')= to_char('${END_DATE}','yyyy')
)--因数据量可能较多,把过滤的条件也写在表条件里
(4)省排行
默认时间点设置成当年即可(START_DATE为2022-01-01,END_DATE为当天)
--省市区零售额初步写法:
select
PROVINCE_NAME --省
,round(sum(deal_amt)/10000,0) as deal_amt_w--零售额
,round(sum(cost_amt)/10000,0) as cost_amt_w--成本
from
"TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" T
WHERE 1=1
--合同日期时间过滤
${if(len(START_DATE) == 0,"","and t.contract_date>=('" + START_DATE + "')")}
${if(len(END_DATE) == 0,"","and t.contract_date<= ('" + END_DATE + "')")}
group by PROVINCE_NAME
order by deal_amt_w desc
(5)运营中心排行--条件图(TAB块切换)
说明:最终SQL要按正序,取出前10后,再外面套一层排序
select
A.RETAIL_CENTER_CODE
,A.RETAIL_CENTER_NAME
,deal_amt_w--零售额
from
(
select
RETAIL_CENTER_CODE--"所属运营中心编码"
,RETAIL_CENTER_NAME--"所属运营中心"
,round(sum(DEAL_AMT)/10000,0) as DEAL_AMT_W
from "TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" T
where 1=1
${IF(LEN(START_DATE) == 0,"","AND T.CONTRACT_DATE>=('" + START_DATE + "')")}
${IF(LEN(END_DATE) == 0,"","AND T.CONTRACT_DATE<= ('" + END_DATE + "')")}
group by RETAIL_CENTER_CODE--"所属运营中心编码"
,RETAIL_CENTER_NAME--"所属运营中心"
order by deal_amt_w desc
limit 10
)A
order by deal_amt_w
(6) 大区排行--条件图(TAB块切换),最终SQL要按正序
SELECT
A.AREA_DIRECTOR_CODE-- "大区负责人工号"
,A.AREA_DIRECTOR_NAME-- "大区负责人"
,DEAL_AMT_W--零售额
FROM
(
SELECT
AREA_DIRECTOR_CODE--"大区负责人工号"
,AREA_DIRECTOR_NAME--"大区负责人名称"
,ROUND(SUM(DEAL_AMT)/10000,0) AS DEAL_AMT_W
FROM "TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" T
WHERE 1=1
${IF(LEN(START_DATE) == 0,"","AND T.CONTRACT_DATE>=('" + START_DATE + "')")}
${IF(LEN(END_DATE) == 0,"","AND T.CONTRACT_DATE<= ('" + END_DATE + "')")}
GROUP BY
AREA_DIRECTOR_CODE--"大区负责人工号"
,AREA_DIRECTOR_NAME--"大区负责人名称"
ORDER BY DEAL_AMT_W DESC
LIMIT 10
)A
ORDER BY DEAL_AMT_W
(7)督导排行--条件图(TAB块切换),最终SQL要按正序
select
A.SUPERVISOR_CODE
,A.SUPERVISOR_NAME
,deal_amt_w--零售额
from
(
--注:因督导名称有可能重复,必须用督导工号加名称来聚合
select
SUPERVISOR_CODE--"督导工号"
,SUPERVISOR_NAME--"督导名称"
,round(sum(DEAL_AMT)/10000,0) as DEAL_AMT_W
from "TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" T
where 1=1
${IF(LEN(START_DATE) == 0,"","AND T.CONTRACT_DATE>=('" + START_DATE + "')")}
${IF(LEN(END_DATE) == 0,"","AND T.CONTRACT_DATE<= ('" + END_DATE + "')")}
group by
SUPERVISOR_CODE--"督导工号"
,SUPERVISOR_NAME--"督导名称"
order by DEAL_AMT desc
limit 10
)A
order by deal_amt_w
(8) 前推12月趋势(可使用折线图)
select
to_char(CONTRACT_DATE,'yyyy-MM') as monthly,
round(sum(DEAL_AMT)/10000,0) as DEAL_AMT_W
from
"TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN"
WHERE 1=1
${IF(LEN(END_DATE) == 0,"","AND TO_CHAR(add_months(CONTRACT_DATE,+13),'yyyy-mm')>=('" + END_DATE + "')")}
${IF(LEN(END_DATE) == 0,"","AND TO_CHAR(CONTRACT_DATE,'yyyy-mm')<= ('" + END_DATE + "')")}
group by to_char(CONTRACT_DATE,'yyyy-MM')
order by to_char(CONTRACT_DATE,'yyyy-MM')
3.5 图和表格关联数据展现
3.5.1 饼图制作过程
(1)选择合适的饼图样式

(2)选中图表,进行数据集的对应

(3)小标题进行显示

(4)可进入提示进行设置显示的格式。

(5)FVS开发中的效果和预览的实际效果一致,而FRM决策报表(只能预览到浏览器才能看最终结果),会比决策报表更方便的验证结果。
3.5.2 参数如何对应图表
说明:需拖出对应的控件,控件名修改成对应的参数名称,只要数据集SQL里有这个参数,选择后就会出对应结果。
参数配置三要素:
(1)数据集SQL里要有对应的参数,每次选择完参数后下面的图表重新查询数据库结果进行展现

(2)控件名要和SQL里写的参数名对应上
(3)要选择参数值数据库里有的数据才能正常显示图表。

合同日期设置了开始时间和结束时间,结束时间如下配置。

3.5.3 指标卡设置数据
(1)图表内拖出对应的指标卡

(2)选中对应的指标值

(3)选择”样式“进行配置显示的数据格式和颜色

3.5.4 量表设置
(1)找到仪表盘,拖入对应的量表

(2)配置数据如下:目标值可自定义为1

(3)相关设置格式

3.5.5 Tab块切换放图表
(1)容器里拖出Tab

(2)拖入后选中对应的页面可拖入相关图表

(3)相关名称可在右边进行修改

(4)交互轮播

3.5.6 条形图
(1)拖入条形图到TAB块内

(2)放入对应的数据集数据进行展现
注:条形图顺序是从下到上的,所以SQL写的时候可以先把前10拿出来后,再正序进行排序。

(3)如有多指标,可以

(3)去掉图例

(4)显示标签值

(5)大区排行和督导排行操作一致。
3.5.7 表格
(1)点击文字——拖入”表格“放到左下角位置,进入”编辑组件“

(2)拖入对应的数据集SQL到表格上

(3)设置小数显示格式

(4)冻结表格表头
说明:一般表格不合适全部显示结果,可以出现滚动条或换页进行查看

(5)表格跑马灯
添加交互的上下轮播功能:

setTimeout(() => {
duchamp.getWidgetByName("表格").startMarquee(
{
mode:'item', //滚动内容为逐条滚动
speed:30, //滚动速度为 30px/s
to:'top', //滚动方向为向上滚动
stopOnHover:true, //鼠标悬浮时停止滚动
joinable:true, //滚动方式为首尾相接
}
); }, 500)
参考文档:
JS实现FVS表格跑马灯 https://help.fanruan.com/finereport/doc-view-5156.html
(6)如预览不会动,检查一下”表格“对应的命名和JS是否一致

(7)修改组件名方法

3.5.8 地图
(1)拖出地图到界面上
图表——地图类——区域地图(举例),选择合适的图表。

(2)省排行数据放入地图

(3)可进行地图的渐变颜色配置
颜色配置完后,可进行预览查看。

(4)如何联动"表格"进行显示对应省的货号数据
选中地图——交互——组件联动

如下配置,只下钻对应图表里,选择对应的指定对象
注:这边的选项命名里会加上对应的前缀页面名

参数的具体写法如下:
注:表格的数据集SQL里需要有对应的参数不然无法正确接收结果

3.5.9 折线图
前推12月零售额趋势查看
(1)图表——折线图类——折线图
拖出来后,放入对应的数据集数据。

(2)如只有一个折线图,直接去掉图例。

(3)设置好显示的数据格式

(4)显示的X轴可设置文本旋转角度。
3.5.10 跳转明细表
(1)放一个图片,用来跳转一张cpt报表

(2)交互——网页链接/弹出框

(3)按需进行选择弹出方式,已弹出框为例

(4)选择模板链接
进入选择对应本地开发好的明细报表。

(5)参数按需配置
如下说明:开始时间和结束时间按FVS选择的日期带到明细表,如下配置,有些经过控件转换格式会变掉,所有参数接收值格式可以用format调整。

(6)弹出的大小进行设置

(7)跳转预览样式如下
3.5.11 扩展资料:
相关图形显示隐藏JS内置,如查看相关内容
FVS显示隐藏组件事件 https://help.fanruan.com/finereport/doc-view-5336.html
3.5.12 明细报表制作
用来跳转报表使用:
(1)明细SQL
select
DEALER_ID as "所属组织ID"
,ORG_NAME as "所属组织"
,STANDARD_CUSTOMER_NAME as "标准客户名"
,STORE_CODE as "门店编码"
,STORE_NAME as "门店名称"
,SALES_ORDER_NO as "零售单号"
,CONTRACT_DATE as "合同日期"
,PRODUCT_NO as "货号"
,CUSTOMER_NAME as "客户名称"
,CUSTOMER_CELLPHONE as "客户电话"
,RETAIL_CENTER_CODE as "所属运营中心编码"
,RETAIL_CENTER_NAME as "所属运营中心"
,AREA_DIRECTOR_CODE as "大区负责人工号"
,AREA_DIRECTOR_NAME as "大区负责人"
,SUPERVISOR_CODE as "督导工号"
,SUPERVISOR_NAME as "督导负责人"
,sum(ORDER_QTY) as "数量"
,sum(DEAL_AMT) as "行成交金额"
,avg(TOTAL_DEAL_AMT) as "整单金额"
from "TRAIN_DATA"."SD_SALES_ORDER_EXTENSION_TARIN" t
where 1=1
${if(len(START_DATE) == 0,"","and t.CONTRACT_DATE>=('" + START_DATE + "')")}
${if(len(END_DATE) == 0,"","and t.CONTRACT_DATE<= ('" + END_DATE + "')")}
${if(len(SH_START_DATE) == 0,"","and t.AUDIT_TIME>= '" + SH_START_DATE +"'")}--审核日期
${if(len(SH_END_DATE) == 0,"","and t.AUDIT_TIME<= '" + SH_END_DATE + " 23:59:59'")}
--审核结束日期
${if(len(STATUS_CODE) == 0,"","and t.STATUS_CODE in ('" + STATUS_CODE + "')")} --订单状态
${if(len(BUSI_DEPT_CODE) == 0,"","and t.BUSI_DEPT_CODE in ('" + BUSI_DEPT_CODE + "')")} --事业部
${if(len(RETAIL_CENTER_CODE) == 0,"","and t.RETAIL_CENTER_CODE in ('" + RETAIL_CENTER_NAME + "')")} --中心
${if(len(SUPERVISOR_CODE) == 0,"","and t.SUPERVISOR_CODE in ('" + SUPERVISOR_CODE + "')")} --督导
${if(len(PRODUCT_NO) == 0,"","and t.PRODUCT_NO like '%" + PRODUCT_NO +"%'")}--货号
${if(len(ORG_NAME) == 0,"","and t.ORG_NAME like '%" + ORG_NAME +"%'")}--组织名称
${if(len(DEAL_AMT_START) == 0,"","and t.TOTAL_DEAL_AMT >= ('" + DEAL_AMT_START + "')")}--整单金额
${if(len(DEAL_AMT_END) == 0,"","and t.TOTAL_DEAL_AMT <=('" + DEAL_AMT_END + "')")}
group by
DEALER_ID-- as "所属组织ID"
,ORG_NAME-- as "所属组织"
,STANDARD_CUSTOMER_NAME-- as "标准客户名"
,STORE_CODE-- as "门店编码"
,STORE_NAME-- as "门店名称"
,SALES_ORDER_NO-- as "零售单号"
,CONTRACT_DATE-- as "合同日期"
,PRODUCT_NO-- as "货号"
,CUSTOMER_NAME-- as "客户名称"
,CUSTOMER_CELLPHONE-- as "客户电话"
,RETAIL_CENTER_CODE-- as "所属运营中心编码"
,RETAIL_CENTER_NAME-- as "所属运营中心"
,AREA_DIRECTOR_CODE--as "大区负责人工号"
,AREA_DIRECTOR_NAME-- as "大区负责人"
,SUPERVISOR_CODE-- as "督导工号"
,SUPERVISOR_NAME-- as "督导负责人"
--order by t.TOTAL_DEAL_AMT desc
(2)事业部_维表
SELECT BUSI_DEPT_CODE,BUSI_DEPT_NAME
FROM "TRAIN_DATA"."ORG_MANU" T
GROUP BY BUSI_DEPT_CODE,BUSI_DEPT_NAME
(3)运营中心_维表
SELECT RETAIL_CENTER_CODE,RETAIL_CENTER_NAME
FROM "TRAIN_DATA"."ORG_MANU" T
WHERE 1=1
${if(len(BUSI_DEPT_CODE) == 0,"","and T.BUSI_DEPT_CODE in ('" + BUSI_DEPT_CODE + "')")} --事业部
GROUP BY RETAIL_CENTER_CODE,RETAIL_CENTER_NAME
(4)督导_维表
SELECT SUPERVISOR_CODE,SUPERVISOR_NAME
FROM "TRAIN_DATA"."ORG_MANU" T
WHERE 1=1
${if(len(BUSI_DEPT_CODE) == 0,"","and T.BUSI_DEPT_CODE in ('" + BUSI_DEPT_CODE + "')")} --事业部
${if(len(RETAIL_CENTER_CODE) == 0,"","and T.RETAIL_CENTER_CODE in ('" + RETAIL_CENTER_CODE + "')")} --中心
GROUP BY SUPERVISOR_CODE,SUPERVISOR_NAME
相关参数默认值:
当前月的第一天:DATEINMONTH(TODAY(),1)
当天:TODAY()
更多公式请查看知识库:常用公式记录

3.6 布局及最终样式调优
(1)分辨率大小
说明:如是一屏显示结果(不出现任何滚动条),默认的1280*720能满足不同尺寸的样式开发。不建议横向和纵向都有滚动条
其它场景1:如大屏多屏显示的,加宽度。
其它场景2:做分析报告类的,加高度。
其它场景3:移动端按375*高度按放的图表来设置

(2)画布自适应:

(3)检查界面上所有图表是否按标题,小标题,表头,内容,悬浮值等主题保持一致。
行和列对应的图表是否对齐,统一各模块的小标题样式及内容文字大小。图表内的显示文字及悬浮值是否统一

(4)可适当的加入一些辅助小图标,比如跳转明细,或每个主题标题前面加小图标。
小图片下载:https://www.iconfont.cn/?spm=a313x.search_index.i3.2.5ca23a81b2cik7
基于线下FVS培训后,有Report经验的同事将能够更好地应用FVS进行开发,而没有基础的同事也能根据场景实现相应的开发。我们会对相关功能和图表制作进行实操讲解,并展示联动效果和轮播效果。大家都积极的应用到实际业务场景中。
案例如下:报表可复用模板:
(1)平台可视化的监控预警
拟定公司通报稽查的角色视角,用户视角,报表视角进行分析。
角色视角:以角色展开查看对应的报表和用户使用情况。

用户视角:以用户展开查看对应的报表和角色使用情况。

报表视角:以报表展开查看对应的角色和用户使用情况。

- 发布效率指标监控
用途:监控OA发布流程的相关指标,处理流程是否符合预设的要求。

- 权限指标监控总览
用途:查看平台整理的监控权限相关的指标,进行定期领域的通报。

- 数据门户报表访问情况
用途:每个报表的使用情况和访问时长,定期进行优化。

|