var
panelsVueArr = [];
var
responseData;
function
createHtml(respData){
var
indicatorResult = respData.indicatorResult;
var
indicators = [];
for
(
var
j=0;j<indicatorResult.indicatorNames.length;j++){
var
indicator = {};
indicator[
"indicatorName"
]=indicatorResult.indicatorNames[j];
indicator[
"indicatorUnit"
]=indicatorResult.indicatorUnits[j];
indicator[
"rowKeys"
]=indicatorResult.rowKeys;
indicator[
"colKeys"
]=indicatorResult.colKeys;
indicator[
"indicatorData"
]=indicatorResult[indicatorResult.indicatorNames[j]];
indicators.push(indicator);
}
for
(
var
i =0;i<indicators.length;i++){
var
el = $(
"<p></p>"
);
$(
".resultp"
).append(el[0]);
var
vueObj =
new
Vue({
el : el[0],
template : '<p id=
"panels"
><el-collapse><el-collapse-item>'+
'<template slot=
"title"
><span
class
=
"resulticon"
>{{item.indicatorName}}({{item.indicatorUnit}}) <a href=
"#"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
class
=
"el-icon-upload2"
:
class
=
"item.indicatorName"
download=
"somedata.xls"
@click=
"exportExcel"
data-command=
"show"
title=
"保存为表"
></a>'+
'<a href=
"#"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
class
=
"glyphicon glyphicon-repeat"
aria-hidden=
"true"
@click=
"convert"
data-command=
"show"
title=
"图表切换"
></a><a href=
"#"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
class
=
"glyphicon glyphicon-transfer"
aria-hidden=
"true"
@click=
"transpose"
data-command=
"show"
title=
"行列转置"
></a>'+
'</span></template><template><p v-show=
"!tableAndMap"
:id=
"item.indicatorName"
></p></template><template v-
if
=
"tableAndMap"
><el-table :data=
"item.tableData"
max-height=
"300"
stripe border fix fit style=
"width: 100%"
>'+
'<el-table-column v-
for
=
"(column,index) in item.columns"
:prop=
"column"
:fixed=
"index==0"
:label=
"column"
:min-width=
"column.length<8?118:column.length>16?250:column.length*15"
></el-table-column></el-table></template></el-collapse-item></el-collapse></p>',
props : ['item','mapOption'],
data : {
indicator : indicators[i],
rowOrColumn : false,
tableOrMap : true,
tableAndMap : true,
indexid : i,
mapInitOption : {
title : {
text : '',
show : false
},
tooltip : {
trigger : 'item',
formatter: ''
},
legend : {
data : [],
right : 90,
left : 85,
padding : 10
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
magicType : {
show : true,
type : ['line', 'bar']
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
grid : {
y : '',
y2 : '',
containLabel : true
},
calculable : true,
xAxis : [{
type : 'category',
boundaryGap : false,
axisLabel : {
interval : 0
}
}
],
yAxis : [{
type : 'value',
axisLabel : {
formatter : yAxisFormatter
}
}
]
}
},
methods : {
transpose :
function
(ev) {
if
(this.rowOrColumn) {
this.item = this.listToRowObject(this.indicator);
this.mapOption = this.listToRowMap(this.indicator);
this.rowOrColumn = false;
}
else
{
this.item = this.listToColumnObject(this.indicator);
this.mapOption = this.listToColumnMap(this.indicator);
this.rowOrColumn = true;
}
var
indicatorName = this.mapOption.title.text;
var
myChart = echarts.init(document.getElementById([indicatorName]),rmp_theme);
var
grid = computerGrid(this.mapOption);
myChart.resize({
width : grid.chartWidth+
"px"
,
height : grid.chartHeight+
"px"
});
myChart.setOption(this.mapOption);
ev.stopPropagation();
},
listToColumnObject :
function
(ListAndList) {
var
x_y = column.text+
"\\"
+row.text;
var
itemTable ={};
var
columnR = [];
var
tableData=[];
for
(
var
yIndex in ListAndList.indicatorData) {
var
obj = {};
obj[x_y] = ListAndList.colKeys[yIndex];
for
(
var
xIndex in ListAndList.indicatorData[yIndex]) {
obj[ListAndList.rowKeys[xIndex]] =cellsDeal(ListAndList.indicatorData[yIndex][xIndex],ListAndList.indicatorUnit);
}
tableData.push(obj);
}
columnR.push(x_y);
columnR = columnR.concat(ListAndList.rowKeys);
itemTable[
"indicatorName"
]=ListAndList.indicatorName;
itemTable[
"tableData"
] = tableData;
itemTable[
"columns"
]=columnR;
itemTable[
"indicatorUnit"
]=ListAndList.indicatorUnit;
return
itemTable;
},
listToRowObject :
function
(ListAndList) {
var
itemTable ={};
var
indicatorMap = {};
var
indicatorData=[];
var
y_x = row.text+
"\\"
+column.text;
var
columnR = [];
var
tableData = [];
columnR.push(y_x);
columnR = columnR.concat(ListAndList.colKeys);
indicatorData.push(ListAndList.rowKeys);
indicatorData = indicatorData.concat(ListAndList.indicatorData);
for
(
var
k = 0; k < indicatorData[0].length; k++) {
var
aRow = {};
for
(
var
j = 0; j < indicatorData.length; j++) {
if
(j==0){
aRow[columnR[j]] = indicatorData[j][k];
}
else
{
aRow[columnR[j]] = cellsDeal(indicatorData[j][k],ListAndList.indicatorUnit);
}
}
tableData.push(aRow);
}
itemTable[
"indicatorName"
]=ListAndList.indicatorName;
itemTable[
"tableData"
] = tableData;
itemTable[
"columns"
]=columnR;
itemTable[
"indicatorUnit"
]=ListAndList.indicatorUnit;
return
itemTable;
},
listToColumnMap :
function
(ListAndList) {
var
options = [];
var
sigleOption = {};
sigleOption = this.mapInitOption;
var
rowKeys = JSON.parse(JSON.stringify(ListAndList.rowKeys));
rowKeys.pop();
sigleOption.xAxis[0][
"data"
] = rowKeys;
var
indicatorName = ListAndList.indicatorName;
sigleOption[
"title"
][
"text"
] = indicatorName;
var
series = [];
for
(
var
k = 0; k < ListAndList.indicatorData.length - 1; k++) {
var
sigleSerie = {
type : 'line',
barMaxWidth : 40,
barMinHeight : 15
};
sigleSerie[
"name"
] = ListAndList.colKeys[k];
var
rows = JSON.parse(JSON.stringify(ListAndList.indicatorData[k]))
rows.pop();
sigleSerie[
"data"
] = rows;
series.push(sigleSerie);
}
sigleOption[
"series"
] = series;
var
legendData = JSON.parse(JSON.stringify(ListAndList.colKeys));
legendData.pop();
sigleOption.legend.data = legendData;
var
unitHandle=ListAndList.indicatorUnit;
sigleOption.tooltip.formatter=
function
(params,ticket,callback) {
var
myUnit =unitHandle;
var
html = '<span style=
"display:inline-block;margin-right:5px;"
'+
'>行:'+params.seriesName +'</span><br>';
html+='<span style="display:inline-block;margin-right:5px;'+
'">列:'+params.name +'</span><br>';
var
showValue = params.value;
if
(typeof (showValue) ==
"undefined"
) {
showValue =
"NoData"
;
}
else
{
if
(!isNaN(showValue)) {
if
(showValue > 10000) {
showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get('chart.wan')+ myUnit;
}
else
{
if
(unitHandle=='%'){
showValue=parseFloat(showValue)*100;
showValue = showValue.toFixed(1) + myUnit;
}
else
{
showValue = showValue.toFixed(1) + myUnit;
}
}
}
}
html+='<span style="display:inline-block;margin-right:5px;'+
'">值:'+showValue +'</span>';
return
html;
};
return
sigleOption;
},
listToRowMap :
function
(ListAndList) {
var
options = [];
var
sigleOption = {};
sigleOption = this.mapInitOption;
var
colKeys = JSON.parse(JSON.stringify(ListAndList.colKeys));
colKeys.pop();
sigleOption.xAxis[0][
"data"
] = colKeys;
var
indicatorName = ListAndList.indicatorName;
sigleOption[
"title"
][
"text"
] = indicatorName;
var
series = [];
for
(
var
k = 0; k < ListAndList.rowKeys.length - 1; k++) {
var
sigleSerie = {
type : 'line',
barMaxWidth : 40,
barMinHeight : 15
};
var
x = [];
for
(
var
z = 0; z < ListAndList.colKeys.length - 1; z++) {
x.push(ListAndList.indicatorData[z][k]);
}
sigleSerie[
"name"
] = ListAndList.rowKeys[k];
sigleSerie[
"data"
] = x;
series.push(sigleSerie);
}
sigleOption[
"series"
] = series;
var
legendData = JSON.parse(JSON.stringify(ListAndList.rowKeys));
legendData.pop();
sigleOption.legend.data = legendData;
var
unitHandle=ListAndList.indicatorUnit;
sigleOption.tooltip.formatter=
function
(params,ticket,callback) {
var
myUnit =unitHandle;
var
color = params.color;
var
html = '<span style=
"display:inline-block;margin-right:5px;"
'
+ '">行:'+params.seriesName +'</span><br>';
html+='<span style=
"display:inline-block;margin-right:5px;"
'
+ '">列:'+params.name +'</span><br>';
var
showValue = params.value;
if
(typeof (showValue) ==
"undefined"
) {
showValue =
"NoData"
;
}
else
{
if
(!isNaN(showValue)) {
if
(showValue > 10000) {
showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get('chart.wan')+myUnit;
}
else
{
if
(unitHandle=='%'){
showValue=parseFloat(showValue)*100;
showValue = showValue.toFixed(1) + myUnit;
}
else
{
showValue = showValue.toFixed(1) + myUnit;
}
}
}
}
html+='<span style=
"display:inline-block;margin-right:5px;"
'
+ '">值:'+showValue +'</span>';
return
html;
};
return
sigleOption;
},
convert :
function
(ev) {
if
(this.tableAndMap) {
this.tableAndMap = false;
}
else
{
this.tableAndMap = true;
}
var
indicatorName = this.mapOption.title.text;
var
myChart = echarts.init(document.getElementById([indicatorName]),rmp_theme);
var
grid = computerGrid(this.mapOption);
myChart.resize({
width : grid.chartWidth+
"px"
,
height : grid.chartHeight+
"px"
});
myChart.setOption(this.mapOption);
ev.stopPropagation();
},
exportExcel :
function
(ev) {
var
listAndList = JSON.parse(JSON.stringify(this.indicator));
var
rowTd = listAndList.rowKeys;
var
excellData = [];
rowTd.splice(0, 0, listAndList.indicatorName+'('+listAndList.indicatorUnit+')');
excellData.push(rowTd);
for
(
var
i = 0; i < listAndList.indicatorData.length; i++) {
for
(
var
j=0;j<listAndList.indicatorData[i].length;j++){
listAndList.indicatorData[i][j]=cellsDeal(listAndList.indicatorData[i][j],listAndList.indicatorUnit);
}
var
rowTr = listAndList.indicatorData[i];
rowTr.splice(0, 0, listAndList.colKeys[i]);
excellData.push(rowTr);
}
ExcellentExport.excelByData($(
"."
+ listAndList.indicatorName)[0], excellData, 'Sheet', 'download' +
new
Date
().getTime() + '.xls');
return
ev.stopPropagation();
}
},
watch : {
indicator :
function
(newValue) {
}
},
mounted :
function
() {
},
beforeMount :
function
(){
this.item= this.listToRowObject(this.indicator);
this.mapOption = this.listToRowMap(this.indicator);
}
})
panelsVueArr.push(vueObj);
}
}
var
yAxisFormatter =
function
(value, index) {
var
text = value;
if
(!isNaN(value)) {
if
(value > 10000) {
text = toThousands((value / 10000).toFixed(1)) + $.i18n.get('chart.wan');
}
}
if
(value.formatter) {
text = value.formatter.replace(
"{value}"
, text);
}
return
text;
}
var
tooltipFormatter =
function
(params,ticket,callback) {
console.log(params);
var
color = params.color;
var
html = '<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
+ color + '">行:'+params.seriesName +'</span>';
html+='<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
+ color + '">列:'+params.name +'</span>';
var
showValue = params.value;
if
(typeof (showValue) ==
"undefined"
) {
showValue =
"NoData"
;
}
else
{
if
(!isNaN(showValue)) {
if
(showValue > 10000||showValue<-10000) {
showValue = toThousands((showValue / 10000).toFixed(1)) + $.i18n.get('chart.wan');
}
else
{
showValue=parseFloat(showValue)*100;
showValue = showValue.toFixed(1) + unitHandle();
}
}
}
html+='<span style="display:inline-block;margin-right:5px;' + 'border-radius:10px;width:9px;height:9px;background-color:'
+ color + '">值:'+showValue +'</span>';
console.log(html);
return
html;
}
function
toThousands(num) {
if
(typeof (num) == 'undefined') {
num =
""
}
num = num + '', result = '';
if
(num.indexOf('%') > -1) {
return
num;
}
var
s =
""
;
if
(num.indexOf('.') > -1) {
s = num.substring(num.indexOf('.'), num.length);
num = num.substring(0, num.indexOf('.'));
}
var
n = false;
if
(num.indexOf('-') > -1) {
num = num.substring(1);
n = true;
}
while
(num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if
(num != undefined) {
result = num + result;
}
if
(n) {
result =
"-"
+ result;
}
if
(s=='.0'){
return
result;
}
return
result + s;
}
function
cellsDeal(num,unit) {
if
(typeof (num) == 'undefined') {
num =
""
;
}
if
(num===''){
return
num;
}
num = num + '', result = '';
if
(unit=='%') {
num=parseFloat(num)*100;
num = num.toFixed(1) + '';
if
(num.indexOf(
"."
)!=-1){
return
num.substring(0,num.indexOf(
"."
)+2)+
"%"
;
}
else
{
return
num+
"%"
;
}
}
var
s =
""
;
if
(num.indexOf('.') > -1) {
num=parseFloat(num).toFixed(1);
s = num.substring(num.indexOf('.'), num.length);
num = num.substring(0, num.indexOf('.'));
}
var
n = false;
if
(num.indexOf('-') > -1) {
num = num.substring(1);
n = true;
}
while
(num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if
(num != undefined) {
result = num + result;
}
if
(n) {
result =
"-"
+ result;
}
if
(unit.indexOf(
"/"
)!=-1){
s=s.substring(0,2);
}
else
{
s=
""
;
}
return
result + s;
}
function
computerGrid(options){
var
chartWidth = 810;
var
legendWidth = chartWidth * 0.8;
var
chartHeight = 250;
var
bottomHeight = 25;
var
topHeight = 40;
if
(options.xAxis[0].data.length * 30 - chartWidth > 0) {
chartWidth = options.xAxis[0].data.length * 30;
}
var
maxLength = 0;
var
legendCount = 8;
if
(options.xAxis[0].data.length > legendCount) {
options.xAxis[0].data.forEach(
function
(val) {
if
(maxLength < val.length) {
maxLength = val.length;
if
(/[^\u0000-\u00FF]/.test(val)) {
bottomHeight = maxLength * 14;
}
else
{
bottomHeight = maxLength * 13.5;
}
}
});
}
var
tmpWidth = 0;
options.legend.data.forEach(
function
(val) {
if
(/[^\u0000-\u00FF]/.test(val)) {
tmpWidth += val.length * 22 + 30;
}
else
{
tmpWidth += val.length * 11 + 30;
}
});
var
rowNum = tmpWidth / legendWidth;
if
(rowNum > 1) {
topHeight += (rowNum - 1) * 23;
}
chartHeight += bottomHeight + topHeight;
options.legend['width'] = legendWidth;
options.grid.y2 = bottomHeight;
options.grid.y = topHeight;
if
(chartWidth!='810'){
options.grid[
"x"
]=40;
}
var
columnAndRow = ['startProvince','startArea'];
if
(options.xAxis[0].data[0].match('^(\\d+)\\+(\\d+)')!=null||columnAndRow.indexOf(column.code)!=-1||columnAndRow.indexOf(row.code)!=-1){
options.xAxis[0].axisLabel['rotate']=45;
}
else
{
options.xAxis[0].axisLabel['rotate']=0;
}
return
{chartHeight:chartHeight,chartWidth:chartWidth};
}