• 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,
                 38,
                align: 'center'
            }
        }
    }
    

    效果图

    测试签名
  • 相关阅读:
    截取
    逃避系统警察
    刷题
    排队
    侦察兵
    朋友
    楼层
    解码
    倒水
    魔法阵
  • 原文地址:https://www.cnblogs.com/WinterSir/p/14984707.html
Copyright © 2020-2023  润新知