cognos引用echarts图形工具，展示折线图

实现功能：

解析交叉表或列表数据，将解析后的数据存放数组中。结合echats图表样式展示出来。

第一步：创建对应的TABLE.

第二步：拖入一个html，置于table后

第三步：解析table数据，html内容如下

 <script>
var arr=new Array();
 arr1=new Array();
 arr2=new Array();
 arr3=new Array();
title = new Array();
var titlename1;
var titlename2;
var tableObj = document.getElementsByClassName("ls","table");//得到table对象。此处根据cognos版本不同，有各种get方法。不一定采取这种方法。ls为列表，xt为交叉表。
var title1=tableObj[0].rows.length;
title[0]=tableObj[0].rows[0].cells[1].innerText;
title[1]=tableObj[0].rows[0].cells[2].innerText;//获取lenged data数组
//console.log(title);
titlename1=tableObj[0].rows[0].cells[1].innerText;//获取series第一个name值
titlename2=tableObj[0].rows[0].cells[2].innerText;//获取series第二个name值
console.log(titlename1 );
console.log(titlename2 );



var title1=tableObj[0].rows.length;
for(var i=1;i<=title1-1;i++){
   var row_obj = tableObj[0].rows[i];
  var temp = new Object();
  temp.name=row_obj.cells[0].innerText;//获取单元格所有Name
  temp.value=row_obj.cells[1].innerText;//获取第一列单元格所有value
  temp.values=row_obj.cells[2].innerText;//获取第二列单元格所有value
  arr.push(temp);//拼装成数组。如果是饼图，则可以直接使用temp作为展示数组。
}
for(var i=0;i<arr.length;i++){
	arr1[i]=arr[i].name;//月份x轴
        arr2[i]=arr[i].value.replace(/,/g,'');//收入，去掉千位符
        arr3[i]=arr[i].values.replace(/,/g,''); //去年收入
}
//console.log(arr3);
//console.log(arr2);
//console.log(arr1);




</script>


<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1350px;height:560px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
    
   option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:title
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data:arr1
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:titlename1 ,
            type:'line',
            data:arr2
        },
        {
            name:titlename2,
            type:'line',
            data:arr3
        }
    ]
};
   
        
                // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

第四步：展示效果：

扫描二维码关注公众号，回复： 1785763 查看本文章

cognos引用echarts图形工具，展示折线图

猜你喜欢