BIEE整合echart並實現帶參跳轉和放大功能
阿新 • • 發佈：2021-01-20
標準：
效果圖：
敘述檢視：
//字首
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>EChartsTest</title> </head> <body> <div id="TwoLine" style="height:300px;width:900px; z-index:300"></div> <script src="/analyticsRes/echarts.js"></script> <script type="text/javascript"> var TwoLine= echarts.init(document.getElementById('TwoLine')); var TwoLine_list3=[]; var TwoLine_list1=[];var TwoLine_list2=[];var TwoLine_list4=[];var TwoLine_list5=[]; var TwoLine_list6=[];var TwoLine_list7=[]; var TwoLine_clicknum=1; var TwoLine_maoli=[]; var TwoLine_ytdmaoli=[];
//敘述
TwoLine_list3.push('@1');
TwoLine_list1.push('@2');
TwoLine_list2.push('@3');
TwoLine_list4.push('@8');
TwoLine_list5.push('@9');
TwoLine_list6.push('@4');
TwoLine_list7.push('@5');
TwoLine_maoli.push('@6');
TwoLine_ytdmaoli.push('@7');
//字尾
var TwoLine_ydata2=[]; TwoLine_ydata2.push( { type : 'value', max: 'dataMax', splitLine: { lineStyle:{ type:'dashed', }, }, } ); var TwoLine_a=@{VAR_YEAR}{2017}; var TwoLine_b=@{VAR_YEAR}{2017}-1; var TwoLine_xdata= [TwoLine_b.toString(),TwoLine_a.toString(),TwoLine_b+'毛利率',TwoLine_a+'毛利率']; var TwoLine_ldata= [TwoLine_list2,TwoLine_list1]; var TwoLine_datalist=[]; TwoLine_datalist.push( { name:TwoLine_xdata[0], type:'bar', data:TwoLine_ldata[0], itemStyle: { normal: { color:'#2F4554' } }, label :{normal:{show:true,position:'top'}} }, { name:TwoLine_xdata[1], type:'bar', data:TwoLine_ldata[1], itemStyle: { normal: { color:'#C23531' } }, label :{normal:{show:true,position:'top'}} } ); if(TwoLine_list4[0] =='報關金額'||TwoLine_list4[0] =='訂單額'){ TwoLine_datalist.push( { name:TwoLine_xdata[2], type:'line', yAxisIndex: 1, data:TwoLine_ytdmaoli, itemStyle: { normal: { color:'#E2519E' } }, label :{normal:{show:true,position:'top'}} }, { name:TwoLine_xdata[3], type:'line', yAxisIndex: 1, data:TwoLine_maoli, itemStyle: { normal: { color:'#2297F0' } }, label :{normal:{show:true,position:'top'}} } ); } var TwoLine_ldata3= [TwoLine_list1]; var TwoLine_xdata1= ['同比','環比']; var TwoLine_ldata1= [TwoLine_list6,TwoLine_list7]; for(var i =0;i<TwoLine_ldata3.length;i++) { TwoLine_ydata2.push( { type: 'value', splitLine: { show: false }, axisLine: { show: false }, axisLabel: { formatter: '{value}%' } } ); TwoLine_datalist.push( { name:TwoLine_xdata1[0], type:'line', yAxisIndex: 1, data:TwoLine_ldata1[0], itemStyle: { normal: { color:'#21D88B' } }, label :{normal:{show:true,position:'top'}} }, { name:TwoLine_xdata1[1], type:'line', yAxisIndex: 1, data:TwoLine_ldata1[1], itemStyle: { normal: { color:'#644690' } }, label :{normal:{show:true,position:'top'}} } ); } Array.prototype.unique5 = function() { var res = [], hash = {}; for(var i=0, elem; (elem = this[i]) != null; i++) { if (!hash[elem]) { res.push(elem); hash[elem] = true; } } return res; } var TwoLine_ydata = TwoLine_list3.unique5(); option = { tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } }, toolbox: { feature: { restore: { show: true, icon: 'M23.808 32c3.554-6.439 4.153-16.26-9.808-15.932v7.932l-12-12 12-12v7.762c16.718-0.436 18.58 14.757 9.808 24.238z' }, myEye: { show: true, title: '圖例開關', icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', onclick: function (){ TwoLine_clicknum++; if(TwoLine_clicknum%2 == 0){ TwoLine.setOption({ series: [{label :{normal:{show:false,position:'top'}}},{label :{normal:{show:false,position:'top',offset:[0,-5]}}},{label :{normal:{show:false,position:'top'}}},{label :{normal:{show:false,position:'top'}}},{label :{normal:{show:false,position:'top'}}},{label :{normal:{show:false,position:'top'}}}] }); } else{ TwoLine.setOption({ series: [{label :{normal:{show:true,position:'top'}}},{label :{normal:{show:true,position:'top',offset:[0,-5]}}},{label :{normal:{show:true,position:'top'}}},{label :{normal:{show:true,position:'top'}}},{label :{normal:{show:true,position:'top'}}},{label :{normal:{show:true,position:'top'}}}] }); } } }, myMagnifier: { show: true, title: '全圖放大', icon: 'path://M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z', onclick: function (params){ recTwoLine(params,0); } }, } }, legend: { selected:{'同比':false,'環比':false}, data:TwoLine_xdata.concat(TwoLine_xdata1) }, grid: { left: '1%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data :TwoLine_ydata, } ], yAxis : TwoLine_ydata2, series :TwoLine_datalist }; if(TwoLine_list4[0] =='報關金額'||TwoLine_list4[0] =='訂單額'){ option.legend.selected = {}; option.legend.selected[TwoLine_xdata[0]] = false; option.legend.selected[TwoLine_xdata[2]] = false; option.legend.selected[TwoLine_xdata1[0]] = false; }; if(TwoLine_list4[0] =='訂單量'||TwoLine_list4[0] =='報關數量'||TwoLine_list4[0] =='出貨數量'){ option.legend.selected = {}; option.legend.selected[TwoLine_xdata[0]] = false; option.legend.selected[TwoLine_xdata1[0]] = false; }; TwoLine.setOption(option); TwoLine.on('click',function(params){ recTwoLine(params,1); }) function recTwoLine(params,clickflag){ var host = window.location.host; var myValue = new Array();var myfield = new Array();var hcount=0; if(clickflag==1){ var month=encodeURI("\""+params.name+"\"");var myPage=encodeURI('Page1'); }else{ var month=encodeURI("\""+"@{VAR_MONTH}{}".replace(/,/g,"\"+\"")+"\"");var myPage=encodeURI('Page13'); } var VAR_HW_PRO_TAX=encodeURI(TwoLine_list5[0]); var VAR_HW_PRO=encodeURI(TwoLine_list4[0]); var year=encodeURI("\""+"@{VAR_YEAR}{}".replace(/,/g,"\"+\"")+"\""); var halfyear=encodeURI("\""+"@{VAR_HALFYEAR}{}".replace(/,/g,"\"+\"")+"\""); var season=encodeURI("\""+"@{VAR_SEASON}{}".replace(/,/g,"\"+\"")+"\""); var line1=encodeURI("\""+"@{VAR_LINE1}{}".replace(/,/g,"\"+\"")+"\""); var line2=encodeURI("\""+"@{VAR_LINE2}{}".replace(/,/g,"\"+\"")+"\""); var area=encodeURI("\""+"@{VAR_AREA}{}".replace(/,/g,"\"+\"")+"\""); var kit=encodeURI("\""+"@{VAR_KIT}{}".replace(/,/g,"\"+\"")+"\""); var dislv5=encodeURI("\""+"@{VAR_DISLV5}{}".replace(/,/g,"\"+\"")+"\""); var saletype1=encodeURI("\""+"@{SALE_TYPE}{}".replace(/,/g,"\"+\"")+"\""); var ISCHECK=encodeURI("\""+"@{ISCHECK}{}".replace(/,/g,"\"+\"")+"\""); var prefix='http://'+host+'/analytics/saw.dll?Dashboard&PortalPath='; var homepage=encodeURI('/shared/海外/海外產品部/04 跳轉/跳轉'); var mypath=homepage+'&Page='+myPage+'&Action=Navigate'; var url= prefix+mypath; myValue[0]=VAR_HW_PRO; myValue[1]=year; myValue[2]=halfyear; myValue[3]=season; myValue[4]=month; myValue[5]=line1; myValue[6]=line2; myValue[7]=area; myValue[8]=VAR_HW_PRO_TAX; myValue[9]=kit; myValue[10]=dislv5; myValue[11]=saletype1; myValue[12]=ISCHECK; myfield[0]=encodeURI('"事實 - 指標切換"."度量切換"'); myfield[1]=encodeURI('"維度 - 日期"."年名稱"'); myfield[2]=encodeURI('"維度 - 日期"."半年度描述"'); myfield[3]=encodeURI('"維度 - 日期"."季度"'); myfield[4]=encodeURI('"維度 - 日期"."月簡稱"'); myfield[5]=encodeURI('"維度 - 物料"."海外一級"'); myfield[6]=encodeURI('"維度 - 物料"."研發二級"'); myfield[7]=encodeURI('"維度 - 大區"."大區"'); myfield[8]=encodeURI('"事實 - 指標切換"."幣種切換"'); myfield[9]=encodeURI('"維度 - KIT拆分"."KIT拆分"'); myfield[10]=encodeURI('"維度 - 大區"."二級部門"'); myfield[11]=encodeURI('"維度 - 銷售型別"."銷售型別一級"'); myfield[12]=encodeURI('"維度 - 是否考核資料"."是否考核資料"'); for(var icount=0;icount<myValue.length;icount++){ if(myValue[icount]!=null && myValue[icount]!='%22%22' && myValue[icount].length>0 && myValue[icount]!=encodeURI('\"(所有列值)\"')){ hcount++; url += "&col"+hcount+"="+myfield[icount]+"&val"+hcount+"="+myValue[icount]; } } window.open(url,'_blank'); } </script> </body> </html>