You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

636 lines
17 KiB

4 years ago
/**
* 图表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;
});