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