饼图图例带数字和比例echarts vertical配置项内容和展示

饼图图例带数字和比例

      var imagurl="data:image/png;base64,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";

var m2R2Data= [
               {value:335, legendname:'种类01',name:"种类01  335",itemStyle:{color:"#8d7fec"}},
               {value:310, legendname:'种类02',name:"种类02  310",itemStyle:{color:"#5085f2"}},
               {value:234, legendname:'种类03',name:"种类03  234",itemStyle:{color:"#e75fc3"}},
               {value:154, legendname:'种类04',name:"种类04  154",itemStyle:{color:"#f87be2"}},
               {value:335, legendname:'种类05',name:"种类05  335",itemStyle:{color:"#f2719a"}},
               {value:335, legendname:'种类06',name:"种类06  335",itemStyle:{color:"#fca4bb"}},
               {value:335, legendname:'种类07',name:"种类07  335",itemStyle:{color:"#f59a8f"}},
               {value:335, legendname:'种类08',name:"种类08  335",itemStyle:{color:"#fdb301"}},
               {value:335, legendname:'种类09',name:"种类09  335",itemStyle:{color:"#57e7ec"}},
               {value:335, legendname:'种类10',name:"种类10  335",itemStyle:{color:"#cf9ef1"}},   
               {value:335, legendname:'种类09',name:"种类11  335",itemStyle:{color:"#57e7ec"}},
               {value:335, legendname:'种类10',name:"种类12  335",itemStyle:{color:"#cf9ef1"}}, 
            ];


 option = {
    title: [
    {
        text: '合计',
        subtext: 12312+'个',
        textStyle:{
            fontSize:20,
            color:"black"
        },
        subtextStyle: {
            fontSize: 20,
            color: 'black'
        },
        textAlign:"center",
        x: '34.5%',
        y: '44%',
    }],
     graphic:{
            type: 'image',
            id: 'logo',
            left: '28%',
            top: '44%',
            z: -10,
            bounding: 'raw',
            origin: [0, 0],
            style: {
                image: imagurl,
                width: 40,
                height: 50,
               
            }
        },
    tooltip: {
        trigger: 'item',
        formatter:function (parms){
          var str=  parms.seriesName+"</br>"+
            parms.marker+""+parms.data.legendname+"</br>"+
            "数量："+ parms.data.value+"</br>"+
            "占比："+ parms.percent+"%";
            return  str ;
        }
    },
    legend: {
        type:"scroll",
        orient: 'vertical',
        left:'70%',
        align:'left',
        top:'middle',
        textStyle: {
            color:'#8C8C8C'
        },
        height:250
    },
    series: [
        {
            name:'标题',
            type:'pie',
            center: ['35%', '50%'],
            radius: ['40%', '65%'],
             clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: true,
                    position: 'outter',
                     formatter:function (parms){
                         return parms.data.legendname
                     }
                }
            },
            labelLine: {
                normal: {
                  length:5,
                  length2:3,
                  smooth:true,
                }
            },
            data:m2R2Data
        }
    ]
};