Cognos集成Echarts开发

       这个博客算一个记录点吧，cognos这款BI工具对于图形化报表的美化支持实在太少，导致我们每次制作出来的报表都很丑。

       参考我的偶像贝克汉姆提供集成Echarts的一个小例子。偶像的例子是利用cognos的html控件以及转发器控件实现的(这种方案由小bug)。而本文是利用原生态js实现的。

步骤：

step1：

<script src="echarts.js"></script>//引用echarts的JS文件。可以放置在cognos服务器cognos安装目录下的p2pd文件夹下的目录里面。然后在RS里面建立一个HTML块进行引用

关于HTML控件，我们只要使用一个就行。而本人中例子是使用了三个。其实可以把代码放入同一个HTML控件，但是注意，一定要放在列表或者交叉表下方。因为我们是通过js去遍历列表或者交叉表来生成Echarts图表。

step2：

<div id="main" style="  width: 1200px; height: 360px;border: 1px solid #e3e3e3; -webkit-border-radius: 4px;

       -moz-border-radius: 4px;

            border-radius: 4px;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);

       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);

            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);"></div>

//初始化显示echarts图表的div

<script type="text/javascript">

var data_list= new Array();

var place_list=new Array();

var title="";

var  total_list=new Array();

//初始化参数

var tableObj1 = document.getElementsByClassName("xt","table");//得到table对象。此处根据cognos版本不同，有各种get方法。不一定采取这种方法。

Array.prototype.remove=function(dx) 

{ 

    if(isNaN(dx)||dx>this.length){return false;} 

    for(var i=0,n=0;i<this.length;i++) 

    { 

        if(this[i]!=this[dx]) 

        { 

            this[n++]=this[i] 

        } 

    } 

    this.length-=1 

} //移除下标function方法

改图为效果图，用于介绍下面循环为何要那样取数

 // tableObj1[0].style.display='none';如果报表只需要图表可以将该表隐藏掉

function get_totallist(){

for(var i=2;i<tableObj1[0].rows.length;i++)//遍历行

{

var source_list=new Array();//该数组一定要放在此处初始化，不然数据会被覆盖

title=tableObj1[0].rows[i].cells[0].innerText;//第i行第1列(下标为0)，也就是一个大区。

for(var j=1;j<tableObj1[0].rows[i].cells.length;j++)//遍历列

{

source_list[j]=parseInt(tableObj1[0].rows[i].cells[j].innerText);//取上面大区对应12个月的数据

}

source_list.remove(0);//去除下标为0的数，因为该行下标为一的数是大区。而我们只要取12个月的度量数据

total_list[i-2]={name:title,type:'line',data:source_list}

//将此处存为类似于map一样的数组，大区为name，12个月的数据为value。也就是此处的title和source_list.

//此处一定要注意total_list数组里面存放的是object对象而不是字符串。被这个地方整了一个下午

}

return total_list;

}

//获取total_list

function get_data(){

for(var j=0;j<tableObj1[0].rows[1].cells.length;j++)

{

data_list[j]=tableObj1[0].rows[1].cells[j].innerText;

//取第二行所有列的数据，也就是月份数据，做为X轴的取数。

}

return data_list;

}

//获取X轴的时间数据

function    get_place(){

for(var i=0;i<tableObj1[0].rows.length-2;i++)

{

place_list[i]=tableObj1[0].rows[i+2].cells[0].innerText;

//获取第一列数据，也就是地区数据，可以从交叉表中看到我们要从第三行(下标为2)开始取数。做为类别系列取数。

}

return place_list;

}

//获取类别值，地区列表

  myChart1 = echarts.init(document.getElementById('main')); 

// 基于准备好的dom，初始化echarts图表

option = {

    title: {

        text: '日均货量报表',

        subtext: ''

    },

    tooltip: {

        trigger: 'axis'

    },

    legend: {

      data:  get_place() //设置类别值

    },

    toolbox: {

        show: true,

        feature: {

            dataZoom: {

                yAxisIndex: 'none'

            },

            dataView: {readOnly: false},

            magicType: {type: ['line', 'bar']},

            restore: {},

            saveAsImage: {}

        }

    },

    xAxis:  {

        type: 'category',

        boundaryGap: false,

        data: get_data() //设置X轴数据

    },

    yAxis: {

        type: 'value',

        axisLabel: {

            formatter: '{value}'

        }

    },

    series:  get_totallist() //填充图表数据

};

  tableObj1[0].style.display='none';

//加载完了把交叉表或者列表对象给隐藏掉

  myChart1.setOption(option); 

// 为echarts对象加载数据 

</script>

到此处就OK了。

这是第一种方案。他可以解决用转发器的bug问题。不过如果遇到列表或者交叉表有分页的情况下，我们又不得不采用转发器做报表，所以两者皆可取。

https://ask.hellobi.com/m/article/4491?from=timeline&isappinstalled=0

此链接为偶像分享的利用转发器和html控件集成echarts制作报表。

贝哥的方案有个bug会导致

上图可以看出当内蒙古1-6月没数据时，转发器会按照顺序将7-12月数据往前挪到1-6月份对应的位置，导致我们图表出现数据误差。

而使用第一种方案，则可避免该BUG。

http://www.cognoschina.net/Document/detail/tid/110811，此处可下载静态demo，感谢打赏。

此文向偶像贝克汉姆致敬，未经允许，不得转发。