:仪表板筛选器\+报表查询面板,参数联动全闭环)
系列导读本系列带你打通 JSON API 带参数数据源的全链路——从数据接入、数据准备到仪表板/报表的参数联动。第 1 篇接入篇配置带参数的 JSON API 数据源第 2 篇准备篇直连模型选型参数为什么不生效第 3 篇联动篇仪表板筛选器报表查询面板参数联动全闭环参数已经流到了哪一层前两篇我们走完了两段路第一篇配好了带id参数的 JSON 数据源基址jsonplaceholder.typicode.com三个端点 posts/users/albums第二篇基于直连模型把数据源变成了可分析的数据模型参数从数据源流转到了模型层但到目前为止参数用的还是默认值1,2。真正的业务场景里用户想在大屏上切换租户、在报表查询面板里输入日期范围让数据跟着变。本篇带你完成四件事仪表板侧仪表板参数 筛选器联动改筛选器即触发接口重新调用仪表板嵌入场景用 URL 传参?dp{id:[2]}由宿主系统动态传值报表侧报表参数 查询面板控件驱动参数参数驱动数据集仪表板是筛选器驱动报表是查询面板驱动机制不同选型不同一、仪表板仪表板参数 筛选器联动1.1 新建仪表板绑定直连模型新建仪表板数据源选择第二篇建好的直连模型。拖一个数据表组件到画布绑定 users 表的字段如绑定 id、 name、email、phone。1.2 仪表板参数关联数据源参数给组件绑定模型的数据后系统会自动生成一个仪表板参数和模型参数绑定。这个仪表板参数要和第二篇数据源里的id参数对应起来——仪表板参数是对外的数据源参数是对内的两者要建立关联。在仪表板的全局属性设置里找到仪表板参数可以看到已自动新增一个仪表板参数。仪表板参数属性介绍1.3 加筛选器组件绑定仪表板参数拖一个筛选器组件到仪表板如标签筛选器绑定数据绑定 posts 表的 id设置属性多选。编辑仪表板参数将筛选器绑定至仪表板参数。选中筛选器给筛选器的默认值绑定仪表板这样筛选器默认就会选中 1 和 2。1.4 闭环验证——更改筛选器值数据刷新现在验证闭环。在仪表板预览界面修改筛选器的值观察数据表数据用户改筛选器选中的值 → 仪表板参数值改变例如变成4仪表板参数传递到模型 → 模型带着id4调接口接口返回 →https://jsonplaceholder.typicode.com/users?id4的数据数据表刷新 → 显示 id 为 4 的数据参数一变接口重新调用数据实时刷新。这就是我们要的闭环。二、仪表板嵌入URL 传参筛选器适合业务用户在 BI 里手动操作。但仪表板嵌入到门户网站或其他应用时往往需要宿主系统自动传参不让用户手动选。Wyn 支持通过 URL 传参。在仪表板的访问 URL 后拼接参数即可关键在dp{id:[2]}这个部分——dp是仪表板参数的缩写后面跟着参数名和值的 JSON。这个id就会作为仪表板参数传递到模型在触发接口用id2调用。多租户场景下宿主系统根据当前登录租户动态拼接这个 URL就能实现每个租户看自己的数据全程无需用户手动操作。URL 传参和筛选器可以并存URL 传参是初始值筛选器让用户在此基础上进一步调整。三、报表报表参数 查询面板仪表板讲完了来看报表。报表的参数机制和仪表板不一样是查询面板驱动——用户先在查询面板里填条件再点查询生成报表。3.1 报表参数机制与仪表板的差异先说清楚两者区别这决定了你该用哪个简单说仪表板像边看边筛报表像先问再答。3.2 新建报表数据集引用 JSON 数据源参数创建报表前先创建数据集选择直连数据集。数据集的数据源选第一篇配好的 JSON 数据源将带参数的表拖动到关联关系界面例如 users创建数据集参数参数类型必须是用户输入然后将数据集参数和数据源参数绑定最后保存数据集。3.3 创建报表报表参数配置查询面板控件新建空白 RDL 报表选择上一步保存的数据集系统会自动创建一个和数据集参数同名的报表参数。报表参数是查询面板的骨架。报表参数名称 id类型字符串多值。接着配置报表参数的可用数据然后把它配置到查询面板上选择合适的控件类型例如下图我选择的是下拉列表。Wyn 的查询面板支持多种控件本例用下拉框控件让用户选择 id。3.4 闭环验证——查询面板传参预览报表在查询面板的列表框里选择3点击预览查询面板收集参数值 → 报表参数 id 3报表参数传入数据集 → 数据集带着id3 调接口接口返回 →https://jsonplaceholder.typicode.com/users?id3的数据报表渲染 → 展示 id 为 3 的数据和仪表板的闭环逻辑一致只是触发方式从筛选器实时联动变成了查询面板点查询。四、报表嵌入URL 传参下拉列表适合业务用户在 BI 里手动操作。但报表嵌入到门户网站或其他应用时往往需要宿主系统自动传参不让用户手动选。Wyn 支持通过 URL 传参。在报表的访问 URL 后拼接参数即可关键在dp{id:[4]}这个部分——dp是传递报表参数的关键后面跟着参数名和值的 JSON。这个id就会作为报表参数传递到数据集参数在到数据源参数从而触发接口用id4调用。多租户场景下宿主系统根据当前登录租户动态拼接这个 URL就能实现每个租户看自己的数据全程无需用户手动操作。五、仪表板 vs 报表参数机制对比表把两边的参数机制放一起对比方便选型一句话选型要交互、要实时切换用仪表板要固定格式、要复杂查询条件用报表。两者都能实现改参数即换数据只是交互形态不同。六、完整闭环演示把三篇串起来完整闭环是这样的举一个多租户场景的完整例子宿主系统识别当前登录租户 ID 5拼接仪表板 URL...?dp{id:[5]}仪表板加载参数id5下推到直连模型模型调用https://jsonplaceholder.typicode.com/users?id5接口返回租户 5 的数据仪表板展示租户在大屏上用筛选器进一步切换数据实时跟随全程参数驱动接口实时响应数据隔离且安全。【截图位置 11完整闭环示意图展示从用户操作到接口调用到展示刷新的全流程】七、系列总结三篇走完JSON API 带参数数据源的全链路打通了。回顾一下第一篇接入篇配好带参数的 JSON 数据源用基址 端点管理多个接口在基址定义公共参数id。第二篇准备篇选直连模型不是抽取模型和直连数据集不是缓存数据集让参数能在运行时实时生效参数经历数据源定义 → 模型引用 → 仪表板/报表使用三层流转。第三篇联动篇仪表板用仪表板参数 筛选器 URL 传参报表用报表参数 查询面板用户改参数 → 接口返回对应数据 → 展示刷新闭环成立。整条链路适用的场景就三个SaaS 多租户数据隔离、数据中台 API 服务化封装、IOT 物联网平台数据查询。本质都是BI 不能直连数据库只能通过 API 拿数据且数据要按参数动态过滤。希望这个系列能帮到正在做 BI 嵌入、多租户数据分析的同行。如果有疑问或想看其他场景的实操欢迎评论区交流。扩展链接嵌入式分析体验