echarts柱状图多柱重叠和多柱堆叠

效果:如图:标1的地方重叠了2个数据,3也是2个。2只有单独一个。
在这里插入图片描述
主要是设置stack,没有设置stack的话就是单独一列
在这里插入图片描述

代码:

option = {
     legend: {
            data: ['直接访问','邮件营销','联盟广告','视频广告','百度',],
        },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '直接访问',
            type: 'bar',
            stack: 'overlap',//堆叠效果(字符需要统一)
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '邮件营销',
            type: 'bar',
            stack: 'overlap',//堆叠效果(字符需要统一)
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'bar',
            stack: 'overlap1',//堆叠效果(字符需要统一)
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '百度',
            type: 'bar',
            stack: 'overlap1',//堆叠效果(字符需要统一)
            data: [620, 732, 701, 734, 1090, 1130, 1120]
        },
    ]
};

参考:
https://www.cnblogs.com/swcffgh/p/14273833.html

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
echarts中,可以通过设置堆叠(stack)属性来实现柱状图堆叠效果,即数据不会叠加。如果不设置堆叠属性,则默认为重叠效果,即数据会叠加在一起。 举个例子,假设有以下数据: data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] 如果要实现堆叠效果,可以使用如下代码: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', stack: '堆叠' }, { data: [130, 202, 180, 80, 90, 200, 130], type: 'bar', stack: '堆叠' } ] }; 这段代码中的series数组中包含了两个柱状图,分别对应两组数据。在每个柱状图的配置中,通过设置stack属性为相同的值,即可实现堆叠效果。 如果要实现重叠效果,可以使用如下代码: option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }, { data: [130, 202, 180, 80, 90, 200, 130], type: 'bar', barGap: '-100%', z: '-1' } ] }; 在第二个柱状图的配置中,通过设置barGap属性为'-100%',使第二个柱子与第一个柱子重叠在一起。同时,通过设置z属性为'-1',将第二个柱子的层级调至底层,以保证第一个柱子的可见性。 综上所述,通过设置堆叠属性可以实现柱状图堆叠效果,而不设置堆叠属性则默认为重叠效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值