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.
464 lines
14 KiB
464 lines
14 KiB
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);
|
|
}
|
|
}
|
|
}
|
|
});
|