超实用圆环图echarts 饼配置项内容和展示

      let title = '售票数量';
let color = ['rgb(54,142,243)', 'rgb(2,217,217)', 'rgb(255,237,91)', 'rgb(255,158,91)', 'rgb(84,95,255)'];
let angle = 0; //角度，用来做简单的动画效果的
let value = [];
let data1 =[
                {value:400,name:'单程票'},
                {value:389,name:'一日票'},
                {value:489,name:'三日票'},
                {value:259,name:'预附值票'},
                {value:499,name:'纪念票'},
                ]
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
    let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
    return {
        x: x1,
        y: y1,
    };
}
let formatNumber = function (num) {
    let reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ',');
};
let total = data1.reduce((a, b) => {
    return a + b.value * 1;
}, 0);
option = {
    backgroundColor: 'rgb(0,34,69)',
    color: color,
    tooltip: {
        trigger: 'item',
    },
    title: [
        {
            text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}{c|件}',
            top: 'center',
            left: '27%',
            textStyle: {
                rich: {
                    name: {
                        fontSize: 20,
                        fontWeight: 'normal',
                        color: 'rgb(132,159,186)',
                        padding: [10, 0, 0, 20],
                    },
                    val: {
                        fontSize: 32,
                        fontWeight: 'bold',
                        color: 'rgb(61,153,252)',
                        padding:[0,10,0,15]
                    },
                    c: {
                        fontSize: 15,
                        fontWeight: 'normal',
                        color: 'rgb(132,159,186)',
                    },
                },
            },
        },
    ],
    legend: {
        orient: 'vertical',
        icon: 'rect',
        x: '70%',
        y: 'center',
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 10,
        align: 'left',
        textStyle: {
            color: 'rgb(132,159,186)',
            fontSize: 15,
            padding: [0, 0, 0, 10],
        },
        formatter(name) {
            let then = option.series[0].data; //获取series中的data
            let total = 0;

            for (let i = 0; i < then.length; i++) {
                if (then[i].name != '' && then[i].name != null && then[i].name != undefined) {
                    total += parseInt(then[i].value);
                }
            }
            var str = '';

            var p = 0;
            for (let i = 0; i < then.length; i++) {
                if (then[i].name == name) {
                    p = (then[i].value / total) * 100;
                    str = name + '       ' + p.toFixed(2) + '%';
                }
            }
            return str;
        },
    },
    series: [
        {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['35%', '50%'],
            data: data1,
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    borderColor: 'rgb(0,34,69)',
                    borderWidth: 3,
                },
            },
            labelLine: {
                normal: {
                    show: false,
                    length: 20,
                    length2: 120,
                    lineStyle: {
                        color: '#e6e6e6',
                    },
                },
            },
            label: {
                normal: {
                    show: false,
                    formatter: (params) => {
                        return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
                    },
                    padding: [0, -100, 25, -100],
                    rich: {
                        icon: {
                            fontSize: 16,
                        },
                        name: {
                            fontSize: 14,
                            padding: [0, 10, 0, 4],
                            color: '#666666',
                        },
                        value: {
                            fontSize: 18,
                            fontWeight: 'bold',
                            color: '#333333',
                        },
                    },
                },
            },
        },
        {
            name: '', //外圆环
            tooltip: {
                show: false,
            },
            type: 'pie',
            radius: ['68%', '67%'],
            center: ['35%', '50%'],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        color: 'white',
                    },
                },
            },
            data: [
                {
                    value: 50,
                    name: '',
                    itemStyle: {
                        normal: {
                            color: ' #274C80',
                            opacity: 0.5,
                        },
                    },
                },
            ],
        },
        {
            name: '', //下方绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                let x0 = (31 * api.getWidth()) / 90;
                let y0 = api.getHeight() / 2.97;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2;
                let point = getCirlPoint(x0, y0, r, 90 + -angle);
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 3,
                    },
                    style: {
                        stroke: '#274C80', //粉
                        fill: '#274C80',
                    },
                    silent: true,
                };
            },
            data: [0],
        },
        {
            name: '', //上方绿点
            type: 'custom',
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                let x0 = (31 * api.getWidth()) / 88;
                let y0 = api.getHeight() / 1.51;
                let r = Math.min(api.getWidth(), api.getHeight()) / 2;
                let point = getCirlPoint(x0, y0, r, 270 + -angle);
                return {
                    type: 'circle',
                    shape: {
                        cx: point.x,
                        cy: point.y,
                        r: 3,
                    },
                    style: {
                        stroke: '#274C80', //绿
                        fill: '#274C80',
                    },
                    silent: true,
                };
            },
            data: [0],
        },
    ],
}