echarts柱形圖重疊部分參考程式碼
阿新 • • 發佈:2019-02-10
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);