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

weixin_56936835

已于 2023-04-07 07:51:54 修改

阅读量1.1k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2023-04-06 19:46:05 首次发布

本文链接：https://blog.csdn.net/weixin_56936835/article/details/129997568

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在Echarts中通过formatter和rich属性自定义图表标签的颜色，特别是对于没有直接配置项的图标颜色，通过dataIndex进行区分并在rich里设置不同样式的例子。代码示例展示了如何为不同数据点设置不同颜色的图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

思路

如果只可以设置每一个的图标颜色，那么正常来说可以循环
也可以分别设置每个图标的颜色，利用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
        },
    },
  },

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