嵌套饼图设置不同的颜色

最新推荐文章于 2023-03-03 09:46:18 发布

风向北吹i

最新推荐文章于 2023-03-03 09:46:18 发布

阅读量472

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/qq_40576178/article/details/124467582

版权

在这里插入图片描述

 let option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          right: 'auto',
          bottom: 0,
          textStyle: {
            color: ()=>{},
            fontSize: 26
          },
        },
        series:[
          {
            name:'参加人次',
            type: 'pie',
            // color:['#e85953','#44d9f5',  '#40c100'], // 红蓝绿 本色
            color:['#40c100', '#e85953', '#44d9f5'],  
            avoidLabelOverlap: true,  //避免标签重叠
            radius: ['46%', '80%'],
            itemStyle: {
              borderColor: '#201f1d',
              borderWidth: 9,          
            },
            labelLine: {
              length: 26,
              lineStyle: {
                color: "#dabb95",
              },
            },
            label: {
              show: true,
              position: 'outside',
              color:'#fff',
              fontSize: '27',
              // formatter: '{d}%',
              formatter: '{b}\n{c}人次',
              fontWeight:'bold',
            },
            data: this.pieData,
          },
          {
            name:'举办次数',
            type: 'pie',
            radius: '46%',
            itemStyle: {
              borderColor: '#201f1d',
              borderWidth: 9, 
              normal: {
                color: function(e){
                    // var colors=['#8b100a','#015d6e',  '#2e8205']  // 红蓝绿 本色
                    var colors=['#2e8205', '#8b100a', '#015d6e']  
                    return colors[e.dataIndex]
                }
            }, 
            },
            label: {
              show: true,
              position: 'inner',
              color:'#fff',
              fontSize: '22',
              // formatter: '{d}%',
              formatter: '{b}\n{c}次数',
              fontWeight:'bold',
            },
            labelLine: {
              show: false,
            },
            data: cishuData,
          },
        ]
      }