急 請問Echart 怎么實現(xiàn)如下圖的效果？

現(xiàn)在有個需求是做成上圖這樣， 查了些資料搗鼓了很久還是只能做到下圖這個樣子

求SF的echart大神告訴我..那個小圓點和labelline跨過上面兩行字怎么能實現(xiàn)？？T_T

目前的代碼

var scale = 1;

var echartData = [{
    value: 30,
    name: '56歲及以上'
}, {
    value: 8,
    name: '46至55歲'
}, {
    value: 13,
    name: '其他'
}]

var rich = {
    top: {
        color: "rgb(104,104,104)",
        fontSize: 30 * scale,
        fontWeight:'bold',
        padding: [0, 0, 0, 0],
        align: 'center'
    },
    total: {
        color: "rgb(104,104,104)",
        fontSize: 80 * scale,
        fontWeight: 'bold',
        align: 'center'
    },
    //這個是每一欄的字體
    bottom: {
        color: "rgb(104,104,104)",
        align: 'center',
        fontSize: 14 * scale,
        padding: [10, 0]
    }
}
option = {

    title: {
        text: '年齡情況',
        left: 'center',
        bottom: '5%',
        textStyle: {
            color: 'rgb(57,57,56)'
        }
    },
    legend: { //圖例
        selectedMode: false,
        formatter: function(name) {
            var total = 0; 
            echartData.forEach(function(value, index, array) {
                total += value.value;
            });
            return '{total|' + total + '}';
        },
       
        //這里好像必須要設置一下
        data: [echartData[1].name],
        
      
        left: 'center',
        top: 'center',
        icon: 'none',
        align: 'center',
        
        textStyle: {
            color: "rgb(104,104,104)",
            fontSize: 32 * scale,
            rich: rich
        },
    },
    series: [{
        
        type: 'pie',
        radius: ['25%', '38%'],
        hoverAnimation: false,
        color: ['rgb(243,152,0)', 'rgb(0,206,243)', 'rgb(193,109,231)'],
        label: {
            normal: {
                formatter: function(params, ticket, callback) {
                    return '{top|' + params.value + '人}\n{bottom|' + params.name + '}';
                },
                rich: rich
            },
        },
 
        data: echartData
    }]
};