首页 前端知识 echarts饼图的label小图标的颜色自定义

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

2024-08-27 21:08:44 前端知识 前端哥 481 65 我要收藏

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
        },
    },
  },

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17073.html
标签
评论
发布的文章

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!