echarts饼图的label小图标的颜色自定义

echarts的功能很强大,文档里的配置很多,如下图我标记的部分,我看了文档网上也有很多博客是说这样的解决办法的,但是有点不尽如人意,label的部分是没有相关配置的,但是也可以做,相关配置只涉及到了某一个icon配置,如果有小伙伴知道怎么配置请在下方留言。我介绍一下我怎么做的
1680741492981.png

思路

  1. 如果只可以设置每一个的图标颜色,那么正常来说可以循环
  2. 也可以分别设置每个图标的颜色,利用label里面的formatter的参数params里面的属性params.dataIndex对图标进行编号,然后在rich里去设置样式。

示例代码

`

label:{
    formatter: (params)=>{
      return '{icon'+params.dataIndex +'|●}{name|'+params.name+"\n"+'}';
    },
    rich:{
        value:{
            fontSize: 10,
            margin: 5,
            // fontWeight: 400,
            lineHeight: 13.32,
            color: '#909399',
        },

        icon0:{
            color: '#6395f9',
            fontSize: 16,
            padding: [2, 5],
            borderRadius: 5
        },
        icon1:{
            color: '#f7c42d',
            fontSize: 16,
            padding: [2, 5],
            borderRadius: 5
        },
        icon2:{
            color: '#6d7e9d',
            fontSize: 16,
            padding: [2, 5],
            borderRadius: 5
        },
        icon3:{
            color: '#6adcaf',
            fontSize: 16,
            padding: [2, 5],
            borderRadius: 5
        },
    },
  },

`
其余的可以按自己要求进行设置

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值