/** * 图表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}
{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; });