echarts label formatter params backgroundColor rich 标签设置背景图并传参
小技巧
如果想给label设置背景图,需要使用到rich属性,按照官网示例就可以实现,折线、柱图都一样。
但是大多数情况formatter都是用来通过params里面参数设置自定义的逻辑,如何将两者结合呢。其实formatter接收的就是一个function,用rich的时候简写了,直接返回了数组,依旧可以用自定义方法,只要返回指定格式就OK了。
label: {
show: true,
position: 'top',
distance: 10,
formatter: (params) => {
//自定义逻辑,返回指定格式即可
return params.value == 0 ? "" : ['{img|' + (consumeCount[params.dataIndex / 2] * 100).toFixed(0) + '%}'];
},
rich: {
img: {
backgroundColor: {
image: '/xx/xx.png' //注意路径带不带/
},
color: "#fff",
height: 30,
width: 38,
align: 'center'
}
}
}
效果图
测试签名