//数据表格使用 var g; // 公司名称数组--X轴数据 var compIds = ""; var series = ""; var gridData = ""; //单位ID var deptName = ""; //柱状图 var option = { title : { text: '重点关注用户信息统计图', subtext: '/户' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter: function (params){ return params[0].name + '
' + params[0].seriesName + ' : ' + params[0].value + '
' + params[1].seriesName + ' : ' + params[1].value + '
' + params[2].seriesName + ' : ' + params[2].value + '
' + params[3].seriesName + ' : ' + params[3].value; } }, legend: { y : 'bottom', data:['总体情况','供电电源配置符合要求情况','自备应急电源配置符合要求情况','“双不满足”基本情况'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: false, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['广东电网','清远','韶关','中山','东莞','佛山'] } ], yAxis : [ { type : 'value', boundaryGap: [0, 0.1] } ], series : [ { name:'总体情况', type:'bar', stack: 'sum', barCategoryGap: '50%', itemStyle: { normal: { color: 'tomato', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'insideTop' } } }, data:[100, 200, 220, 120, 100, 80] }, { name:'供电电源配置符合要求情况', type:'bar', stack: 'sum', barCategoryGap: '50%', itemStyle: { normal: { color: 'yellow', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'insideTop', formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return option.series[0].data[i] + params.value; } } } } } }, data:[200, 200, 220, 120, 100, 80] }, { name:'自备应急电源配置符合要求情况', type:'bar', stack: 'sum', itemStyle: { normal: { color: 'blue', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'insideTop', formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return option.series[0].data[i] + option.series[1].data[i] + params.value; } } } } } }, data:[300, 80, 50, 80,80, 70] }, { name:'“双不满足”基本情况', type:'bar', stack: 'sum', itemStyle: { normal: { color: 'green', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'top', formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return option.series[0].data[i] + option.series[1].data[i] + option.series[2].data[i] + params.value; } } }, textStyle: { color: 'tomato' } } } }, data:[300, 80, 50, 80,80, 70] } ] }; var series1={ name:'总体情况', type:'bar', stack: 'sum', barCategoryGap: '50%', itemStyle: { normal: { color: 'tomato', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'insideTop' } } }, data:[100, 200, 220, 120, 100, 80] }; var series2={ name:'供电电源配置符合要求情况', type:'bar', stack: 'sum', barCategoryGap: '50%', itemStyle: { normal: { color: 'yellow', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'insideTop', formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return parseInt(option.series[0].data[i]) + parseInt(params.value); } } } } } }, data:[200, 200, 220, 120, 100, 80] }; var series3={ name:'自备应急电源配置符合要求情况', type:'bar', stack: 'sum', itemStyle: { normal: { color: 'blue', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'insideTop', formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return parseInt(option.series[0].data[i]) + parseInt(option.series[1].data[i]) + parseInt(params.value); } } } } } }, data:[300, 80, 50, 80,80, 70] }; var series4={ name:'“双不满足”基本情况', type:'bar', stack: 'sum', itemStyle: { normal: { color: 'green', barBorderColor: 'tomato', barBorderWidth:0.2, barBorderRadius:0, label : { show: true, position: 'top', formatter: function (params) { for (var i = 0, l = option.xAxis[0].data.length; i < l; i++) { if (option.xAxis[0].data[i] == params.name) { return parseInt(option.series[0].data[i]) + parseInt(option.series[1].data[i]) + parseInt(option.series[2].data[i]) + parseInt(params.value); } } }, textStyle: { color: 'tomato' } } } }, data:[300, 80, 50, 80,80, 70] }; //柱状图方法 //总体 function changeBarOption1(data){ series1.name='总体情况'; series2.name='供电电源配置符合要求情况'; series3.name='自备应急电源配置符合要求情况'; series4.name='“双不满足”基本情况'; var legendData=[]; var data1=[]; var data2=[]; var data3=[]; var data4=[]; for(var i=0;i' + params[0].seriesName + ' : ' + params[0].value + '
' + params[1].seriesName + ' : ' + params[1].value + '
' + params[2].seriesName + ' : ' + params[2].value + '
' + params[3].seriesName + ' : ' + params[3].value; }; } //供电电源 function changeBarOption2(data){ series1.name='特级用户'; series2.name='一级用户'; series3.name='二级用户'; var legendData=[]; var data1=[]; var data2=[]; var data3=[]; for(var i=0;i' + params[0].seriesName + ' : ' + params[0].value + '
' + params[1].seriesName + ' : ' + params[1].value + '
' + params[2].seriesName + ' : ' + params[2].value; }; } //自备应急 function changeBarOption3(data){ series1.name='特级用户'; series2.name='一级用户'; series3.name='二级用户'; var legendData=[]; var data1=[]; var data2=[]; var data3=[]; for(var i=0;i' + params[0].seriesName + ' : ' + params[0].value + '
' + params[1].seriesName + ' : ' + params[1].value + '
' + params[2].seriesName + ' : ' + params[2].value; }; } //“双不满足” function changeBarOption4(data){ series1.name='特级用户'; series2.name='一级用户'; series3.name='二级用户'; var legendData=[]; var data1=[]; var data2=[]; var data3=[]; for(var i=0;i' + params[0].seriesName + ' : ' + params[0].value + '
' + params[1].seriesName + ' : ' + params[1].value + '
' + params[2].seriesName + ' : ' + params[2].value; }; } //折线图option1 var option1 = { title : { text: '重点关注用户信息统计图', subtext: '/户' }, tooltip : { trigger: 'axis' }, legend: { y:'bottom', data:['广东','清远','中山'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: false, readOnly: false}, magicType : {show: false, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['总体情况','供电电源配置符合要求情况','自备应急电源配置符合要求情况','“双不满足”基本情况'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'广东', type:'line', data:[20, 30, 50,40] }, { name:'清远', type:'line', data:[10, 18, 19, 24] }, { name:'中山', type:'line', data:[15, 22, 20, 15] } ] }; function changeLineOption(data){ var legendData=[]; var seriesJson=[]; for(var i=0;i{b} : {c} ({d}%)" }, legend: { y : 'bottom', data:['总体情况','供电电源配置符合要求情况','自备应急电源配置符合要求情况','“双不满足”基本情况'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: false, readOnly: false}, magicType : { show: false, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name:'重点关注用户信息', type:'pie', radius : '55%', center: ['50%', '55%'], data:[ {value:335, name:'总体情况'}, {value:310, name:'供电电源配置符合要求情况'}, {value:234, name:'自备应急电源配置符合要求情况'}, {value:256, name:'“双不满足”基本情况'} ] } ] }; function changePieOption(data){ /*************************************************** 初始化解析饼图数据 start**********************************************************/ option2.legend.data=['总体情况','供电电源配置符合要求情况','自备应急电源配置符合要求情况','“双不满足”基本情况']; var index=data.rows.length-1; var seriesJson=[]; var j=0; if(data.rows[index]["hejiSum"]!=undefined){ var json={value:data.rows[index]["hejiSum"],name:'总体情况'}; seriesJson[j]=json; j++; } if(data.rows[index]["hejidmSum"]!=undefined){ var json={value:data.rows[index]["hejidmSum"],name:'供电电源配置符合要求情况'}; seriesJson[j]=json; j++; } if(data.rows[index]["hejizbSum"]!=undefined){ var json={value:data.rows[index]["hejizbSum"],name:'自备应急电源配置符合要求情况'}; seriesJson[j]=json; j++; } if(data.rows[index]["hejisfSum"]!=undefined){ var json={value:data.rows[index]["hejisfSum"],name:'“双不满足”基本情况'}; seriesJson[j]=json; j++; } option2.series[0].data=seriesJson; /*************************************************** 初始化解析饼图数据 end **********************************************************/ } // 表格的初始化 function initComplete() {//gridData deptName = (window.location.href).split('?')[1]; $("body").eq(0).showLoading(); $.ajax({ url : $.pathname()+ "/ws/customerHuiZong/customerHuiZongService/getZYCustomerInfo2", type : 'post', timeout : 60000, data : {id : deptName}, dataType : 'json', success : function(data){ g = $("#maingrid").quiGrid({ columns : [{ display : '供电单位', "name" : 'name', id : 'name', width : "20%", dept_id:'dept_id', frozen: true, align : 'left',render: addStatus },{ display : '总体情况', name: 'hejiSum', width : "20%", align : 'center' },{ display : '供电电源配置符合要求情况', name: 'hejidmSum', width : "20%", align : 'center' },{ display : '自备应急电源配置符合要求情况', name: 'hejizbSum', width : "20%", align : 'center' },{ display : '“双不满足”基本情况', name: 'hejisfSum', width : "20%", align : 'center' }], //url :$.pathname()+ "/ws/customerHuiZong/customerHuiZongService/getCustomerInfo", //params : {id : deptName}, data:data, rownumbers : false, /*height : 600,*/ width : "100%", usePager : false, autoCheckChildren : true, tree : { columnId : 'name' } // treeAjax : true, // treeChildDataPath : $.pathname() // + '/ws/customerHuiZong/customerHuiZongService/getPlanInfoList?deptId=', // treeAutoParam:"dept_id" }); $("body").eq(0).hideLoading(); //重设高度 $(parent.document.body).find("iframe").height($(window.document.body).height()+30); $(top.document.body).find("iframe").height($(window.document.body).height()+30); gridData=data; changeBarOption1(data); changeLineOption(data); changePieOption(data); var myChart = echarts.init(document.getElementById('main1')); myChart.setOption(option); $(".basicTab").bind('actived',function(e,i){ if(i==0){ /***************************************** 加载柱状图 *********************************************************/ var myChart1 = echarts.init(document.getElementById('main1')); myChart1.setOption(option); }else if(i == 1){ /***************************************** 加载折线图 *********************************************************/ var myChart2 = echarts.init(document.getElementById('main2')); myChart2.setOption(option1); }else if(i==2){ /***************************************** 加载饼图 *********************************************************/ var myChart3 = echarts.init(document.getElementById('main3')); myChart3.setOption(option2); } }); }, error : function(e){ $.messager.alert('系统提示信息', '访问服务失败!', 'error'); } }); } function addStatus(rowdata, rowindex, value, column){ if("总计"==rowdata.name){ return value; }else{ var comp_id='"'+rowdata.compid+'"'; var name = '"'+value+'"'; return "" + value +" "; } } function newHtml(comp_id,name){ if(name=="总计"){ return; }else if(deptName==comp_id){ return; }else{ // window.open("/nwyj/page/business/am/customer/customer-poll1.jsp?"+comp_id); $.indexOpenNextWindow("/nwyj/page/business/am/customer/customerZDGZYH-poll1.jsp?"+comp_id); } } //返回事件 function goBack() { var url = "/nwyj/page/business/am/customer/"+"customer-focus.jsp"; parent.document.getElementById("frmright").setAttribute("src", ""+encodeURI(url)); }