echarts两层圆环 饼图间隔 可用背景图片

百度搜出来的都是用borderWidth来设置间隔，但是颜色必须和背景色一致，只是视觉上透明了，不符合项目要求。参考社区里的，自己画了一个。
加”*****“的是形成间隔的关键。

//颜色16进制换算rgba,添加透明度（内环颜色）
function hexToRgba(hex, opacity) {
    return (
        'rgba(' +
        parseInt('0x' + hex.slice(1, 3)) +
        ',' +
        parseInt('0x' + hex.slice(3, 5)) +
        ',' +
        parseInt('0x' + hex.slice(5, 7)) +
        ',' +
        opacity +
        ')'
    );
}
// 背景可以随意更换，不会影响透明的间隔
backgroundColor = {
    type: 'linear',
    x: 0,                 // 左上角x
    y: 0,                 // 左上角y
    x2: 0,                // 右下角x
    y2: 1,                // 右下角y
    colorStops: [
    {
        offset: 0.5, color: '#fff'
    }, {
        offset: 1, color: '#00FFF7'
    }],
    global: false // 缺省为 false
}
// 数据
chartdata = [
    {
        name: '竞争性谈判',
        value: 30,
    },
    {
        name: '公开招标',
        value: 50,
    },
    {
        name: '询价',
        value: 80,
    },
    {
        name: '单一来源',
        value: 90,
    },
]
// 颜色系列
color = ['#283E81', '#FAC858', '#93BEFF', '#507AFC']
let color1 = [],
    color2 = []
// ***** 设置每层圆环颜色和添加间隔的透明色*****
// 加一个元素占位，使得data1的透明间隔不会占用有颜色的数据的颜色，长度为8)
color.forEach((item) => {
    color1.push(item, 'transparent')
    color2.push(hexToRgba(item, 0.3), 'transparent')
})
let data1 = []
let sum = 0
// 根据总值设置间隔值大小
chartdata.forEach((item) => {
    sum += Number(item.value)
});
// ***** 给每个数据后添加特定的透明的数据形成间隔 *****
chartdata.forEach((item, index) => {
    if (item.value !== 0) {
        data1.push(item, {
            name: '',
            value: sum / 100,
            label: {
                show: false,
            },
            itemStyle: {
                color: 'transparent',
            }
        })
    }
})
option = {
    backgroundColor: backgroundColor,
    grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        containLabel: true,
    },
    tooltip: {
        formatter: (params) => {
            if (params.name !== '') {
                return params.name + ' : ' + params.value + '\n' + '(' + params.percent + '%)';
            }
        },
    },
    series: [
        // 最外层圆环
        {
            type: 'pie',
            radius: ['43%', '53%'],
            center: ['50%', '50%'],
            label: {
                formatter: '{b}' + ' ' + '{c}',
            },
            itemStyle: {
                normal: {
                    color: (params) => {
                        return color1[params.dataIndex]
                    },
                },
            },
            data: data1,
            z: 1
        },
        {
            type: 'pie',
            radius: ['39%', '43%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            startAngle: 90,
            selectedMode: 'single',
            selectedOffset: 0,
            itemStyle: {
                normal: {
                    color: (params) => {
                        return color2[params.dataIndex]
                    },
                },
            },
            label: {
                show: false,
            },
            data: data1,
            z: 6,
        }
    ]
}复制

这里是引用https://www.makeapie.cn/echarts_content/x6krJ6XPg9.html