SOURCE

dnbObj = {
    JYGK21102020000000020: {
        bfb: 16.67,
        dataValue: 100,
        idxName: '09表在运电能表量',
        idxNo: 'JYGK21102020000000020'
    },
    JYGK21102020000000021: {
        bfb: 33.33,
        dataValue: 200,
        idxName: '13表在运电能表量',
        idxNo: 'JYGK21102020000000021'
    },
    JYGK21102020000000022: {
        bfb: 50,
        dataValue: 300,
        idxName: '20表在运电能表量',
        idxNo: 'JYGK21102020000000022'
    }
}

dnbTotal = 500

color = ['rgba(131, 208, 239, 1)', 'rgba(131, 208, 239, 1)', 'rgba(247, 199, 57, 1)', 'rgba(247, 199, 57, 1)', 'rgba(115, 160, 250, 1)', 'rgba(115, 160, 250, 1)'];
startAngle = 90;
dataStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        shadowBlur: 40,
        borderWidth: 10,
        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
    }
}
placeHolderStyle = {
    normal: {
        color: 'rgba(237,237,237,0.8)',
        label: {
            show: false
        },
        labelLine: {
            show: false
        }
    },
    emphasis: {
        color: 'rgba(237,237,237,0.8)'
    }
}

option = {
    backgroundColor: '#fff',
    title: {
        show: true,
        text: dnbTotal,
        subtext: '总数',
        x: 'center',
        y: 'center',
        itemGap: 2,
        textStyle: {
            fontWeight: 600,
            fontSize: 14,
            color: '#333'
        },
        subtextStyle: {
            fontWeight: 400,
            fontSize: 10,
            color: '#888'
        }
    },
    tooltip: {
        trigger: 'item',
        show: false,
        formatter: '{b} : <br/>{d}%',
        backgroundColor: 'rgba(0,0,0,0.7)', // 背景
        padding: [8, 10], //内边距
        extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);' //添加阴影
    },
    legend: {
        show: false,
        orient: 'vertical',
        // icon: 'circle',
        left: 'left',
        top: '20',
        itemGap: 20,
        data: ['09版', '13版', '20版'],
        textStyle: {
            color: '#fft'
        }
    },
    series: [
        {
            name: 'Line 1',
            type: 'pie',
            clockWise: !false,
            radius: ['90%', '100%'],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: startAngle,
            label: {
                borderRadius: '10'
            },
            color: color[0],
            data: [
                {
                    value: dnbObj['JYGK21102020000000022'].bfb,
                    name: '20版'
                },
                {
                    value: 100 - dnbObj['JYGK21102020000000022'].bfb,
                    name: '',
                    tooltip: {
                        show: false
                    },
                    itemStyle: placeHolderStyle
                }
            ]
        },
        {
            name: 'Line 2',
            type: 'pie',
            clockWise: !false,
            radius: ['75%', '85%'],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: startAngle,
            color: color[2],
            data: [
                {
                    value: dnbObj['JYGK21102020000000021'].bfb,
                    name: '13版'
                },
                {
                    value: 100 - dnbObj['JYGK21102020000000021'].bfb,
                    name: '',
                    tooltip: {
                        show: false
                    },
                    itemStyle: placeHolderStyle
                }
            ]
        },
        {
            name: 'Line 3',
            type: 'pie',
            clockWise: !false,
            radius: ['60%', '70%'],
            center: ['50%', '50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: startAngle,
            color: color[4],
            data: [
                {
                    value: dnbObj['JYGK21102020000000020'].bfb,
                    name: '09版'
                },
                {
                    value: 100 - dnbObj['JYGK21102020000000020'].bfb,
                    name: '',
                    tooltip: {
                        show: false
                    },
                    itemStyle: placeHolderStyle
                }
            ]
        }
    ]
};

window.onload = function() {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    console.log(width, height);
    const echartsDom = document.getElementById('echarts');
    echartsDom.style.width = width * 0.8 + 'px';
    echartsDom.style.height = height * 0.8 + 'px';
    echartsDom.style.margin = '5% auto 0';
    const myChart = echarts.init(echartsDom);
    myChart.setOption(option);
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>echarts 玉珏图</title>
    </head>
    <body>
	    <div id="echarts" class="echarts" width="100" height="100"></div>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, .echarts {
    width: 100%;
    height: 100%;
}