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!

©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值