qdhezheng-license-web/public/v1/report/adapter/echartsAdapter.js

/**
 * 图表adpter，将后台的图表数据转换成echarts可以使用的数据
 */
define(function(require, exports, module) {

	var echarts = require('vendor/echarts/echarts.min');
	var self = null;

	function EchartsAdpter(args) {
		this.args = args;
		self = this;
		// if (this.args.dataManager.nowRows.length == 0) {
		// 	return;
		// }

		self.chartOptions = [];
		initChartsOptions(args.chartFormat.rows)
	}



	/**
	 * 将后台设置的报表图表样式转换成可以有echart识别的option样式
	 * @param  {array} rows 报表图表样式
	 */
	function initChartsOptions(rows) {
		for (var i = 0; i < rows.length; i++) {
			self.initChart(rows[i]);
		}
		if (self.args.cb && typeof self.args.cb == 'function') {
			self.args.cb(self.chartOptions);
		}
	}

	/**
	 * 制作echart需要的几个关键数据
	 * @param  {[type]} formatData [description]
	 * @return {[type]}            [description]
	 */
	EchartsAdpter.prototype.makeChartData = function(formatData) {
		var rows = this.args.rows; //当前页面的数据
		var cols = this.args.dataManager.rptResultCols;
		var groups = _.groupBy(rows, formatData.axisxfield.toLowerCase());
		var keys = Object.keys(groups);
		var yfields = formatData.axisyfield.split(','); //Y轴对象fieldName
		var yfieldsArray = [];
		//循环后获取所有要展示的Y轴数据
		var tempIndex = -1;
		for (var n = 0; n < yfields.length; n++) {
			var _yfield = yfields[n];
			if (_yfield.indexOf('|') > -1) {
				tempIndex = n;
				var _yfArray = _yfield.split('|');
				if (_yfArray[0] && _yfArray[0] != '') {
					yfieldsArray.push({
						name: _yfArray[0],
						special: false
					});
				}
				if (_yfArray[1] && _yfArray[1] != '') {
					yfieldsArray.push({
						name: _yfArray[1],
						special: true
					});
				}
			} else {
				if (tempIndex >= 0) {
					yfieldsArray.push({
						name: _yfield,
						special: true
					});
				} else {
					yfieldsArray.push({
						name: _yfield,
						special: false
					})
				}
			}
			
		}
		var xAxisData = []; //X轴DATA
		var series = {}; //series对象data
		var legendData = []; //图例组件data
		var ycols = []; //要展示的Y轴对象的列数据

		for (var l = 0; l < yfieldsArray.length; l++) {
			var _col = _.where(cols, {'fieldName': yfieldsArray[l].name.toLowerCase()})[0];
			ycols.push(_col);
			legendData.push(_col.dispName);
		}
		//先获取X分组信息
		for (var i = 0; i < keys.length; i++) {
			var key = keys[i];
			xAxisData.push(groups[key][0][formatData.axisxfield]);
			//从Y轴获取多列数据
			for (var j = 0; j < yfieldsArray.length; j++) {
				var _yfield = yfieldsArray[j].name.toLowerCase();
				if (!series[_yfield]) {
					series[_yfield] = {};
					series[_yfield].datas = [];
				}
				var _tempData = 0;
				for (var k = 0; k < groups[key].length; k++) {
					//每一组的每一个Y累计
					if(!isNaN(parseFloat(groups[key][k][_yfield]))) {
						_tempData = _tempData.add(parseFloat(groups[key][k][_yfield]));
					}
				}
				series[yfieldsArray[j].name].datas.push(_tempData);
			}
		}
		return {
			xAxisData: xAxisData,
			legendData: legendData,
			yfieldsArray: yfieldsArray,
			ycols: ycols,
			series: series,
			formatData: formatData
		}
	}

	/**
	 * 初始化chart所需的option
	 * @param  {object} data 上面转化的formatdata
	 */
	EchartsAdpter.prototype.initChart = function(data) {
		var type = data.charttype;
		var options = null;
		var chartName = data.chartname;
		var chartRemark = data.chartremark;
		var serialno = data.serialno;

		switch (type) {
			case '1': //柱状图
				self.barChartData = self.makeChartData(data);
				options = makeBarChartOption();
				self.chartOptions.push({
					type: 'barchart',
					option: options,
					serialno: serialno,
					name: chartName,
					remark: chartRemark
				})
				// makeBarChartOnPage(options);
				break;
			case '2': //折线图
				self.lineChartData = self.makeChartData(data);
				var lineoption = {
					line: true
				};
				options = makeLineChartOption(lineoption);
				self.chartOptions.push({
					type: 'linechart',
					option: options,
					serialno: serialno,
					name: chartName,
					remark: chartRemark
				})
				// makeLineChartOnPage(options);
				break;
			case '3': //面积图
				self.lineChartData = self.makeChartData(data);
				var lineoption = {
					line: false,
					remark: chartRemark
				};
				options = makeLineChartOption(lineoption);
				self.chartOptions.push({
					type: 'areachart',
					option: options,
					serialno: serialno,
					name: chartName,
					remark: chartRemark
				})
				// makeLineChartOnPage(options);
				break;
			case '4': //饼图
				self.pieChartData = self.makeChartData(data);
				options = makePieChartOption();
				self.chartOptions.push({
					type: 'piechart',
					option: options,
					serialno: serialno,
					name: chartName,
					remark: chartRemark
				})
				// makePieChartOnPage(options);
				break;
			case '5': //折柱混搭
				self.barChartData = self.makeChartData(data);
				options = makeBarChartOption();
				self.chartOptions.push({
					type: 'barlinechart',
					option: options,
					serialno: serialno,
					name: chartName,
					remark: chartRemark
				})
				// makeBarChartOnPage(options);
				break;
			default:
				break;
		}
	};

	/**
	 * 绘制柱状图
	 * @param  {[type]} options [description]
	 * @return {[type]}         [description]
	 */
	function makeBarChartOnPage(options) {
		var barchart = echarts.init($('.echart-show')[0]);
		barchart.setOption(options);
	}

	function makeLineChartOnPage(options) {
		var linechart = echarts.init($('.echart-show')[0]);
		linechart.setOption(options);
	}

	function makePieChartOnPage(options) {
		var piechart = echarts.init($('.echart-show')[0]);
		piechart.setOption(options);
	}

	/**
	 * 制作饼图option对象
	 * @param  {[type]} option [description]
	 * @return {[type]}        [description]
	 */
	function makePieChartOption(option) {
		var data = [];
		var yfield = self.pieChartData.yfieldsArray[0].name;
		for (var i = 0; i < self.pieChartData.xAxisData.length; i++ ) {
			data.push({
				value: self.pieChartData.series[yfield].datas[i],
				name: self.pieChartData.xAxisData[i]
			});
		}
		var col = _.where(self.pieChartData.ycols, {'fieldName': yfield})[0];
		var options = {
			title : {
		        text: col.dispName, //self.args.dataManager.uiObjName,
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    toolbox: {
		        // feature: {
		        //     dataView: {
		        //         show: true,
		        //         readOnly: false
		        //     },
		        //     restore: {
		        //         show: true
		        //     },
		        //     saveAsImage: {
		        //         show: true
		        //     },
		        //     dataZoom: {
	         //            yAxisIndex: 'none'
	         //        }
		        // }
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: self.pieChartData.xAxisData
		    },
		    series : [
		        {
		            name: self.args.dataManager.uiObjName,
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data: data,
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
		return options;
	}

	/**
	 * 制作折线图/面积图option对象
	 * @param  {[type]} option [description]
	 * @return {[type]}        [description]
	 */
	function makeLineChartOption(option) {
		var options = {
			"title": {
		        "text": self.args.dataManager.uiObjName
		    },
		    "tooltip": {
		        "trigger": "axis"
		    },
		    "legend": {
		        "data": self.lineChartData.legendData
		    },
		    "toolbox": {
		        // "feature": {
		        //     "dataView": {
		        //         "show": true,
		        //         "readOnly": false
		        //     },
		        //     "restore": {
		        //         "show": true
		        //     },
		        //     "saveAsImage": {
		        //         "show": true
		        //     },
		        //     "dataZoom": {
	         //            "yAxisIndex": "none"
	         //        }
		        // }
		    },
		    "dataZoom": [{
	            "startValue": ''
	        }, {
	            "type": "inside"
	        }],
		    "grid": {
		        "left": "3%",
		        "right": "4%",
		        "bottom": "3%",
		        "containLabel": true
		    },
		    "yAxis": [
		        {
		            "type": "value"
		        }
		    ],
		};
		var xaxisOptions = {
			type: 'category',
			axisLabel: {
				show: self.lineChartData.formatData.isshowtitle == '1' ? true : false
			},
			// name: self.lineChartData.formatData.axisxfield,
			// nameLocation: 'start',//end
			// nameTextStyle: {   //textStyle
			// 	color: '#48b',
			// 	width: 2,
			// 	type: 'solid',
			// 	fontFamily: 'Arial',
			// 	fontSize: 12,
			// 	fontStyle: 'normal',
			// 	fontWeight: 'bold'
			// },
			boundaryGap: false,
            data: self.lineChartData.xAxisData
		};
		var _xaxis = makeXYAxis(xaxisOptions);
		_xaxis.min = null;
		_xaxis.max = null;
		var xaxis = [_xaxis];
		var series = [];
		for (var i = 0; i < self.lineChartData.yfieldsArray.length; i++) {
			var fieldName = self.lineChartData.yfieldsArray[i].name;
			var col = _.where(self.lineChartData.ycols, {'fieldName': fieldName})[0];
			var data = self.lineChartData.series[fieldName].datas;
			var seriesOption = {
				name: col.dispName,
            	type: "line",
            	areaStyle: null,
            	data: data,
            	label: {
	                normal: {
	                    show: self.lineChartData.formatData.isshowvalue == '1' ? true : false,
	                    position: 'top'
	                }
	            }
			};
			if (!option.line) {
				seriesOption.areaStyle = {
	                normal: {}
	            };
			}
			series.push(seriesOption);
		}
		options.xAxis = xaxis;
		options.series = series;
		return options;
	}


	/**
	 * 制作柱状图需要的option对象数据
	 * @return {[type]} [description]
	 */
	function makeBarChartOption() {
		var colors = ['#5793f3', '#d14a61', '#675bba'];
		var options = {
			"title": {
		        "text": self.args.dataManager.uiObjName
		    },
			"tooltip": {
		        "trigger": "axis"
		    },
		    "grid": {
		        "right": "20%"
		    },
		    "toolbox": {
		        // "feature": {
		        //     "dataView": {
		        //         "show": true,
		        //         "readOnly": false
		        //     },
		        //     "restore": {
		        //         "show": true
		        //     },
		        //     "saveAsImage": {
		        //         "show": true
		        //     },
		        //     "dataZoom": {
	         //            "yAxisIndex": "none"
	         //        }
		        // }
		    },
		    "dataZoom": [{
	            "startValue": ''
	        }, {
	            "type": "inside"
	        }],
		    "legend": {
		        "data": self.barChartData.legendData
		    }
		};
		var xaxisOptions = {
			type: 'category',
			axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
				show: self.barChartData.formatData.isshowtitle == '1' ? true : false
			},
			//name: self.barChartData.formatData.axisxfield,
            data: self.barChartData.xAxisData
		};
		var _xaxis = makeXYAxis(xaxisOptions);
		_xaxis.min = null;
		_xaxis.max = null;
		var xaxis = [_xaxis];
		var yaxis = [];
		var series = [];

		var lineCount = 0;
		var linePositionStr = 'left';
		
		for (var i = 0; i < self.barChartData.yfieldsArray.length; i++) {
			var fieldName = self.barChartData.yfieldsArray[i].name;
			var special = self.barChartData.yfieldsArray[i].special;
			if (special) {
				++ lineCount;
				if (lineCount > 1) {
					linePositionStr = 'right';
				}
			}
			var col = _.where(self.barChartData.ycols, {'fieldName': fieldName})[0];
			var data = self.barChartData.series[fieldName].datas;
			var min = Math.min.apply(null, data);
			var max = Math.max.apply(null, data)
			var yaxisOptions = {
	            "type": "value",
	            "name": col.dispName,
	            "min": 0,
	            "max": parseFloat(max),
	            "position": i == 0 ? 'left' : 'right',
	            "offset": 80 * i,
	            "axisLine": {
	                "lineStyle": {
	                    "color": colors[i]
	                }
	            },
	            "axisLabel": {
	                "formatter": "{value}"
	            }
			};
			yaxis.push(makeXYAxis(yaxisOptions));

			var seriesOption = {
				name: col.dispName,
            	type: special ? "line" : "bar",
            	yAxisIndex: i,
            	label: {
	                normal: {
	                    show: self.barChartData.formatData.isshowvalue == '1' ? true : false,
	                    //position: 'top'
	                    position:  special ? linePositionStr : "top"
	                }
	            },
            	data: data
			};
			series.push(seriesOption);
		}
		options.xAxis = xaxis;
		options.yAxis = yaxis;
		options.series = series;
		return options;
	}

	/**
	 * 制作tooltip对象数据
	 * @param  {[type]} options [description]
	 * @return {[type]}         [description]
	 */
	function makeTooltip(options) {
		return {
			show: (options.show == true) ? true : false,
			showContent: (options.showContent == true) ? true : false,
			confine: (options.confine == true) ? true : false,
			trigger: options.trigger || 'item',
			triggerOn: options.triggerOn || 'mousemove',
			alwaysShowContent: options.alwaysShowContent || false,
			showDelay: options.showDelay || 0,
			hideDelay: options.hideDelay || 100,
			enterable: options.enterable || false,
			position: options.position || null,
			transitionDuration: options.transitionDuration || 0,
			formatter: options.formatter || '',
			backgroundColor: options.backgroundColor || '',
			borderColor : options.borderColor  || '',
			borderWidth : options.borderWidth  || 0,
			padding : options.padding  || 5,
			textStyle : options.textStyle  || {},
			extraCssText : options.extraCssText  || '',
			axisPointer : options.axisPointer  || {}
		};
	}

	/**
	 * 制作toolbox option数据
	 * @param  {[type]} options [description]
	 * @return {[type]}         [description]
	 */
	function makeToolbox(options) {
		return {
			show: options.show ? true : false,
			showTitle: options.showTitle ? true : false,
			orient: options.orient || 'horizontal',
			itemSize: options.itemSize || 15,
			itemGap: options.itemGap || 10,
			feature: options.feature || {},
			iconStyle: options.iconStyle || {},
			left: options.left || 'auto',
			top: options.top || 'auto',
			right: options.right || 'auto',
			bottom: options.bottom || 'auto',
			width: options.width || 'auto',
			height: options.height || 'auto'
		};
	}

	/**
	 * 制作legend option对象数据
	 * @param  {[type]} options [description]
	 * @return {[type]}         [description]
	 */
	function makeLegend(options) {
		return {
			show: options.show ? true : false,
			zlevel: options.zlevel || 0,
			z: options.z || 2,
			left: options.left || 'auto',
			top: options.top || 'auto',
			right: options.right || 'auto',
			bottom: options.bottom || 'auto',
			width: options.width || 'auto',
			height: options.height || 'auto',
			align: options.align || 'auto',
			orient: options.orient || 'horizontal',
			padding: options.padding || 5,
			itemGap: options.itemGap || 10,
			itemWidth: options.itemWidth || 25,
			itemHeight: options.itemHeight || 14,
			formatter: options.formatter || null,
			selectedMode: options.selectedMode ? true : false,
			inactiveColor: options.inactiveColor || '#ccc',
			selected: options.selected || {},
			textStyle: options.textStyle || {},
			tooltip: options.tooltip || {},
			data: options.data || [],
			backgroundColor: options.backgroundColor || 'transparent' ,
			borderColor: options.borderColor || '#ccc',
			borderWidth: options.borderWidth || 1,
			shadowBlur: options.shadowBlur || 10,
			shadowColor: options.shadowColor || '',
			shadowOffsetX: options.shadowOffsetX || 0,
			shadowOffsetY: options.shadowOffsetY || 0
		};
	}

	/**
	 * 制作X轴 Y轴对象数据
	 * @param  {[type]} options [description]
	 * @return {[type]}         [description]
	 */
	function makeXYAxis(options) {
		return {
			gridIndex: options.gridIndex || 0,
			position: options.position || null,
			offset: options.offset || 0,
			type: options.type || 'value',
			name: options.name || '',
			nameLocation: options.nameLocation || 'end',
			nameTextStyle: options.nameTextStyle || {},
			nameGap: options.nameGap || 15,
			nameRotate: options.nameRotate || null,
			inverse: options.inverse ? true : false,
			min: options.min == undefined ? 'auto' : options.min,
			max: options.max || 'auto',
			scale: options.scale ? true : false,
			minInterval: options.minInterval || 0,
			logBase: options.logBase || 0,
			silent: options.silent ? true : false,
			axisLine: options.axisLine || {},
			axisTick: options.axisTick || {},
			splitLine: options.splitLine || {},
			axisLabel: options.axisLabel || {},
			data: options.data || [],
			zlevel: options.zlevel || 0,
			z: options.z || 0
		};
	}

	return EchartsAdpter;

});