饼图圆环对比echarts 饼配置项内容和展示

      let datas = [
    {
        name: '战略',
        value: 700,
    },
    {
        name: '军',
        value: 1200,
    },
    {
        name: '空',
        value: 2400,
    },
    {
        name: '火箭',
        value: 700,
    },
    {
        name: '陆',
        value: 200,
    },
];
let max = Math.max(...datas.map((el) => el.value));
let list = [];
const color = [
    '#F68820',
    '#07BCFB',
    '#078AFE',
    '#FCDF00',
    '#FFFEFF',
    '#89A6FF',
    '#FF8181',
    'orange',
    '#FBBC05',
    '#EA4335',
];
datas.forEach((el, i) => {
    list.push(
        {
            value: el.value,
            name: el.name,
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    borderColor: color[i],
                    color: color[i],
                    shadowColor: 'rgba(99,99,99,0.2)',
                    shadowBlur: 25,
                },
            },
        },
        {
            value: max * 0.03,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0,
                },
            },
        }
    );
});
let seriesOption = [
    {
        name: '',
        type: 'pie',
        clockWise: false,
        radius: ['75%', '70%'],
        center: ['50%', '50%'],
        hoverAnimation: false,
        avoidLabelOverlap: true,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    formatter: (params) => {
                        var str = '';
                        switch (params.name) {
                            case '战略':
                                str =
                                    '{a|}{numbers| ' + params.value + '}{unit|万元}\n' + '{names|' + params.name + '}';
                                break;
                            case '海':
                                str =
                                    '{b|}{numbers| ' + params.value + '}{unit|万元}\n' + '{names|' + params.name + '}';
                                break;
                            case '空':
                                str =
                                    '{c|}{numbers| ' + params.value + '}{unit|万元}\n' + '{names|' + params.name + '}';
                                break;
                            case '陆':
                                str =
                                    '{d|}{numbers| ' + params.value + '}{unit|万元}\n' + '{names|' + params.name + '}';
                                break;
                            case '火箭':
                                str =
                                    '{e|}{numbers| ' + params.value + '}{unit|万元}\n' + '{names|' + params.name + '}';
                                break;
                        }
                        return str;
                    },
                    rich: {
                        a: {
                            width: 16,
                            height: 16,
                            backgroundColor: '#F68820',
                            align: 'left',
                        },
                        b: {
                            width: 16,
                            height: 16,
                            backgroundColor: '#07BCFB',
                            align: 'left',
                        },
                        c: {
                            width: 16,
                            height: 16,
                            backgroundColor: '#078AFE',
                            align: 'left',
                        },
                        d: {
                            width: 16,
                            height: 16,
                            backgroundColor: '#FFFFFF',
                            align: 'left',
                        },
                        e: {
                            width: 16,
                            height: 16,
                            backgroundColor: '#FCDF00',
                            align: 'left',
                        },
                        numbers: {
                            fontSize: 20,
                            color: '#1F4265',
                            fontWeight: 600,
                            fontFamily: 'Microsoft YaHei',
                            align: 'left',
                        },
                        unit: {
                            fontSize: 14,
                            fontFamily: 'Microsoft YaHei',
                            fontWeight: 600,
                            color: '#1F4265',
                            align: 'left',
                        },
                        names: {
                            fontSize: 16,
                            fontFamily: 'Microsoft YaHei',
                            fontWeight: 500,
                            color: 'rgba(31, 66, 101, 0.8)',
                            align: 'right',
                            lineHeight: 25,
                        },
                    },
                },
                labelLine: {
                    length: '2%',
                    length2: '10%',
                    show: false,
                },
            },
        },
        data: list,
    },
    {
        type: 'pie',
        radius: '40%',
        center: ['50%', '50%'],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
            normal: {
                shadowBlur: 18,
                shadowColor: 'rgba(124, 187, 235, 0.6)',
                color: 'rgba(221, 240, 249, 0.6)',
            },
        },
        label: {
            show: false,
        },
        data: [100],
    },
];
option = {
    title: {
        text: '经费',
        left: 'center',
        top: 'middle',
        textStyle: {
            color: '#222',
            fontSize: 20,
            fontWeight: 600,
        },
        textAlign: 'auto',
    },
    tooltip: {
        show: false,
    },
    legend: {
        show: false,
    },
    series: seriesOption,
};