美文网首页
实现堆叠柱状图

实现堆叠柱状图

作者: 前端新阳 | 来源:发表于2019-12-13 14:06 被阅读0次

后台管理系统需要实现一个 堆叠柱状图,设计稿如下:

堆叠柱状图

参考代码:

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

参考文档: https://www.jianshu.com/p/cf59471f7068
https://gallery.echartsjs.com/editor.html?c=xSJJXiE1Wx

相关文章

网友评论

      本文标题:实现堆叠柱状图

      本文链接:https://www.haomeiwen.com/subject/nuefnctx.html