当要求从-30增长60到30时候,这个瀑布图如何实现?
最终实现效果如上图所示,直接看代码:
option = {
title: {
text: 'Accumulated Waterfall Chart'
},
legend: {
data: ['Expenses', 'Income']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: (function () {
let list = [];
for (let i = 1; i <= 11; i++) {
list.push('Nov ' + i);
}
return list;
})()
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: [0, 0]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
label: {
show: false,
position: 'top'
},
data: [-30, '-']
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: false,
position: 'bottom'
},
data: ['-', 30]
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: false,
position: 'bottom'
},
data: ['-', -30]
}
]
};
主要思路就是:一列展示用两个bar柱状图来展示!要记得当要实现跨x轴增长或减少的时候,总数累计部分要设置成0,然后用两个bar,一个是-30,另一个是30,这样就能实现跨x轴的瀑布效果!!