(本文档仅供参考,涉及的宏代码已验证适用于 V11 版本。由于宏代码在特定场景下可能存在限制,如果与实际应用场景不完全匹配,请根据具体要求自行调整相关代码,以确保其满足实际使用要求。)
问题描述:
仪表盘使用联合图组件,希望可以让某个子图形例如线图都正常显示最大最小值的标注,而另一个子图形-柱图都不显示标注,如何实现?

解决方案:
(1)若是数据是固定的,可以采用自定义属性的方式实现:
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(组件渲染前)

效果如图:切换其他筛选器条件,也是根据线图类型判断的
