sgworld = window.external.createSgworld();
|
window.onload = function () {
|
//获取需要查询的参数
|
|
var parmType = localStorage.getItem("type");
|
var type = getUrlParam("Type");
|
if (type == "All") {
|
//查询当前湖泊走哦有年份的面积
|
$.ajax({
|
url: "../../../Ashx/DataLake.ashx",
|
type: "post",
|
data: { Action: "GetCurrentArea", pathName: decodeURIComponent(getUrlParam("urlName")) },//81258c6425be4694af2575731f4e8831
|
dataType: "json",
|
async: true,
|
success: function (result) {
|
|
if (result == null) {
|
$("#container").empty();
|
$("#container").append("<table><tr><td>暂无数据</td></tr></table>");
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
|
return false;
|
}
|
var TablehtmlFirst = "";
|
var TablehtmlSecond = "";
|
var tableThird = ""
|
var lastLakeArea = 0;
|
var simName = "";
|
var dataX = [];
|
var dataY = [];
|
var count = 0;
|
$.each(result, function (index, value) {
|
count++;
|
simName = value.simName;
|
|
TablehtmlFirst += "<td>" + value.time + "</td>";
|
TablehtmlSecond += "<td>" +parseFloat( Math.round(value.lakeArea)).toFixed(2) + "</td>";
|
if (count == 1) {
|
tableThird += "<td>0</td>";
|
} else {
|
tableThird += "<td>" +parseFloat( Math.round((value.lakeArea - lastLakeArea))).toFixed(2) + "</td>";
|
}
|
|
dataX.push(value.time);
|
dataY.push(parseFloat(value.lakeArea).toFixed(2));
|
lastLakeArea =parseFloat( value.lakeArea).toFixed(2);
|
});
|
InitChart(decodeURIComponent(getUrlParam("urlName")), dataX, dataY);
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>名称/时间</td>" + TablehtmlFirst + "</tr>" + "<tr><td>"+simName+"</td>" + TablehtmlSecond + "</tr><tr><td>变化量</td>" + tableThird + "</tr></table>");
|
}
|
});
|
//单年单选
|
}
|
else if (type == "simYearSimName") {
|
var objParm = localStorage.getItem("openShp");
|
|
$.ajax({
|
url: "../../../Ashx/DataLake.ashx",
|
type: "post",
|
data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
|
dataType: "json",
|
async: true,
|
success: function (result) {
|
if (result == null) {
|
$("#container").empty();
|
$("#container").append("<table><tr><td>暂无数据</td></tr></table>");
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
|
return false;
|
}
|
var firstHtml = "";
|
var secondHtml = "";
|
var dataX = [];
|
var dataY = [];
|
$.each(result, function (index, value) {
|
firstHtml += "<td>" + value.time + "</td>";
|
secondHtml += "<td>" + value.simName + "</td><td>" + parseFloat(value.lakeArea).toFixed(2) + "</td>";
|
dataX.push(value.time);
|
dataY.push(parseFloat( value.lakeArea).toFixed(2));
|
});
|
InitChart("湖泊面积", dataX, dataY);
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>名称/时间</td>" + firstHtml + "</tr>" + "<tr>" + secondHtml + "</tr></table>");
|
}
|
});
|
//单年多选
|
}
|
else if (type == "simYearManyName") {
|
var objParm = localStorage.getItem("openShp");
|
$.ajax({
|
url: "../../../Ashx/DataLake.ashx",
|
type: "post",
|
data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
|
dataType: "json",
|
async: true,
|
success: function (result) {
|
if (result == null) {
|
$("#container").empty();
|
$("#container").append("<table><tr><td>暂无数据</td></tr></table>");
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
|
return false;
|
}
|
var FirstHtml = "";
|
var SecondHtml = "";
|
var dataTime = "";
|
var dataX = [];
|
var dataY = [];
|
$.each(result, function (index, value) {
|
dataTime = value.time;
|
SecondHtml += "<tr><td>" + value.simName + "</td><td>" + parseFloat(value.lakeArea).toFixed(2)+"</td></tr>";
|
dataX.push(value.simName);
|
dataY.push(parseFloat( value.lakeArea).toFixed(2));
|
});
|
simYearManyName("湖泊面积", dataX, dataY);
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>名称/时间</td><td>" +dataTime+ "</td></tr>" +SecondHtml+"</table>");
|
}
|
});
|
//多年单选
|
}
|
else if (type == "manyYearSimName") {
|
var objParm = localStorage.getItem("openShp");
|
|
$.ajax({
|
url: "../../../Ashx/DataLake.ashx",
|
type: "post",
|
data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
|
dataType: "json",
|
async: true,
|
success: function (result) {
|
|
if (result == null) {
|
$("#container").empty();
|
$("#container").append("<table><tr><td>暂无数据</td></tr></table>");
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>暂无数据</td></tr></table>");
|
return false;
|
}
|
var TablehtmlFirst = "";
|
var TablehtmlSecond = "";
|
var tableThird = ""
|
var lastLakeArea = 0;
|
var simName = "";
|
var count = 0;
|
var dataX = [];
|
var dataY = [];
|
|
$.each(result, function (index, value) {
|
count++;
|
TablehtmlFirst += "<td>" + value.time + "</td>";
|
TablehtmlSecond += "<td>" +parseFloat( Math.round(value.lakeArea)).toFixed(2) + "</td>";
|
if (count == 1) {
|
simName = value.simName;
|
tableThird += "<td>0</td>";
|
} else {
|
tableThird += "<td>" +parseFloat( Math.round((value.lakeArea - lastLakeArea))).toFixed(2) + "</td>";
|
}
|
lastLakeArea = parseFloat(value.lakeArea).toFixed(2);
|
dataX.push(value.time);
|
dataY.push(parseFloat( value.lakeArea).toFixed(2));
|
});
|
InitChart("湖泊面积", dataX, dataY);
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>名称/时间</td>" + TablehtmlFirst + "</tr>" + "<tr><td>" + simName + "</td>" + TablehtmlSecond + "</tr><tr><td>变化量</td>" + tableThird + "</tr></table>");
|
}
|
});
|
//多年多选
|
}
|
else if (type == "manyYearManyName") {
|
var objParm = localStorage.getItem("openShp");
|
$.ajax({
|
url: "../../../Ashx/DataLake.ashx",
|
type: "post",
|
data: { Action: "GetManyYearAndManyName", pathName: objParm },//81258c6425be4694af2575731f4e8831
|
dataType: "json",
|
async: true,
|
success: function (result) {
|
|
var simName = "";
|
var dataX = [];
|
var dataY = [];
|
var dataYY = [];
|
var tmy = "";
|
var count=0;
|
$.each(result, function (index, value) {
|
count++;
|
dataX.push(value.time);
|
if (count == result.length) {
|
dataYY.push(parseFloat( value.lakeArea).toFixed(2));
|
for (var i = 0; i < dataYY.length; i++) {
|
if (parseFloat(dataYY[i]) <= 200) {
|
dataYY[i] = dataYY[i] / 2;
|
}
|
if (parseFloat(dataYY[i]) <= 500 & parseFloat(dataYY[i]) > 200) {
|
dataYY[i] = ((dataYY[i] - 200) / 3) + 100;
|
}
|
if (parseFloat(dataYY[i]) <= 1000 & parseFloat(dataYY[i]) > 500) {
|
dataYY[i] = ((dataYY[i] - 500) / 5) + 200;
|
}
|
if (parseFloat(dataYY[i]) <= 2000 & parseFloat(dataYY[i]) > 1000) {
|
dataYY[i] = ((dataYY[i] - 1000) / 10) + 300;
|
}
|
if (parseFloat(dataYY[i]) <= 5000 & parseFloat(dataYY[i]) > 2000) {
|
dataYY[i] = ((dataYY[i] - 2000) / 30) + 400;
|
}
|
};
|
var dy = {
|
name: tmy,
|
type: 'bar',
|
data: dataYY
|
};
|
dataY.push(dy);
|
} else {
|
if (tmy == value.simName) {
|
dataYY.push(parseFloat( value.lakeArea).toFixed(2));
|
} else {
|
//判断数组是否为空
|
if (dataYY.length != 0) {
|
for (var i = 0; i < dataYY.length; i++) {
|
if (parseFloat(dataYY[i]) <= 200) {
|
dataYY[i] = dataYY[i] / 2;
|
}
|
if (parseFloat(dataYY[i]) <= 500 & parseFloat(dataYY[i]) > 200) {
|
dataYY[i] = ((dataYY[i] - 200) / 3) + 100;
|
}
|
if (parseFloat(dataYY[i]) <= 1000 & parseFloat(dataYY[i]) > 500) {
|
dataYY[i] = ((dataYY[i] - 500) / 5) + 200;
|
}
|
if (parseFloat(dataYY[i]) <= 2000 & parseFloat(dataYY[i]) > 1000) {
|
dataYY[i] = ((dataYY[i] - 1000) / 10) + 300;
|
}
|
if (parseFloat(dataYY[i]) <= 5000 & parseFloat(dataYY[i]) > 2000) {
|
dataYY[i] = ((dataYY[i] - 2000) / 30) + 400;
|
}
|
};
|
var dy = {
|
name: tmy,
|
type: 'bar',
|
data:dataYY
|
};
|
dataY.push(dy);
|
}
|
tmy = value.simName;
|
//修改数组的值
|
dataYY = [];
|
dataYY.push(parseFloat( value.lakeArea).toFixed(2));
|
}
|
}
|
|
});
|
manyYearManyName("湖泊面积", dataX, dataY);
|
//给table添加数据
|
var dx = uniq(dataX);
|
var firstHtml = "";
|
var secondHtml = "";
|
for (var i = 0; i < dx.length;i++){
|
firstHtml += "<td>"+dx[i]+"</td>";
|
}
|
|
for (var i = 0; i < dataY.length; i++) {
|
var secondHtml1 = "<tr><td>" + dataY[i].name + "</td>";
|
var secondHtml2 = "<tr><td>变化量</td>";
|
// alert(dataY[i].data);
|
for (j = 0; j < dataY[i].data.length; j++) {
|
|
|
if (parseFloat(dataY[i].data[j]) <= 100) {
|
dataY[i].data[j] = dataY[i].data[j] * 2;
|
}
|
if (parseFloat(dataY[i].data[j]) <= 200 & parseFloat(dataY[i].data[j]) > 100) {
|
dataY[i].data[j] = ((dataY[i].data[j] - 100) * 3) + 200;
|
}
|
if (parseFloat(dataY[i].data[j]) <= 300 & parseFloat(dataY[i].data[j]) > 200) {
|
dataY[i].data[j] = ((dataY[i].data[j] - 200) * 5) + 500;
|
|
}
|
if (parseFloat(dataY[i].data[j]) <= 400 & parseFloat(dataY[i].data[j]) > 300) {
|
dataY[i].data[j] = ((dataY[i].data[j] - 300) * 10) + 1000;
|
}
|
if (parseFloat(dataY[i].data[j]) <= 500 & parseFloat(dataY[i].data[j]) > 400) {
|
dataY[i].data[j] = ((dataY[i].data[j] - 400) * 30) + 2000;
|
}
|
|
|
|
secondHtml1 += "<td>" +Math.round(dataY[i].data[j]) + "</td>";
|
if (j == 0) {
|
secondHtml2 += "<td>0</td>";
|
} else {
|
secondHtml2 += "<td>" + Math.round(dataY[i].data[j] - dataY[i].data[j - 1]) + "</td>";
|
}
|
}
|
secondHtml += secondHtml1 + "</tr>" + secondHtml2+"</tr>";
|
}
|
$("#dataTable").empty();
|
$("#dataTable").append("<table><tr><td>名称/时间</td>"+firstHtml+"</tr>"+secondHtml+"</table>")
|
|
|
}
|
});
|
}
|
|
btnClick();
|
}
|
|
function InitChart(title, dataX, dataY) {
|
var minY = Math.min.apply(null, dataY);
|
var maxY = Math.max.apply(null, dataY);
|
|
var dom = document.getElementById("container");
|
var myChart = echarts.init(dom);
|
var app = {};
|
option = null;
|
option = {
|
//title: {
|
// text: title,
|
// left: 'center',
|
// textStyle: {
|
// color: '#fff'
|
// }
|
|
//},
|
grid: {
|
top: '10%',
|
left: '20%',
|
right: '5%',
|
bottom: '12%'
|
},
|
backgroundColor: '#000000',
|
color: ["#1A88C8"],
|
tooltip: {
|
trigger: 'axis',
|
confine: 'hidden',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: dataX,
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
}
|
}
|
|
},
|
yAxis: {
|
type: 'value',
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
max: Math.round(maxY + 50),
|
min: ((Math.round(minY - 50) < 0) ? 0 : Math.round(minY - 50))
|
},
|
series: [{
|
data: dataY,
|
type: 'bar',
|
barWidth: 20,
|
|
}]
|
};;
|
if (option && typeof option === "object") {
|
myChart.setOption(option, true);
|
}
|
}
|
|
function simYearManyName(title, dataX, dataY) {
|
// 基于准备好的dom，初始化echarts实例
|
var myChart = echarts.init(document.getElementById('container'));
|
//对y轴数据进行处理
|
for (var i = 0; i < dataY.length; i++) {
|
if (parseFloat(dataY[i]) <= 200) {
|
dataY[i] = dataY[i] / 2;
|
}
|
if (parseFloat(dataY[i]) <= 500 & parseFloat(dataY[i]) > 200) {
|
dataY[i] = ((dataY[i] - 200) / 3) + 100;
|
}
|
if (parseFloat(dataY[i]) <= 1000 & parseFloat(dataY[i]) > 500) {
|
dataY[i] = ((dataY[i] - 500) / 5) + 200;
|
}
|
if (parseFloat(dataY[i]) <= 2000 & parseFloat(dataY[i]) > 1000) {
|
dataY[i] = ((dataY[i] - 1000) / 10) + 300;
|
}
|
if (parseFloat(dataY[i]) <= 5000 & parseFloat(dataY[i]) > 2000) {
|
dataY[i] = ((dataY[i] - 2000) / 30) + 400;
|
}
|
}
|
|
// 指定图表的配置项和数据
|
var option = {
|
//title: {
|
// text: title,
|
// left: 'center',
|
// textStyle: {
|
// color: '#fff'
|
// }
|
//},
|
backgroundColor: '#000000',
|
color: ["#1A88C8"],
|
grid: {
|
top: '10%',
|
left: '15%',
|
right: '5%',
|
bottom: '12%'
|
},
|
tooltip: {
|
confine: 'hidden',
|
formatter: function (parm) {
|
var returnStr = "";
|
var vl = "";
|
if (parm.value <= 100) {
|
returnStr = parm.name + ":<br />" + parm.value * 2;
|
}
|
if (parm.value > 100 & parm.value <= 200) {
|
returnStr = parm.name + ":<br />" + ((parm.value - 100) * 3 + 200);
|
}
|
if (parm.value > 200 & parm.value <= 300) {
|
vl = (parm.value - 200) * 5 + 500;
|
returnStr = parm.name + ":<br />" + vl;
|
}
|
if (parm.value > 300 & parm.value <= 400) {
|
vl = (parm.value - 300) * 10 + 1000;
|
returnStr = parm.name + ":<br />" + vl;
|
}
|
if (parm.value > 400 & parm.value <= 500) {
|
returnStr = parm.name + ":<br />" + ((parm.value - 400) * 30 + 2000);
|
}
|
return returnStr;
|
}
|
},
|
xAxis: {
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
}
|
},
|
data: dataX
|
},
|
yAxis: {
|
min: 0,
|
max: 500,
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
formatter: function (value) {
|
var texts = [];
|
if (value == 0) {
|
texts.push('0');
|
}
|
else if (value <= 100) {
|
texts.push('200');
|
}
|
else if (value <= 200) {
|
texts.push('500');
|
}
|
else if (value <= 300) {
|
texts.push('1000');
|
}
|
else if (value <= 400) {
|
texts.push('2000');
|
}
|
else if (value <= 500) {
|
texts.push('5000');
|
}
|
return texts;
|
}
|
}
|
},
|
series: [
|
{
|
type: 'bar',
|
barMaxWidth:20,
|
data: dataY
|
}
|
]
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.setOption(option);
|
|
}
|
|
function manyYearManyName(title, dataX, dataY) {
|
dataX= uniq(dataX);
|
var dom = document.getElementById("container");
|
var myChart = echarts.init(dom);
|
var newData = [];
|
for (var i = 0; i < dataY.length; i++) {
|
var lineItem = new serLineItem();
|
lineItem.name = dataY[i].name;
|
lineItem.type = dataY[i].type;
|
lineItem.data = dataY[i].data;
|
newData.push(lineItem);
|
}
|
|
|
option = {
|
//title: {
|
// text: title,
|
// left: 'center',
|
// textStyle: {
|
// color: '#fff'
|
// }
|
//},
|
backgroundColor: '#000000',
|
color: ["#1A88C8"],
|
tooltip: {
|
trigger: 'axis',
|
confine: 'hidden',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: function (parm) {
|
var p = parm;
|
var returnStr = parm[0].name+": <br />";
|
var vl = "";
|
for (var i = 0; i<parm.length;i++){
|
if (parm[i].data <= 100) {
|
returnStr += parm[i].seriesName + ":" + parm[i].data * 2 + "<br />";
|
}
|
if (parm[i].data > 100 & parm[i].data <= 200) {
|
returnStr += parm[i].seriesName + ":" + ((parm[i].data - 100) * 3 + 200) + "<br />";
|
}
|
if (parm[i].data > 200 & parm[i].data <= 300) {
|
vl = (parm[i].data - 200) * 5 + 500;
|
returnStr += parm[i].seriesName + ":" + vl + "<br />";;
|
}
|
if (parm[i].data > 300 & parm[i].data <= 400) {
|
vl = (parm[i].data - 300) * 10 + 1000;
|
returnStr += parm[i].seriesName + ":" + vl + "<br />";;
|
}
|
if (parm[i].data > 400 & parm[i].data <= 500) {
|
returnStr += parm[i].seriesName + ":" + ((parm[i].data - 400) * 30 + 2000) + "<br />";;
|
}
|
}
|
|
return returnStr;
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '15%',
|
containLabel: true
|
},
|
xAxis: {
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
}
|
},
|
data: dataX
|
},
|
dataZoom: [
|
{
|
show: true,
|
start: 50,
|
end: 100,
|
backgroundColor: '#1A88C8',
|
textStyle: {
|
color:'#ffffff'
|
},
|
left:'10%',
|
right:'10%'
|
}
|
],
|
yAxis: {
|
min: 0,
|
max: 500,
|
axisLine: {
|
lineStyle: {
|
color: '#FFFFFF',
|
}
|
},
|
splitLine: {
|
show: false
|
},
|
axisLabel: {
|
formatter: function (value) {
|
var texts = [];
|
if (value == 0) {
|
texts.push('0');
|
}
|
else if (value <= 100) {
|
texts.push('200');
|
}
|
else if (value <= 200) {
|
texts.push('500');
|
}
|
else if (value <= 300) {
|
texts.push('1000');
|
}
|
else if (value <= 400) {
|
texts.push('2000');
|
}
|
else if (value <= 500) {
|
texts.push('5000');
|
}
|
return texts;
|
}
|
}
|
},
|
series: newData
|
};
|
;
|
if (option && typeof option === "object") {
|
myChart.setOption(option, true);
|
}
|
}
|
|
var serLineItem = function () {
|
return {
|
name: '',
|
type: '',
|
data: []
|
}
|
}
|
|
//数组去重
|
function uniq(array) {
|
var temp = []; //一个新的临时数组
|
for (var i = 0; i < array.length; i++) {
|
if (temp.indexOf(array[i]) == -1) {
|
temp.push(array[i]);
|
}
|
}
|
return temp;
|
}
|
|
|
|
function btnClick() {
|
$(".chartBtn").click(function () {
|
$("#container").css("display", "block");
|
$("#dataTable").css("display", "none");
|
$(".dataBtn").css("background-color", "#000000");
|
$(".chartBtn").css("background-color", "#033D73");
|
});
|
|
$(".dataBtn").click(function () {
|
$("#container").css("display", "none");
|
$("#dataTable").css("display", "block");
|
$(".dataBtn").css("background-color", "#033D73");
|
$(".chartBtn").css("background-color", "#000000");
|
});
|
}
|
