Echarts实战案例代码(7)：柱图实现显示多组数据label标签的解决方案

一、创建数组：

var dataName = ["A", "B", "C", "D", "E"];
var datalabel = [100, 2, 3, 12, 13];
var data = [18203, 23489, 29034, 104970, 131744];

二、设置option

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: dataName,
        axisLabel: {
            interval: 0,
            color: '#666',
            align: 'right',
            fontSize: 13,

        }
    },
    series: [{
            name: '漏刻有时',
            type: 'bar',
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                },
            },
            label: {
                show: true,
                position: "right",
                formatter: function(params) {
                    console.log(params.dataIndex);
                    return '总金额：' + data[params.dataIndex] + '元\n\n总数量：' + datalabel[params.dataIndex]+ '个'
                }
            },
            data: data
        },

    ]
};

三、重点解读：

label: {
                show: true,
                position: "right",
                formatter: function(params) {
                    //console.log(params.dataIndex);
                    return '总金额：' + data[params.dataIndex] + '元\n\n总数量：' + datalabel[params.dataIndex]+ '个'
                }
            }

Done!