1492 lines
32 KiB
JavaScript
1492 lines
32 KiB
JavaScript
// // home页面所有echart图表
|
||
|
||
// let city_myChart1 = echarts.init(document.querySelector(".cityEchart1"))
|
||
// 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: ["2020.5", "6", "7", "8", "9", "10", "11", "12", "2021.1", "2", "3", "4", "5", "6", "7"],
|
||
// 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: [1.4, 0.8, 0.4, 0.7, 0.3, 0.1, 0, -0.2, 0.5, 0.5, 0.8, 0.6, 0.4, 0.6, 0.4],
|
||
// itemStyle: {
|
||
// color: "#FFC12A",
|
||
// },
|
||
// },
|
||
// {
|
||
// name: "二手住宅",
|
||
// type: "line",
|
||
// data: [1.1, 1.2, 1.1, 0.9, 0.8, 0.7, 0.4, 0.6, 0.9, 0.7, 0.8, 0.7, 0.4, 0.5, 0.3],
|
||
// itemStyle: {
|
||
// color: "#007FF3",
|
||
// },
|
||
// },
|
||
// ],
|
||
// }
|
||
// city_myChart1.setOption(cityOption1)
|
||
|
||
// let city_myChart2 = echarts.init(document.querySelector(".cityEchart2"))
|
||
// 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: ["海曙", "江北", "北仑", "镇海", "鄞州", "奉化", "象山", "宁海", "余姚", "慈溪"],
|
||
// axisTick: {
|
||
// alignWithLabel: true,
|
||
// },
|
||
// },
|
||
// ],
|
||
// yAxis: {
|
||
// type: "value",
|
||
// // show: false,
|
||
// labelLine: {
|
||
// show: false,
|
||
// },
|
||
// axisTick: {
|
||
// show: false,
|
||
// },
|
||
// axisLine: {
|
||
// show: false,
|
||
// },
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: "新建/改建",
|
||
// type: "bar",
|
||
// barWidth: "30%",
|
||
// data: [1934, 1744, 4918, 1639, 5296, 3365, 2748, 971, 7998, 1242],
|
||
// itemStyle: {
|
||
// color: "#0F93FF",
|
||
// },
|
||
// },
|
||
// {
|
||
// name: "盘活",
|
||
// type: "bar",
|
||
// barWidth: "30%",
|
||
// data: [2506, 193, 2633, 1158, 5362, 170, 62, 77, 411, 411],
|
||
// itemStyle: {
|
||
// color: "#DAEEFF",
|
||
// },
|
||
// },
|
||
// ],
|
||
// }
|
||
// city_myChart2.setOption(cityOption2)
|
||
|
||
// let city_myChart3 = echarts.init(document.querySelector(".cityEchart3"))
|
||
// 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: 42647,
|
||
// name: "公租房实物配租",
|
||
// itemStyle: {
|
||
// color: "#64CC80",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 31541,
|
||
// name: "公租房租赁补贴",
|
||
// itemStyle: {
|
||
// color: "#F5B453",
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// }
|
||
// city_myChart3.setOption(cityOption3)
|
||
|
||
// let myChart01 = echarts.init(document.querySelector(".echart01"))
|
||
// 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: 8177,
|
||
// name: "中心城区建成面积",
|
||
// itemStyle: {
|
||
// color: "#64CC80",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 3189,
|
||
// name: "县（市）建成面积",
|
||
// itemStyle: {
|
||
// color: "#F5B453",
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart01.setOption(option01)
|
||
|
||
// let myChart02 = echarts.init(document.querySelector(".echart02"))
|
||
// let option02 = {
|
||
// xAxis: {
|
||
// type: "value",
|
||
// // boundaryGap: [0, 0.05],
|
||
// show: false,
|
||
// max: 100,
|
||
// },
|
||
// yAxis: {
|
||
// type: "category",
|
||
// show: false,
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: "2021",
|
||
// type: "bar",
|
||
// data: ["58"],
|
||
// itemStyle: {
|
||
// color: "#269BFF",
|
||
// borderRadius: 20,
|
||
// },
|
||
// barWidth: "10",
|
||
// showBackground: true,
|
||
// backgroundStyle: {
|
||
// borderRadius: 100,
|
||
// // color: "red",
|
||
// },
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart02.setOption(option02)
|
||
|
||
// let myChart03 = echarts.init(document.querySelector(".echart03"))
|
||
// 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: ["海曙", "江北", "北仑", "镇海", "鄞州", "奉化", "象山", "宁海", "余姚", "慈溪", "高新", "大榭"],
|
||
// 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: [82, 28, 9, 32, 30, 5, 5, 6, 17, 17, 1, 1],
|
||
// },
|
||
// {
|
||
// name: "已开工项目",
|
||
// type: "bar",
|
||
// barWidth: "30%",
|
||
// itemStyle: {
|
||
// color: "#1897FF",
|
||
// },
|
||
// data: [54, 27, 6, 31, 17, 5, 5, 4, 16, 17, 1, 1],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart03.setOption(option03)
|
||
|
||
// let myChart04 = echarts.init(document.querySelector(".echart04"))
|
||
// 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: ["海曙", "江北", "北仑", "镇海", "鄞州", "奉化", "象山", "宁海", "余姚", "慈溪", "高新", "大榭"],
|
||
// 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: [449.06, 181.44, 17.73, 162.72, 277.96, 36.33, 27.44, 11.45, 44.25, 44.43, 5.28, 3.78],
|
||
// },
|
||
// {
|
||
// name: "已开工项目",
|
||
// type: "bar",
|
||
// barWidth: "30%",
|
||
// itemStyle: {
|
||
// color: "#1897FF",
|
||
// },
|
||
// data: [314.17, 172.63, 8.53, 151.16, 164.79, 36.33, 27.44, 6.79, 43.97, 44.43, 5.28, 3.78],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart04.setOption(option04)
|
||
|
||
// 农村建设管理（2021年）--示范村建设
|
||
// Area:地区 BeautifulArea：美丽宜居 ReformRural：农房改造
|
||
let myChart06 = echarts.init(document.querySelector(".echart06"))
|
||
var community = "http://118.178.224.202:8024/api/community"
|
||
$.get(community, function (data) {
|
||
var d = []
|
||
d = data.data
|
||
let arryArea = []
|
||
let arryBeautifulArea = []
|
||
let arryReformRural = []
|
||
d.forEach(function (item) {
|
||
arryArea.push(item.area)
|
||
arryBeautifulArea.push(item.beautifulArea)
|
||
arryReformRural.push(item.reformRural)
|
||
})
|
||
let option06 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
confine: true,
|
||
formatter: "{b}" + " " + "{a0}" + ": " + "{c0}" + " " + "{a1}" + ": " + "{c1}",
|
||
|
||
},
|
||
legend: {
|
||
show: true,
|
||
selectedMode: false,
|
||
itemWidth: 15,
|
||
itemHeight:10,
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: "#6e7178",
|
||
},
|
||
top: 5,
|
||
left: 0,
|
||
|
||
// left: "left",
|
||
},
|
||
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 10,
|
||
// top: "10%",
|
||
top: 50,
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart62").width(), -13],
|
||
formatter: "{c}个",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
// data: ["海曙", "江北", "北仑", "镇海", "鄞州", "奉化", "象山", "宁海", "余姚", "慈溪", "高新", "大榭"],
|
||
data: arryArea,
|
||
|
||
axisLabel: {
|
||
align: "left",
|
||
verticalAlign: "bottom",
|
||
lineHeight: 75,
|
||
margin: -0,
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
// tick是刻度，tickeline刻度线，axis是轴，
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisTickLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
show: false,
|
||
},
|
||
],
|
||
|
||
series: [
|
||
{
|
||
name: "美丽宜居",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
|
||
itemStyle: {
|
||
color: "#3388FF",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
// data: [82, 28, 9, 32, 30, 5, 5, 6, 17, 17, 1, 1],
|
||
data: arryBeautifulArea,
|
||
},
|
||
{
|
||
name: "农房改造",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
|
||
itemStyle: {
|
||
color: "#3BA272",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
// data: [54, 27, 6, 31, 17, 5, 5, 4, 16, 17, 1, 1],
|
||
data: arryReformRural,
|
||
barGap: "250%",
|
||
},
|
||
],
|
||
}
|
||
myChart06.setOption(option06)
|
||
})
|
||
|
||
// 农村建设管理（2021年）--传统村落风貌保护提升
|
||
// Area:地区 BeautifulArea：美丽宜居 ReformRural：农房改造
|
||
let myChart07 = echarts.init(document.querySelector(".echart07"))
|
||
var community2 = "http://118.178.224.202:8024/api/community2"
|
||
$.get(community2, function (data) {
|
||
var d = []
|
||
d = data.data
|
||
let arryArea = []
|
||
let arryBeautifulArea = []
|
||
let arryReformRural = []
|
||
d.forEach(function (item) {
|
||
arryArea.push(item.area)
|
||
arryBeautifulArea.push(item.beautifulArea)
|
||
arryReformRural.push(item.reformRural)
|
||
})
|
||
let option07 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
confine: true,
|
||
formatter: "{b}" + " " + "{a0}" + ": " + "{c0}" + " " + "{a1}" + ": " + "{c1}",
|
||
|
||
},
|
||
|
||
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// // 坐标轴指示器，坐标轴触发有效
|
||
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||
// },
|
||
// confine: true,
|
||
// },
|
||
|
||
|
||
legend: {
|
||
show: true,
|
||
selectedMode: false,
|
||
itemWidth: 15,
|
||
itemHeight:10,
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: "#6e7178",
|
||
},
|
||
top: 5,
|
||
left: 0,
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
top: "20%",
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
|
||
data: arryArea,
|
||
|
||
axisLabel: {
|
||
align: "left",
|
||
verticalAlign: "bottom",
|
||
lineHeight: 70,
|
||
margin: -0,
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
// tick是刻度，tickeline刻度线，axis是轴，
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisTickLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
xAxis: [
|
||
{
|
||
show: false,
|
||
},
|
||
],
|
||
|
||
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart62").width(), -13],
|
||
formatter: "{c}个",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
series: [
|
||
{
|
||
name: "美丽宜居",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
|
||
itemStyle: {
|
||
color: "#3388FF",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
|
||
data: arryBeautifulArea,
|
||
},
|
||
{
|
||
name: "农房改造",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
|
||
itemStyle: {
|
||
color: "#3BA272",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
|
||
data: arryReformRural,
|
||
barGap: "250%",
|
||
},
|
||
],
|
||
}
|
||
myChart07.setOption(option07)
|
||
})
|
||
|
||
// 区县市完成率
|
||
// 村镇污水治理（2021年）
|
||
// Area:地区 SewageNetworks：新建 / 改造污水管网 SewagePlant：开工建设农村污水处理设施 Standardized：成20T / D以上设施标准化运维
|
||
let myChart08 = echarts.init(document.querySelector(".echart08"))
|
||
var village = "http://118.178.224.202:8024/api/village"
|
||
$.get(village, function (data) {
|
||
var d = []
|
||
d = data.data
|
||
let arryArea = []
|
||
let arrySewageNetworks = []
|
||
let arrySewagePlant = []
|
||
let arryStandardized = []
|
||
let countSewageNetworks = 0
|
||
let countSewagePlant = 0
|
||
let countStandardized = 0
|
||
d.forEach(function (item) {
|
||
arryArea.push(item.area)
|
||
arrySewageNetworks.push(item.sewageNetworks)
|
||
arrySewagePlant.push(item.sewagePlant)
|
||
arryStandardized.push(item.standardized)
|
||
countSewageNetworks += item.sewageNetworks
|
||
countSewagePlant += item.sewagePlant
|
||
countStandardized += item.standardized
|
||
})
|
||
let result = `<ul><li>新建/改造污水管网<b>${countSewageNetworks}</b>公里</li><li>开工建设农村污水处理设施<b>${countSewagePlant}</b>个</li><li>成20T/D以上设施标准化运维<b>${countStandardized}</b>个</li></ul>`
|
||
$("#czwszlcount").empty().append(result)
|
||
let option08 = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
confine: true,
|
||
},
|
||
legend: {
|
||
selectedMode: false,
|
||
itemWidth: 15,
|
||
itemHeight:10,
|
||
left: "0",
|
||
top: 0,
|
||
textStyle: {
|
||
fontSize: 13,
|
||
color: "#6e7178",
|
||
},
|
||
},
|
||
grid: {
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 10,
|
||
top: 100,
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
// type : 'value',
|
||
scale : true,
|
||
max : 12,
|
||
min : 0,
|
||
splitNumber : 1,
|
||
|
||
data: arryArea,
|
||
|
||
axisLabel: {
|
||
align: "left",
|
||
verticalAlign: "bottom",
|
||
lineHeight: 100,
|
||
margin: 0,
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
// tick是刻度，tickeline刻度线，axis是轴，
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisTickLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "left",
|
||
align: "right",
|
||
offset: [$(".echart62").width(), -13],
|
||
// formatter: "{c}个",
|
||
fontSize: 14,
|
||
color: "#6e7178",
|
||
},
|
||
series: [
|
||
{
|
||
name: "新建改造污水管网",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
// barGap:'-30%',/*多个并排柱子设置柱子之间的间距*/
|
||
// barCategoryGap:'-20%',/*多个并排柱子设置柱子之间的间距*/
|
||
// data: [29.41, 60, 100, 112.5, 120, 36.67, 180, 46.67, 106.25, 52, 0, 60, 0],
|
||
data: arrySewageNetworks,
|
||
itemStyle: {
|
||
color: "#3388FF",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
label: {
|
||
formatter: "{c}公里",
|
||
},
|
||
},
|
||
{
|
||
name: "新建改造农村生活污水处理设施",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
// data: [13.33, 17.24, 180, 0, 109.09, 54.55, 94.74, 65.85, 75, 89.66, 0, 0, 75],
|
||
data: arrySewagePlant,
|
||
itemStyle: {
|
||
color: "#FC8452",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
label: {
|
||
formatter: "{c}公里",
|
||
},
|
||
},
|
||
{
|
||
name: "20T/D以上设施运维",
|
||
type: "bar",
|
||
barWidth: 10,
|
||
barGap:'260%',
|
||
// data: [101.54, 114.75, 76.19, 116.67, 59.74, 54.55, 52.42, 50, 75.86, 80, 57.14, 88.89, 100],
|
||
data: arryStandardized,
|
||
itemStyle: {
|
||
color: "#FECC5D",
|
||
borderRadius: 5,
|
||
},
|
||
showBackground: {
|
||
show: true,
|
||
},
|
||
backgroundStyle: {
|
||
color: "#E6F1FF",
|
||
borderRadius: 5,
|
||
},
|
||
label: {
|
||
formatter: "{c}公里",
|
||
},
|
||
},
|
||
],
|
||
}
|
||
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 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: ["2020-6", "7", "8", "9", "10", "11", "12", "2021-1-2", "3", "4", "5", "6", "7"],
|
||
// 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: [176.5, 177, 158.7, 207.3, 133.5, 132.6, 142.7, 246.7, 193.7, 169.1, 190.5, 245, 188.4],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart09.setOption(option09)
|
||
|
||
// let myChart10 = echarts.init(document.querySelector(".echart10"))
|
||
// 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: ["2020-6", "7", "8", "9", "10", "11", "12", "2021-1-2", "3", "4", "5", "6", "7"],
|
||
// 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: [239.7, 190.2, 189.5, 159, 160.8, 145.9, 186.1, 230.2, 187.1, 164.6, 152.8, 202.3, 111.3],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart10.setOption(option10)
|
||
|
||
// let myChart011 = echarts.init(document.querySelector(".echart011"))
|
||
// 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: [
|
||
// {
|
||
// value: 49,
|
||
// name: "A级",
|
||
// itemStyle: {
|
||
// color: "#64CC80",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 164,
|
||
// name: "B级",
|
||
// itemStyle: {
|
||
// color: "#0E216D",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 225,
|
||
// name: "C级",
|
||
// itemStyle: {
|
||
// color: "#0E8599",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 48,
|
||
// name: "D级",
|
||
// itemStyle: {
|
||
// color: "#8417D8",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 1,
|
||
// name: "E级",
|
||
// itemStyle: {
|
||
// color: "#F5B453",
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart011.setOption(option011)
|
||
|
||
// let myChart012 = echarts.init(document.querySelector(".echart012"))
|
||
// 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: [393, 785.6, 806.3, 1070.3],
|
||
// },
|
||
// {
|
||
// name: "2021",
|
||
// type: "bar",
|
||
// barWidth: 10,
|
||
// itemStyle: {
|
||
// color: "#FFA333",
|
||
// },
|
||
// data: [576.3, 851.6, 0, 0],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart012.setOption(option012)
|
||
|
||
// // 小饼图
|
||
// let myChart13 = echarts.init(document.querySelector(".echart013"))
|
||
// 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: 1097.2,
|
||
// name: "税收收入",
|
||
// itemStyle: {
|
||
// color: "#FFA533",
|
||
// },
|
||
// // formatter: "{c}",
|
||
|
||
// labelLine: {
|
||
// show: false,
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 330.7,
|
||
// name: "非税收收入",
|
||
// itemStyle: {
|
||
// color: "#FFE74F",
|
||
// },
|
||
// labelLine: {
|
||
// show: false,
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart13.setOption(option13)
|
||
|
||
// let myChart14 = echarts.init(document.querySelector(".echart014"))
|
||
// 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: [
|
||
// {
|
||
// value: 3,
|
||
// name: "综合",
|
||
// itemStyle: {
|
||
// color: "#64CC80",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 84,
|
||
// name: "甲级",
|
||
// itemStyle: {
|
||
// color: "#AF2D10",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 74,
|
||
// name: "乙级",
|
||
// itemStyle: {
|
||
// color: "#F69B1D",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 31,
|
||
// name: "丙级",
|
||
// itemStyle: {
|
||
// color: "#F5B453",
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart14.setOption(option14)
|
||
|
||
// let myChart15 = echarts.init(document.querySelector(".echart015"))
|
||
// 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: [
|
||
// {
|
||
// value: 5,
|
||
// name: "综合",
|
||
// itemStyle: {
|
||
// color: "#64CC80",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 69,
|
||
// name: "甲级",
|
||
// itemStyle: {
|
||
// color: "#AF2D10",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 43,
|
||
// name: "乙级",
|
||
// itemStyle: {
|
||
// color: "#F69B1D",
|
||
// },
|
||
// },
|
||
// {
|
||
// value: 2,
|
||
// name: "丙级",
|
||
// itemStyle: {
|
||
// color: "#F5B453",
|
||
// },
|
||
// },
|
||
// ],
|
||
// },
|
||
// ],
|
||
// }
|
||
// myChart15.setOption(option15)
|
||
|
||
// 给隐藏的echart图表重新设置高
|
||
var resetWidth = function () {
|
||
$(".echart05").css("width", $(".provinceType").width())
|
||
$(".echart055").css("width", $(".provinceType").width())
|
||
$(".echart06").css("width", $(".provinceType").width())
|
||
$(".echart07").css("width", $(".provinceType").width())
|
||
$(".echart08").css("width", $(".provinceType").width())
|
||
$(".echart63").css("width", $(".nongcuncontent").width())
|
||
$(".echart64").css("width", $(".nongcuncontent").width())
|
||
$(".echart65").css("width", $(".nongcuncontent").width())
|
||
$(".echart51").css("width", $(".chengzhenbox").width())
|
||
$(".echart52").css("width", $(".chengzhenbox").width())
|
||
}
|
||
resetWidth()
|
||
|
||
window.onresize = function () {
|
||
resetWidth()
|
||
|
||
myChart05.resize()
|
||
myChart055.resize()
|
||
|
||
myChart06.resize()
|
||
myChart07.resize()
|
||
myChart08.resize()
|
||
myChart63.resize()
|
||
myChart64.resize()
|
||
myChart65.resize()
|
||
myChart51.resize()
|
||
myChart52.resize()
|
||
}
|