1. 程式人生 > >echarts柱形圖重疊部分參考程式碼

echarts柱形圖重疊部分參考程式碼

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);