1378 lines
31 KiB
JavaScript
1378 lines
31 KiB
JavaScript
/* var myChart31 = echarts.init(document.querySelector(".echart31"))
|
||
*/
|
||
$(".container> .top >:first-child").addClass("cycle")
|
||
$(function () {
|
||
xiangmu() //执行函数
|
||
water() //污水零直排
|
||
village() //老旧小区改造
|
||
newG() //工棚区改造
|
||
jianshe() //海绵城市建设
|
||
jiansheY() //海绵城市建设要求
|
||
// new7() //基础设施建设
|
||
Mychart43() // 新建绿道
|
||
/* 面积的处理 */
|
||
mianji0()
|
||
let url = "http://118.178.224.202:8024/api/old-urban2"
|
||
let dataHtml = ""
|
||
let aimList = []
|
||
let startedList = []
|
||
$.get(url, function (data) {
|
||
data.data.map((item, index) => {
|
||
aimList.push(item.aim)
|
||
startedList.push(item.started)
|
||
})
|
||
|
||
aimList.map((item, index) => {
|
||
dataHtml = accAdd(Number(dataHtml), Number(item))
|
||
})
|
||
$(".planmi").html(dataHtml)
|
||
})
|
||
})
|
||
|
||
//基础设置
|
||
// var chartDom = document.getElementById("main")
|
||
// var myChart = echarts.init(chartDom)
|
||
// var option = {
|
||
// tooltip: {
|
||
// trigger: "item",
|
||
// show: true,
|
||
// showContent: true,
|
||
// },
|
||
// // legend: {
|
||
// // top: "5%",
|
||
// // left: "center",
|
||
// // itemStyle: {
|
||
// // tooltip: true,
|
||
// // },
|
||
// // },
|
||
// series: [
|
||
// {
|
||
// // name: "Access From",
|
||
// type: "pie",
|
||
// radius: ["70%", "90%"],
|
||
// avoidLabelOverlap: false,
|
||
// label: {
|
||
// show: true,
|
||
// // position: "center",
|
||
// },
|
||
// itemStyle: {
|
||
// color: "#3D9DF4",
|
||
// },
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// fontSize: "40",
|
||
// fontWeight: "bold",
|
||
// },
|
||
// itemStyle: {
|
||
// shadowBlur: 10,
|
||
// shadowOffsetX: 0,
|
||
// shadowColor: "rgba(0, 0, 0, 0.5)",
|
||
// },
|
||
// },
|
||
// labelLine: {
|
||
// show: false,
|
||
// },
|
||
// data: [
|
||
// {
|
||
// value: 100,
|
||
// name: "100%",
|
||
// label: {
|
||
// position: "center",
|
||
// fontSize: 18,
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart.setOption(option)
|
||
|
||
// 基础设施建设文字数据
|
||
// function new7() {
|
||
// let url = "http://118.178.224.202:8024/api/new7"
|
||
|
||
// $.get(url, function (data) {
|
||
// $(".total").html(data.data[0].total)
|
||
// $(".total1").html(data.data[0].total1)
|
||
// $(".total2").html(data.data[0].total2)
|
||
// $(".total3").html(data.data[0].total3)
|
||
// $(".total4").html(data.data[0].total4)
|
||
|
||
// $(".now").html(data.data[0].now)
|
||
// $(".now1").html(data.data[0].now1)
|
||
// $(".now2").html(data.data[0].now2)
|
||
// $(".now3").html(data.data[0].now3)
|
||
// $(".now4").html(data.data[0].now4)
|
||
// $(".area").html(data.data[0].area)
|
||
// })
|
||
// }
|
||
|
||
//长条
|
||
let myChart02 = echarts.init(document.querySelector(".echart02"))
|
||
|
||
|
||
/* 宁波分区 */
|
||
// 地图部分
|
||
|
||
function Mychart43() {
|
||
let url = "http://118.178.224.202:8024/api/new-g"
|
||
var myChart43 = echarts.init(document.querySelector(".echart43"))
|
||
|
||
$.get(url, function (data) {
|
||
console.log("地图部分", data)
|
||
let areaList = []
|
||
let progressList = []
|
||
let finishList = []
|
||
let targetList = []
|
||
let myColor1 = [] //
|
||
data.data.map((item) => {
|
||
areaList.push(item.area)
|
||
progressList.push(item.progress)
|
||
finishList.push(item.finish)
|
||
targetList.push(item.target)
|
||
/* var lv = Number(item.finish.split('%')[0])
|
||
console.log("得到的各种数据",lv)
|
||
return lv >= 100 ? "#1491FD" : lv > 60 ? "#E89846" : "#FF0332" */
|
||
var c = parseFloat(item.finish.split("%")[0]) < 100 ? "#FF5C11" : "#15BE50"
|
||
/* var c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(
|
||
0
|
||
) < 100 ?
|
||
"#FF5C11" :
|
||
"#15BE50" */
|
||
myColor1.push(c)
|
||
})
|
||
var option43 = {
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
top: 20,
|
||
},
|
||
// formatter: "{b} {c} ",
|
||
tooltip: {
|
||
confine: true ,
|
||
formatter: function (params, ticket, callback) {
|
||
if (params.data !== undefined) {
|
||
/* var currentValue = d[params.dataIndex]["currentValue"]
|
||
var targetValue = d[params.dataIndex]["targetValue"] */
|
||
let area = data.data[params.dataIndex]["area"]
|
||
let finish = data.data[params.dataIndex]["finish"]
|
||
let target = data.data[params.dataIndex]["target"]
|
||
let progress = data.data[params.dataIndex]["progress"]
|
||
return area + " 进度：" + progress + "，已完成" + finish + "km,目标:" + target + "km"
|
||
}
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
color: "#6e7178",
|
||
fontSize: 14,
|
||
verticalAlign: "bottom",
|
||
lineHeight: 35,
|
||
margin: -0,
|
||
align: "left",
|
||
},
|
||
data: areaList,
|
||
},
|
||
],
|
||
label: {
|
||
show: true,
|
||
color: "#6e7178",
|
||
align: "right",
|
||
position: "left",
|
||
offset: [$(".echart43").width(), -13],
|
||
formatter: ({ data }) => {
|
||
return data + "公里"
|
||
},
|
||
fontSize: 14,
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: "条",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
barGap: "180",
|
||
data: finishList,
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
color: "#83BBFF",
|
||
},
|
||
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
},
|
||
],
|
||
}
|
||
myChart43.setOption(option43)
|
||
})
|
||
}
|
||
|
||
|
||
|
||
var myChart42 = echarts.init(document.querySelector(".echart42"))
|
||
// 新建绿道
|
||
var myChart43 = echarts.init(document.querySelector(".echart43"))
|
||
var taskId43 = "244837774619930624"
|
||
var quotaCode43 = "Q249971129640398848"
|
||
var url43 = "https://sznbs.ningbo.gov.cn:89/nbszhjkzz/tojcms/getQuotaByTaksIdOrQuotaCode.do?parentQuotaCode=" + quotaCode43 + "&systemName=government"
|
||
$.post(url43, function (data) {
|
||
var d = unique(data.infoList)
|
||
d.push({
|
||
areaCode: "dbxc",
|
||
currentValue: "0",
|
||
targetValue: "3",
|
||
})
|
||
var mubiao2 = countTotal(d, 'targetValue');
|
||
var nb_value2 = countTotal(d, 'currentValue');
|
||
$("#leijimub").html(parseFloat(nb_value2).toFixed(2));
|
||
$(".dandu").html(parseFloat(nb_value2/mubiao2*100).toFixed(2))
|
||
/* 新建绿道长条部分 */
|
||
let option02 = {
|
||
grid: {
|
||
right: 00,
|
||
top: 5,
|
||
bottom: 5,
|
||
left: 00,
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
name: "2021",
|
||
type: "bar",
|
||
data: [nb_value2/mubiao2*100],
|
||
itemStyle: {
|
||
color: "#83BBFF",
|
||
borderRadius: 5,
|
||
},
|
||
barWidth: "10",
|
||
zlevel: 2,
|
||
},
|
||
{
|
||
name: "2021",
|
||
type: "bar",
|
||
data: 100,
|
||
itemStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
barWidth: "10",
|
||
barGap: "-100%",
|
||
},
|
||
],
|
||
}
|
||
myChart02.setOption(option02)
|
||
$.post('https://sznbs.ningbo.gov.cn:89/nbszhjkzz/tojcms/targetProgress.do?taskId=' + taskId43 + '&taskSystem=government"aCode=' + quotaCode43, function (data3) {
|
||
var nb_value = (data3.infoList.filter(function (item) {
|
||
return item['areaName'] == '宁波市'
|
||
})[0]['quotaValue']);
|
||
$("#lblmubiao2").html(mubiao2);
|
||
$("#lblshiji2").html(parseFloat(nb_value).toFixed(2));
|
||
});
|
||
var myColor1 = []
|
||
d.forEach(function (item) {
|
||
var c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(0) < 100 ? "#FF5C11" : "#15BE50"
|
||
|
||
myColor1.push(c)
|
||
})
|
||
$.get("https://sznbs.ningbo.gov.cn:89/szzf/zdrw/fj_zhujianjun/330200_full.json", function (mapJson) {
|
||
echarts.registerMap("宁波市", mapJson)
|
||
var option42 = {
|
||
title: {
|
||
text: "宁波市",
|
||
left: 0,
|
||
top: 20,
|
||
textStyle: {
|
||
color: "#b3b5b9",
|
||
},
|
||
},
|
||
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 + " 进度：" + parseFloat((currentValue / targetValue) * 100).toFixed(0) + "%，已完成" + currentValue + "km,目标:" + targetValue + "km"
|
||
}
|
||
},
|
||
},
|
||
|
||
geo: {
|
||
show: true,
|
||
map: "宁波市",
|
||
top: 90,
|
||
|
||
roam: false, //不开启缩放和平移
|
||
zoom: 1.23, //视角缩放比例
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
fontSize: "10",
|
||
color: "white",
|
||
},
|
||
},
|
||
|
||
regions: [],
|
||
},
|
||
series: [
|
||
{
|
||
mapType: "宁波市",
|
||
type: "map",
|
||
|
||
label: {
|
||
show: true,
|
||
},
|
||
geoIndex: 0,
|
||
},
|
||
],
|
||
}
|
||
|
||
d.forEach(function (item) {
|
||
// debugger
|
||
let c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(0) < 100 ? "#3388ff" : "#fecc5d"
|
||
option42.geo.regions.push({
|
||
name: ningbo_allareas[item["areaCode"]],
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: c,
|
||
},
|
||
emphasis: {
|
||
areaColor: c,
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
},
|
||
})
|
||
|
||
myColor1.push(c)
|
||
})
|
||
|
||
|
||
myChart42.setOption(option42)
|
||
})
|
||
})
|
||
|
||
/* 城市建设*/
|
||
|
||
function jianshe() {
|
||
let url = "http://118.178.224.202:8024/api/new8"
|
||
$.get(url, function (data) {
|
||
let dataHtml = data.data[0].area
|
||
let dataHtml1 = data.data[0].area1
|
||
$(".area").html(dataHtml)
|
||
$(".area1").html(dataHtml1)
|
||
let myChart05 = echarts.init(document.querySelector(".echart05"))
|
||
let option05 = {
|
||
tooltip: {
|
||
confine: true ,
|
||
trigger: "item",
|
||
show: true,
|
||
formatter: " {b}：{c} " + "万㎡",
|
||
},
|
||
legend: {
|
||
top: "0%",
|
||
left: "0%",
|
||
selectedMode: false,
|
||
itemWidth: 15,
|
||
itemHeight:10,
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
label: {
|
||
width: 140,
|
||
overflow: "break",
|
||
formatter: `{b}\n{d}%`,
|
||
positon: "outside",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["40%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
left: 70,
|
||
right: 70,
|
||
label: {
|
||
normal: {
|
||
position: 'inner',
|
||
show : false
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
value: dataHtml,
|
||
name: "中心城区建成面积",
|
||
itemStyle: {
|
||
color: "#3BA271",
|
||
},
|
||
},
|
||
{
|
||
value: dataHtml1,
|
||
name: "县（市）建成面积",
|
||
itemStyle: {
|
||
color: "#3388FF",
|
||
},
|
||
},
|
||
],
|
||
|
||
|
||
},
|
||
],
|
||
}
|
||
myChart05.setOption(option05)
|
||
})
|
||
}
|
||
let myChart06 = echarts.init(document.querySelector(".echart06"))
|
||
|
||
|
||
/* 海绵城市完成率 */
|
||
var taskId2 = '249481498440331264';
|
||
var quotaCode2 = 'Q259698764016517121';
|
||
var target1 = 5;
|
||
$.post('https://sznbs.ningbo.gov.cn:89/nbszhjkzz/tojcms/targetProgress.do?taskId=' + taskId2 + '&taskSystem=government"aCode=' + quotaCode2, function (data2) {
|
||
var nb_value = (data2.infoList.filter(function (item) {
|
||
return item['areaName'] == '宁波市'
|
||
})[0]['quotaValue']);
|
||
$("#mubiao1").html(target1+ "%");
|
||
$("#shiji1").html(parseFloat(nb_value).toFixed(2) + "%");
|
||
$("#wanhcneg1").html((parseFloat(nb_value) / target1 * 100).toFixed(2) + "%");
|
||
console.log("海绵城市请求",)
|
||
var option06 = {
|
||
xAxis: {
|
||
type: "value",
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
show: false,
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
},
|
||
series: [
|
||
{
|
||
name: "2021",
|
||
type: "bar",
|
||
data: [target1],
|
||
itemStyle: {
|
||
color: "#83BBFF",
|
||
borderRadius: 5,
|
||
},
|
||
barWidth: "10",
|
||
zlevel: 2,
|
||
},
|
||
{
|
||
name: "2021",
|
||
type: "bar",
|
||
data: [0],
|
||
itemStyle: {
|
||
color: "#269BFF",
|
||
borderRadius: 5,
|
||
},
|
||
barWidth: "10",
|
||
barGap: "-100%",
|
||
},
|
||
],
|
||
}
|
||
myChart06.setOption(option06)
|
||
});
|
||
|
||
// 海绵城市要求
|
||
|
||
function jiansheY() {
|
||
let url = "http://118.178.224.202:8024/api/urban-r"
|
||
var myChart07 = echarts.init(document.querySelector(".echart07"))
|
||
$.get(url, function (data) {
|
||
console.log("海绵城市建设",data)
|
||
let areaList = []
|
||
let aimList = []
|
||
let actualList = []
|
||
let finishList = []
|
||
let myColor1=[]
|
||
data.data.map((item) => {
|
||
areaList.push(item.area)
|
||
aimList.push(item.aim)
|
||
actualList.push(parseInt(item.actual))
|
||
finishList.push(item.finish)
|
||
|
||
|
||
var c = parseFloat(item.finish.split("%")[0]) < 100 ? "#E89846" : "#FF0332"
|
||
/* var c = parseFloat((item["currentValue"] / item["targetValue"]) * 100).toFixed(
|
||
0
|
||
) < 100 ?
|
||
"#FF5C11" :
|
||
"#15BE50" */
|
||
myColor1.push(c)
|
||
|
||
|
||
})
|
||
|
||
|
||
var option07 = {
|
||
grid: {
|
||
top: 20,
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
},
|
||
tooltip: {
|
||
confine: true ,
|
||
formatter: function (params, ticket, callback) {
|
||
if (params.data !== undefined) {
|
||
var actual = data.data[params.dataIndex]["actual"]
|
||
if (actual == null || actual == undefined) actual = 0
|
||
var aim = data.data[params.dataIndex]["aim"]
|
||
var finish = data.data[params.dataIndex]["finish"]
|
||
return params.name + "完成率" + finish + "，已完成:" + actual + ",目标:" + aim
|
||
}
|
||
},
|
||
},
|
||
|
||
xAxis: {
|
||
type: "value",
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
verticalAlign: "bottom",
|
||
lineHeight: 28,
|
||
margin: -0,
|
||
align: "left",
|
||
color: "#6e7178",
|
||
fontSize: 14,
|
||
},
|
||
data: areaList,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "条",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
data: actualList,
|
||
showBackground: true,
|
||
itemStyle: {
|
||
color: "#83BBFF",
|
||
borderRadius: 5,
|
||
},
|
||
backgroundStyle: {
|
||
borderRadius: 5,
|
||
color: "#E6F1FF",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart43").width(), -13],
|
||
formatter: ({ data }) => {
|
||
return "实际完成率" + data + "%"
|
||
},
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
],
|
||
}
|
||
myChart07.setOption(option07)
|
||
})
|
||
}
|
||
// 老旧小区改造
|
||
function village() {
|
||
var myChart08 = echarts.init(document.querySelector(".echart08"))
|
||
let url = "http://118.178.224.202:8024/api/old-village"
|
||
|
||
let dataHtml = ""
|
||
let areaList = []
|
||
let reformOVList = []
|
||
let colors = ["#5c8ff8", "#5c8ff8"]
|
||
|
||
$.get(url, function (data) {
|
||
data.data.map((item, index) => {
|
||
areaList.push(item.area)
|
||
reformOVList.push(item.reformOV)
|
||
})
|
||
reformOVList.map((item, index) => {
|
||
console.log("数量", item)
|
||
dataHtml = Number(dataHtml) + Number(item)
|
||
})
|
||
$(".plantext").html(dataHtml)
|
||
option44 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: "{b} {c} ",
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
top: 10,
|
||
bottom: 10,
|
||
},
|
||
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
|
||
data: areaList, //["海曙区", "江北区", "北仑区", "镇海区", "鄞州区", "奉化区", "象山县"],
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
|
||
verticalAlign: "bottom",
|
||
lineHeight: 30,
|
||
margin: -0,
|
||
align: "left",
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
],
|
||
xAxis: [
|
||
{
|
||
type: "value",
|
||
show: false,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "条",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
|
||
data: reformOVList,
|
||
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
color: "#83BBFF",
|
||
},
|
||
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart43").width(), -13],
|
||
formatter: "{c}户",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
},
|
||
],
|
||
}
|
||
myChart08.setOption(option44)
|
||
})
|
||
}
|
||
|
||
function xiangmu() {
|
||
let url = "http://118.178.224.202:8024/api/old-urban"
|
||
let areaList = []
|
||
let aimList = []
|
||
let startedList = []
|
||
$.get(url, function (data) {
|
||
data.data.map((item, index) => {
|
||
areaList.push(item.area)
|
||
aimList.push(item.aim)
|
||
startedList.push(item.started)
|
||
})
|
||
console.log("xiangmu",data)
|
||
var shumu2 = countTotal(data.data, 'started');
|
||
$("#shumu2").html(shumu2)
|
||
let myChart09 = echarts.init(document.querySelector(".echart09"))
|
||
let option09 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 0,
|
||
selectedMode: false,
|
||
itemWidth: 15,
|
||
itemHeight:10,
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 10,
|
||
top: 50,
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: areaList,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
|
||
verticalAlign: "bottom",
|
||
align: "left",
|
||
lineHeight: 70,
|
||
margin: -0,
|
||
color: "#6e7178",
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
xAxis: {
|
||
type: "value",
|
||
show: false,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart43").width(), -13],
|
||
// formatter: "{c}万㎡",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
series: [
|
||
{
|
||
name: "今年目标",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#83BBFF",
|
||
borderRadius: 5,
|
||
},
|
||
data: aimList,
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
},
|
||
{
|
||
name: "已开工项目",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#fecc5d",
|
||
borderRadius: 5,
|
||
},
|
||
data: startedList,
|
||
showBackground: {
|
||
show: true,
|
||
borderRadius: 5,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
barGap: "250%",
|
||
},
|
||
],
|
||
}
|
||
myChart09.setOption(option09)
|
||
})
|
||
}
|
||
|
||
function mianji0(){
|
||
let url = "http://118.178.224.202:8024/api/old-urban2"
|
||
$.get(url, function (data) {
|
||
var mianji2 = countTotal(data.data, 'started')
|
||
$("#mianji2").html(mianji2)
|
||
|
||
})
|
||
}
|
||
|
||
function mianji() {
|
||
let url = "http://118.178.224.202:8024/api/old-urban2"
|
||
let dataHtml = ""
|
||
let areaList = []
|
||
let aimList = []
|
||
let startedList = []
|
||
$.get(url, function (data) {
|
||
data.data.map((item, index) => {
|
||
areaList.push(item.area)
|
||
aimList.push(item.aim)
|
||
startedList.push(item.started)
|
||
})
|
||
console.log("数量", data)
|
||
var mianji2 = countTotal(data.data, 'started')
|
||
$("#mianji2").html(mianji2)
|
||
|
||
aimList.map((item, index) => {
|
||
dataHtml = Number(dataHtml) + Number(item)
|
||
})
|
||
$(".planmi").html(dataHtml)
|
||
|
||
let myChart09 = echarts.init(document.querySelector(".echart09"))
|
||
let option04 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 0,
|
||
selectedMode: false,
|
||
itemWidth: 15,
|
||
itemHeight:10,
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 10,
|
||
top: 50,
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: areaList,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
|
||
verticalAlign: "bottom",
|
||
align: "left",
|
||
lineHeight: 60,
|
||
margin: -0,
|
||
color: "#6e7178",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
xAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart43").width(), -13],
|
||
// formatter: "{c}万㎡",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
series: [
|
||
{
|
||
name: "今年目标",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#3388ff",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
borderRadius: 5,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
data: aimList,
|
||
},
|
||
{
|
||
name: "已开工项目",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#fecc5d",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
borderRadius: 5,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
data: startedList,
|
||
barGap: "200%",
|
||
},
|
||
],
|
||
}
|
||
myChart09.setOption(option04)
|
||
})
|
||
}
|
||
|
||
|
||
|
||
function newG() {
|
||
var myChart11 = echarts.init(document.querySelector(".echart11"))
|
||
|
||
let url = "http://118.178.224.202:8024/api/new-r"
|
||
$.get(url, function (data) {
|
||
let area1List = []
|
||
let targetList = []
|
||
let finishList = []
|
||
targetList.push(data.data[0].finish,data.data[1].finish)
|
||
finishList.push(data.data[0].target,data.data[1].target)
|
||
console.log("工棚去数据", data,targetList,finishList)
|
||
|
||
var mubioaT = countTotal(data.data,'target')
|
||
var wancchengT = countTotal(data.data,'finish')
|
||
|
||
$("#mubioaT").html(mubioaT)
|
||
$("#wancchengT").html(wancchengT)
|
||
|
||
|
||
var myChart10 = echarts.init(document.querySelector(".echart10"))
|
||
var option10 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: true,
|
||
showContent: true,
|
||
},
|
||
series: [
|
||
{
|
||
// name: "Access From",
|
||
type: "pie",
|
||
radius: ["60%", "80%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
// position: "center",
|
||
},
|
||
itemStyle: {
|
||
color: "#3D9DF4",
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: "40",
|
||
fontWeight: "bold",
|
||
},
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: wancchengT,
|
||
name: (wancchengT/wancchengT*100).toFixed(0) + "%" ,
|
||
label: {
|
||
position: "center",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
{
|
||
value: wancchengT-wancchengT,
|
||
// name: "43%",
|
||
itemStyle: {
|
||
color: "#EEEEEE",
|
||
},
|
||
label: {
|
||
position: "center",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
|
||
],
|
||
},
|
||
],
|
||
}
|
||
myChart10.setOption(option10)
|
||
|
||
|
||
|
||
|
||
|
||
|
||
var option48 = {
|
||
grid: {
|
||
left: 0,
|
||
top: 10,
|
||
bottom: 10,
|
||
right: 0,
|
||
},
|
||
xAxis: [
|
||
{
|
||
show: false,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "category",
|
||
data: area1List,
|
||
axisLine: {
|
||
show: false,
|
||
}, //坐标轴
|
||
axisTick: [
|
||
{
|
||
//坐标轴小标记
|
||
show: false,
|
||
},
|
||
],
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
|
||
verticalAlign: "bottom",
|
||
align: "left",
|
||
lineHeight: 32,
|
||
margin: 0,
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
],
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart43").width(), -13],
|
||
formatter: "{c}套",
|
||
color: "#6e7178",
|
||
fontSize: 14,
|
||
},
|
||
series: [
|
||
{
|
||
name: "套",
|
||
type: "bar",
|
||
barGap: "200%",
|
||
barWidth: 10, //柱宽度
|
||
data: finishList,
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
color: "#83BBFF",
|
||
},
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
},
|
||
],
|
||
}
|
||
myChart11.setOption(option48)
|
||
})
|
||
}
|
||
|
||
/* 污水零直排数据 */
|
||
|
||
|
||
function myChart12(val1,val2){
|
||
var myChart12 = echarts.init(document.querySelector(".echart12"))
|
||
var option12 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: false,
|
||
showContent: true,
|
||
},
|
||
grid: {
|
||
top: 0,
|
||
left: 0,
|
||
bottom: 0,
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["60%", "80%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
},
|
||
itemStyle: {
|
||
color: "#3D9DF4",
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: "40",
|
||
fontWeight: "bold",
|
||
},
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: val1,
|
||
name: val1,
|
||
label: {
|
||
position: "center",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
{
|
||
value: val2,
|
||
name: val2,
|
||
itemStyle: {
|
||
color: "#EEEEEE",
|
||
},
|
||
label: {
|
||
position: "center",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
myChart12.setOption(option12)
|
||
}
|
||
|
||
|
||
|
||
function myChart13(dataList, actualList, targetList) {
|
||
var myChart13 = echarts.init(document.querySelector(".echart13"))
|
||
var option13 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
// formatter: "{b}" + "{a1}" + ": " + "{c0}",
|
||
},
|
||
legend: {
|
||
show: false,
|
||
},
|
||
|
||
grid: {
|
||
left: 0,
|
||
top: 10,
|
||
bottom: 10,
|
||
right: 0,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "value",
|
||
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false, //隐藏或显示
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
}, //坐标轴刻度
|
||
},
|
||
],
|
||
yAxis: {
|
||
type: "category",
|
||
axisTick: {
|
||
show: false,
|
||
alignWithLabel: true,
|
||
},
|
||
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: dataList,
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
|
||
verticalAlign: "bottom",
|
||
align: "left",
|
||
lineHeight: 30,
|
||
margin: -0,
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart43").width(), -13],
|
||
// formatter: "{c}个",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
series: [
|
||
{
|
||
name: "实际值",
|
||
type: "bar",
|
||
|
||
barWidth: 10, //柱图宽度
|
||
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
itemStyle: {
|
||
borderRadius: 5,
|
||
color: "#83BBFF",
|
||
},
|
||
data: actualList,
|
||
},
|
||
],
|
||
}
|
||
myChart13.setOption(option13)
|
||
}
|
||
/* c处理点击事件 */
|
||
$("#xiangmu").click(function () {
|
||
$("#xiangmu").css({
|
||
border: "1px solid #198eff",
|
||
color: "#0066ff",
|
||
background: "#d9e8ff",
|
||
})
|
||
$("#mianji").css({
|
||
border: "1px solid #b1afaf",
|
||
color: "#363a44",
|
||
borderLeft: "none",
|
||
background: "none",
|
||
})
|
||
xiangmu()
|
||
})
|
||
$("#mianji").click(function () {
|
||
$("#mianji").css({
|
||
border: "1px solid #198eff",
|
||
color: "#0066ff",
|
||
background: "#d9e8ff",
|
||
})
|
||
$("#xiangmu").css({
|
||
border: "1px solid #b1afaf",
|
||
color: "#363a44",
|
||
borderRight: "none",
|
||
background: "none",
|
||
})
|
||
mianji()
|
||
})
|
||
/* 污水零直排区 */
|
||
function water() {
|
||
let urlWater = "http://118.178.224.202:8024/api/biotope"
|
||
$.get(urlWater, function (data) {
|
||
let dataList = []
|
||
let actualList = []
|
||
let targetList = []
|
||
let val1 = 0 , val2 = 0
|
||
data.data.map((item, index) => {
|
||
dataList.push(item.area)
|
||
actualList.push(item.actual)
|
||
targetList.push(item.target)
|
||
// console.log("sadas111",Number(data.data[index].actual), Number(val1))
|
||
val1 = Number(data.data[index].actual) + Number(val1)
|
||
val2 = Number(data.data[index].target) + Number(val2)
|
||
})
|
||
|
||
|
||
let actual = (val1/val2).toFixed(2) * 100
|
||
let aim = (1 - val1/val2).toFixed(2) * 100
|
||
console.log("sadas",val1,val2,actual)
|
||
|
||
|
||
|
||
|
||
myChart12(actual,aim)
|
||
myChart13(dataList, actualList, targetList)
|
||
$(".jindutext").html(val2)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 头部四个标题点击事件
|
||
*/
|
||
|
||
$(".top")
|
||
.children()
|
||
.click(function () {
|
||
$(".top").children().removeClass("cycle")
|
||
$(this).addClass("cycle")
|
||
})
|