Pie-2-饼图中心带文字

 

1、代码

app.title = '嵌套环形图';
var data1=35;
var data2=15;
option = {
    backgroundColor:'#fff',//1、背景色和饼图块色一致，则能解决块之间间距问题
    color:['#4f93df','#efa62e'],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c}人 ({d}%)"
    },
    legend: {
        show:false,
        orient: 'vertical',
        x: 'left',
        data:['及格','不及格']
    },
    graphic: [{//2、中心的文字设置
            
                    type: 'text',
                    z: 100,
                    left: 'center',
                    top: 'middle',
                    style: {
                        x:3,
                        y:10,
                        fill: '#333',
                        text: [
                            '班级人数',
                            data1+data2+'人',
                        ].join('\n'),
                        font: 'bolder 1em "Microsoft YaHei", sans-serif',
                        textAlign:'center',//3、居中显示
                    }
               
           
        }],
    series: [
        {
            name:'班级人数',
            type:'pie',
            radius: ['10%', '70%'],
            hoverOffset:30,//4、hover时，偏移距离
            center: ['50%', '50%'],
            itemStyle:{
                borderColor:'#fff',//1、背景色和饼图块色一致，则能解决块之间间距问题
                borderWidth:10,
                opacity:1,
            },
            label: {
                normal: {
                    formatter: '{b}：{d}%({c}台) ',
                }
            },
            data:[
                {value:data1, name:'及格'},
                {value:data2, name:'不及格'},
            ]
        }
    ]
};