// 本质是两个柱体叠加后隐藏重叠部分形成，参考echarts实例：阶梯瀑布图（柱状图模拟） // https://echarts.apache.org/examples/zh/editor.html?c=bar-waterfall2 let one = [], two = []; let datas = { xData: [], arrStar: [], arrRise: [], tooltip: [], colorSet: [], }; for (let i = 0; i < 500; i++) { one.push(Number((Math.random() * 100).toFixed(2))); two.push(Number((Math.random() * 100).toFixed(2))); } sets(one, two); function sets(one, two) { let a = JSON.parse(JSON.stringify(one)), b = JSON.parse(JSON.stringify(two)); for (let index = 0; index < a.length; index++) { datas.xData.push(index); if (Math.abs(Number(two[index])) < Math.abs(Number(one[index]))) { b[index] = one[index]; a[index] = two[index]; } if (datas.arrStar.length > a.length * 2 && datas.arrRise.length > a.length * 2) { datas.arrStar.shift(); datas.arrRise.shift(); datas.xData.shift(); datas.tooltip.shift(); datas.colorSet.shift(); datas.xData.push(Number(datas.xData[datas.xData.length - 1]) + 1); } datas.tooltip.push([a[index], b[index]]); if (a[index] <= 0 && b[index] > 0) { datas.arrRise.push(Number(b[index])); datas.colorSet.push('#5470c6'); datas.arrStar.push(Number(a[index])); continue; } if (a[index] > 0 && b[index] <= 0) { datas.arrRise.push(Number(b[index])); datas.colorSet.push('#5470c6'); datas.arrStar.push(Number(a[index])); continue; } if (a[index] > 0 && b[index] > 0) { if (a[index] < b[index]) datas.arrRise.push(Number(b[index] - a[index])); else datas.arrRise.push(Number(a[index] - b[index])); datas.colorSet.push('transparent'); datas.arrStar.push(Number(a[index])); continue; } if (a[index] <= 0 && b[index] <= 0) { if (a[index] < b[index]) datas.arrRise.push(Number(b[index] - a[index])); else datas.arrRise.push(Number(a[index] - b[index])); datas.colorSet.push('transparent'); datas.arrStar.push(Number(a[index])); continue; } } } option = { animation: false, title: { text: 'Accumulated Waterfall Chart', }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, formatter: function (params) { let tar; if (params[1].value !== '-') { tar = params[1]; } else { tar = params[0]; } return ( tar.name + '
' + tar.seriesName + ' : ' + tar.value.toFixed(2) + '
' + datas.tooltip[tar.dataIndex][0] + ' ~ ' + datas.tooltip[tar.dataIndex][1] ); }, }, legend: { data: ['Income'], animation: false, }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true, }, xAxis: { type: 'category', triggerEvent: true, // 鼠标经过轴文字时事件生效 axisTick: { show: true, alignWithLabel: true, interval: 'auto', }, // splitNumber: 8, axisLabel: { interval: 'auto', // showMaxLabel: true, //强制显示最后一个数据的刻度，为true时动态添加数据会出现数据显示问题 }, axisLine: { onZero: false, }, splitLine: { show: false, }, data: datas.xData, }, yAxis: { type: 'value', splitLine: { show: true, }, axisLine: { onZero: false, }, // data: [-2, -1, 0, 1, 2], axisTick: { show: true, alignWithLabel: true, }, }, dataZoom: [ { show: true, type: 'inside', filterMode: 'none', xAxisIndex: [0], start: 0, end: 100, }, ], series: [ { name: 'Placeholder', type: 'bar', stack: 'Total', itemStyle: { borderColor: 'transparent', color: function (params) { return datas.colorSet[params.dataIndex]; }, }, data: datas.arrStar, }, { name: '波动', type: 'bar', stack: 'Total', data: datas.arrRise, itemStyle: { borderColor: 'transparent', color: '#5470c6', }, }, ], };

Echarts在线免费图表