var loadGeoJson = {}; var element; var table; var slider; var dom = document.getElementById("container"); var myChart = echarts.init(dom); var option; var myCharts = {}; var myTables = {}; myChart.showLoading(); var msurl = 'json/市级_山西.json'; var qxurl = './json/县级_山西.json'; var namefield = "name"; var valuefield = "Shape_Area"; var codefield = "CODE"; var statisticsInfoByXZQ; var xzqSlider; var resertEchartsParams = {}; var objList = [] var levelName = ['优等地', '高等地', '中等地', '低等地'] var levelColor = ['rgb(77,179,0)', 'rgb(187,230,0)', 'rgb(237,213,0)', 'rgb(199,139,0)'] var XZQDMName = null var mapYears = null var mapYearsType = true var qixianName = null var curYear = null var mapYearsType1 = true var analysisList = [] var targetType = false var analysisListShi = null var analysisListXdata = null var analysisListXian = null var analysisListQdata = null var analysisListQian = null var analysisListQX = [] // 存储县级数据 var analysisListType = false // 点击县级的状态 //var configInfo = InitialParameter("/Config.json"); //globleUrl = configInfo["modelOrigin"].type + "://" + configInfo["modelOrigin"].value; let currentText = "" // 点击的文字 let currentYear = '' // 当前年份 let currentXzqdm = '' // 当前行政区代码 let yearData = [] // 全部的年份 let btnType = false // 上面行政区域状态 let dataSheng = null // 省数据 let dataShi = null // 市数据 let dataXian = null // 县数据 let btnMeg = 0 // 按钮的状态 $(".loading").css("line-height", $(".loading").height() + "px"); window.onload = function() { setTimeout(function() { layui.use(['form', 'layer', 'element', 'slider', 'table'], function() { element = layui.element; table = layui.table; slider = layui.slider; init(); timeLine() echarLinBar("1", "") echartsBar("1", "") echartslineBar("1", "") }); $(".xzqBtn").click(function(e) { onTabClick(e); }); }, 5); } // 封装的jquery的get方法 function InitialParameter(url) { var info = null; $.ajax({ async: false, url: url, success: function(result) { info = result; }, error: function(result) { console.log(result); } }); return info; } // 封装的ajax请求 function getGeoJson(url) { $.ajaxSettings.async = false; var geojson = null; $.get(url, function(results) { geojson = results; }); return geojson; } // 行政区划数据 function getXZQData() { return { "2016": { "150102": "231", "150103": "22", "150104": "221", "150105": "76", "150121": "507.378979", "150122": "70.446859", "150123": "233.161043", "150124": "87.138653", "150125": "53.75949", "150202": "34", "150203": "123", "150204": "763", "150205": "69.618587", "150206": "10.997343", "150207": "451", "150221": "121.631", "150222": "232.1993", "150223": "162.607938", "150302": "79.347582", "150303": "216.106506", "150304": "117.66068", "150402": "639.210523", "150402": "281.870306", "150403": "594.864259", "150421": "461.192925", "150422": "77.532357", "150423": "824.63896", "150424": "83.229244", "150425": "1618.996566", "150426": "494.515183", "150428": "300.704366", "150429": "163.34025", "150430": "126.423867", "150502": "88.838653", "150521": "89.102034", "150522": "44.102228", "150523": "325.434118", "150524": "52.526868", "150525": "126.795964", "150526": "61.215115", "150581": "59.073048", "150602": "602.420675", "150621": "395.035128", "150622": "708.06381", "150623": "245.6431", "150624": "216.076227", "150625": "254.09903", "150626": "911.770879", "150627": "1259.538331", "150702": "56.699763", "150721": "97.133563", "150722": "619.195029", "150723": "140.030397", "150724": "440.572726", "150725": "254.190343", "150726": "20.68259", "150727": "5.693056", "150781": "75.468311", "150782": "258.449345", "150783": "60.431917", "150784": "38.730268", "150785": "81.183259", "150802": "194.530089", "150821": "114.78101", "150822": "15.305659", "150823": "167.568182", "150824": "414.540064", "150825": "58.7872", "150826": "133.218149", "150902": "260.0014", "150921": "449.443286", "150922": "329.047357", "150923": "102.146917", "150924": "566.594265", "150925": "145.176893", "150926": "604.3128", "150927": "137.39863", "150928": "110.854242", "150929": "136.343695", "150981": "193.2078", "152201": "615.707698", "152202": "62.160748", "152221": "357.815655", "152222": "23.709504", "152223": "317.128348", "152224": "29.730594", "152501": "7.334255", "152502": "2086.174959", "152522": "26.941754", "152523": "54.367129", "152524": "16.059589", "152525": "310.872563", "152526": "1075.894023", "152527": "85.146797", "152528": "523.83536", "152529": "239.860635", "152530": "49.770978", "152531": "207.098203", "152921": "1001.650127", "152922": "246.344865", "152923": "700.47709" }, "2017": { "150102": "231", "150103": "22", "150104": "221", "150105": "76", "150121": "407.378979", "150122": "70.446859", "150123": "233.161043", "150124": "87.138653", "150125": "53.75949", "150202": "34", "150203": "123", "150204": "763", "150205": "69.618587", "150206": "10.997343", "150207": "451", "150221": "121.631", "150222": "232.1993", "150223": "162.607938", "150302": "79.347582", "150303": "116.106506", "150304": "117.66068", "150402": "639.210523", "150402": "281.870306", "150403": "594.864259", "150421": "461.192925", "150422": "77.532357", "150423": "824.63896", "150424": "83.229244", "150425": "1618.996566", "150426": "494.515183", "150428": "300.704366", "150429": "163.34025", "150430": "126.423867", "150502": "88.838653", "150521": "89.102034", "150522": "44.102228", "150523": "325.434118", "150524": "52.526868", "150525": "126.795964", "150526": "61.215115", "150581": "59.073048", "150602": "602.420675", "150621": "395.035128", "150622": "708.06381", "150623": "245.6431", "150624": "216.076227", "150625": "254.09903", "150626": "911.770879", "150627": "759.538331", "150702": "56.699763", "150721": "97.133563", "150722": "619.195029", "150723": "140.030397", "150724": "440.572726", "150725": "254.190343", "150726": "20.68259", "150727": "5.693056", "150781": "75.468311", "150782": "258.449345", "150783": "60.431917", "150784": "38.730268", "150785": "81.183259", "150802": "194.530089", "150821": "114.78101", "150822": "15.305659", "150823": "167.568182", "150824": "414.540064", "150825": "58.7872", "150826": "133.218149", "150902": "260.0014", "150921": "449.443286", "150922": "329.047357", "150923": "102.146917", "150924": "566.594265", "150925": "145.176893", "150926": "604.3128", "150927": "137.39863", "150928": "110.854242", "150929": "136.343695", "150981": "193.2078", "152201": "615.707698", "152202": "62.160748", "152221": "357.815655", "152222": "23.709504", "152223": "317.128348", "152224": "29.730594", "152501": "7.334255", "152502": "2086.174959", "152522": "26.941754", "152523": "54.367129", "152524": "16.059589", "152525": "310.872563", "152526": "1075.894023", "152527": "85.146797", "152528": "523.83536", "152529": "239.860635", "152530": "49.770978", "152531": "207.098203", "152921": "1001.650127", "152922": "246.344865", "152923": "700.47709" }, "2018": { "150102": "231", "150103": "22", "150104": "221", "150105": "76", "150121": "507.378979", "150122": "70.446859", "150123": "233.161043", "150124": "87.138653", "150125": "53.75949", "150202": "34", "150203": "123", "150204": "763", "150205": "69.618587", "150206": "10.997343", "150207": "451", "150221": "121.631", "150222": "232.1993", "150223": "162.607938", "150302": "79.347582", "150303": "316.106506", "150304": "117.66068", "150402": "639.210523", "150402": "281.870306", "150403": "594.864259", "150421": "461.192925", "150422": "77.532357", "150423": "824.63896", "150424": "83.229244", "150425": "1618.996566", "150426": "494.515183", "150428": "300.704366", "150429": "163.34025", "150430": "126.423867", "150502": "88.838653", "150521": "89.102034", "150522": "44.102228", "150523": "325.434118", "150524": "52.526868", "150525": "126.795964", "150526": "61.215115", "150581": "59.073048", "150602": "602.420675", "150621": "395.035128", "150622": "708.06381", "150623": "245.6431", "150624": "216.076227", "150625": "254.09903", "150626": "911.770879", "150627": "859.538331", "150702": "56.699763", "150721": "97.133563", "150722": "619.195029", "150723": "140.030397", "150724": "440.572726", "150725": "254.190343", "150726": "20.68259", "150727": "5.693056", "150781": "75.468311", "150782": "258.449345", "150783": "60.431917", "150784": "38.730268", "150785": "81.183259", "150802": "194.530089", "150821": "114.78101", "150822": "15.305659", "150823": "167.568182", "150824": "414.540064", "150825": "58.7872", "150826": "133.218149", "150902": "260.0014", "150921": "449.443286", "150922": "329.047357", "150923": "102.146917", "150924": "566.594265", "150925": "145.176893", "150926": "604.3128", "150927": "137.39863", "150928": "110.854242", "150929": "136.343695", "150981": "193.2078", "152201": "615.707698", "152202": "62.160748", "152221": "357.815655", "152222": "23.709504", "152223": "317.128348", "152224": "29.730594", "152501": "7.334255", "152502": "2086.174959", "152522": "26.941754", "152523": "54.367129", "152524": "16.059589", "152525": "310.872563", "152526": "1075.894023", "152527": "85.146797", "152528": "523.83536", "152529": "239.860635", "152530": "49.770978", "152531": "207.098203", "152921": "1001.650127", "152922": "246.344865", "152923": "700.47709" }, "2019": { "150102": "231", "150103": "22", "150104": "221", "150105": "76", "150121": "507.378979", "150122": "70.446859", "150123": "233.161043", "150124": "87.138653", "150125": "53.75949", "150202": "34", "150203": "123", "150204": "763", "150205": "69.618587", "150206": "10.997343", "150207": "451", "150221": "121.631", "150222": "232.1993", "150223": "162.607938", "150302": "79.347582", "150303": "276.106506", "150304": "117.66068", "150402": "679.210523", "150402": "281.870306", "150403": "594.864259", "150421": "461.192925", "150422": "77.532357", "150423": "824.63896", "150424": "83.229244", "150425": "1618.996566", "150426": "494.515183", "150428": "300.704366", "150429": "163.34025", "150430": "126.423867", "150502": "88.838653", "150521": "89.102034", "150522": "44.102228", "150523": "325.434118", "150524": "52.526868", "150525": "126.795964", "150526": "61.215115", "150581": "59.073048", "150602": "602.420675", "150621": "395.035128", "150622": "708.06381", "150623": "245.6431", "150624": "216.076227", "150625": "254.09903", "150626": "911.770879", "150627": "759.538331", "150702": "56.699763", "150721": "97.133563", "150722": "619.195029", "150723": "140.030397", "150724": "440.572726", "150725": "254.190343", "150726": "20.68259", "150727": "5.693056", "150781": "75.468311", "150782": "258.449345", "150783": "60.431917", "150784": "38.730268", "150785": "81.183259", "150802": "194.530089", "150821": "114.78101", "150822": "15.305659", "150823": "167.568182", "150824": "414.540064", "150825": "58.7872", "150826": "133.218149", "150902": "260.0014", "150921": "449.443286", "150922": "329.047357", "150923": "102.146917", "150924": "566.594265", "150925": "145.176893", "150926": "604.3128", "150927": "137.39863", "150928": "110.854242", "150929": "136.343695", "150981": "193.2078", "152201": "615.707698", "152202": "62.160748", "152221": "357.815655", "152222": "23.709504", "152223": "317.128348", "152224": "29.730594", "152501": "7.334255", "152502": "2086.174959", "152522": "26.941754", "152523": "54.367129", "152524": "16.059589", "152525": "310.872563", "152526": "1075.894023", "152527": "85.146797", "152528": "523.83536", "152529": "239.860635", "152530": "49.770978", "152531": "207.098203", "152921": "1001.650127", "152922": "246.344865", "152923": "700.47709" } }; // var resultData; // $.ajax({ // type: globleConfig.ajaxType, // async: false, // url: globleConfig.ajax, // data: { // "mtype": globleConfig.mtype, // "dataBaseSelected": globleConfig.dataBaseSelected, // 所选数据库名称, // "tableTypeSelected": globleConfig.tableTypeSelected, // "tableDataSelected": XZQConfig.tableDataSelected, // "dimensionSelected": JSON.stringify(XZQConfig.dimensionSelected), // "measureSelected": JSON.stringify(XZQConfig.measureSelected), // "aggregate": XZQConfig.aggregate, // "filterdata": XZQConfig.filterdata, // "queryFields": "" // }, // datatype: 'json', // success: function (res) { // var resArr = res.split('||'); // if (resArr.length == 0) { // console.log("数据请求失败!"); // } else if (resArr.length == 3) { // if (resArr[2].split("^_^")[0] && resArr[2].split("^_^")[0] != "{}") { // resultData = JSON.parse(resArr[2].split("^_^")[0]); // } // } else { // if (resArr[0]) { // resultData = JSON.parse(resArr[0]); // } // } // }, // error: function (err) { // console.log(err); // } // }); // return resultData; } // 获取专项统计模块获取登陆信息和点击地图 function init() { // var list = {}; // for (var attr in TDYTDM.classify) { // var item = TDYTDM.classify[attr]; // for (var i = 0; i < item.length; i++) { // list[item[i]] = attr; // } // } // TDYTDM["handle"] = list; //getGDLBData(); resertEcharts("", "1"); // 点击地图 myChart.on('click', function(params) { if (params.name) { $(".loading").show(); setTimeout(function() { resertEcharts(params.data.code, (parseInt(params.seriesName) + 1).toString(), params.name); echarLinBar((parseInt(params.seriesName) + 1).toString(), params.data.code) echartsBar((parseInt(params.seriesName) + 1).toString(), params.data.code) echartslineBar((parseInt(params.seriesName) + 1).toString(), params.data.code) }, 10); } }); myChart.hideLoading(); } // 画地图图表 function resertEcharts(xzq, type, name, year) { if (!year) { resertEchartsParams = { xzq: xzq, type: type, name: name } } if (!statisticsInfoByXZQ) { statisticsInfoByXZQ = getXZQData(); if (statisticsInfoByXZQ) { var years = []; for (var attr in statisticsInfoByXZQ) { years.push(parseInt(attr)); } years.sort(function(a, b) { return a - b; }); statisticsInfoByXZQ["years"] = years; } // xzqSlider = slider.render({ // elem: '#' + XZQConfig.container, // min: years[0], // max: years[years.length - 1], // theme: '#5470c6', // //type: 'vertical', //垂直滑块 // showstep: true, // change: function(data) { // resertEcharts(null, null, null, data); // } // }); statisticsInfoByXZQ["curYear"] = statisticsInfoByXZQ["years"][0]; yearData = years; } //curYear = year ? year : statisticsInfoByXZQ["curYear"]; //curYear = statisticsInfoByXZQ["curYear"]; if (year) { curYear = year } else { curYear = statisticsInfoByXZQ["curYear"]; } var mapYearsText = null if (mapYearsType) { mapYearsText = mapYears mapYearsType = false } else { if (mapYearsType1) { mapYearsText = curYear } else { mapYearsText = mapYears } } //let yearSpan = currentYear === '' ? yearData[0] : currentYear let yearSpan = curYear $(".yearSpan").html(yearSpan + "年"); statisticsInfoByXZQ["curYear"] = curYear; var list = []; var chartType = ""; switch (resertEchartsParams.type) { case "1": //盟市 btnMeg = 1 var html = "内蒙古自治区"; elementTemplate(html); chartType = "MS"; if (!loadGeoJson[chartType]) { loadGeoJson[chartType] = getGeoJson(msurl); } for (var i = 0; i < loadGeoJson[chartType].features.length; i++) { var info = loadGeoJson[chartType].features[i]["properties"]; var code = info[codefield].substr(0, 4); var value = 0; for (var attr in statisticsInfoByXZQ[curYear]) { if (attr.toString().indexOf(code) == 0) { value += parseFloat(statisticsInfoByXZQ[curYear][attr]); } } list.push({ name: info[namefield], value: value ? Math.round(value * 100) / 100 : 0, code: info[codefield] }); } echarts.registerMap('MS', loadGeoJson[chartType]); break; case "2": //旗县 btnMeg = 2 var html = "内蒙古自治区"; html += "" + resertEchartsParams.name + ""; qixianName = resertEchartsParams.name elementTemplate(html); chartType = resertEchartsParams.xzq.length == 6 ? resertEchartsParams.xzq.substr(0, 4) : resertEchartsParams.xzq; if (!loadGeoJson["QX"]) { loadGeoJson["QX"] = getGeoJson(qxurl); } var list = []; var json = { type: "FeatureCollection", features: [] }; for (var i = 0; i < loadGeoJson["QX"].features.length; i++) { var info = loadGeoJson["QX"].features[i]["properties"]; if (info[codefield].indexOf(chartType) > -1) { list.push({ name: info[namefield], value: statisticsInfoByXZQ[curYear][info[codefield]] ? Math.round(parseFloat(statisticsInfoByXZQ[curYear][info[codefield]]) * 100) / 100 : 0, code: info[codefield] }); json.features.push(loadGeoJson["QX"].features[i]); } } echarts.registerMap(chartType, json); break; case "3": //旗县 btnMeg = 3 var html = $(".layui-breadcrumb").text().split(">")[1]; html = "内蒙古自治区" + html + ""; html += "" + resertEchartsParams.name + ""; elementTemplate(html); chartType = resertEchartsParams.xzq; if (!loadGeoJson["QX"]) { loadGeoJson["QX"] = getGeoJson(qxurl); } var list = []; var json = { type: "FeatureCollection", features: [] }; for (var i = 0; i < loadGeoJson["QX"].features.length; i++) { var info = loadGeoJson["QX"].features[i]["properties"]; if (info[codefield] == chartType) { list.push({ name: info[namefield], value: statisticsInfoByXZQ[curYear][info[codefield]] ? Math.round(parseFloat(statisticsInfoByXZQ[curYear][info[codefield]]) * 100) / 100 : 0, code: info[codefield] }); json.features.push(loadGeoJson["QX"].features[i]); break; } } echarts.registerMap(chartType, json); break; default: return $(".loading").hide(); break; } list.sort(function(a, b) { return a.value - b.value }); analysisList = list option = { title: { // text: '{A| ' + XZQConfig.chartTitle + '}', text: '{A| 内蒙古自治区供应总量统计分析}', x: 'left', //padding: [5, 5, 5, 5], textStyle: { align: 'center', rich: { A: { backgroundColor: { image: XZQConfig.titleImage.image, }, width: XZQConfig.titleImage.width, height: XZQConfig.titleImage.height, color: "#5470c6", fontSize: 17, fontWeight: 'bold', verticalAlign: "middle", lineHeight: 50, left: 15 } } }, left: 15 }, tooltip: { trigger: 'item', show: true, formatter: function(data) { var total = 0; for (var i = 0; i < myChart.getOption().series[0].data.length; i++) { total += myChart.getOption().series[0].data[i].value; } //return data.name + '
' + XZQConfig.title + data.value + XZQConfig.unit; var per = Math.round(data.value / total * 10000) / 100; return data.name; return data.name + '
' + XZQConfig.title + data.value + XZQConfig.unit + '
本级占比:' + per + "%"; } }, toolbox: { show: false, orient: 'vertical', left: 'right', top: 'center', feature: { saveAsImage: {} } }, visualMap: { min: list[0].value, max: list[list.length - 1].value, text: ['高', '低'], realtime: false, calculable: true, inRange: { //color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] //color: globleConfig.color color: ['#0000ff30', '#0000ff'] }, orient: 'vertical', right: '4%', bottom: '0%', z: 100 }, series: [{ name: resertEchartsParams.type, type: 'map', left: '20%', roam: true, mapType: chartType, // 自定义扩展图表类型 label: { show: true, //color: "blue", //fontStyle: 'normal', //fontWeight: 'normal', textBorderColor: "white", textBorderWidth: 1 }, itemStyle: { normal: { borderWidth: 1, borderColor: '#ddd', //区域边框色 //areaColor: '#FFDAB9',//区域背景色 label: { show: true, //textBorderColor: "white", //textBorderWidth: 1, textStyle: { color: '#ffffff', //文字颜色 fontSize: 12 //文字大小 } } }, emphasis: { // 选中样式 borderWidth: 1, borderColor: '#00ffff', color: '#ffffff', label: { show: true, textStyle: { color: '#ff0000' } } } }, data: list }] }; setTimeout(() => { window.onresize = function() { myChart.resize() } }, 200) myChart.clear(); myChart.setOption(option); // if (year) { // var data = filterArray(myTables["myChartTable2"].config.dataStore, [{ // field: "QDRQ", // value: year, // type: "like" // }]); // myTables["myChartTable2"].reload({ // data: data // }, false); // } else { // // createVisualizationCharts(resertEchartsParams.xzq ? chartType : "") // } } // 为行政区域赋值,点击行政区域 function elementTemplate(html) { $(".layui-breadcrumb").html(html); element ? element.render() : null; $(".xzqBtn").click(function(e) { onTabClick(e); }); } // 点击行政区域文字信息 function onTabClick(e) { $(".loading").show(); setTimeout(function() { resertEcharts($(e.target).attr("value"), $(e.target).attr("type"), $(e.target).html()); echarLinBar($(e.target).attr("type"), $(e.target).attr("value")) echartsBar($(e.target).attr("type"), $(e.target).attr("value")) echartslineBar($(e.target).attr("type"), $(e.target).attr("value")) btnType = true }, 50); } // 画地图的图表 function createVisualizationCharts(xzq) { for (var attr in chartsConfig) { var params = chartsConfig[attr]; if (!params.able) { continue; } var queryFields = ""; if (params.queryFields) { for (var k = 0; k < params.queryFields.length; k++) { queryFields += params.queryFields[k].name + ","; } queryFields = queryFields.substring(0, queryFields.length - 1); } var resultData; var where = globleConfig.XZQFIELD + " like '" + xzq + "%'" $.ajax({ type: globleConfig.ajaxType, async: false, url: globleConfig.ajax, data: { "mtype": globleConfig.mtype, "dataBaseSelected": globleConfig.dataBaseSelected, // 所选数据库名称, "tableTypeSelected": globleConfig.tableTypeSelected, "tableDataSelected": params.tableDataSelected, "dimensionSelected": params.dimensionSelected ? JSON.stringify(params.dimensionSelected) : "", "measureSelected": params.measureSelected ? JSON.stringify(params.measureSelected) : "", "aggregate": params.aggregate, "filterdata": xzq ? (params.filterdata ? params.filterdata + " and " + where : where) : params.filterdata, "queryFields": queryFields }, datatype: 'json', success: function(res) { var resArr = res.split('||'); if (resArr.length == 0) { console.log("数据请求失败!"); } else if (resArr.length == 3) { if (resArr[2].split("^_^")[0] && resArr[2].split("^_^")[0] != "{}") { resultData = JSON.parse(resArr[2].split("^_^")[0]); } } else { if (resArr[0]) { resultData = JSON.parse(resArr[0]); } } }, error: function(err) { console.log(err); } }); if (resultData) { createVisualizationChartsHandle(params, resultData); } else { //$("#" + params.container).html(params.noText); alert(params.noText); } } $(".loading").hide(); } //得到随机的颜色值 function randomColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; } // 一维数组转换为二维数组 function arrTrans(num, arr) { const iconsArr = []; arr.forEach((item, index) => { const page = Math.floor(index / num); // 计算该元素为第几个素组内 if (!iconsArr[page]) { // 判断是否存在 iconsArr[page] = []; } iconsArr[page].push(item); }); return iconsArr; } var arableNF = null var arableXZQDM var objIndex = 0 var objIndexXZQ = 0 var objIndexXZQ1 = 0 var oldobjList = xzLineDataList = [] var objIndexNF = 0 var arableType = false var oldArble = null var dlDjData = [] // 排序的一个公用函数 传入排序的属性值 从大到小 function creatCompare(propertyName) { return function(obj1, obj2) { var value1 = obj1[propertyName]; var value2 = obj2[propertyName]; if (value1 < value2) { return -1 } else if (value1 > value2) { return 1 } else { return 0 } } } // 时间轴样式 function timeLine() { let timeLineLeft = -15 // selected let timeLinehtml = '' yearData.map((item, index) => { if (index == 0) { timeLinehtml += `
  • ${item}
  • ` } else { timeLinehtml += `
  • ${item}
  • ` } }) $('.time_line ol').html(timeLinehtml) targetType = true $('.order_item').on('click', function(e) { let timeText = e.target.innerHTML $(this).addClass('selected') $(this).parent().siblings().find('.order_item').removeClass('selected') currentYear = timeText //resertEcharts(null, null, null, parseInt(timeText)); //resertEcharts($(e.target).attr("value"), $(e.target).attr("type"), $(e.target).html(), parseInt(timeText)); resertEcharts("", "1", "", currentYear) // if (currentXzqdm == "150000") { // getGDLBData(null, currentYear) // } else { // getGDLBData(currentXzqdm, currentYear) // } }) } //第二图表 function echarLinBar(type, xzq) { var pewgData = []; //批而未供 var gewyData = []; //供而未用 var chwyData = []; //拆后未用 var yewjData = []; //用而未尽 var xData2 = getLinData(); switch (type) { case "1": //盟市 for (var i = 2016; i <= 2019; i++) { var pewgvalue = 0 var gewyvalue = 0; var chwyvalue = 0; var yewjvalue = 0; for (var attr in xData2["批而未供"][i]) { pewgvalue += parseFloat(xData2["批而未供"][i][attr]); } pewgData.push(Math.floor(pewgvalue * 100) / 100) for (var attr in xData2["供而未用"][i]) { gewyvalue += parseFloat(xData2["供而未用"][i][attr]); } gewyData.push(Math.floor(gewyvalue * 100) / 100) for (var attr in xData2["拆后未用"][i]) { chwyvalue += parseFloat(xData2["拆后未用"][i][attr]); } chwyData.push(Math.floor(chwyvalue * 100) / 100) for (var attr in xData2["用而未尽"][i]) { yewjvalue += parseFloat(xData2["用而未尽"][i][attr]); } yewjData.push(Math.floor(yewjvalue * 100) / 100) } break; case "2": //旗县 var code = xzq.substr(0, 4); for (var i = 2016; i <= 2019; i++) { var pewgvalue = 0 var gewyvalue = 0; var chwyvalue = 0; var yewjvalue = 0; for (var attr in xData2["批而未供"][i]) { if (attr.toString().indexOf(code) == 0) { pewgvalue += parseFloat(xData2["批而未供"][i][attr]); } } pewgData.push(Math.floor(pewgvalue * 100) / 100) for (var attr in xData2["供而未用"][i]) { if (attr.toString().indexOf(code) == 0) { gewyvalue += parseFloat(xData2["供而未用"][i][attr]); } } gewyData.push(Math.floor(gewyvalue * 100) / 100) for (var attr in xData2["拆后未用"][i]) { if (attr.toString().indexOf(code) == 0) { chwyvalue += parseFloat(xData2["拆后未用"][i][attr]); } } chwyData.push(Math.floor(chwyvalue * 100) / 100) for (var attr in xData2["用而未尽"][i]) { if (attr.toString().indexOf(code) == 0) { yewjvalue += parseFloat(xData2["用而未尽"][i][attr]); } } yewjData.push(Math.floor(yewjvalue * 100) / 100) } case "3": //旗县 for (var i = 2016; i <= 2019; i++) { var pewgvalue = 0 var gewyvalue = 0; var chwyvalue = 0; var yewjvalue = 0; for (var attr in xData2["批而未供"][i]) { if (attr.toString() == xzq) { pewgvalue += parseFloat(xData2["批而未供"][i][attr]); } } pewgData.push(Math.floor(pewgvalue * 100) / 100) for (var attr in xData2["供而未用"][i]) { if (attr.toString() == xzq) { gewyvalue += parseFloat(xData2["供而未用"][i][attr]); } } gewyData.push(Math.floor(gewyvalue * 100) / 100) for (var attr in xData2["拆后未用"][i]) { if (attr.toString() == xzq) { chwyvalue += parseFloat(xData2["拆后未用"][i][attr]); } } chwyData.push(Math.floor(chwyvalue * 100) / 100) for (var attr in xData2["用而未尽"][i]) { if (attr.toString() == xzq) { yewjvalue += parseFloat(xData2["用而未尽"][i][attr]); } } yewjData.push(Math.floor(yewjvalue * 100) / 100) } break; default: break; } var option1 = { // title: { // text: '折线图堆叠' // }, tooltip: { trigger: 'axis' }, legend: { data: ['批而未供', '供而未用', '拆后未用', '用而未尽'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['2016', '2017', '2018', '2019'] }, yAxis: { type: 'value' }, series: [{ name: '批而未供', type: 'line', data: pewgData }, { name: '供而未用', type: 'line', data: gewyData }, { name: '拆后未用', type: 'line', data: chwyData }, { name: '用而未尽', type: 'line', data: yewjData } ] }; var myChart1 = echarts.init(document.getElementById('containerClass1')); myChart1.setOption(option1); } //第4图标 function echartslineBar(type, xzq) { var rateData = []; //使用率 var xData2 = getLinData(); var sumData = getXZQData(); switch (type) { case "1": //盟市 for (var i = 2016; i <= 2019; i++) { var gewyvalue = 0; var sumValue = 0; var rateValue; for (var attr in xData2["供而未用"][i]) { gewyvalue += parseFloat(xData2["供而未用"][i][attr]); } for (var attr1 in sumData[i]) { sumValue += parseFloat(sumData[i][attr1]); } rateValue = (gewyvalue / sumValue) * 100; rateData.push(Math.floor(rateValue * 100) / 100) } break; case "2": //旗县 var code = xzq.substr(0, 4); for (var i = 2016; i <= 2019; i++) { var gewyvalue = 0; var sumValue = 0; var rateValue; for (var attr in xData2["供而未用"][i]) { if (attr.toString().indexOf(code) == 0) { gewyvalue += parseFloat(xData2["供而未用"][i][attr]); } } for (var attr1 in sumData[i]) { if (attr1.toString().indexOf(code) == 0) { sumValue += parseFloat(sumData[i][attr1]); } } rateValue = (gewyvalue / sumValue) * 100; rateData.push(Math.floor(rateValue * 100) / 100) } case "3": //旗县 for (var i = 2016; i <= 2019; i++) { var gewyvalue = 0; var sumValue = 0; var rateValue; for (var attr in xData2["供而未用"][i]) { if (attr.toString() == xzq) { gewyvalue += parseFloat(xData2["供而未用"][i][attr]); } } for (var attr1 in sumData[i]) { if (attr1.toString() == xzq) { sumValue += parseFloat(sumData[i][attr1]); } } rateValue = (gewyvalue / sumValue) * 100; rateData.push(Math.floor(rateValue * 100) / 100) } break; default: break; } var option4 = { // title: { // text: '建设用地时候用率' // }, tooltip: { trigger: 'axis' }, legend: { data: ['使用率'] }, xAxis: { type: 'category', data: ['2016', '2017', '2018', '2019'] }, yAxis: { type: 'value' }, series: [{ name: "使用率", data: rateData, type: 'line' }] }; var myChart4 = echarts.init(document.getElementById('containerClass4')); myChart4.setOption(option4); } //第三图标 function echartsBar(type, xzq) { var pewgData = []; //批而未供 var chaData = [0]; //差值 var xData2 = getLinData(); switch (type) { case "1": //盟市 for (var i = 2016; i <= 2019; i++) { var pewgvalue = 0 var chaValue; for (var attr in xData2["批而未供"][i]) { pewgvalue += parseFloat(xData2["批而未供"][i][attr]); } pewgData.push(Math.floor(pewgvalue * 100) / 100) } for (var x = 0; x < pewgData.length; x++) { if (pewgData.length - 1 == x) { break; } chaValue = pewgData[x + 1] - pewgData[x] if (chaValue < 0) { chaValue = 0; } chaData.push(chaValue) } break; case "2": //旗县 var code = xzq.substr(0, 4); for (var i = 2016; i <= 2019; i++) { var pewgvalue = 0 for (var attr in xData2["批而未供"][i]) { if (attr.toString().indexOf(code) == 0) { pewgvalue += parseFloat(xData2["批而未供"][i][attr]); } } pewgData.push(Math.floor(pewgvalue * 100) / 100) for (var x = 0; x < pewgData.length; x++) { if (pewgData.length - 1 == x) { break; } chaValue = pewgData[x + 1] - pewgData[x] if (chaValue < 0) { chaValue = 0; } chaData.push(chaValue) } } break; case "3": //旗县 for (var i = 2016; i <= 2019; i++) { var pewgvalue = 0 for (var attr in xData2["批而未供"][i]) { if (attr.toString() == xzq) { pewgvalue += parseFloat(xData2["批而未供"][i][attr]); } } pewgData.push(Math.floor(pewgvalue * 100) / 100) for (var x = 0; x < pewgData.length; x++) { if (pewgData.length - 1 == x) { break; } chaValue = pewgData[x + 1] - pewgData[x] if (chaValue < 0) { chaValue = 0; } chaData.push(chaValue) } } break; default: break; } var option3 = { tooltip: { trigger: 'axis' }, legend: { data: ['批而未供', '差值'] }, xAxis: { type: 'category', data: ["2016", "2017", "2018", "2019"] }, yAxis: { type: 'value' }, series: [{ name: "批而未供", data: pewgData, type: 'bar' }, { name: "差值", data: chaData, type: 'bar' } ] }; var myChart3 = echarts.init(document.getElementById('containerClass3')); myChart3.setOption(option3); }