阶梯瀑布图
Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。
假设数据数组中的值是表示对前一个值的增减:
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
也就是第一个数据是 900
,第二个数据 345
表示的是在 900
的基础上增加了 345
……将这个数据展示为阶梯瀑布图时,我们可以使用三个系列:第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;第二个系列用来表示正数;第三个系列用来表示负数。
var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203]; var help = []; var positive = []; var negative = []; for (var i = 0, sum = 0; i < data.length; ++i) { if (data[i] >= 0) { positive.push(data[i]); negative.push('-'); } else { positive.push('-'); negative.push(-data[i]); } if (i === 0) { help.push(0); } else { sum += data[i - 1]; if (data[i] < 0) { help.push(sum + data[i]); } else { help.push(sum); } } } option = { title: { text: 'Waterfall' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', splitLine: { show: false }, data: (function() { var list = []; for (var i = 1; i <= 11; i++) { list.push('Oct/' + i); } return list; })() }, yAxis: { type: 'value' }, series: [ { type: 'bar', stack: 'all', itemStyle: { normal: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' }, emphasis: { barBorderColor: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)' } }, data: help }, { name: 'positive', type: 'bar', stack: 'all', data: positive }, { name: 'negative', type: 'bar', stack: 'all', data: negative, itemStyle: { color: '#f33' } } ] };
live