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

最新推荐文章于 2024-08-09 17:10:29 发布

漏刻有时

最新推荐文章于 2024-08-09 17:10:29 发布

阅读量2.6k

点赞数 2

分类专栏：漏刻有时 echarts

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/107258512

版权

漏刻有时同时被 2 个专栏收录

287 篇文章 17 订阅

订阅专栏

echarts

205 篇文章 29 订阅

订阅专栏

在这里插入图片描述
一、创建数组：

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