带label的散点图echarts scatter配置项内容和展示

配置项如下
      const xData = ['1', '50', '29', '27'];
const yData = ["≤19岁", "20-29岁", "30-39岁", "≥50岁"]
// 算总量
const total = xData.reduce((sum, item) => {
    return Number(sum) + Number(item);
})
option = {
    grid: {
        top: '60%',
        bottom: '50%',
    },
    tooltip: {
        trigger: "axis",

        axisPointer: {
            // 划过显示的颜色和宽度
            lineStyle: {
                type: 'dashed',
                width: 0,
                color: '#4B941A'
            },
            animation: true
        }
    },
    xAxis: {
        type: 'category',
        data: yData,
        position: "bottom",
        boundaryGap: ['20%', '20%'], // 两侧留白
        nameLocation: "end",
        axisLine: {
            lineStyle: {
                color: "#c4c4c4" // 坐标轴颜色
            }
        },
        axisLabel: {
            color: "#231a19", // x轴名称颜色
            fontWeight: "bolder",

        },
        splitLine: {

            show: true,
            lineStyle: {
                type: 'dashed'
            }
        },

    },
    yAxis: {
        show: false,
        scale: true
    },
    series: [{
        color: ['#d5635c'],
        type: 'scatter',
        name: '年龄',
        label: {
            show: true,
            position: "outside",
            fontWeight: "bolder",
            color: "#231a19",
            formatter: function(data) {
                console.log(data)
                return (data.value[2] / total * 100).toFixed(2) + "%";
            }

        },
        symbolSize: function (data) {
            return data[2]/1.2 +10;
        },
        data: xData.map((i,index)=>[yData[index],10,i]),
    }, ]
};
    
截图如下