432 lines
9.1 KiB
JavaScript
432 lines
9.1 KiB
JavaScript
|
|
//基础设施建设
|
|
|
|
|
|
|
|
var myChart31 = echarts.init(document.querySelector(".echart31"))
|
|
var myChart32 = echarts.init(document.querySelector(".echart32"))
|
|
var myChart33 = echarts.init(document.querySelector(".echart33"))
|
|
var myChart34 = echarts.init(document.querySelector(".echart34"))
|
|
|
|
var echartsYLeft = echarts.init(document.querySelector(".echartsYLeft"))
|
|
|
|
$.get("http://118.178.224.202:8024/api/road-c",function(data){
|
|
|
|
$("#xujian").html(data.data[0].continue)
|
|
$("#kaigong").html(data.data[0].work)
|
|
$("#jiancheng").html(data.data[0].finish)
|
|
|
|
$("#xinzheng").html(data.data[0].increase)
|
|
$("#kgjianshe").html(data.data[0].construction)
|
|
$("#kgtozi").html(data.data[0].invest)
|
|
$("#ysjs").html(data.data[0].construction2)
|
|
|
|
var option31 = {
|
|
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: data.data[0].finish,
|
|
name: (data.data[0].finish/data.data[0].finish*100).toFixed(0) + "%" ,
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
{
|
|
value: data.data[0].finish-data.data[0].finish,
|
|
// name: "43%",
|
|
itemStyle: {
|
|
color: "#EEEEEE",
|
|
},
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
],
|
|
}, ],
|
|
}
|
|
myChart31.setOption(option31)
|
|
var option33 = {
|
|
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: data.data[0].increase,
|
|
name: (data.data[0].increase/data.data[0].increase*100).toFixed(0) + "%" ,
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
{
|
|
value: 0,
|
|
// name: "43%",
|
|
itemStyle: {
|
|
color: "#EEEEEE",
|
|
},
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
],
|
|
}, ],
|
|
}
|
|
|
|
var option34 = {
|
|
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: data.data[0].invest,
|
|
name: (data.data[0].invest/data.data[0].invest*100).toFixed(0) + "%" ,
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
{
|
|
value: 0,
|
|
// name: "43%",
|
|
itemStyle: {
|
|
color: "#EEEEEE",
|
|
},
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
],
|
|
}, ],
|
|
}
|
|
|
|
var option35 = {
|
|
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: data.data[0].construction2,
|
|
name: (data.data[0].construction2/data.data[0].construction2*100).toFixed(0) + "%" ,
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
{
|
|
value: 0,
|
|
// name: "43%",
|
|
itemStyle: {
|
|
color: "#EEEEEE",
|
|
},
|
|
label: {
|
|
position: "center",
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
],
|
|
}, ],
|
|
}
|
|
|
|
|
|
|
|
myChart32.setOption(option33)
|
|
|
|
myChart33.setOption(option34)
|
|
|
|
myChart34.setOption(option35)
|
|
|
|
|
|
echartsYLeft.setOption(option31)
|
|
|
|
|
|
})
|
|
|
|
|
|
/* 无数据显示 */
|
|
var option32 = {
|
|
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: "#d7d7d7",
|
|
},
|
|
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: 0,
|
|
name: "0%",
|
|
label: {
|
|
position: "center",
|
|
fontSize: 18,
|
|
},
|
|
}, ],
|
|
}, ],
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var C2echartsYLeft = echarts.init(document.querySelector(".C2echartsYLeft"))
|
|
C2echartsYLeft.setOption(option32)
|
|
|
|
$(function(){
|
|
jiazai()
|
|
yewu()
|
|
})
|
|
|
|
/* 两个点击事件 */
|
|
$("#yearmb").click(function(){
|
|
$("#yearmb").attr("class",'ndmb truedcdb' )
|
|
$("#ducha").attr("class",'dcdb truendmb')
|
|
|
|
jiazai()
|
|
})
|
|
|
|
$("#ducha").click(function(){
|
|
$("#ducha").attr("class",'ndmb truendmb')
|
|
$("#yearmb").attr("class",'dcdb truedcdb')
|
|
jiazai2()
|
|
})
|
|
|
|
|
|
function jiazai(){
|
|
let tabehtml = ""
|
|
tabehtml += '<tr>'+
|
|
'<td>开展未来社区创建工作</td>'+
|
|
'<td>城市跟新和区域发展处</td>'+
|
|
'<td><div class="zhengchangBu"> <div class="zhengchangBuDiv"> <img style="width: 20px;height: 20px;" src="./image/正常.svg" alt="">正常</div></div> '+
|
|
'</td>'+
|
|
'</tr>'+
|
|
'<tr>'+
|
|
'<td>全面推进城镇老旧小区改造</td>'+
|
|
'<td>物业和房屋管理处</td>'+
|
|
'<td><div class="zhengchangBu"> <div class="zhengchangBuDiv"> <img style="width: 20px;height: 20px;" src="./image/正常.svg" alt="">正常</div></div> '+
|
|
'</td>'+
|
|
'</tr>'+
|
|
'<tr>'+
|
|
'<td>省级美丽宜居示范村建设</td>'+
|
|
'<td>村镇建设处</td>'+
|
|
'<td><div class="zhengchangBu"> <div class="zhengchangBuDiv"> <img style="width: 20px;height: 20px;" src="./image/正常.svg" alt="">正常</div></div> '+
|
|
'</td>'+
|
|
'</tr>'+
|
|
'<tr>'+
|
|
'<td>新建改造污水管网</td>'+
|
|
'<td>村镇建设处</td>'+
|
|
'<td> <div class="zhengchangBu"> <div class="zhengchangBuDiv"> <img style="width: 20px;height: 20px;" src="./image/正常.svg" alt="">正常</div></div> '+
|
|
'</td>'+'</tr>'
|
|
$(".tableListAll tbody").html(tabehtml)
|
|
}
|
|
|
|
function jiazai2(){
|
|
let tabehtml = ""
|
|
tabehtml +=
|
|
'<tr><td colspan=3 style="text-align:center"> 暂无数据</td></tr>';
|
|
|
|
$(".tableListAll tbody").html(tabehtml)
|
|
}
|
|
|
|
$("#yewu").click(function(){
|
|
yewu()
|
|
})
|
|
$("#renwu").click(function(){
|
|
renwu()
|
|
})
|
|
|
|
|
|
|
|
function yewu(){
|
|
$("#yewu").attr("class",'trueRenwu')
|
|
$("#renwu").attr("class",'fasleRenwu')
|
|
$("#echartTitleMsg").css("display",'block')
|
|
$("#echartTitleNone").css("display",'none')
|
|
}
|
|
function renwu(){
|
|
$("#renwu").attr("class",'trueRenwu')
|
|
$("#yewu").attr("class",'fasleRenwu')
|
|
$("#echartTitleNone").css("display",'block')
|
|
$("#echartTitleMsg").css("display",'none')
|
|
} |