Echarts实战案例代码(7)：柱图实现显示多组数据label标签的解决方案-阿里云开发者社区

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

2023-07-19 1006

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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]+ '个'
                }
            }