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