1656 lines
32 KiB
JavaScript
1656 lines
32 KiB
JavaScript
// home页面所有echart图表
|
||
|
||
//住房价格指数
|
||
let city_myChart1 = echarts.init(document.querySelector(".cityEchart1"))
|
||
$.get("http://118.178.224.202:8024/api/h-pindex",function(data){
|
||
var d = data.data
|
||
console.log("得到的价格指数的数据",data)
|
||
var yishou = countTotal(d,'ancHousing').toFixed(2)
|
||
var ershou = countTotal(d,'csHousing').toFixed(2)
|
||
/* $("#yishou").html(yishou)
|
||
$("#ershou").html(ershou) */
|
||
let cityOption1 = {
|
||
title: {
|
||
text: "",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter: `<div style="text-align:left">{b}月<br /> {a}(%)： {c}<br />{a1}(%)：{c1} </div>`,
|
||
},
|
||
legend: {},
|
||
// 关闭不显示
|
||
grid: {
|
||
// left: 0,
|
||
},
|
||
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data:d.map(function (item) {
|
||
return item['month']
|
||
}),
|
||
axisLabel: {
|
||
rotate: 45,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#007FF3",
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "%",
|
||
type: "value",
|
||
axisLabel: {
|
||
// formatter: "{value} %",
|
||
},
|
||
nameTextStyle: {
|
||
color: "#007FF3",
|
||
},
|
||
max: 1.5,
|
||
min: -0.5,
|
||
splitNumber: 5,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#007FF3",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
data: ["0", "0.5", "1", "1.5"],
|
||
},
|
||
series: [
|
||
{
|
||
name: "新建商品住宅",
|
||
type: "line",
|
||
|
||
data: d.map(function (item) {
|
||
return item['ancHousing']
|
||
}),
|
||
itemStyle: {
|
||
color: "#FFC12A",
|
||
},
|
||
},
|
||
{
|
||
name: "二手住宅",
|
||
type: "line",
|
||
data: d.map(function (item) {
|
||
return item['csHousing']
|
||
}),
|
||
itemStyle: {
|
||
color: "#007FF3",
|
||
},
|
||
},
|
||
],
|
||
}
|
||
city_myChart1.setOption(cityOption1)
|
||
|
||
|
||
})
|
||
|
||
/* 新增租赁套房 */
|
||
|
||
var url2 = "http://118.178.224.202:8024/api/new-retal"
|
||
let city_myChart2 = echarts.init(document.querySelector(".cityEchart2"))
|
||
|
||
$.get(url2,function(data){
|
||
let d = data.data
|
||
|
||
var xinjian = countTotal(d,'finish')
|
||
var leiji = countTotal(d,'aim')
|
||
|
||
$("#xinjian").html(xinjian)
|
||
$("#leiji").html(leiji)
|
||
|
||
|
||
let cityOption2 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomX",
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
|
||
height: 10,
|
||
width: "90%",
|
||
left: 20,
|
||
bottom: 15,
|
||
fillerColor: "#E6E6FA",
|
||
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
// {
|
||
// id: "dataZoomY",
|
||
// type: "slider",
|
||
// yAxisIndex: [0],
|
||
// filterMode: "empty",
|
||
// },
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: `<div style="text-align:left">{b} <br /> {a}：{c} <br /> {a1}：{c1} </div>`,
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
grid: {
|
||
bottom: 40,
|
||
left: 70,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
data: d.map(function(item){
|
||
return item['area']
|
||
}),
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
},
|
||
],
|
||
yAxis: {
|
||
type: "value",
|
||
// show: false,
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "新建/改建",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
data: d.map(function(item) {
|
||
return item['finish']
|
||
}),
|
||
itemStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
},
|
||
{
|
||
name: "盘活",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
data: d.map(function(item) {
|
||
return item['aim']
|
||
}),
|
||
itemStyle: {
|
||
color: "#DAEEFF",
|
||
},
|
||
},
|
||
],
|
||
}
|
||
city_myChart2.setOption(cityOption2)
|
||
|
||
|
||
|
||
})
|
||
|
||
/* 公租房供应 */
|
||
var url3 = "http://118.178.224.202:8024/api/new5"
|
||
let city_myChart3 = echarts.init(document.querySelector(".cityEchart3"))
|
||
|
||
$.get(url3,function(data){
|
||
/* var butie = countTotal(data.data,"")
|
||
*/
|
||
var butie = data.data[0].subsidy
|
||
var peizhu = data.data[0].rent
|
||
|
||
$("#butie").html(butie)
|
||
$("#peizhu").html(peizhu)
|
||
|
||
let cityOption3 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: true,
|
||
showContent: true,
|
||
formatter: `{b}：{c}({d}%)`,
|
||
},
|
||
legend: {
|
||
top: "0%",
|
||
left: "10%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["40%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
left: 92,
|
||
right: 93,
|
||
label: {
|
||
width: 100,
|
||
overflow: "break",
|
||
formatter: `{b}\n{d}%`,
|
||
positon: "outside",
|
||
fontSize: 14,
|
||
},
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||
emphasis: {
|
||
label: {
|
||
// formatter: `{c}%`,
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
minTurnAngle: 270,
|
||
},
|
||
|
||
data: [
|
||
{
|
||
value: butie,
|
||
name: "公租房租赁补贴",
|
||
itemStyle: {
|
||
color: "#64CC80",
|
||
},
|
||
},
|
||
{
|
||
value: peizhu,
|
||
name: "公租房实物配租",
|
||
itemStyle: {
|
||
color: "#F5B453",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
city_myChart3.setOption(cityOption3)
|
||
|
||
})
|
||
|
||
|
||
|
||
// 给隐藏的echart图表重新设置高
|
||
var resetWidth = function () {
|
||
$(".m4").css("width", ($(".main").width() - 40) * 0.32 * 0.95)
|
||
$(".m5").css("width", ($(".main").width() - 40) * 0.38 * 0.95)
|
||
$(".m62").css("width", ($(".main").width() - 40) * 0.6 * 0.56)
|
||
$(".m7").css("width", (($(".main").width() - 40) * 0.6 * 0.4 - 40) * 0.3)
|
||
$(".m8").css("width", ($(".main").width() - 40) * 0.33 * 0.9)
|
||
$(".m9").css("width", ($(".main").width() - 60) * 0.68 * 0.37)
|
||
let m4 = $(".m4").width()
|
||
// console.log(m4)
|
||
$(".cityEchart1").css("width", m4)
|
||
$(".cityEchart2").css("width", m4)
|
||
$(".cityEchart3").css("width", m4)
|
||
$(".echart01").css("width", m4)
|
||
$(".echart02").css("width", m4)
|
||
$(".echart03").css("width", m4)
|
||
$(".echart04").css("width", m4)
|
||
$(".echart05").css("width", m4)
|
||
$(".echart055").css("width", m4)
|
||
$(".echart06").css("width", m4)
|
||
$(".echart07").css("width", m4)
|
||
$(".echart08").css("width", m4)
|
||
let m5 = $(".m5").width()
|
||
// console.log(m5)
|
||
$(".echart09").css("width", m5)
|
||
$(".echart10").css("width", m5)
|
||
|
||
let m62 = $(".m62").width()
|
||
$(".echart012").css("width", m62)
|
||
// let m7 = $(".m7").width()
|
||
// $(".echart013").css("width", m7)
|
||
let m8 = $(".m8").width()
|
||
$(".echart011").css("width", m8)
|
||
$(".echart014").css("width", m8)
|
||
$(".echart015").css("width", m8)
|
||
let m9 = $(".m9").width()
|
||
// console.log("m9", m9)
|
||
$(".echart2").css("width", m9)
|
||
$(".echart3").css("width", m9)
|
||
}
|
||
resetWidth()
|
||
|
||
//基础设施建设
|
||
$.get("http://118.178.224.202:8024/api/new7",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 url5 = "http://118.178.224.202:8024/api/new8"
|
||
let myChart01 = echarts.init(document.querySelector(".echart01"))
|
||
|
||
$.get(url5,function(data){
|
||
|
||
$("#xinjianchneg").html(data.data[0].area)
|
||
$("#shijianchneg").html(data.data[0].area1)
|
||
|
||
let option01 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: true,
|
||
showContent: true,
|
||
formatter: `{b}：{c}({d}%)`,
|
||
},
|
||
legend: {
|
||
top: "0%",
|
||
left: "5%",
|
||
// itemStyle: {
|
||
// tooltip: true,
|
||
// },
|
||
},
|
||
|
||
label: {
|
||
width: 140,
|
||
overflow: "break",
|
||
formatter: `{b}\n{d}%`,
|
||
positon: "outside",
|
||
fontSize: 14,
|
||
},
|
||
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["40%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
left: 70,
|
||
right: 60,
|
||
data: [
|
||
{
|
||
value: data.data[0].area,
|
||
name: "中心城区建成面积",
|
||
itemStyle: {
|
||
color: "#64CC80",
|
||
},
|
||
},
|
||
{
|
||
value: data.data[0].area1,
|
||
name: "县（市）建成面积",
|
||
itemStyle: {
|
||
color: "#F5B453",
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
myChart01.setOption(option01)
|
||
|
||
|
||
})
|
||
|
||
/* 新建绿道 */
|
||
let myChart02 = echarts.init(document.querySelector(".echart02"))
|
||
|
||
var taskId43 = "244837774619930624"
|
||
var quotaCode43 = "Q249971129640398848"
|
||
var url7 = "https://sznbs.ningbo.gov.cn:89/nbszhjkzz/tojcms/getQuotaByTaksIdOrQuotaCode.do?parentQuotaCode=" + quotaCode43 + "&systemName=government"
|
||
$.post(url7, 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');
|
||
|
||
|
||
|
||
|
||
})
|
||
|
||
/* 新建绿道修改 */
|
||
|
||
$.get("http://118.178.224.202:8024/api/new7",function(data){
|
||
console.log("得到的新建绿道数据",data)
|
||
$("#lejiwc").html(data.data[0].total5);
|
||
$("#wclv").html(data.data[0].finish)
|
||
let option02 = {
|
||
xAxis: {
|
||
type: "value",
|
||
// boundaryGap: [0, 0.05],
|
||
show: false,
|
||
max: 100,
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
name: "2021",
|
||
type: "bar",
|
||
data: [data.data[0].finish],
|
||
itemStyle: {
|
||
color: "#269BFF",
|
||
borderRadius: 20,
|
||
},
|
||
barWidth: "10",
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
borderRadius: 100,
|
||
// color: "red",
|
||
},
|
||
},
|
||
],
|
||
}
|
||
myChart02.setOption(option02)
|
||
|
||
})
|
||
|
||
|
||
/* 老旧小区改造 */
|
||
var url6 = "http://118.178.224.202:8024/api/old-urban"
|
||
let myChart03 = echarts.init(document.querySelector(".echart03"))
|
||
|
||
$.get(url6,function(data){
|
||
var d = data.data
|
||
var kaigongshu = countTotal(d,"aim")
|
||
$("#kaigongshu").html(kaigongshu)
|
||
|
||
|
||
let option03 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomX",
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
|
||
height: 10,
|
||
width: "94%",
|
||
left: "3%",
|
||
bottom: 3,
|
||
fillerColor: "#E6E6FA",
|
||
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
grid: {
|
||
left: 40,
|
||
right: 20,
|
||
bottom: 30,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: data.data.map(item=>{
|
||
return item['area']
|
||
}),
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
nameTextStyle: {
|
||
fontStyle: "italic",
|
||
italic: "bottom",
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "今年目标",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#DAEEFF",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['aim']
|
||
}),
|
||
},
|
||
{
|
||
name: "已开工项目",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#1897FF",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['started']
|
||
}),
|
||
},
|
||
],
|
||
}
|
||
myChart03.setOption(option03)
|
||
|
||
})
|
||
|
||
var url8 = "http://118.178.224.202:8024/api/old-urban2"
|
||
let myChart04 = echarts.init(document.querySelector(".echart04"))
|
||
|
||
$.get(url8,function(data){
|
||
var d = data.data
|
||
|
||
var gaizaoshu = countTotal(d,"aim").toFixed(1)
|
||
$("#gaizaoshu").html(gaizaoshu)
|
||
|
||
let option04 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomX",
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
height: 10,
|
||
width: "94%",
|
||
left: "3%",
|
||
bottom: 3,
|
||
fillerColor: "#E6E6FA",
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
grid: {
|
||
bottom: 30,
|
||
left: 40,
|
||
right: 20,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: data.data.map(item=>{
|
||
return item['area']
|
||
}),
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
nameTextStyle: {
|
||
fontStyle: "italic",
|
||
italic: "bottom",
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "今年目标",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#DAEEFF",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['aim']
|
||
}),
|
||
},
|
||
{
|
||
name: "已开工项目",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#1897FF",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['started']
|
||
}),
|
||
},
|
||
],
|
||
}
|
||
myChart04.setOption(option04)
|
||
|
||
})
|
||
|
||
//美丽城镇建设
|
||
|
||
var url9 = "http://118.178.224.202:8024/api/custom-settlements"
|
||
|
||
$.get(url9,function(data){
|
||
$("#shengyangaban").html(countTotal(data.data,'provincialTown'))
|
||
$("#shiyangban").html(countTotal(data.data,'municipalTown'))
|
||
|
||
})
|
||
|
||
|
||
//示范村建设
|
||
|
||
var url10 = "http://118.178.224.202:8024/api/community"
|
||
let myChart06 = echarts.init(document.querySelector(".echart06"))
|
||
|
||
$.get(url10,function(data){
|
||
|
||
|
||
let option06 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomX",
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
|
||
height: 10,
|
||
width: "94%",
|
||
left: "3%",
|
||
bottom: 12,
|
||
fillerColor: "#E6E6FA",
|
||
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
grid: {
|
||
bottom: 40,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: data.data.map(item=>{
|
||
return item['area']
|
||
}),
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
nameTextStyle: {
|
||
fontStyle: "italic",
|
||
italic: "bottom",
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "美丽宜居",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#DAEEFF",
|
||
},
|
||
data:data.data.map(item=>{
|
||
return item['beautifulArea']
|
||
}),
|
||
},
|
||
{
|
||
name: "农房改造",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#1897FF",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['reformRural']
|
||
}),
|
||
},
|
||
],
|
||
}
|
||
myChart06.setOption(option06)
|
||
})
|
||
|
||
|
||
var url11 = "http://118.178.224.202:8024/api/community2"
|
||
let myChart07 = echarts.init(document.querySelector(".echart07"))
|
||
|
||
$.get(url11,function(data){
|
||
|
||
|
||
|
||
let option07 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomX",
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
|
||
height: 10,
|
||
width: "94%",
|
||
left: "3%",
|
||
bottom: 38,
|
||
fillerColor: "#E6E6FA",
|
||
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: data.data.map(item=>{
|
||
return item['area']
|
||
}),
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
nameTextStyle: {
|
||
fontStyle: "italic",
|
||
italic: "bottom",
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "美丽宜居",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#DAEEFF",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['beautifulArea']
|
||
}),
|
||
},
|
||
{
|
||
name: "农房改造",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#1897FF",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['reformRural']
|
||
}),
|
||
},
|
||
],
|
||
}
|
||
myChart07.setOption(option07)
|
||
|
||
})
|
||
|
||
|
||
|
||
|
||
// 区县市完成率
|
||
|
||
//村镇污水处理
|
||
let url12 = "http://118.178.224.202:8024/api/village"
|
||
let myChart08 = echarts.init(document.querySelector(".echart08"))
|
||
|
||
$.get(url12,function(data){
|
||
$("#xinianguan").html(countTotal(data.data,'sewageNetworks'))
|
||
$("#kaigongguan").html(countTotal(data.data,'sewagePlant'))
|
||
$("#yuneiguan").html(countTotal(data.data,'standardized'))
|
||
|
||
let option08 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomY",
|
||
type: "slider",
|
||
yAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
|
||
height: "86%",
|
||
width: 10,
|
||
top: "9%",
|
||
fillerColor: "#E6E6FA",
|
||
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
legend: {
|
||
left: "5%",
|
||
top: 0,
|
||
},
|
||
grid: {
|
||
left: 60,
|
||
bottom: 40,
|
||
},
|
||
xAxis: {
|
||
type: "value",
|
||
boundaryGap: [0, 0.01],
|
||
max: 180,
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#e1e1e1",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "black",
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: data.data.map(item=>{
|
||
return item['area']
|
||
}),
|
||
axisTick: {
|
||
lineStyle: {
|
||
color: "#1A95D2",
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "新建改造污水管网",
|
||
type: "bar",
|
||
data: data.data.map(item=>{
|
||
return item['sewageNetworks']
|
||
}),
|
||
itemStyle: {
|
||
color: "#3370FF",
|
||
},
|
||
},
|
||
{
|
||
name: "新建改造农村生活污水处理设施",
|
||
type: "bar",
|
||
data: data.data.map(item=>{
|
||
return item['sewagePlant']
|
||
}),
|
||
itemStyle: {
|
||
color: "#FFA333",
|
||
},
|
||
},
|
||
{
|
||
name: "20T/D以上设施运维",
|
||
type: "bar",
|
||
data: data.data.map(item=>{
|
||
return item['standardized']
|
||
}),
|
||
itemStyle: {
|
||
color: "#FFE74F",
|
||
},
|
||
},
|
||
],
|
||
}
|
||
myChart08.setOption(option08)
|
||
|
||
})
|
||
|
||
|
||
// 房地产业
|
||
|
||
// var w = $(".echart09").width()
|
||
// console.log(w)
|
||
// $(".echart09").css("width", w)
|
||
// $(".echart09").css("width", $(".echart09").width())
|
||
let myChart09 = echarts.init(document.querySelector(".echart09"))
|
||
let url13 = "http://118.178.224.202:8024/api/real-estate"
|
||
$.get(url13,function(data){
|
||
$("#touzi").html(countTotal(data.data,"investment").toFixed(2))
|
||
let option09 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomX",
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
|
||
height: 10,
|
||
width: "94%",
|
||
left: "3%",
|
||
bottom: 0,
|
||
fillerColor: "#E6E6FA",
|
||
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: `<div ">{b}月 <br />{a}：{c}`,
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
grid: {
|
||
bottom: 30,
|
||
right: 0,
|
||
left: 30,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: data.data.map(item=>{
|
||
return item['month']
|
||
}),
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
// label: {
|
||
// width: 100,
|
||
// formatter: `<span style='width:70px'>{b}</span>`,
|
||
// },
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "投资额（亿元）",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#007FF3",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['investment']
|
||
}),
|
||
},
|
||
],
|
||
}
|
||
myChart09.setOption(option09)
|
||
})
|
||
|
||
|
||
|
||
let myChart10 = echarts.init(document.querySelector(".echart10"))
|
||
let url14 = "http://118.178.224.202:8024/api/real-estate2"
|
||
|
||
$.get(url14,function(data){
|
||
$("#shmianji").html(countTotal(data.data,"saleableArea"))
|
||
|
||
let option10 = {
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomX",
|
||
type: "slider",
|
||
xAxisIndex: [0],
|
||
filterMode: "filter",
|
||
backgroundColor: "#FFFFFF",
|
||
|
||
handleSize: 20,
|
||
handleStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
|
||
height: 10,
|
||
width: "94%",
|
||
left: "3%",
|
||
bottom: 10,
|
||
fillerColor: "#E6E6FA",
|
||
|
||
// start: 0,
|
||
// end: 20,
|
||
moveHandleSize: 0,
|
||
},
|
||
],
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: `<div ">{b}月 <br />{a}：{c}`,
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
grid: {
|
||
bottom: 40,
|
||
right: 0,
|
||
left: 30,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: data.data.map(item=>{
|
||
return item['month']
|
||
}),
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
// label: {
|
||
// width: 100,
|
||
// formatter: `<span style='width:70px'>{b}</span>`,
|
||
// },
|
||
},
|
||
},
|
||
|
||
yAxis: {
|
||
type: "value",
|
||
axisLabel: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "面积(万㎡)",
|
||
type: "bar",
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
color: "#007FF3",
|
||
},
|
||
data: data.data.map(item=>{
|
||
return item['saleableArea']
|
||
}),
|
||
},
|
||
],
|
||
}
|
||
myChart10.setOption(option10)
|
||
|
||
})
|
||
|
||
let url15 = "http://118.178.224.202:8024/api/enterprise-credits"
|
||
let myChart011 = echarts.init(document.querySelector(".echart011"))
|
||
|
||
$.get(url15,function(data){
|
||
|
||
$(".aj").html(data.data[0].number);
|
||
$(".bj").html(data.data[1].number);
|
||
$(".cj").html(data.data[2].number);
|
||
$(".dj").html(data.data[3].number);
|
||
$(".ej").html(data.data[4].number);
|
||
|
||
let list = []
|
||
|
||
data.data.map(item=>{
|
||
list.push({
|
||
value:item.number,
|
||
name:item.level,
|
||
})
|
||
})
|
||
console.log("asdasdfasfasfasf",list)
|
||
let option011 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: true,
|
||
showContent: true,
|
||
formatter: `<span style="width:120px;text-align:center">{b}: {c} ({d}%)</span>`,
|
||
},
|
||
legend: {
|
||
top: "0%",
|
||
left: "5%",
|
||
// itemStyle: {
|
||
// tooltip: true,
|
||
// },
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["50%", "70%"],
|
||
avoidLabelOverlap: true,
|
||
top: 15,
|
||
bottom: 0,
|
||
label: {
|
||
overflow: "break",
|
||
formatter: `{b}\n{d}%`,
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
},
|
||
minShowLabelAngle: 15,
|
||
data: list,
|
||
},
|
||
],
|
||
}
|
||
myChart011.setOption(option011)
|
||
|
||
})
|
||
|
||
|
||
|
||
let url22 = "http://118.178.224.202:8024/api/construction"
|
||
let myChart012 = echarts.init(document.querySelector(".echart012"))
|
||
|
||
$.get(url22,function(data){
|
||
console.log("得到的季度数据",data)
|
||
let list1 = []
|
||
let list2 = []
|
||
data.data.map(item=>{
|
||
if(item.data == '2020'){
|
||
list1.push(item.value)
|
||
}else{
|
||
if(item.value){
|
||
item.value = item.value
|
||
}else{
|
||
item.value= 0
|
||
}
|
||
list2.push(item.value)
|
||
|
||
}
|
||
})
|
||
let option012 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: `<div>{b}<br />{a}：{c}<br />{a1}：{c1}`,
|
||
},
|
||
legend: {
|
||
top: "5%",
|
||
left: "5%",
|
||
itemStyle: {
|
||
tooltip: true,
|
||
},
|
||
},
|
||
grid: {
|
||
left: 40,
|
||
right: 0,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: ["第一季度", "第二季度", "第三季度", "第四季度"],
|
||
axisTick: {
|
||
alignWithLabel: true,
|
||
},
|
||
nameTextStyle: {
|
||
fontStyle: "italic",
|
||
italic: "bottom",
|
||
},
|
||
},
|
||
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "",
|
||
axisLabel: {
|
||
show: true,
|
||
color: "black",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
name: "",
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "2020",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#0F93FF",
|
||
},
|
||
data: list1
|
||
},
|
||
{
|
||
name: "2021",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
itemStyle: {
|
||
color: "#FFA333",
|
||
},
|
||
data: list2,
|
||
},
|
||
],
|
||
}
|
||
myChart012.setOption(option012)
|
||
|
||
})
|
||
|
||
// 小饼图
|
||
let myChart13 = echarts.init(document.querySelector(".echart013"))
|
||
let url24 = "http://118.178.224.202:8024/api/new10"
|
||
$.get(url24,function(data){
|
||
let zong = Number(data.data[0].in) + Number(data.data[0].out)
|
||
$("#zongcanzhi").html(zong)
|
||
$("#shengzhi").html(data.data[0].in)
|
||
$("#waizhi").html(data.data[0].out)
|
||
|
||
let option13 = {
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: true,
|
||
showContent: true,
|
||
formatter: `<span style="width:200px;text-align:center">{a}<br /> {b}: {c}({d}%)</span>`,
|
||
},
|
||
avoidLabelOverlap: true,
|
||
series: [
|
||
{
|
||
name: "财政收入",
|
||
type: "pie",
|
||
radius: "50%",
|
||
emphasis: {
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
|
||
data: [
|
||
{
|
||
value: data.data[0].in,
|
||
name: "税收收入",
|
||
itemStyle: {
|
||
color: "#FFA533",
|
||
},
|
||
// formatter: "{c}",
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
value: data.data[0].out,
|
||
name: "非税收收入",
|
||
itemStyle: {
|
||
color: "#FFE74F",
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
myChart13.setOption(option13)
|
||
})
|
||
|
||
|
||
//建筑企业数据
|
||
let url25 = "http://118.178.224.202:8024/api/new66"
|
||
|
||
$.get(url25,function(data){
|
||
$("#jianzhum").html(data.data[0].area)
|
||
$("#zhaimian").html(data.data[1].area)
|
||
$("#zhuangmina").html(data.data[2].area)
|
||
$("#zhuangmina2").html(data.data[3].area)
|
||
})
|
||
|
||
//表单中的数据
|
||
let url26 = "http://118.178.224.202:8024/api/new6"
|
||
|
||
$.get(url26,function(data){
|
||
$("#tableListText").append("<tr><td>"+ data.data[0].number +"家</td><td>"+ data.data[1].number +"家</td>"+
|
||
"<td>"+ data.data[2].number +"家</td><td>"+ data.data[3].number +"家</td></tr>")
|
||
})
|
||
|
||
let url20 = "http://118.178.224.202:8024/api/rsad-enterprise"
|
||
let myChart14 = echarts.init(document.querySelector(".echart014"))
|
||
|
||
$.get(url20,function(data){
|
||
$(".zongs").html(countTotal(data.data,'number'));
|
||
$(".zhs").html(data.data[0].number);
|
||
$(".jjs").html(data.data[1].number);
|
||
$(".yjs").html(data.data[2].number);
|
||
$(".bjs").html(data.data[3].number);
|
||
|
||
|
||
let list = []
|
||
|
||
data.data.map(item=>{
|
||
list.push({
|
||
value:item.number,
|
||
name:item.rank,
|
||
})
|
||
})
|
||
|
||
let option14 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: true,
|
||
showContent: true,
|
||
formatter: `<span style="width:120px;text-align:center">{b}: {c} ({d}%)</span>`,
|
||
},
|
||
legend: {
|
||
top: "0%",
|
||
left: "5%",
|
||
// itemStyle: {
|
||
// tooltip: true,
|
||
// },
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["50%", "70%"],
|
||
top: 15,
|
||
bottom: 0,
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: true,
|
||
// fontSize: 16,
|
||
},
|
||
|
||
labelLine: {
|
||
show: true,
|
||
},
|
||
label: {
|
||
overflow: "break",
|
||
formatter: `{b}\n{d}%`,
|
||
},
|
||
data: list,
|
||
},
|
||
],
|
||
}
|
||
myChart14.setOption(option14)
|
||
|
||
})
|
||
|
||
|
||
let url21 = "http://118.178.224.202:8024/api/res-enterprise"
|
||
let myChart15 = echarts.init(document.querySelector(".echart015"))
|
||
|
||
$.get(url21,function(data){
|
||
|
||
$(".zongs2").html(countTotal(data.data,'number'));
|
||
$(".zhs2").html(data.data[0].number);
|
||
$(".jjs2").html(data.data[1].number);
|
||
$(".yjs2").html(data.data[2].number);
|
||
$(".bjs2").html(data.data[3].number);
|
||
let list = []
|
||
|
||
data.data.map(item=>{
|
||
list.push({
|
||
value:item.number,
|
||
name:item.rank,
|
||
})
|
||
})
|
||
|
||
|
||
let option15 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
show: true,
|
||
showContent: true,
|
||
formatter: `<span style="width:120px;text-align:center">{b}: {c} ({d}%)</span>`,
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
left: 0,
|
||
bottom: 70,
|
||
// itemStyle: {
|
||
// tooltip: true,
|
||
// },
|
||
},
|
||
label: {
|
||
overflow: "break",
|
||
formatter: `{b}\n{d}%`,
|
||
},
|
||
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
radius: ["50%", "70%"],
|
||
avoidLabelOverlap: false,
|
||
top: 15,
|
||
bottom: 0,
|
||
label: {
|
||
show: true,
|
||
// fontSize: 16,
|
||
},
|
||
|
||
labelLine: {
|
||
show: true,
|
||
},
|
||
data: list,
|
||
},
|
||
],
|
||
}
|
||
myChart15.setOption(option15)
|
||
|
||
})
|
||
|
||
|
||
|
||
/* window.onresize = function () {
|
||
resetWidth()
|
||
|
||
myChart05.resize()
|
||
myChart055.resize()
|
||
myChart2.resize()
|
||
myChart3.resize()
|
||
myChart42.resize()
|
||
myChart40.resize()
|
||
myChart41.resize()
|
||
myChart43.resize()
|
||
|
||
myChart44.resize()
|
||
myChart45.resize()
|
||
myChart46.resize()
|
||
myChart47.resize()
|
||
myChart48.resize()
|
||
|
||
myChart51.resize()
|
||
myChart52.resize()
|
||
|
||
myChart71.resize()
|
||
myChart72.resize()
|
||
myChart73.resize()
|
||
myChart74.resize()
|
||
|
||
myChart11.resize()
|
||
myChart12.resize()
|
||
|
||
myChart81.resize()
|
||
myChart82.resize()
|
||
myChart83.resize()
|
||
myChart84.resize()
|
||
|
||
myChart31.resize()
|
||
myChart32.resize()
|
||
myChart33.resize()
|
||
myChart34.resize()
|
||
|
||
myChart61.resize()
|
||
myChart62.resize()
|
||
myChart63.resize()
|
||
myChart64.resize()
|
||
myChart65.resize()
|
||
|
||
// myChart1.resize()
|
||
|
||
city_myChart1.resize()
|
||
city_myChart2.resize()
|
||
city_myChart3.resize()
|
||
|
||
myChart01.resize()
|
||
myChart02.resize()
|
||
myChart03.resize()
|
||
myChart04.resize()
|
||
|
||
myChart06.resize()
|
||
myChart07.resize()
|
||
myChart08.resize()
|
||
myChart09.resize()
|
||
myChart10.resize()
|
||
myChart011.resize()
|
||
myChart012.resize()
|
||
myChart13.resize()
|
||
myChart14.resize()
|
||
myChart15.resize()
|
||
}
|
||
*/ |