阴影圆环echarts 饼配置项内容和展示

      option = {
    title: {
        text: "带阴影圆环",
        top: '10%',
        textStyle: {
            color: '#333333',
            fontWeight: 500,
            fontSize: 16,
        },
    },
    color: ['#35B0FF', '#857BFF', '#FF7474'],

    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove',
        confine: true,
        backgroundColor: 'rgba(51,51,51,0.9)',
        borderRadius: 4,
        borderColor: 'rgba(51,51,51,0.9)',
        formatter: (params) => {
            return `
                   <div style="margin-bottom: 4px">
                        ${params.marker}${params.name}
                   </div>
                   <div style="margin-bottom: 4px">
                        人数：${params.data.value} 人
                   </div>
                   <div style="margin-bottom: 4px">
                        占比：${params.percent} %
                   </div>
                   `
        },
        textStyle: {
            color: '#F2F2F2',
            fontSize: 12,
        },
    },
    series: [{
            top: '10%',
            name: '访问来源',
            type: 'pie',
            radius: ['15%', '50%'],
            avoidLabelOverlap: false,
            width: '100%',
            label: {
                alignTo: 'edge',
                formatter: (params) => {
                    return params.name + '\n' + params.data.value +' 人'+ '\n' + params.percent + '%'
                },
                lineHeight: 18,
                edgeDistance: 1,
            },
            
            labelLayout: (params) => {
                const isLeft = params.labelRect.x < myChart.getWidth() / 2
                const points = params.labelLinePoints
                points[2][0] = isLeft ?
                    params.labelRect.x :
                    params.labelRect.x + params.labelRect.width

                return {
                    labelLinePoints: points,
                }
            },

            data: [{
                    value: 435,
                    name: '在租'
                },
                {
                    value: 635,
                    name: '空置'
                },
                {
                    value: 445,
                    name: '合同纠纷'
                },
            ],
        },
        // 边框的设置
        {
            top: '10%',
            radius: ['15%', '25%'],
            type: 'pie',
            emphasis: {
                show: false,
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
            },
            tooltip: {
                show: false,
            },
            data: [{
                value: 1,
                itemStyle: {
                    color: 'rgb(51,51,51,0.2)',
                },
            }, ],
        },
    ],

};