(本文档仅供参考,请根据实际需求内容调整)
仪表盘中有一筛选器和图形组件,如何根据筛选器的值控制图形的显示隐藏。
可以考虑对筛选器组件创建如下宏代码调整实现
/** * 宏示例: * 切换筛选参数隐藏组件 * 事件: * onBeforeRender * 作用: * 通过筛选器选择参数,根据参数隐藏对应标题的组件 * (组件标题是组件设置中的 "组件" -> "标题") * 注意事项: * 1、这种代码用多了可能会有性能问题 */ function main(page: IPage, portlet: IFilterPortlet) { let id = page.getId() + portlet.getId() // 设置筛选器切换值时的回调函数 portlet.setFilterValueChangeHandler((value: any) => { let changeValue = value[0] // 如果当前修改的值跟之前一样就直接return if (changeValue === SmartbiXMacro.data[id]) return // 通过筛选值获取同名的组件 let hidePortlets: IPortlet[] = page.getPortletsByTitle(changeValue) hidePortlets.forEach((portlet: IPortlet) => { // 将同名组件隐藏 portlet.hide() }) // 通过上次隐藏的组件名称获取组件 let showPortlets: IPortlet[] = page.getPortletsByTitle(SmartbiXMacro.data[id]) showPortlets.forEach((portlet: IPortlet) => { // 将上次隐藏的组件显示 portlet.show() }) // 留存本次的筛选条件 SmartbiXMacro.data[id] = changeValue }) } |
注意:
1、组件名称与筛选器钻中值一致
2、对筛选器创建宏代码
效果如下图:
1、图形组件组件名称为2016
2、当筛选器选择2016时同名组件2016隐藏