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