Echarts中漏斗图的label如何右对齐

效果图

实现原理

• 两个相同数据的series进行叠加，一个不显示label，一个显示。显示label的series设置maxSize: 0，然后层级放在下方即可

配置

option = {
    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: 0,
            top: 60,
            bottom: 60,
            width: '60%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: 0, // 设为 0，表示最大宽度为0，这样此层只会显示label
            //并且由于宽度为0，漏斗图是居中显示的，所以label线条的起始位置都是中间
            sort: 'descending',
            z: 1,
            gap: 2,
            label: {
                show: true,
                position: 'right'
            },
            labelLine: {
                length: 400, // label拉线的长度根据自己的场景进行设置即可
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        },
        {
            name:'漏斗图label',
            type:'funnel',
            left: 0,
            top: 60,
            bottom: 60,
            width: '60%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: false,
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
};