echart图的圆环

const echarts7 = ref(null);
function init(){
    var myEchart = echarts.init(echarts7.value)
    let nameList = Object.keys(serisesData.value)
    let valueList = Object.values(serisesData.value)
    let colorList = ['#FAAD14', '#13C2C2', '#14A8FF', '#23D688', '#397EF0']
      
    let fontSizeList = [12, 14, 16, 18];
     var data = {
        title: ["标题", "单位"],
        legend: ["a", "b", "c", "d", "e", "f"],
        data:[],
        // data:[
        //      [
        //         {
        //             name: '三等功',
        //             value: -80,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#a22076'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '12'
        //             }
        //         },
        //         {
        //             name: '二等功',
        //             value: -155,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#b1c5b4'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '12'
        //             }
        //         },
        //         {
        //             name: '党员',
        //             value: 50,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#6493af'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '12'
        //             }
        //         },
        //     ],
        //     [
        //         {
        //             name: '一等功',
        //             value: -300,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#1a638a'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '12'
        //             }
        //         },
        //         {
        //             name: '退役',
        //             value: 115,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#293150'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '12'
        //             }
        //         },
        //         {
        //             name: '标兵',
        //             value: 155,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#d5ccd3'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '12'
        //             }
        //         },
        //     ],
        //     [
        //         {
        //             name: '优秀',
        //             value: 5,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#e67a2a'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '12'
        //             }
        //         },
        //         {
        //             name: '储备人才',
        //             value: 225,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#88d5b9'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '10'
        //             }
        //         },
        //         {
        //             name: '高学历',
        //             value: 75,
        //             draggable: false,
        //             itemStyle: {
        //                 color: '#bc343c'
        //             },
        //             label: {
        //                 color: '#fff',
        //                 fontSize: '10'
        //             }
        //         },
        //     ],

        // ],
        color: ['#0e7ab4', '#0a69c5','#013d7b','#FAAD14', '#13C2C2', '#14A8FF', '#23D688', '#397EF0',"#d74e67", "#0092ff","#eba954","#21b6b9","#60a900","#01949b"," #f17677",],
        linStyle:['solid','dashed','dashed'],
        symbolSize:['45','38','30']
    };
    const xOnline=[10,30,20,-26,12,125,17,21,34,82,46,56,551]
    const yOnline=[20,25,36,45,52,165,116,86,200,139,45,25,36]
    // let data = [];
    nameList.map((item, index) => {
        // let i = parseInt(index / 4);
        // data.data[i] = data.data[i] || [];
        data.data.push({
            name: item,
            // x: 20+Number(valueList[index]), y: 25+Number(valueList[index]) ,
            x: xOnline[index+1], 
            y: yOnline[index] ,
            value: Number(valueList[index]),
            itemStyle: {
                color: colorList[index]
            },
            symbolSize: (Number(valueList[index])/2+30).toFixed(0),
            label: {
                color: '#fff',
                fontSize: (Number(valueList[index])/2+5).toFixed(0)
            }
        })
    })
   console.log('data',data)

    var option = {
        // title: [
        //     {
        //         text: data.title[0],
        //         left: "center",
        //     },
        //     {
        //         text: data.title[1],
        //         left: "center",
        //         top: "center",
        //         textStyle: {
        //             color: "#fff",
        //         },
        //     },
        // ],
        color: data.color,
        grid: {
            left: '2%',
            right: '2%',
            bottom: '-5%',
            top: '2%',
            containLabel: true
        },
        // legend: {
        //     data: data.legend,
        //     left: "center",
        //     bottom: 10,
        // },
        polar: {},
        angleAxis: {
            show: false,
            type: "value",
            min: 0,
            max: 360,
        },
        radiusAxis: {
            show: false,
            axisAngle: 0,
        },
        series: [
            {
                name: '图',
            type: 'graph',
            layout: 'none', // 使用 none 布局
            // symbolSize: data.symbolSize, // 节点大小
            roam: true, // 是否允许缩放和平移
            label: {
                show: true
            },
            data:data.data,
            // data: [
            //     // 节点数据
            //     { name: '节点1', x: 100, y: 150 },
            //     { name: '节点2', x: 200, y: 200 },
            //     { name: '节点3', x: 300, y: 100 }
            // ],
            // links: [
            //     // 边数据，连接节点
            //     { source: '节点1', target: '节点2' },
            //     { source: '节点2', target: '节点3' }
            // ],
            lineStyle: {
                color: 'source', // 线的颜色，可以是颜色值或者是 'source' 或 'target'
                curveness: 0.3 // 线的曲度
            }
            }
        ],
    };
    for (let i = 1; i < 4; i++) {
        option.series.push({
            type: "pie",
            radius: [27 * i + "%", 27 * (i + 0.05) + "%"],
            silent: true,
            roam: true, // 是否允许缩放和平移
            labelLine: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                },
            },
            itemStyle: {
                normal: {
                    type:data.linStyle[i],
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: data.color[i-1],
                            },
                            {
                                offset: 0.1,
                                color: data.color[i-1],
                            },
                            {
                                offset: 0.45,
                                color: data.color[i-1],
                            },
                            {
                                offset: 0.55,
                                color: data.color[i-1],
                            },
                            {
                                offset: 0.9,
                                color: data.color[i-1],
                            },

                            {
                                offset: 1,
                                color: data.color[i-1],
                            },
                        ],
                        false
                    ),
                },
            },
            data: [{ value: 100 }],
        });
    }
    myEchart.setOption(option);
    window.addEventListener('resize', () => {
        myEchart.resize();
    })

}