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,
    },
},