echarts柱形图重叠部分参考代码

最新推荐文章于 2024-08-27 12:00:00 发布

lbn2676043895

最新推荐文章于 2024-08-27 12:00:00 发布

阅读量6.9k

点赞数

本文链接：https://blog.csdn.net/lbn2676043895/article/details/80418921

版权

echarts柱状图做成重叠的效果：
如图：
这里写图片描述

如果简单加个，stack: ‘product’属性的话是上下叠加的，这并不能符合效果，这种事可以在某种场景使用的。

代码如下：

option = {
    xAxis: {
        data: ['a', 'b', 'c', 'd'],
        axisTick: {show: false},
        axisLabel: {
            formatter: 'barGap: \'-100%\''
        }
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        type: 'bar',
        itemStyle: {
            normal: {
                color: '#ddd'
            }
        },
        silent: true,
        barWidth: 40,
        barGap: '-100%', // Make series be overlap
        data: [60, 60, 60, 60]
    }, {
        type: 'bar',
        barWidth: 40,
        z: 10,
        data: [45, 60, 13, 25]
    }]
};


//动态切换
var barGaps = ['30%', '-100%'];
var loopIndex = 0;

setInterval(function () {
    var barGap = barGaps[loopIndex];

    myChart.setOption({
        xAxis: {
            axisLabel: {
                formatter: 'barGap: \'' + barGap + '\''
            }
        },
        series: [{
            barGap: barGap
        }]
    });
    loopIndex = (loopIndex + 1) % barGaps.length;

}, 2000);