实现功能:
解析交叉表或列表数据,将解析后的数据存放数组中。结合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>
第四步:展示效果: