Obiee+echarts实例之瀑布图

一、效果图

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、第二列数据需要用到总计值，但第三列不需要，所以我在标准那使用了并表来实现这个。