echarts label formatter params backgroundColor rich 標籤設定背景圖並傳參
阿新 • • 發佈:2021-07-08
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' } } }