Echarts实现环形饼图效果

效果图：

 

一般用于实现这种的饼图

 

看下实现代码：

第一个pie用于做扇形统计，第二个pie用于做圆形虚线第三个pie为最里面的圆。

const option={
    series:[
        {
            name: '访问来源',
            type: 'pie',
            hoverAnimation: false,
            color: ['#52D6FFFF', '#AAEC78FF', '#3699FFFF'],
            center: ['30%', '50%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                show: false,
                    position: 'center',
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data:[],
        },
        {
            name: 'decorationOne',
            type: 'pie',
            color: ['#52D6FF'],
            center: ['30%', '50%'],
            radius: ['42%', '40%'],
            hoverAnimation: false,
            lable: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                  show: false,
                },
            },
            data: [
                { value: 335, name: '' },
            ],
        },
        {
            name: 'decorationTwo',
            type: 'pie',
            color: ['#52D6FF', 'rgba(255,255,255,0)'],
            center: ['30%', '50%'],
            radius: ['47%', '45%'],
            hoverAnimation: false,
            lable: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },
            data: new Array(41).fill(10).map(() => {
                return {
                    name: '',
                    value: 20,
                };
            }),
        },
    ],
}

实现饼图中间的文字标题

title: {
    text: `10个`,
    top: '46%',
    left: '30%',
    padding: [0, 14, 0, 0],
    textAlign: 'center',
    textStyle: {
        color: '#fff',
        fontSize: 22,
    },
},