echarts漏斗图的标示线和标识文字对齐

试了labelLine的length属性,不能使用百分比,只能使用数字,效果有些差强人意,只能满足在有限的情况,而markLine就不同了,如下所示:

var weatherIcons = {
    'Sunny': ROOT_PATH + 'data/asset/img/weather/sunny_128.png',
    'Cloudy': ROOT_PATH + 'data/asset/img/weather/cloudy_128.png',
    'Showers': ROOT_PATH + 'data/asset/img/weather/showers_128.png'
};
var colors = ['rgba(142,12,1,1)','rgba(21,255,12,1)','rgba(166,21,221,1)','rgba(12,166,251,1)','rgba(21,281,162,1)'];

option = {
    title: {
        text: '天气情况统计',
        subtext: '虚构数据',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        show: false
        
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        // bottom: 10,
        left: 'center',
        data: ['西凉', '益州','兖州','荆州','幽州']
    },
    series : [
        {
            name:'漏斗图',
            type:'funnel',
            zlevel: 1,
            left: '5%',
            right: '5%',
            top: '10%',
            // x2: 80,
            bottom: '10%',
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            funnelAlign: 'center',
            gap: 0,
            markLine: {
                symbol: 'none',
                zlevel: 0,
                data: [
                    [{x:'50%',y:'18%'},{x:'90%',y:'18%',value:20,
                    lineStyle:{color:colors[0],type: 'dotted'},
                    emphasis: {
                        label: {
                            fontSize: 20,
                            position: 'left',
                        },
                        lineStyle: {
                            type: 'dotted'
                        },
                    },
                        
                    }],
                    [{x:'50%',y:'34%'},{x:'90%',y:'34%',value:40,lineStyle:{color:colors[1]}}],
                    [{x:'50%',y:'50%'},{x:'90%',y:'50%',value:60,lineStyle:{color:colors[2]}}],
                    [{x:'50%',y:'66%'},{x:'90%',y:'66%',value:80,lineStyle:{color:colors[3]}}],
                    [{x:'50%',y:'82%'},{x:'90%',y:'82%',value:100,lineStyle:{color:colors[4]}}],
                ]
            },
            
            
            label: {
                show: true,
                position: 'left',
                rich: {
                    title: {
                        color: '#eee',
                        align: 'center'
                    },
                    abg: {
                        backgroundColor: 'pink',
                        width: '100%',
                        align: 'right',
                        height: 25,
                        borderRadius: [4, 4, 0, 0]
                    },
                    Sunny: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {
                            image: weatherIcons.Sunny
                        }
                    },
                    Cloudy: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {
                            image: weatherIcons.Cloudy
                        }
                    },
                    Showers: {
                        height: 30,
                        align: 'left',
                        backgroundColor: {
                            image: weatherIcons.Showers
                        }
                    },
                    weatherHead: {
                        color: '#333',
                        height: 24,
                        align: 'left'
                    },
                    hr: {
                        borderColor: '#777',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                    },
                    value: {
                        width: 20,
                        padding: [0, 20, 0, 30],
                        align: 'left'
                    },
                    valueHead: {
                        color: '#333',
                        width: 20,
                        padding: [0, 20, 0, 30],
                        align: 'center'
                    },
                    rate: {
                        width: 40,
                        align: 'right',
                        padding: [0, 10, 0, 0]
                    },
                    rateHead: {
                        color: '#333',
                        width: 40,
                        align: 'center',
                        padding: [0, 10, 0, 0]
                    }
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 0,
            },
            emphasis: {
                label: {
                    fontSize: 20,
                    position: 'left',
                },
                lineStyle: {
                    type: 'dotted'
                },
            },
            
        
            data:[
                {
                    value:20,
                    name: '幽州',
                    label: {
                        normal: {
                            formatter: [
                                '{title|{b}}{abg|}',
                                '  {weatherHead|友军}{valueHead|天军}{rateHead|占比}',
                                '{hr|}',
                                '  {Sunny|}{value|202}{rate|55.3%}',
                                '  {Cloudy|}{value|142}{rate|38.9%}',
                                '  {Showers|}{value|21}{rate|5.8%}'
                            ].join('\n'),
                            backgroundColor: '#eee',
                            borderColor: '#777',
                            borderWidth: 1,
                            borderRadius: 4,
                            distance: 10000
                        }
                    },
                    labelLine: {
                        length: 100,
                        lineStyle: {
                            width: 1,
                            type: 'dotted',
                        },
                    },
                    emphasis :{
                        label: {
                            show: true,
                        },
                        labelLine: {
                            length: 100,
                            lineStyle: {
                                width: 1,
                                type: 'dashed',
                            },
                        },
                            
                    },
                    itemStyle :{
                        color: colors[0]
                    }
                },
                {
                    value:40, name: '荆州',
                    itemStyle :{
                        color: colors[1]
                    }
                },
                {value:60, name: '兖州',
                    itemStyle :{
                        color: colors[2]
                    }
                },
                {value:80, name: '益州',
                    itemStyle :{
                        color: colors[3]
                    }
                },
                {
                    value:100, name: '西凉',
                    itemStyle :{
                        color: colors[4]
                    }
                }
            ],
        },
    ]
};

不过最好让UI将漏斗图每一层切图,我们就只负责文字布局就行了