ercharts 饼图

单圆环

单圆环和大饼图的区别是  series中radius: ['55%', '70%']，55%为中心空的百分比，0时为大饼

中间想要显示字符，可以在title里面设置主标题和副标题内容位置

var c18 = echarts.init(document.querySelector('#cycle1'));
            c18.setOption({
                color: ['#6fc7ff', '#33dc3f', '#ed952e', '#e347ff','#374251'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                title:{
                    text:"16274元",
                    left:'center',
                    y:80,
                    textStyle:{
                        fontSize: 25,
                        left:100,
                        color:'#fff'
                    },
                    subtext: '已接场站', 
                },
                legend: {
                    show:false,
                    z:1000,
                    data: ['自营', '加盟', '独立运营', '互联互通','空'],
                    textStyle:{//图例文字的样式
                         color:'#ccc',
                        fontSize:14    
                    },
                },
                
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 834,
                        name: '自营',
                        
                    }, {
                        value: 3408,
                        name: '加盟',
                    }, {
                        value: 2868,
                        name: '独立运营'
                    }, {
                        value: 9164,
                        name: '互联互通'
                    }, {
                        value: 1200,
                        name: '空'
                    }]
                }]
            });
            

双圆环

 var c6 = echarts.init(document.querySelector('#C6'));
            c6.setOption({
                color: ['#e9424a', '#ffb422', '#1db4ed', '#57ff23','#9422ff'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    show:false,
                    data: ['离线', '告警', '充电中', '空闲','非空闲'],
                    textStyle:{//图例文字的样式
                         color:'#ccc',
                        fontSize:14    
                    },
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '12',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 2,
                        name: '离线',
                        
                    }, {
                        value: 5,
                        name: '告警',
                    }]
                },{
                    name: '',
                    type: 'pie',
                    radius: ['25%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '12',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                        value: 55,
                        name: '充电中'
                    }, {
                        value: 1,
                        name: '空闲'
                    }, {
                        value: 4,
                        name: '非空闲'
                    }]
                }]
            });