echarts饼图自定义

• 代码

//在线 #3254dd   离线 #BEE5FB;

option = {
  title: {
    text: '',
    subtext: '',
    left: ''
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
   bottom: '5%',
   formatter: function(name) {
                   var data = option.series[0].data;//获取series中的data
                   var total = 0;
                   var tarValue;
                   for (var i = 0, l = data.length; i < l; i++) {
                       total += data[i].value;
                       if (data[i].name == name) {
                           tarValue = data[i].value;
                       }
                   }
                   var p = ((tarValue / total) * 100);
                   return name + " " + " " + p.toFixed(2) + "%";
  },
  // left: 'center'
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 45, name: '在线',itemStyle: {color: '#3254dd'} },
        { value: 120, name: '离线',itemStyle: {color: '#BEE5FB'} },
      ],
      // 开启 label 显示百分比
      // label: {
      //   normal: {
      //     show: true,
      //     formatter: '{b}: {d}%'
      //   }
      // }
      // label: {
      //           formatter: '{b}: {d}%'
      // }
      // emphasis: {
      //   itemStyle: {
      //     shadowBlur: 10,
      //     shadowOffsetX: 0,
      //     shadowColor: 'rgba(0, 0, 0, 0.5)'
      //   }
      // }
    }
  ]
};

• 效果图

  
  image.png

• 标签文字颜色与饼图颜色一致【代码1】

var option = {
    legend: {
        textStyle: {
            color: 'pieColor' // 这里设置为与饼图统一的颜色变量名
        },
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: [
                {value: 235, name: '直接访问'},
                {value: 274, name: '邮件营销'}
            ],
            // 设置饼图的颜色
            itemStyle: {
                color: function(params) {
                    var colorList = ['#C1232B', '#B5C334'];
                    return colorList[params.dataIndex];
                }
            }
        }
    ]
};
 
// 将饼图颜色设置为与图例一致
var pieColor = option.series[0].itemStyle.color;
option.legend.textStyle.color = function(params) {
    return pieColor(params.dataIndex);
};

• 效果

  
  image.png