【FineReport】下钻地图支持同时显示散点并且联动条形图

最新推荐文章于 2025-04-30 15:34:37 发布

沐浴清风z

最新推荐文章于 2025-04-30 15:34:37 发布

阅读量1.6k

点赞数

分类专栏： FineReport 文章标签：大数据

本文链接：https://blog.youkuaiyun.com/daliangliangliangge/article/details/125559246

版权

FineReport 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在帆软报表中实现下钻地图与散点图的结合显示，通过自定义JS标签实现散点大小变化，并设置条形图以满足多样化需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能

帆软原生的下钻地图中是不支持同时显示散点的，利用帆软的标签显示可以实现这一功能。并联动通过不同的公式去实现

效果

在这里插入图片描述

步骤

数据集

数据集里用了两个level下钻参数，相当于定位是钻到哪一层级

select
${is_1_2_area} 类型,*,${col} 列1
from(
select	'河南省'	省份,	'南阳市'	城市,	'西峡县'	区县,	23377 	投资金额,	23	项目数量	union
select	'河南省'	省份,	'南阳市'	城市,	'卧龙区'	区县,	11931 	投资金额,	12	项目数量	union
select	'河南省'	省份,	'南阳市'	城市,	'宛城区'	区县,	17954 	投资金额,	18	项目数量	union
select	'河南省'	省份,	'郑州市'	城市,	'金水区'	区县,	13904 	投资金额,	14	项目数量	union
select	'河南省'	省份,	'郑州市'	城市,	'中原区'	区县,	24711 	投资金额,	25	项目数量	union
select	'河南省'	省份,	'郑州市'	城市,	'二七区'	区县,	16403 	投资金额,	16	项目数量	union
select	'北京市'	省份,	'北京市'	城市,	'昌平区'	区县,	16186 	投资金额,	16	项目数量	union
select	'北京市'	省份,	'北京市'	城市,	'朝阳区'	区县,	19726 	投资金额,	20	项目数量	union
select	'北京市'	省份,	'北京市'	城市,	'海淀区'	区县,	10739 	投资金额,	11	项目数量	union
select	'浙江省'	省份,	'杭州市'	城市,	'西湖区'	区县,	24021 	投资金额,	24	项目数量	union
select	'浙江省'	省份,	'杭州市'	城市,	'临安区'	区县,	28219 	投资金额,	28	项目数量	union
select	'江苏省'	省份,	'南京市'	城市,	'玄武区'	区县,	24137 	投资金额,	24	项目数量	union
select	'江苏省'	省份,	'南京市'	城市,	'秦淮区'	区县,	17058 	投资金额,	17	项目数量	union
select	'江苏省'	省份,	'无锡市'	 城市,	    '宜兴市'	区县,	21470 	投资金额,	21	项目数量	union
select	'江苏省'	省份,	'无锡市'	城市,	'江阴市'	区县,	27139 	投资金额,	27	项目数量	union
select	'山东省'	省份,	'济南市'	城市,	'历城区'	区县,	24876 	投资金额,	25	项目数量	union
select	'山东省'	省份,	'济南市'	城市,	'天桥区'	区县,	28342 	投资金额,	28	项目数量	union
select	'山东省'	省份,	'济南市'	城市,	'市中区'	区县,	22806 	投资金额,	23	项目数量	union
select	'陕西省'	省份,	'西安市'	城市,	'雁塔区'	区县,	23980 	投资金额,	24	项目数量	union
select	'陕西省'	省份,	'西安市'	城市,	'新城区'	区县,	28603 	投资金额,	29	项目数量	union
select	'山西省'	省份,	'忻州市'	城市,	'代县' 区县,	28345 	投资金额,	28	项目数量	union
select	'山西省'	省份,	'忻州市'	城市,	'五台县'	区县,	26138 	投资金额,	26	项目数量	union
select	'山西省'	省份,	'忻州市'	城市,	'忻府区'	区县,	18623 	投资金额,	19	项目数量	union
select	'云南省'	省份,	'昆明市'	城市,	'盘龙区'	区县,	29071 	投资金额,	29	项目数量	union
select	'贵州省'	省份,	'贵阳市'	城市,	'云岩区'	区县,	20325 	投资金额,	20	项目数量	union
select	'贵州省'	省份,	'贵阳市'	城市,	'南明区'	区县,	27548 	投资金额,	28	项目数量	union
select	'安徽省'	省份,	'合肥市'	城市,	'长丰县'	区县,	26888 	投资金额,	27	项目数量	union
select	'安徽省'	省份,	'合肥市'	城市,	'庐阳区'	区县,	25984 	投资金额,	26	项目数量	union
select	'湖北省'	省份,	'武汉市'	城市,	'江汉区'	区县,	17301 	投资金额,	17	项目数量	union
select	'湖北省'	省份,	'武汉市'	城市,	'武昌区'	区县,	17786 	投资金额,	18	项目数量	)t
where 1 = 1
${if(len(level1_area)=0||level1_area='全部',"","and 省份 = '" + level1_area + "'")}
${if(len(level2_area)=0||level2_area='全部',"","and 城市 = '" + level2_area + "'")}
order by 投资金额 desc

在这里插入图片描述

地图设置

数据设置

数据集按照正常形式去选择，地图自带汇总
在这里插入图片描述

下钻设置

这里传递了三个参数
is_1_2_area=if(AREA_NAME="中国","省份",if(right(AREA_NAME,1)= "省","城市",if(right(AREA_NAME,1)= "市","区县","区县")))
是定位参数，下一层到底是省份还是区县
level1_area=if(AREA_NAME="中国","全部",if(right(AREA_NAME,1)= "省",AREA_NAME,if(right(AREA_NAME,1)= "市",$level1_area)))
如果是最全国层，则值为全部，如果省份层，则为对应的省名，如果是市层，则对应为市名
level2_area=if(AREA_NAME="中国","全部",if(right(AREA_NAME,1)= "省","全部",if(right(AREA_NAME,1)= "市", AREA_NAME,$level2_area)))
同上
(report2_dt_excel是条形图所在的report的名称)
在这里插入图片描述

散点设置

散点图这里其实使用的是标签显示，本身下钻不支持同时显示散点，通过JS自定义标签，实现根据不同数据显示不同大小的点在这里插入图片描述

 function(){
 var a=this.points[1].getTargetValue();
 return  "<span style='font-family:PingFang SC;font-size:"+((parseInt(a)*1.0/100)*40+20)+"px;color:#F6D447;'>●</span>"  
 }

条形图设置

使用JS自定义条形图，这样可以满足更加多样化的设置，包括后续如果要增加排序等
在这里插入图片描述

//投资金额
"<div style='background:#F5F9FF;height:2rem'>" + "<div style='border-radius:0px 10px 10px 0px;opacity:1;height:2rem;background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#253F8D), to(#253F8D));width:" + (B2 / B3) * 100 + "%;'>" + "<span style='font-family:PingFang SC;font-size:10px;color:#B7CAE6;padding:0px 0px 0px 0px;position:absolute'>" + "&nbsp;" + format(B2, "#,##0") + "</span>" + "</div></div>"

//项目数量
"<div style='background:#F5F9FF;height:2rem'>" + "<div style='border-radius:0px 10px 10px 0px;opacity:1;height:2rem;background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#BA3540), to(#BA3540));width:" + (D2 / D3) * 100 + "%;'>" + "<span style='font-family:PingFang SC;font-size:10px;color:#EABDBD;'>" + "&nbsp;" + format(D2, "#,##0") + "</span>" + "</div></div>"

//企业数量
"<div style='background:#F5F9FF;height:2rem'>" + "<div style='border-radius:0px 10px 10px 0px;opacity:1;height:2rem;background:-webkit-gradient(linear, 0% 0%, 100% 0%,from(#F6A935), to(#F6A935));width:" + (F2 / F3) * 100 + "%;'>" + "<span style='font-family:PingFang SC;font-size:10px;color:#EAE2BD;'>" + "&nbsp;" + format(F2, "#,##0") + "</span>" + "</div></div>"