(本文档仅供参考,涉及的宏代码已验证适用于 V11 版本。由于宏代码在特定场景下可能存在限制,如果与实际应用场景不完全匹配,请根据具体要求自行调整相关代码,以确保其满足实际使用要求。)
仪表盘使用联合图组件,希望可以让某个子图形例如线图都正常显示最大最小值的标注,而另一个子图形-柱图都不显示标注,如何实现?
option = { "series": [{ "markPoint": { "data": [] } }, { "markPoint": { "data": [] } }, { "markPoint": { "data": [{ "type": "max", "name": "期间目标值1" }, { "type": "min", "name": "测试最小值1" }] } }, { "markPoint": { "data": [{ "type": "max", "name": "期间目标值2" }, { "type": "min", "name": "测试最小值2" }] } }] } |
组件设置——属性——自定义扩展属性:
效果如图:
(2)数据不固定,例如图例系列堆积的数量会随着筛选器变化而变化,此时随着筛选器的选中值改变,会导致series长度变化,因此不能像自定义属性那样写死哪个有标注哪个没有标注。需要写宏处理,思路为:获取图形的options,然后遍历,对于类型为线图的,就添加标注。
宏示例:注意是渲染前的宏
##名称:渲染前 类型:ClientSide 对象:图表_3 事件:onBeforeRender function main(page: IPage, portlet: IEChartsPortlet) { let options = portlet.getChartOptions() console.log('===> options,', options) options.series.forEach((item:any) => { console.log('===> item:', item) if (item.type === 'line') { item.markPoint = { "data": [{ "type": "max", "name": "测试最大值" }, { "type": "min", "name": "测试最小值" }] } } }); portlet.setChartOptions(options) } |
组件设置——交互——宏管理——对联合图图表组件——右键新建宏——事件:onBeforeRender(组件渲染前)
效果如图:切换其他筛选器条件,也是根据线图类型判断的