柱状图显示数值echarts shadow配置项内容和展示

在柱子右侧显示数值

      var posList = [
    'left',
    'right',
    'top',
    'bottom',
    'inside',
    'insideTop',
    'insideLeft',
    'insideRight',
    'insideBottom',
    'insideTopLeft',
    'insideTopRight',
    'insideBottomLeft',
    'insideBottomRight',
];

app.configParameters = {
    rotate: {
        min: -90,
        max: 90,
    },
    align: {
        options: {
            left: 'left',
            center: 'center',
            right: 'right',
        },
    },
    verticalAlign: {
        options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom',
        },
    },
    position: {
        options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
        }, {}),
    },
    distance: {
        min: 0,
        max: 100,
    },
};

app.config = {
    rotate: 90,
    align: 'left',
    verticalAlign: 'middle',
    position: 'insideBottom',
    distance: 15,
    onChange: function () {
        var labelOption = {
            normal: {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance,
            },
        };
        myChart.setOption({
            series: [
                {
                    label: labelOption,
                },
                {
                    label: labelOption,
                },
                {
                    label: labelOption,
                },
                {
                    label: labelOption,
                },
            ],
        });
    },
};

var labelOption = {
    show: true,
    position: 'right',
    // alignTo: 'labelLine',
    distance: 5,
    // position: app.config.position,
    // distance: app.config.distance,
    // align: app.config.align,
    // verticalAlign: app.config.verticalAlign,
    // rotate: app.config.rotate,
    // formatter: '{c}  {name|{a}}',
    // fontSize: 16,
};
var labelLineOption = {
    show: true,
    showAbove: true,
    length2: 3,
};

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    legend: {
        data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true },
        },
    },
    xAxis: [
        {
            type: 'category',
            axisTick: { show: false },
            data: ['2012', '2013', '2014', '2015', '2016'],
        },
    ],
    yAxis: [
        {
            type: 'value',
        },
    ],
    series: [
        {
            name: 'Forest',
            type: 'bar',
            stack: 'total',
            barGap: 0,
            label: labelOption,
            labelLine: labelLineOption,
            emphasis: {
                focus: 'series',
            },
            data: [320, 332, 301, 334, 390],
        },
        {
            name: 'Steppe',
            type: 'bar',
            stack: 'total',
            label: labelOption,
            labelLine: labelLineOption,
            emphasis: {
                focus: 'series',
            },
            data: [220, 182, 191, 234, 290],
        },
        {
            name: 'Desert',
            type: 'bar',
            stack: 'total',
            label: labelOption,
            labelLine: labelLineOption,
            emphasis: {
                focus: 'series',
            },
            data: [150, 232, 201, 154, 190],
        },
        {
            name: 'Wetland',
            type: 'bar',
            stack: 'total',
            label: labelOption,
            labelLine: labelLineOption,
            emphasis: {
                focus: 'series',
            },
            data: [98, 77, 101, 99, 40],
        },
    ],
};