var eap_chart_cfg = { bgColor:'#F7F7F7', color:['#F9758F','#36C8CA', '#B6A2DE', '#FFB980','#5AB1EF','#97B552', '#D19392', '#8D98B3','#6e7074', '#546570', '#c4ccd3'] }; $.extend({ getEchartObj:function(_id){ return echarts.getInstanceByDom(document.getElementById(_id)); }, getFullCanvasDataURL:function(divId){ var baseCanvas = $("#"+divId).find("canvas").first()[0]; if(!baseCanvas){ return false; }; var width = baseCanvas.width; var height = baseCanvas.height; var ctx = baseCanvas.getContext("2d"); //遍历,将后续的画布添加到在第一个上 $("#"+divId).find("canvas").each(function(i,canvasObj){ if(i>0){ var canvasTmp = $(canvasObj)[0]; ctx.drawImage(canvasTmp,0,0,width,height); } }); //获取base64位的url return baseCanvas.toDataURL(); }, getChartImage:function(_id,opts){ var myChart = echarts.getInstanceByDom(document.getElementById(_id)); if(myChart){ if(!opts){ opts = {pixelRatio: 1}; } return myChart.getDataURL(opts); } }, quickajax:function(url,data,callback){ $.cuajax({ url:url, method:"post", timeout:WDK_Timeout, data:data, success:function(result) { var jparam = $.str2json(result); callback(jparam); }, error:function(result){ } }); }, pie:function(jparam){ var _id = jparam.id?jparam.id:''; var _data = jparam.data?jparam.data:undefined; var _idField = jparam.idField?jparam.idField:'value'; var _textField = jparam.textField?jparam.textField:'name'; //{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比) var _formatter = jparam.formatter?jparam.formatter:'{a} <br/>{b} : {c} ({d}%)'; var _url = jparam.url?jparam.url:WDK_URL; var _sclae = jparam.sclae?jparam.sclae:2; var _queryParams = jparam.queryParams?jparam.queryParams:{}; var _beforeRender = jparam.beforeRender?jparam.beforeRender:undefined; var _top = jparam.top?jparam.top:'50%'; var _labelformatter = jparam.labelFormatter?jparam.labelFormatter:'{b}\n {d}%'; if(_data){ pieRender(getPieData(_data)); }else{ if(_url){ $.quickajax(_url,_queryParams,function(jparam){ pieRender(getPieData(jparam)); }); } } /** * [getPieData 加工饼图需要的数据] * @param {[type]} srcData [原始数据] * @return {[type]} [加工后的饼图数据] */ function getPieData(_srcData){ var srcData = _srcData; if(_beforeRender){ srcData = _beforeRender.call(jparam,_srcData); } var newData = []; for(var i=0;i<srcData.length;i++){ var row = {}; row.name= srcData[i][_textField]; var n = Number(srcData[i][_idField]); if (!isNaN(n)){ row.value=n.toFixed(_sclae); }else{ row.value=srcData[i][_idField]; } newData.push(row); } return newData; } function getNames(initdata){ var namelist = []; for(var i=0;i<initdata.length;i++){ namelist.push(initdata[i].name); } return namelist; } function pieRender(initdata){ var chart = $.getEchartObj(_id); var titleParam = {}; var _title = jparam.title?jparam.title:''; titleParam.text = _title; if(jparam.align){ titleParam.x = jparam.align; } if(jparam.valign){ titleParam.y = jparam.valign; } titleParam.textStyle = { fontSize:16 ,fontWeight:'normal' }; if(chart == undefined){ chart = echarts.init(document.getElementById(_id)); var v_top = '50%'; if(jparam.hidelegend == '1' && !_top){ v_top = '65%'; }else{ v_top = _top; } var v_radius = jparam.radius?jparam.radius:'50%'; var opts = { title : titleParam, color:eap_chart_cfg.color, backgroundColor:eap_chart_cfg.bgColor, tooltip : { trigger: 'item', formatter: _formatter }, calculable:true, series : [ { name: _title, type: 'pie', radius : [0, v_radius], center: ['50%', v_top], data:initdata, label:{ normal:{ formatter: _labelformatter } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal:{ labelLine:{ show:true, length:10 } } } } ] }; if(!(jparam.hidelegend == '1')){ opts.legend = { orient: 'horizontal',//vertical left: 'center', top: 'bottom', data: initdata.map(function (d) { return d['name']; }) } } if(!(jparam.hidetoolbox == '1')){ opts.toolbox = { show : true /* ,feature : { dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} }*/ }; } chart.setOption(opts); }else{ var option = chart.getOption(); if(titleParam && titleParam.text){ option.title = titleParam; } option.series[0].data = initdata; chart.setOption(option); } } }, line:function(jparam){ $.lineBar(jparam,'line'); }, bar:function(jparam){ $.lineBar(jparam,'bar'); }, cfg:{bar:{ type:'bar' },line:{ type:'line' } }, //折线图(柱状图) lineBar:function(jparam,typestr){ var _id = jparam.id?jparam.id:''; var _data = jparam.data?jparam.data:undefined; var _extgrid = jparam.extgrid?(!!jparam.extgrid):false;//默认不继承grid,那么只请求一次,否则2次 var _title = jparam.title?jparam.title:''; var _url = jparam.url?jparam.url:WDK_URL; var _queryParams = jparam.queryParams?jparam.queryParams:{}; var _padding = jparam.padding?jparam.padding:'3%'; var _dimkey = jparam.dimkey?jparam.dimkey:'title'; var _rebuild = jparam.rebuild==undefined?false:new Boolean(jparam.rebuild); var _showValue = jparam.showValue==undefined?true:!!jparam.showValue; var _rotate = jparam.rotate?parseInt(jparam.rotate):0; var _sclae = jparam.sclae?jparam.sclae:2; var _beforeRender = jparam.beforeRender?jparam.beforeRender:undefined; var _tbname = jparam.tbname?jparam.tbname:""; //读取表的名称,如果不为空,则自动加载该表的所有列和所有数据 var _orderbyfield = jparam.orderbyfield?jparam.orderbyfield:''; //与tbname配合使用,用于分页排序 var _showavg = jparam.showAvg==false?false:true; var _textStyle = jparam.textStyle?jparam.textStyle:undefined; var _yAxisMinFunc = jparam.yAxisMinFunc; if(_tbname){ _url = 'wdk?action=wdk.pub&method=grid_dyna_data&tbname='+_tbname+'&orderbyfield='+_orderbyfield+'&ajaxparam='+new Date().getTime(); } //如果已经有数据了,那么就直接展现,不从服务端请求了 if(_data){ lineBarRender(_data); }else{ if(_url){ if(_extgrid){ var _gridcode = jparam.gridcode?jparam.gridcode:''; //grid编码,在数据库中关联表头和格式 var _data = {tbname:_tbname,orderbyfield:_orderbyfield,gridcode:_gridcode,_RSFIELD:"gridfield"}; _data=$.extend({},_queryParams,_data,{_RSTYPE:""}); $.cuajax({ url:'wdk?action=wdk.pub&method=grid_init&ajaxparam='+new Date().getTime(), //url:'wdk?action=pf.report&method=demo_header&ajaxparam='+new Date().getTime(), method:"post", timeout:WDK_Timeout, data:_data, success:function(result) { var jheader = eval('('+result+')'); if('-1'==jheader.code){ }else if('0'==jheader.code){ $.getRoot().$.messager.alert('信息提示',jheader.desc,'warning'); }else{ try{ var headers = _initHeader(jheader); $.quickajax(_url,_queryParams,function(jparam){ if(jparam && jparam.rows){ jparam = jparam.rows; } var complexData = {header:headers,data:jparam}; lineBarRender(complexData); }); }catch(e){ $.getRoot().$.messager.alert('信息提示','报表定义加载错误:'+e.message,'error'); } } }, error:function(result){ $.getRoot().$.messager.alert('信息提示','网络错误:'+result,'error'); } }); }else{ //直接从远程获取 $.quickajax(_url,_queryParams,function(jparam){ lineBarRender(jparam); }); } } } //初始化头部数据 function _initHeader(jheader){ var headers = []; if(jheader && jheader.fields){ for(var i=0;i<jheader.fields.length;i++){ var field = {id:jheader.fields[i].fieldcode,text:jheader.fields[i].fieldname}; headers.push(field); } } return headers; } //渲染折线柱状图 function lineBarRender(_initdata){ var titleParam = {}; titleParam.text = _title; if(jparam.align){ titleParam.x = jparam.align; } if(jparam.valign){ titleParam.y = jparam.valign; } titleParam.textStyle = { fontSize:16 ,fontWeight:'normal' }; var initdata = _initdata; if(_beforeRender){ initdata = _beforeRender.call(jparam,_initdata); } var xAxisData = []; var newHeader = []; for(var i=0;i<initdata.header.length;i++){ var d = initdata.header[i]; if(d.id != _dimkey){ xAxisData.push(d['text']); newHeader.push(d); } } var legendData = []; var seriesData = []; if(initdata && initdata.data && initdata.data.length>0){ for(var i=0;i<initdata.data.length;i++){ legendData.push(initdata.data[i][_dimkey]); } for(var i=0;i<initdata.data.length;i++){ var d = initdata.data[i]; var _data = []; for(var m=0;m<newHeader.length;m++){ var d2 = newHeader[m]; var name = d2['id']; var value = d[name]; if(value == undefined){ value = ''; } var n = Number(value); if (!isNaN(n)){ _data.push(n.toFixed(_sclae)); }else{ _data.push(value); } } var jo = { name:d[_dimkey], type:$.cfg[typestr].type, data:_data }; if($.cfg[typestr].type == 'line'){ jo.itemStyle = { normal: {label : {show: _showValue}}}; if(_textStyle){ jo.itemStyle.normal.label.textStyle = _textStyle; } //stack: '总量',//不要堆叠 }else if($.cfg[typestr].type == 'bar'){ jo.label = { normal:{ show:true, position:'top', formatter: '{c}'//{a}、{b}、{c},分别表示系列名,数据名,数据值。 } }; jo.itemStyle = { normal: {label : {show: true}}}; if(_textStyle){ jo.itemStyle.normal.label.textStyle = _textStyle; } /* markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] },*/ if(_showavg == true){ jo.markLine = { data : [ {type : 'average', name: '平均值'} ] } } } seriesData.push(jo); } } var chart = $.getEchartObj(_id); if(chart == undefined || _rebuild==true){ chart = echarts.init(document.getElementById(_id)); var opts = { title: titleParam, color:eap_chart_cfg.color, backgroundColor:eap_chart_cfg.bgColor, tooltip: { trigger: 'axis' }, calculable : true, xAxis: { splitLine:{show: false},//去除网格线 type: 'category', //boundaryGap: false, data: xAxisData }, yAxis: { type: 'value' }, series: seriesData }; if(_yAxisMinFunc){ opts.yAxis.min = _yAxisMinFunc } //if($.cfg[typestr].type == 'line'){ opts.grid = { left: _padding, right: _padding, bottom: '5%', containLabel: true }; //} if(_rotate > 0){ opts.xAxis.axisLabel = { interval:0, rotate:_rotate//文本旋转 } } if(!(jparam.hidelegend == '1')){ opts.legend = { orient: 'horizontal',//vertical left: 'center', top: 'bottom', data:legendData }; if(jparam.legend_left){ opts.legend.left = jparam.legend_left; } if(jparam.legend_top){ opts.legend.top = jparam.legend_top; } } if(!(jparam.hidetoolbox == '1')){ opts.toolbox = { show : true, feature : { /*dataView : {show: true, readOnly: false},*/ magicType : {show: true, type: ['line', 'bar']}, restore : {show: true} /*,saveAsImage : {show: true}*/ } }; } chart.setOption(opts); }else{ var option = chart.getOption(); if(titleParam && titleParam.text){ option.title = titleParam; } if(!(jparam.hidelegend == '1')){ option.legend.data = legendData; } option.series = seriesData; chart.setOption(option); } } } });