一、效果图
1、这是用Obiee + echarts做出来的瀑布图，效果如图：
2、数据（数据库随机生成的数，仅供参考），如图：
通过研究echarts瀑布图的数据，我发现需要弄一个辅助值才能得到相应的图表，这里用到了BIEE的rsum()函数——滚动求和。
二、代码解析
前缀：
<!-- 引入 ECharts 文件 -->
<scriptsrc="/analyticsRes/echarts/dist/echarts.js"></script>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<divid="dom26" style="width: 520px;height:280px;"></div>
<scripttype="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart =echarts.init(document.getElementById('dom26'));
var data1=[];
var data2=[];
var data3=[];
</script>
叙述：
<script>
data1.push('@1');
data2.push({value:'@2',name:'@1'});
data3.push({value:'@3',name:'@1'});
</script>
后缀：
<script>
var option = {
title: {
text: '渠道分布'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type :'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' +tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type : 'category',
splitLine: {show:false},
data : data1,
axisLabel:{
interval: 0,//强制显示所有标签
}
},
yAxis: {
type : 'value'
},
series: [
{
name: '辅助值',
type: 'bar',
stack: '总量',
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: data3
},
{
name: '排产数量',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside'
}
},
data:data2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize",function () {
myChart.resize();
});
</script>
三、注意点
1、数据那里可以拿例子里面的静态数据画个图，想想就清楚怎么得来的；
2、第二列数据需要用到总计值，但第三列不需要，所以我在标准那使用了并表来实现这个。