饼图指示线加圆点echarts 饼配置项内容和展示

饼图指示线加圆点

      let data = [{
    "name": "业务1",
    "value": 10
}, {
    "name": "业务2",
    "value": 15
}, {
    "name": "业务3",
    "value": 15
},
 {
    "name": "业务4",
    "value": 25
},
 {
    "name": "业务5",
    "value": 10
},
{
    "name": "业务6",
    "value": 25
},
];
let color = [ "#fec101", "#b5b8cd ", "#ff6226","#f60000","#2cc78f","#2ca7f9"]
// 这步主要是为了让小圆点的颜色和饼状图的块对应，如果圆点的颜色是统一的，只需要把itemStyle写在series里面
let setLabel = (data)=>{
    let opts = [];
    for(let i=0;i<data.length;i++){
        let item = {};
        item.name = data[i].name;
        item.value = data[i].value;
        item.label = {
            normal:{
                //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
                    show:true,
                    //a和b来识别不同的文字区域
                    formatter:[
                        '{a|{d}%  {b}}',//引导线上面文字
                        '{b|}' //引导线下面文字
                    ].join('\n'), //用\n来换行
                    rich:{
                        a:{
                            left:20,
                            padding:[0,-80,-15,-80]
                         },
                        b:{
                            height:5,
                            width:5,
                            lineHeight: 5,
                            marginBottom: 10,
                            padding:[0,-5],
                            borderRadius:5,
                            backgroundColor:color[i], // 圆点颜色和饼图块状颜色一致
                         }
                    },
                
            }
        }
        
        opts.push(item)
    }
    return opts;
}
option = {
    backgroundColor: '#fff',
    animation: true,
      series: [
        {
         color:color,
        name: '饼图圆点',
        type: 'pie',
        radius: ['35%', '50%'],
        avoidLabelOverlap: false,
        labelLine: {
            normal: {
                show: true,
                length: 15, // 第一段线 长度
                length2: 100, // 第二段线 长度
                align: 'right'
            },
            emphasis: {
                show: true
            }
        },
        data:setLabel(data)
      }
    ]
}