/* try { require("./jquery") } catch (error) { console.log(error) } */ /** * 轮播图小白条添加背景色及和文字显示 */ let switchImage = function () { $(".lunbotu").children().eq(2).children().eq(1).children().removeClass("lunbotuColor") $(".lunbotu") .children() .eq(2) .children() .eq(1) .children() .eq(num - 1) .addClass("lunbotuColor") $(".linkTitle").children().css("display", "none") $(".linkTitle") .children() .eq(num - 1) .css("display", "block") } // 轮播图设置 var num = 1 var play = function () { if (num < 3) { num++ } else { num = 1 } $(".lunbotu") .find("img") .attr("src", "./image/lunbotu" + num + ".png ") switchImage() } var timer = setInterval(play, 2000) $(".lunbotu").mouseenter(function () { clearInterval(timer) this.style.cursor = "pointer" }) $(".lunbotu").mouseleave(function () { timer = setInterval(play, 2000) }) $(".lunbotu") .children() .click(function (e) { let src = this.firstElementChild.src + "" if (src.includes("1.png")) { this.href = "https://mp.weixin.qq.com/s/EpuRXuGQuYp4cSWwlBOMLA?ddtab=true" } else if (src.includes("2.png")) { this.href = "https://mp.weixin.qq.com/s/D8bY3tfG-6Au2fWSfeYHfw?ddtab=true" } else { this.href = "https://mp.weixin.qq.com/s/HgdpVppUvcpHvKtFcvItiw?ddtab=true" } }) // 按钮切换轮播图 // 右边 $(".lunbotu") .children() .eq(0) .children() .eq(1) .click(function () { let src = $(".lunbotu").children().eq(1).children().attr("src") + "" if (num >= 3) { $(".lunbotu") .children() .eq(1) .children() .attr("src", src.substr(0, 15) + "" + "1.png") num = 1 } else { $(".lunbotu") .children() .eq(1) .children() .attr("src", src.substr(0, 15) + "" + (num + 1) + ".png") num++ } switchImage() }) // 左边 $(".lunbotu") .children() .eq(0) .children() .eq(0) .click(function () { let src = $(".lunbotu").children().eq(1).children().attr("src") + "" if (num == 1) { $(".lunbotu") .children() .eq(1) .children() .attr("src", src.substr(0, 15) + "" + "3.png") num = 3 } else { $(".lunbotu") .children() .eq(1) .children() .attr("src", src.substr(0, 15) + "" + (num - 1) + ".png") num-- } switchImage() }) // 点击小白块切换图片 $(".linkTitle") .siblings() .children() .click(function (e) { if (this.previousElementSibling && this.nextElementSibling) { num = 2 $(".lunbotu").children().eq(1).children().attr("src", "./image/lunbotu2.png") } else if (this.previousElementSibling && !this.nextElementSibling) { num = 3 $(".lunbotu").children().eq(1).children().attr("src", "./image/lunbotu3.png") } else { num = 1 $(".lunbotu").children().eq(1).children().attr("src", "./image/lunbotu1.png") } switchImage() }) // 保障性住房按钮切换 $(".mapButton") .children() .click(function (e) { $(".mapButton").children().removeClass("mapButtonColor") $(e.target).addClass("mapButtonColor") if (e.target.innerText == "实物配租") { $(".peizu").css("display", "flex") $(".zulin").css("display", "none") // $(".p0").text("单位:户") } else { $(".peizu").css("display", "none") $(".zulin").css("display", "flex") // $(".p0").text("单位:元") } }) // 省级样板分布按钮 $(".provinceType") .children() .click(function (e) { $(".provinceType").children().removeClass("color") $(e.target).addClass("color") if (e.target.innerText == "省级样板城镇分布") { $(".echart05").css("display", "block") $(".echart055").css("display", "none") } else { $(".echart05").css("display", "none") $(".echart055").css("display", "flex") } }) /** * 进入右侧标题显示内容 */ $(".ul0>li").mouseenter(function (e) { $(".x").css("display", "block") $(".totalEchart").children().css("visibility", "hidden") $(".ul0 li").css("background", "none") $(".yinying").css("height", "0") $(".sanjiao").css("display", "none") e.stopPropagation() /* try { e.cancelBubble() } catch (error) { console.log(error) } */ try { if (this.innerText == "房地产市场调控") { $(".fangdichan").css("visibility", "visible") } else if (this.innerText == "保障性住房监督") { $(".baozhang").css("visibility", "visible") } else if (this.innerText == "基础设施建设") { $(".jichu").css("visibility", "visible") } else if (this.innerText == "城市更新") { $(".chengshi").css("visibility", "visible") } else if (this.innerText == "美丽城镇建设") { $(".chengzhen").css("visibility", "visible") } else if (this.innerText == "农房建设管理") { $(".nongcun").css("visibility", "visible") } else if (this.innerText == "村镇污水治理") { $(".cunzhen").css("visibility", "visible") } else if (this.innerText == "建筑业") { $(".jianzhu").css("visibility", "visible") } else { return } } catch (error) { console.log(error) } $(this).css("background", "#DBEFFF") // this.nextElementSibling.style.visibility = "visible" $(".yinying").css("height", "1100px") $(".sanjiao").css("display", "block") // 三角形一部分被隐藏 $(".sanjiao").css("top", this.offsetTop + 63) }) /** * 隐藏所有东西 */ var hiddenAll = function () { $(".totalEchart").children().css("visibility", "hidden") $(".ul0 li").css("background", "none") $(".yinying").css("height", "0") $(".sanjiao").css("display", "none") $(".x").css("display", "none") } // 进入阴影隐藏盒子 $(".yinying").mousemove(function (e) { if (e.pageY > 825) { hiddenAll() } }) // 进入标题隐藏盒子 $(".homeTitle").mouseenter(function (e) { hiddenAll() }) /** * 点击x关闭 */ $(".x").click(function () { hiddenAll() }) // 页面加载前 window.onload = function () { // 轮播图设置 $(".lunbotu").children().eq(2).children().eq(2).children().eq(0).addClass("lunbotuColor") // 核心业务四个小标题设置 $(".echartTitle").children().eq(0).css("color", "#4EACFC") $(".echartTitle").children().eq(0).css("borderBottom", "1px solid #4EACFC") $(".echartTitle").children().eq(0).children().eq(0).css("display", "block") $(".echartTitle").children().eq(0).children().eq(1).css("display", "none") // 省级样板分布添加背景色 $(".provinceType").children().eq(0).addClass("provinceTypeColor") // 保障性住房实物配租按钮添加背景色 $(".mapButton").children().eq(0).addClass("mapButtonColor") /** * 所有a标签设置blank跳转 */ $("a").attr("target", "blank") } // home四个标题 $(".echartTitleButton ").click(function (e) { $(".fourPage").children().css("display", "none") $(".echartTitle").children().css("color", "unset") $(".echartTitle").children().css("borderBottom", "unset") this.parentElement.style.color = "#4EACFC" this.parentElement.style.borderBottom = "1px solid #4EACFC" $(".c").css("display", "none") $(".c").siblings().css("display", "block") e.target.parentElement.firstElementChild.style.display = "block" e.target.parentElement.firstElementChild.nextElementSibling.style.display = "none" if (e.target.innerText == "城市住房") { $(".echartArea").css("display", "flex") } else if (e.target.innerText == "城市建设") { $(".cityBuild").css("display", "flex") } else if (e.target.innerText == "村镇建设") { $(".townBuild").css("display", "flex") } else { $(".occupation").css("display", "block") } }) // 省级样板分布按钮事件 $(".provinceType") .children() .click(function (e) { $(".provinceType").children().removeClass("provinceTypeColor") $(e.target).addClass("provinceTypeColor") }) // 发起请求获取地图 var myChart05 = echarts.init(document.querySelector(".echart05")) var myChart055 = echarts.init(document.querySelector(".echart055")) var myChart2 = echarts.init(document.querySelector(".echart2")) var myChart3 = echarts.init(document.querySelector(".echart3")) var quotaCode3 = "Q249971129640398848" let baseUrl = "https://sznbs.ningbo.gov.cn:89/nbszhjkzz/tojcms/getQuotaByTaksIdOrQuotaCode.do?parentQuotaCode=" var url3 = baseUrl + quotaCode3 + "&systemName=government" var d = [] $.post(url3, function (data) { d = unique(data.infoList) $.get("https://sznbs.ningbo.gov.cn:89/szzf/zdrw/fj_zhujianjun/330200_full.json", function (mapJson) { // 地图2 echarts.registerMap("宁波市", mapJson) //地图二中的数据 $.get("http://118.178.224.202:8024/api/pr-housing",function(data2){ let list1 = [] let list2 = [] data2.data.map(item=>{ list1.push({ name:item.area, value:item.mdaLease }) list2.push({ name:item.area, value:item.smAssistance }) }) var option2 = { title: { text: "", x: "left", }, tooltip: { trigger: "item", // formatter: function(params, ticket, callback) { // if (params.data !== undefined) { // let currentValue = d[params.dataIndex]["currentValue"] // let targetValue = d[params.dataIndex]["targetValue"] // return ( // params.name + // " 政府投资公租房" + // currentValue + // "套" // ) // } // }, }, geo: { show: true, map: "宁波市", emphasis: { label: { show: true, }, }, roam: false, //不开启缩放和平移 zoom: 1.23, //视角缩放比例 label: { normal: { show: true, fontSize: "10", color: "white", }, }, itemStyle: { normal: { color: "red", borderColor: "rgba(0, 0, 0, 0.2)", }, emphasis: { label: { show: true, position: "top", color: "red", }, areaColor: "#ccc", //鼠标选择区域颜色 shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, regions: [], }, series: [ { mapType: "宁波市", name: "实物配租", type: "map", label: { show: true, }, geoIndex: 0, data: list1, }, ], } d.forEach(function (item) { // debugger let c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(0) < 100 ? "#FF5C11" : "#15BE50" option2.geo.regions.push({ name: ningbo_allareas[item["areaCode"]], itemStyle: { normal: { areaColor: "#8BCCFE", }, emphasis: { areaColor: "#8BCCFE", }, }, label: { show: true, }, }) // myColor1.push(c) }) myChart2.setOption(option2) // 地图3 echarts.registerMap("宁波市", mapJson) var option3 = { title: { text: "", x: "left", }, tooltip: { trigger: "item", // formatter: function(params, ticket, callback) { // if (params.data !== undefined) { // let currentValue = d[params.dataIndex]["currentValue"] // let targetValue = d[params.dataIndex]["targetValue"] // return ( // params.name + // " 政府投资公租房" + // currentValue + // "套" // ) // } // }, }, geo: { show: true, map: "宁波市", top: 50, // left: 30, // right: 150, bottom: 40, emphasis: { label: { show: true, // position: '', // color: 'red' }, }, roam: false, //不开启缩放和平移 zoom: 1.23, //视角缩放比例 label: { normal: { show: true, fontSize: "10", color: "white", }, }, itemStyle: { normal: { color: "#8BCCFE", borderColor: "rgba(0, 0, 0, 0.2)", }, emphasis: { label: { show: true, position: "top", color: "red", }, areaColor: "#ccc", //鼠标选择区域颜色 shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: "rgba(0, 0, 0, 0.5)", }, }, // data:this.dataList // 地图区域 regions: [], }, series: [ { mapType: "宁波市", name: "租赁补贴", type: "map", //map: '宁波市',//要和echarts.registerMap()中第一个参数一致 label: { show: true, }, geoIndex: 0, data: list2, }, ], } d.forEach(function (item) { // debugger let c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(0) < 100 ? "#FF5C11" : "#15BE50" option2.geo.regions.push({ name: ningbo_allareas[item["areaCode"]], itemStyle: { normal: { areaColor: "#8BCCFE", }, emphasis: { areaColor: "#8BCCFE", }, }, label: { show: true, }, }) // myColor1.push(c) myChart3.setOption(option3) echarts.registerMap("宁波市", mapJson) }) // myColor1.push(c) }) echarts.registerMap("宁波市", mapJson) $.get("http://118.178.224.202:8024/api/custom-settlements",function(data55){ let arryshi = [] let arryshen = [] data55.data.forEach(function (item) { arryshen.push({ name: item.area, value: item.provincialTown }) arryshi.push({ name: item.area, value: item.municipalTown }) }) var option055 = { title: { text: "", x: "left", }, label: { show: false, }, tooltip: { trigger: "item", formatter: "{b} {c}", // formatter: function(params, ticket, callback) { // //回调函数,参数params具体格式参加官方API // //鼠标放到某个地市上,显示这个地市的名称加人口数 // //例如 params.name:当前地市名称。params.value:你传入的json数据与当前地市匹配的一项。 // //params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据 // if (params.data !== undefined) { // // return params.name + ":" + params.data.value + "公里"; // let currentValue = d[params.dataIndex]["currentValue"] // let targetValue = d[params.dataIndex]["targetValue"] // return ( // params.name + // " 进度:" + // parseFloat((currentValue / targetValue) * 100).toFixed(0) + // "%,已完成" + // currentValue + // "km,目标:" + // targetValue + // "km" // ) // } // }, }, visualMap: { type: "continuous", // 定义为连续型 visualMap min: 0, max: 200, range: [0, 200], inRange: { color: ["#B2CAE0", "#45A5F8"], }, text: ["高", "低"], // backgroundColor: "#78BDFC", calculable: true, bottom: 80, }, geo: { map: "宁波市", roam: false, //不开启缩放和平移 zoom: 1.23, //视角缩放比例 itemStyle: { areaColor: "#B2CAE0", emphasis: { areaColor: "#FFE74F", }, }, regions: [], }, series: [ { mapType: "宁波市", type: "map", //map: '宁波市',//要和echarts.registerMap()中第一个参数一致 label: { show: false, }, geoIndex: 0, data: arryshi , //人口数据:例如[{name:'泉州市',value:'100万'},{name:'厦门市',value:'100万'}......] }, ], } d.forEach(function (item) { // debugger let c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(0) < 100 ? "#FF5C11" : "#15BE50" option055.geo.regions.push({ name: ningbo_allareas[item["areaCode"]], }) // myColor1.push(c) }) myChart055.setOption(option055) var option05 = { title: { text: "", x: "left", }, tooltip: { trigger: "item", formatter: "{b} {c}", // formatter: function(params, ticket, callback) { // //回调函数,参数params具体格式参加官方API // //鼠标放到某个地市上,显示这个地市的名称加人口数 // //例如 params.name:当前地市名称。params.value:你传入的json数据与当前地市匹配的一项。 // //params.data.value:你传入的json数据与当前地市匹配的一项中'value'对应的数据 // if (params.data !== undefined) { // // return params.name + ":" + params.data.value + "公里"; // let currentValue = d[params.dataIndex]["currentValue"] // let targetValue = d[params.dataIndex]["targetValue"] // return ( // params.name + // " 进度:" + // parseFloat((currentValue / targetValue) * 100).toFixed(0) + // "%,已完成" + // currentValue + // "km,目标:" + // targetValue + // "km" // ) // } // }, }, visualMap: { type: "continuous", // 定义为连续型 visualMap min: 0, max: 200, range: [0, 200], inRange: { color: ["#B2CAE0", "#45A5F8"], }, text: ["高", "低"], // backgroundColor: "#78BDFC", calculable: true, bottom: 80, }, geo: { map: "宁波市", roam: false, //不开启缩放和平移 zoom: 1.23, //视角缩放比例 label: { show: false, // normal: { // show: false, // fontSize: "10", // color: "#ABC4DD", // }, }, itemStyle: { areaColor: "#B2CAE0", emphasis: { areaColor: "#FFE74F", color: "#FFE74F", }, // normal: { // borderColor: "rgba(0, 0, 0, 0.2)", // }, // emphasis: { // areaColor: "#ccc", //鼠标选择区域颜色 // shadowOffsetX: 0, // shadowOffsetY: 0, // shadowBlur: 20, // borderWidth: 0, // shadowColor: "rgba(0, 0, 0, 0.5)", // }, }, // data:this.dataList regions: [], }, series: [ { // name: "省级样板城镇分布", mapType: "宁波市", type: "map", //map: '宁波市',//要和echarts.registerMap()中第一个参数一致 label: { show: true, }, geoIndex: 0, data:arryshen, //人口数据:例如[{name:'泉州市',value:'100万'},{name:'厦门市',value:'100万'}......] }, ], } d.forEach(function (item) { // debugger let c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(0) < 100 ? "#FF5C11" : "#15BE50" option05.geo.regions.push({ name: ningbo_allareas[item["areaCode"]], // itemStyle: { // normal: { // areaColor: "#ABC4DD", // }, // emphasis: { // areaColor: "#ABC4DD", // }, // }, }) }) myChart05.setOption(option05) }) }) })