BIEE集成echart并实现带参跳转和放大功能
标准：
效果图：
叙述视图：
//前缀
<!DOCTYPE html>
<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>
浙公网安备 33010602011771号