先上图 146961 这个是移动端一个报表，所有样式上这么小，但是瀑布图制作的思路是一致的。 1. 使用堆积柱状图 2. 设计好数据源，如下图 其中注意的是脱落人力是要减的，所有下限值为：初期+增员-脱落 146962 3. 图表-> 特效-> 条件显示，设置下限值透明，边框为无 4. 使用自定义标签，控制只显示上限值 function(){ console.log(`${this.name}_${this.seriesName}:${this.value}`); if (this.seriesName === '上限值') { return (this.name ==='脱落人力'?'-':'' ) + this.value; } else { return ''; } } 5. 使用自定义提示，控制只显示上限值 function(){ return this.category + ":" + this.points.value; } 6. 自己调下其他细节，完成。 分享模板 146963 编辑于 2021-7-8 16:54 编辑于 2021-7-8 16:54

FR没有比较的好的提示，单元格的内容提示也是基于html元素本地的title属性W3School.com.cn 实现多行文字，还不能直接设值 说明文字1\n说明文字2， 需要通过js设置（文档） $("td").attr("title","月底在职的销售员\n含月底当天离职"); 而且没有很好的效果。 这里我们使用第三方的一个库（boostrap）来实现自定义的提示。（更灵活，方便，美观） 看下效果 143139 143140 实现方法 1. 拖一个lable控件到参数栏，控件名称为 label0，主要和代码中保持一致就行 2. body的初始化事件中添加以下代码 setTimeout(function() { var options = { container: 'body', placement: "left", html: true, trigger: 'hover' , template: ` `, title: function() { return ` 曝光人数：指点击了标签的用户总数 曝光率：点击商品人数在曝光人数的占比，=点击商品人数/曝光人数 点击购买意向率：点击购买人数在点击商品人数中的占比，=点击购买人数/点击商品人数 购买率：购买人数在点击商品人数的占比，=购买人数/点击商品人数` }, } $(".pmeter-container div").html(" 指标含义?"); $(".pmeter-container div").css("position","absolute").css("width","80px").css("left","auto").css("right","20px"); $(".pmeter-container").css("position","initial"); $(".pmeter-container div").tooltip(options); }, 500);这里title中返回的内容就是自定义的提示内容，想怎么显示就怎么显示，自己写html即可。 3. 引入js插件 143141 插件在此，为精简过的boostrap插件，只包含必要的功能，可直接下载扔到自己服务器即可。 143128 编辑于 2021-4-15 19:07 编辑于 2021-4-16 11:19 编辑于 2021-4-16 15:11 编辑于 2021-4-16 15:12

正常情况 143115 降序 143116 升序 143117 参考文档： https://help.fanruan.com/finereport/doc-view-888.html https://help.fanruan.com/finereport/doc-view-894.html 实现方法： 1. 设置表头第一列（A1）动态参数， 添加了2个参数，a和asc 注意：我这里这列是日期，所以asc的值是：tointeger(format(A2,'yyyyMMdd')) 143112 设置其他需要排序的表头动态参数，a和第一列一样，asc为对应的扩展数据单元格，例如下图为K2 143114 2. 设置扩展数据列A2, A2扩展后排序为： if($a = 1, eval($asc), eval($asc) * -1) 143113 3. 设置样式，找到对应表头单元格，形态设置改为公式形态 第一列为日期，所以条件略有不同 =IF(asc == "tointeger(format(A2,'yyyyMMdd'))", IF(a == 0, ""+$+"", ""+$+""), ""+$+"") 其他数据列形态设置： 这里巧妙的写了一个统一的判断条件，不然条件 asc == 'F2', asc == 'G2' 这样单元格每个都不同的话，工作量巨大。 =IF(asc == CONCATENATE(CHAR(COL($)+64),row($)+1), IF(a == 0, ""+$+"", ""+$+""), ""+$+"") 4. 设置下表头样式，去掉下划线，文字修改为黑色。 每次点击超级链接后，文字颜色自动变成超链接样式。 编辑于 2021-4-15 18:13 编辑于 2021-4-15 18:23 编辑于 2021-4-15 18:24 编辑于 2021-4-15 18:24 编辑于 2021-4-15 18:26 编辑于 2021-4-15 18:31

我们自己重新做了个web页面开查看报表。 主要这么些功能 报表目录结构较多较深时，打开不方便，我们做了三级目录分别展示 报表地址可以直接复制，让对方打开更为方便。 可以插入自己开发的web页面，报表做不到的需求随便来！ 重写的登录页，源码已开放，各位小伙伴可以自行修改。 142362 一级目录下拉框，多个tab打开时，当前打开的报表会高亮，同时一级二级树状目录都会高亮，一眼就看到报表的前三级路径。 tab的左侧有个刷新按钮，比原来hover弹出刷新按钮的方式更为方便。 142364 二级目录在上方展示，三级目录在左侧树状结构展示，更加方便快速查看报表 142363 自定义页面，通过配置无缝接入报表信息。只需配一个空白报表，拿到目录ID, 然后在源码的setting中设置 vuePagePaths: { '00a9e37f-ca1f-49cc-bb0b-f30f27f7ad1f': '/testpage' }, 142365 setting 文件 配置games 属性，可以自动打开某个目录对应的默认页面，更加方便快捷。 games: [ { name: '财务部门', tabs: [ { name: '概览', mainid: '37264d12-7597-4ee7-9068-3dd6633b108f', }, ], }, { name: '客服', tabs: [ { name: '今日', mainid: 'f880ddb1-03dc-4559-9d4f-b7658f8770db', } ] } ] 源码地址 https://github.com/harryYao/FineBiWeb，使用者需要一点的前端开发基础，有webpack+vue的相关开发经验 1. git clone https://github.com/harryYao/FineBiWeb.git 2. 进入目录 cd FinebiWeb 3. 安装依赖 yarn 4. 启动开发模式 npm run dev 如果本地有安装FineBi服务，那么启动FIneBI, 打开以下地址就可以看到页面 http://localhost:37799/webroot/# 如果是线上项目 在config/index.js 文件中 修改 dev.proxyTable, target修改为你的线上地址 proxyTable: { "/webroot/decision": { target: "http://localhost:37799/", changeOrigin: true } }, 5. 配置setting, 根据你的报表目录结构，配置需要展示的目录和默认打开的页面 如何寻找目录ID？ 1. 打开原来的finebi管理后台， F12找到对应iframe, 如下 其中的37264d12-7597-4ee7-9068-3dd6633b108f 就是 目录id 2. 开启刚才的 开发模式，点开对应的报表，url中就已经带有目录id 例如： http://localhost:37799/webroot/#/?page=a52d8875-7e31-413a-bcce-5c7059b554db&title=%E4%BA%A4%E5%8F%89%E8%A1%A8 6. 构建部署 npm run build 将构建后的dist中的全部文件拷贝到FineBI对应安装目录下的 D:\program\FineBI5.1\webapps\webroot 即可 7. 完成， 打开 http://localhost:37799/webroot/#/login 就可以看到我们的页面 编辑于 2021-3-5 12:26