如何让echarts series上面的数字显示到最右部或最顶部？

项目场景：

如何让echarts series上面的数字显示到最右部或最顶部？
最近项目中遇到一个需要把接口数据渲染成横向展示的ecahrs柱图且series中的数字显得道最右边的需求。
先看一下效果图：

直接上代码

***解决：***数字位置固定显示在右侧主要代码：

 setTimeout(function(){
        var width = myChart.getWidth();
        var opt = myChart.getOption();
        var grid = opt.grid[0];
        var right = grid.right;
        // console.log(right);
        var left = grid.left;
        right = width*parseFloat(right)/100;
        left = width*parseFloat(left)/100;
        var x = width-left-right;

        myChart.setOption({
            series:[{
                label:{
                    show:true,
                    position:'left',
                    offset:[x+50,0]
                }
            }]
        })

一开始以为是label位置position：right就可以，后面发现是要先获取到整个画布的grid再去调整计算显示在右侧的。

完整代码

 var option = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.8)',
            backgroundColor: 'rgba(0,0,0,0.6)',
            extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
            textStyle: {
                color: '#6a717b',
                color: '#BDC8DC',
                fontFamily:'PingFang',
            },
        },
        legend: {
            show:true,
            itemGap: 12,
            icon: "circle",
            right: '25',
            top: '0',
            textStyle: {
                color: '#BDC8DC',
                fontSize: 15,
                fontSize: 14,
                fontFamily:'PingFang',
                fontWeight: 200
            },

        },
        //位置
        grid: {
            left: '3%',
            right: '13%',
            top: '12%',
            bottom: '5%',
            containLabel: true
        },
        //x轴设置
        xAxis: {
            type: 'value',
            // axisLabel: {
            //     color: '#9FF'
            // },
            axisLabel: {
                fontFamily:'PingFang',
                color: '#E1EEFF'
            },
            //坐标轴样式
            axisLine: {
                lineStyle: {
                    color: '#2F4871',
                },
                width: 15
            },
            //name样式
            nameTextStyle:{
                color: '#BDC8DC',
                fontSize: 15,
                fontWeight: 200
            },
            axisTick: {
                show: false,
            },
            //分割线样式
            splitLine: {
                show:false
            },
        },
        //y轴设置
        yAxis: {
            type: 'category',
            axisLabel: {
                color: '#E1EEFF',
                fontFamily:'PingFang',
            },
            //坐标轴颜色
            axisLine: {
                lineStyle: {
                    color: '#217FA3',
                },
                width: 15
            },
            axisTick: {
                show: false,
            },
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13']
        },
        series: [
            {
                data:[424242, 152352,854242,525235,264575,376346,742426,924242,693248,392545,551516,66666,551516],
                barWidth:12,
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(22, 69, 87, 0.4)'
                },
                label:{
                    formatter: "{c}"+"十万公里",
                    show:true,
                    position: 'right',
                    distance:-22,
                    textStyle:{
                        color:"#E1F4FF",
                    },
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 1, 1,
                            [
                                {offset: 0, color: '#2988D9'},     //渐变头部色
                                {offset: 0.5, color: '#13B9F5'},
                                {offset: 1, color: '#13B9F5'}
                            ]
                        )
                    },

                },
            }
        ]
    };
    setTimeout(function(){
        var width = myChart.getWidth();
        var opt = myChart.getOption();
        var grid = opt.grid[0];
        var right = grid.right;
        // console.log(right);
        var left = grid.left;
        right = width*parseFloat(right)/100;
        left = width*parseFloat(left)/100;
        var x = width-left-right;
        myChart.setOption({
            series:[{
                label:{
                    show:true,
                    position:'left',
                    offset:[x+50,0]
                }
            }]
        })
    });

    var myChart = echarts.init(document.getElementById('systemMultiBar'));

总结：延迟计算grid高度，然后使用position: 'right’加上offset偏移进行定位，上面因为我写的是百分比，所以直接按百分比处理了。