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