echart方面

1. www.makeapie.com/editor.html…

2. www.makeapie.com/editor.html… 圆环

3. www.makeapie.com/editor.html… 最像的圆环

4. www.makeapie.com/editor.html…

5. www.makeapie.com/editor.html… 玫瑰饼图里带数值

6. www.makeapie.com/editor.html…

7. www.makeapie.com/editor.html…

8. www.makeapie.com/editor.html…

9. 圆环两条线:www.makeapie.com/editor.html…

let pie1Data = [    {        value: 10,        name: 'A',        itemStyle: {            color: '#72FFA3',        },    },    {        value: 21,        name: 'B',        itemStyle: {            color: '#FF7469',        },    },    {        value: 22,        name: 'C',        itemStyle: {            color: '#FFBA69',        },    },    {        value: 25,        name: 'D',        itemStyle: {            color: '#2BD8FB',        },    },]

var percentColor = null;
var rich = {
    name: {
        color: '#fff',
        fontSize: 14,
    },
};
pie1Data.map(function (item, index) {
    rich['p' + index] = {
        color: item.itemStyle.color,
        fontSize: 17,
        fontWeight: 'bold',
    };
});

option = {
        backgroundColor:'#132A7F',
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
        backgroundColor: '#1B2D56',
        borderColor: '#2BD8FB',
        textStyle: {
            color: '#fff',
        },
    },
    legend: {
        data: ['A', 'B', 'C', 'D', 'E'],
        "icon": "circle",
        orient: 'vertical',//竖着排放
         right: '5%',
        // top: '13%',
        top: 'center',
        itemWidth: 20,
        itemHeight: 20,
        itemGap: 30,
        textStyle: {
            color: '#',
            fontSize: 16,
        },
    },
    series: [
        {
            name: '党支部人员',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            // label: {
            //     color: '#fff',
            //     fontSize: 14,

            //     formatter: function (params) {
            //         percentColor = params.color;
            //         return `{name|${params.name}}:{p${params.dataIndex}|${params.percent + '%'}}`;
            //     },
            //     rich: rich,
            // },
            data: pie1Data,
            roseType: 'area',
        },

    ],
};
myChart.setOption(option);