lixin/lxapp/app/platform/report/js/pf.chart.js

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); 
            }
		}
	}
});