window.onload = function () { GetDataDLJZ(); } function GetDataDLJZ() { var type = getUrlParam("Type"); if (type == "All") { $.ajax({ url: "../../../Ashx/Firstcommon.ashx", type: "post", data: { Action: "GetAllSumData", tableName: "DTJZ" },//81258c6425be4694af2575731f4e8831 dataType: "json", async: true, success: function (result) { if (result == null) { $("#container").empty(); $("#container").append("
暂无数据
"); $("#dataTable").empty(); $("#dataTable").append("
暂无数据
"); return false; } var html = "时间变化量"; var dataX = []; var dataY = []; $.each(result, function (index, value) { html += "" + (parseInt(value.Year - 1) + "_" + value.Year) + "" + value.Area + "" dataX.push(parseInt(value.Year-1)+"_"+value.Year); dataY.push(value.Area); }); InitChart("建筑用地变化量", dataX, dataY); $("#dataTable").empty(); $("#dataTable").append("" + html + "
"); } }); } else if (type == "choose") { var objParm = localStorage.getItem("openShp"); $.ajax({ url: "../../../Ashx/Firstcommon.ashx", type: "post", data: { Action: "GetAllChooseData", pathName: objParm, tableName: "DTJZ" }, dataType: "json", async: true, success: function (result) { if (JSON.stringify(result) ==null) { $("#container").empty(); $("#container").append("
暂无数据
"); $("#dataTable").empty(); $("#dataTable").append("
暂无数据
"); return false; } var html = ""; var dataX = []; var dataY = []; $.each(result, function (index, value) { html += "" + value.Year + "" + value.Area + "" dataX.push(value.Year); dataY.push(value.Area); }); InitChart("建筑用地面积变化量", dataX, dataY); $("#dataTable").empty(); $("#dataTable").append("" + html + "
"); } }); } 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: '13%', right: '5%', bottom: '12%' }, backgroundColor: '#000000', color: ["#1A88C8"], tooltip: { trigger: 'axis', 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', barMaxWidth: 20, }] };; if (option && typeof option === "object") { myChart.setOption(option, true); } } 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"); }); }