测试文件
This commit is contained in:
Wjl
54
portal/h5/cunzhen/1.css
Normal file
54
portal/h5/cunzhen/1.css
Normal file
@@ -0,0 +1,54 @@
|
||||
.cunzhen {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 20px;
|
||||
visibility: hidden;
|
||||
background: #ffffff;
|
||||
height: 720px;
|
||||
width: 83.5%;
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
.cunzhen h3 {
|
||||
text-align: left;
|
||||
padding: 10px 20px;
|
||||
padding-left: 20px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
.cunzhen b {
|
||||
margin: 0 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.cunzhen > div {
|
||||
box-shadow: 0 0 1px 1px #e1e1e1;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cunzhen > div .flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.cunzhen > div .flex .left {
|
||||
width: 40%;
|
||||
}
|
||||
.cunzhen > div .flex .left > :nth-child(1) {
|
||||
width: 80%;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cunzhen > div .flex .left span {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.cunzhen > div .flex > :nth-child(2) {
|
||||
width: 60%;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cunzhen > div .flex > :nth-child(3) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
color: black;
|
||||
}
|
||||
355
portal/h5/cunzhen/1.js
Normal file
355
portal/h5/cunzhen/1.js
Normal file
@@ -0,0 +1,355 @@
|
||||
|
||||
var myChart71 = echarts.init(document.querySelector(".echart71"))
|
||||
var myChart72 = echarts.init(document.querySelector(".echart72"))
|
||||
|
||||
$.post("https://sznbs.ningbo.gov.cn:89/nbszhjkzz/tojcms/getQuotaByTaksIdOrQuotaCode.do?parentQuotaCode=Q233995772651192323&systemName=government",function(data){
|
||||
var d = unique(data.infoList)
|
||||
var alls = countTotal(d,"targetValue")
|
||||
$("#wushuizong").html(alls)
|
||||
|
||||
var option71 = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: false,
|
||||
showContent: true,
|
||||
},
|
||||
|
||||
series: [{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: ["70%", "90%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
// position: "center",
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [{
|
||||
value: alls,
|
||||
name: "100%",
|
||||
label: {
|
||||
position: "center",
|
||||
fontSize: 18,
|
||||
color: "#FE6900",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#FE6900",
|
||||
},
|
||||
}, ],
|
||||
}, ],
|
||||
}
|
||||
myChart71.setOption(option71)
|
||||
|
||||
//污水改造柱状图
|
||||
|
||||
var option72 = {
|
||||
legend: {
|
||||
show: true,
|
||||
top: 5,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#797979",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: "{b}" + "{a0}" + ": " + "{c0}",
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "0%",
|
||||
bottom: 20,
|
||||
top: "12%",
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis: [{
|
||||
type: "value",
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D5D5DF",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
//网格线
|
||||
lineStyle: {
|
||||
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
|
||||
},
|
||||
show: false, //隐藏或显示
|
||||
},
|
||||
axisTick: { show: true }, //坐标轴刻度
|
||||
axisLine: { show: true }, //坐标轴轴线
|
||||
}, ],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
margin: 13,
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
"海曙区",
|
||||
"江北区",
|
||||
"北仑区",
|
||||
"镇海区",
|
||||
"鄞州区",
|
||||
"奉化区",
|
||||
"象山县",
|
||||
"宁海县",
|
||||
"余姚市",
|
||||
"慈溪市",
|
||||
"东钱湖",
|
||||
"杭州湾",
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
name: "目标值",
|
||||
type: "bar",
|
||||
barWidth: 20, //柱图宽度
|
||||
color: "#76ddfb",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2690f2", //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#2690f2", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
data: d.map(item=>{
|
||||
return item["targetValue"]
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "实际值",
|
||||
type: "bar",
|
||||
barWidth: 20, //柱图宽度
|
||||
color: "#76ddfb",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#32c565", //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#32c565", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
data: d.map(item=>{
|
||||
return item["currentValue"]
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart72.setOption(option72)
|
||||
|
||||
})
|
||||
|
||||
var myChart73 = echarts.init(document.querySelector(".echart73"))
|
||||
var myChart74 = echarts.init(document.querySelector(".echart74"))
|
||||
|
||||
$.post("https://sznbs.ningbo.gov.cn:89/nbszhjkzz/tojcms/getQuotaByTaksIdOrQuotaCode.do?parentQuotaCode=Q233987370675945475&systemName=government",function(data){
|
||||
let d = unique(data.infoList)
|
||||
let alls = countTotal(d,"targetValue")
|
||||
$("#ywmub").html(alls)
|
||||
var option73 = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: false,
|
||||
showContent: true,
|
||||
},
|
||||
series: [{
|
||||
type: "pie",
|
||||
radius: ["70%", "90%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
// position: "center",
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [{
|
||||
value: alls,
|
||||
name: alls/alls*100 + "%",
|
||||
label: {
|
||||
position: "center",
|
||||
fontSize: 18,
|
||||
color: "#31C463",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#31C463",
|
||||
},
|
||||
},
|
||||
/* {
|
||||
value: 36,
|
||||
name: "36%",
|
||||
itemStyle: {
|
||||
color: "#EFEFEF",
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
}, */
|
||||
],
|
||||
}, ],
|
||||
}
|
||||
myChart73.setOption(option73)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var option74 = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: "{b}" + "{a1}" + ": " + "{c0}",
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: "#797979",
|
||||
},
|
||||
top: 5,
|
||||
|
||||
// left: "left",
|
||||
},
|
||||
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "0%",
|
||||
bottom: 20,
|
||||
top: "12%",
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis: [{
|
||||
type: "value",
|
||||
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#D5D5DF",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
formatter: "{value}",
|
||||
textStyle: {
|
||||
color: "#333",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
//网格线
|
||||
lineStyle: {
|
||||
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
|
||||
},
|
||||
show: false, //隐藏或显示
|
||||
},
|
||||
axisTick: { show: true }, //坐标轴刻度
|
||||
axisLine: { show: true }, //坐标轴轴线
|
||||
}, ],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
margin: 13,
|
||||
fontSize: 16,
|
||||
color: "#333",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
data: [
|
||||
"海曙区",
|
||||
"江北区",
|
||||
"北仑区",
|
||||
"镇海区",
|
||||
"鄞州区",
|
||||
"奉化区",
|
||||
"象山县",
|
||||
"宁海县",
|
||||
"余姚市",
|
||||
"慈溪市",
|
||||
],
|
||||
},
|
||||
series: [{
|
||||
name: "实际值",
|
||||
type: "bar",
|
||||
stack: true,
|
||||
barWidth: 20, //柱图宽度
|
||||
color: "#76ddfb",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#2690f2", //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#2690f2", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
data: d.map(item=>{
|
||||
return item["targetValue"]
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "目标值",
|
||||
type: "bar",
|
||||
barWidth: 20, //柱图宽度
|
||||
color: "#76ddfb",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#32c565", //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: "#32c565", //改变折线颜色
|
||||
},
|
||||
},
|
||||
},
|
||||
stack: true,
|
||||
data: d.map(item=>{
|
||||
return item["currentValue"]
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
myChart74.setOption(option74)
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
57
portal/h5/cunzhen/1.less
Normal file
57
portal/h5/cunzhen/1.less
Normal file
@@ -0,0 +1,57 @@
|
||||
.cunzhen {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: 20px;
|
||||
visibility: hidden;
|
||||
// display: none;
|
||||
background: #ffffff;
|
||||
height: 720px;
|
||||
width: 83.5%;
|
||||
padding: 10px 20px 20px;
|
||||
h3 {
|
||||
text-align: left;
|
||||
|
||||
padding: 10px 20px;
|
||||
padding-left: 20px;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
b {
|
||||
margin: 0 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
> div {
|
||||
box-shadow: 0 0 1px 1px #e1e1e1;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.left {
|
||||
width: 40%;
|
||||
> :nth-child(1) {
|
||||
width: 80%;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 60%;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user