echart叠加柱状图上显示文字

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

乔所以

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

阅读量3.6k

点赞数 2

分类专栏：前端文章标签：前端其他

本文链接：https://blog.csdn.net/jia14/article/details/109134410

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

echart叠加柱状图上显示文字

效果图

在这里插入图片描述

修改代码

在这里插入图片描述

源代码

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: [ '邮件营销', '联盟广告', '视频广告']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '邮件营销',
            type: 'bar',
            stack: '广告',
            label:{
                normal:{
                    show:true,
                    position:'insideRight',
                    textStyle:{
                        color:'black'
                    },
                    formatter:function(params){
                        return params.value
                    }
                }
            },
            data: [ 132, 101, 134, 90, 230, 310,112]
        },
        {
            name: '联盟广告',
            type: 'bar',
            stack: '广告',
            label:{
                normal:{
                    show:true,
                    position:'insideRight',
                    textStyle:{
                        color:'black'
                    },
                    formatter:function(params){
                        return params.value
                    }
                }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: '广告',
            label:{
                normal:{
                    show:true,
                    position:'insideRight',
                    textStyle:{
                        color:'black'
                    },
                    formatter:function(params){
                        return params.value
                    }
                }
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        }
    ]
};



参考：https://www.cnblogs.com/hxjCode/p/11270139.html