(本文档仅供参考,请根据实际需求内容调整)
问题
仪表盘中有一筛选器和图形组件,如何根据筛选器的值控制图形的显示隐藏。
解决方案
可以考虑对筛选器组件创建如下宏代码调整实现
/**
* 宏示例:
* 切换筛选参数隐藏组件
* 事件:
* 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、组件名称与筛选器中值一致,即实际以组件名称来作为筛选器的备选值,这时候不需要单独去获取组件的ID ,就可以实现切换筛选器隐藏对应组件的效果。
2、对筛选器创建宏代码
效果如下图:
1、图形组件组件名称为2016
2、当筛选器选择2016时同名组件2016隐藏