zhangzhang
1 year ago
9 changed files with 480 additions and 306 deletions
@ -1,144 +1,136 @@ |
|||||
const sxnja = [ |
const sxnja = [400, 400, 400]; |
||||
400,400,400 |
const sxnja2 = [700, 700, 700]; |
||||
]; |
|
||||
const sxnja2 = [ |
const minNumber = 90; |
||||
700,700,700 |
const minArray = []; |
||||
]; |
sxnja.map((value) => { |
||||
|
minArray.push(parseFloat((value - minNumber).toFixed(2))); |
||||
const minNumber = 90; |
}); |
||||
const minArray = []; |
console.log(minArray); |
||||
sxnja.map((value) => { |
let xaxisData = ["客车", "货车", "专项车"]; |
||||
minArray.push(parseFloat((value - minNumber).toFixed(2))) |
|
||||
}) |
var options = { |
||||
console.log(minArray) |
title: { |
||||
let xaxisData = [ |
// text: "单位/%",
|
||||
'客车', |
top: "4%", |
||||
'货车', |
left: "3%", |
||||
'专项车', |
textStyle: { |
||||
]; |
fontSize: "10px", |
||||
|
fontWeight: 300, |
||||
var options = { |
color: "#B5C5D4", |
||||
title: { |
opacity: 0.8, |
||||
text: '单位/%', |
|
||||
top: '4%', |
|
||||
left: '3%', |
|
||||
textStyle: { |
|
||||
fontSize: '10px', |
|
||||
fontWeight: 300, |
|
||||
color: '#B5C5D4', |
|
||||
opacity: 0.8 |
|
||||
} |
|
||||
}, |
}, |
||||
tooltip: { |
}, |
||||
valueFormatter: function (value) { |
tooltip: { |
||||
return (value + minNumber).toFixed(2) + ' %'; |
valueFormatter: function (value) { |
||||
} |
return (value + minNumber).toFixed(2) + " %"; |
||||
}, |
}, |
||||
legend: { |
}, |
||||
// orient: 'vertical',
|
legend: { |
||||
icon: "circle", |
// orient: 'vertical',
|
||||
itemHeight: 6, |
icon: "circle", |
||||
itemWidth: 6, |
itemHeight: 8, |
||||
top: "5%", |
itemWidth: 8, |
||||
right: "0%", |
top: "5%", |
||||
textStyle: { |
right: "0%", |
||||
fontSize:10, |
textStyle: { |
||||
color: "#fff", |
// fontSize: 12,
|
||||
}, |
color: "#fff", |
||||
|
}, |
||||
|
}, |
||||
|
grid: { |
||||
|
left: "1%", |
||||
|
right: "0%", |
||||
|
top: "20%", |
||||
|
bottom: "0%", |
||||
|
containLabel: true, |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: "category", |
||||
|
data: xaxisData, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
width: 1, |
||||
|
color: "#545454", |
||||
|
}, |
||||
}, |
}, |
||||
grid: { |
axisTick: { |
||||
left: '1%', |
show: false, |
||||
right: '0%', |
|
||||
top: '16%', |
|
||||
bottom: '0%', |
|
||||
containLabel: true |
|
||||
}, |
}, |
||||
xAxis: { |
axisLabel: { |
||||
type: 'category', |
color: "#B5C5D4", |
||||
data: xaxisData, |
fontSize: "10px", |
||||
|
interval: 0, |
||||
|
}, |
||||
|
}, |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
// type: 'value',
|
||||
|
// min: function (value) {
|
||||
|
// return value.min*0.9;
|
||||
|
// },
|
||||
|
type: "value", |
||||
|
min: 0, |
||||
|
max: 900, |
||||
|
splitNumber: 9, |
||||
|
// max: yAxisMax,
|
||||
axisLine: { |
axisLine: { |
||||
show: true, |
show: false, |
||||
lineStyle: { |
lineStyle: { |
||||
width: 1, |
width: 1, |
||||
color: '#545454' |
color: "#545454", |
||||
} |
}, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: "#B2C2D3", |
||||
|
opacity: 0.3, |
||||
|
type: "dotted", |
||||
|
}, |
||||
}, |
}, |
||||
axisTick: { |
axisTick: { |
||||
show: false |
show: false, |
||||
}, |
}, |
||||
axisLabel: { |
axisLabel: { |
||||
color: '#B5C5D4', |
color: "#B5C5D4", |
||||
fontSize: '10px', |
fontSize: "12px", |
||||
interval: 0 |
formatter: (value) => { |
||||
} |
return value + minNumber; |
||||
}, |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
// type: 'value',
|
|
||||
// min: function (value) {
|
|
||||
// return value.min*0.9;
|
|
||||
// },
|
|
||||
type: 'value', |
|
||||
min: 0, |
|
||||
max:900, |
|
||||
splitNumber: 9, |
|
||||
// max: yAxisMax,
|
|
||||
axisLine: { |
|
||||
show: false, |
|
||||
lineStyle: { |
|
||||
width: 1, |
|
||||
color: '#545454' |
|
||||
} |
|
||||
}, |
|
||||
splitLine: { |
|
||||
show: true, |
|
||||
lineStyle: { |
|
||||
color: '#B2C2D3', |
|
||||
opacity: 0.3, |
|
||||
type: 'dotted' |
|
||||
} |
|
||||
}, |
|
||||
axisTick: { |
|
||||
show: false |
|
||||
}, |
}, |
||||
axisLabel: { |
|
||||
color: '#B5C5D4', |
|
||||
fontSize: '12px', |
|
||||
formatter: (value) => { |
|
||||
return value + minNumber |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
], |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '事件数量（起）', |
|
||||
data: minArray, |
|
||||
type: 'pictorialBar', |
|
||||
symbol: 'roundRect', |
|
||||
symbolRepeat: true, |
|
||||
symbolSize: [12, 5], |
|
||||
// symbolOffset: symbolOffset,
|
|
||||
// barWidth:'40%',
|
|
||||
itemStyle: { |
|
||||
color: '#20E7FF' |
|
||||
} |
|
||||
}, |
}, |
||||
{ |
}, |
||||
barGap: "10%", |
], |
||||
name: '平均处置时长（分钟）', |
series: [ |
||||
data: sxnja2 , |
{ |
||||
type: 'pictorialBar', |
name: "事件数量（起）", |
||||
symbol: 'roundRect', |
data: minArray, |
||||
symbolRepeat: true, |
type: "pictorialBar", |
||||
symbolSize: [12, 5], |
symbol: "roundRect", |
||||
// symbolOffset: symbolOffset,
|
symbolRepeat: true, |
||||
// barWidth:'40%',
|
symbolSize: [12, 5], |
||||
itemStyle: { |
// symbolOffset: symbolOffset,
|
||||
color: '#20FFC9' |
// barWidth:'40%',
|
||||
} |
itemStyle: { |
||||
} |
color: "#20E7FF", |
||||
] |
}, |
||||
}; |
}, |
||||
|
{ |
||||
|
barGap: "10%", |
||||
|
name: "平均处置时长（分钟）", |
||||
|
data: sxnja2, |
||||
|
type: "pictorialBar", |
||||
|
symbol: "roundRect", |
||||
|
symbolRepeat: true, |
||||
|
symbolSize: [12, 5], |
||||
|
// symbolOffset: symbolOffset,
|
||||
|
// barWidth:'40%',
|
||||
|
itemStyle: { |
||||
|
color: "#20FFC9", |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
export default options; |
export default options; |
||||
|
|||||
|
After Width: | Height: | Size: 403 KiB |
@ -1,7 +1,159 @@ |
|||||
<template> |
<template> |
||||
<div>1</div> |
<div class='TrafficFlow'> |
||||
|
|
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'digitalRoadNetwork', |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeTabs() { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
::v-deep .el-tabs__item { |
||||
|
display: inline-flex; |
||||
|
justify-content: center; |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
min-width: 128px; |
||||
|
position: relative; |
||||
|
left: 10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__active-bar { |
||||
|
min-width: 128px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap::after { |
||||
|
background-color: #133242; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.footTabs { |
||||
|
display: inline; |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.TrafficFlow { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
padding-top: 15px; |
||||
|
background: url("./assets/online_bj.jpg") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
|
||||
|
.header-shot { |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
margin-top: 15px; |
||||
|
height: 160px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 0px; |
||||
|
|
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.content-l { |
||||
|
width: calc(32.2%); |
||||
|
margin-right: 20px; |
||||
|
display: inline-flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
>div { |
||||
|
margin-bottom: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content-r { |
||||
|
width: calc(33%); |
||||
|
display: inline-flex; |
||||
|
} |
||||
|
|
||||
|
.content-rm { |
||||
|
width: calc(33%); |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.content-mi { |
||||
|
width: calc(50%); |
||||
|
|
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
.content-mi:last-child { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.content-m { |
||||
|
display: inline-flex; |
||||
|
width: 66%; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.foot { |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 8px; |
||||
|
|
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.foot-w { |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.foot-l { |
||||
|
width: 726px; |
||||
|
} |
||||
|
|
||||
|
.foot-m { |
||||
|
width: 613px; |
||||
|
} |
||||
|
|
||||
|
.foot-r { |
||||
|
width: 493px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -1,157 +1,159 @@ |
|||||
<template> |
<template> |
||||
<div class='TrafficFlow'> |
<div class='TrafficFlow'> |
||||
|
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'maintainQuery', |
name: 'maintainQuery', |
||||
components: { |
components: { |
||||
}, |
}, |
||||
data(){ |
data() { |
||||
return { |
return { |
||||
|
|
||||
} |
} |
||||
}, |
}, |
||||
methods:{ |
methods: { |
||||
changeTabs(){ |
changeTabs() { |
||||
|
|
||||
} |
|
||||
} |
} |
||||
|
|
||||
} |
} |
||||
</script> |
|
||||
|
} |
||||
<style lang='scss' scoped> |
</script> |
||||
|
|
||||
::v-deep .el-tabs__item{ |
|
||||
display: inline-flex; |
|
||||
justify-content: center; |
|
||||
font-size: 16px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 500; |
|
||||
color: #FFFFFF; |
|
||||
min-width:128px; |
|
||||
position: relative; |
|
||||
left:10px; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-tabs__active-bar { |
|
||||
min-width:128px; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-tabs__nav-wrap::after { |
|
||||
background-color: #133242; |
|
||||
opacity: 0.1; |
|
||||
} |
|
||||
|
|
||||
.footTabs { |
|
||||
display: inline; |
|
||||
width:100%; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.TrafficFlow { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
position: relative; |
|
||||
z-index: 6; |
|
||||
color: white; |
|
||||
padding-top: 15px; |
|
||||
background-image: url('./assets/online_bj.jpg'); |
|
||||
background-size: 100% 100%; |
|
||||
|
|
||||
.header-shot{ |
<style lang='scss' scoped> |
||||
width: 98%; |
::v-deep .el-tabs__item { |
||||
margin: auto; |
display: inline-flex; |
||||
margin-top: 15px; |
justify-content: center; |
||||
height:160px; |
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
min-width: 128px; |
||||
|
position: relative; |
||||
|
left: 10px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__active-bar { |
||||
|
min-width: 128px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-tabs__nav-wrap::after { |
||||
|
background-color: #133242; |
||||
|
opacity: 0.1; |
||||
|
} |
||||
|
|
||||
|
.footTabs { |
||||
|
display: inline; |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.TrafficFlow { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
z-index: 6; |
||||
|
color: white; |
||||
|
padding-top: 15px; |
||||
|
background: url("./assets/online_bj.jpg") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
|
||||
|
.header-shot { |
||||
|
width: 98%; |
||||
|
margin: auto; |
||||
|
margin-top: 15px; |
||||
|
height: 160px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 100%; |
||||
|
margin: auto; |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
pointer-events: none; |
||||
|
margin-top: 0px; |
||||
|
|
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
} |
} |
||||
|
|
||||
.content { |
.content-l { |
||||
width: 100%; |
width: calc(32.2%); |
||||
margin: auto; |
margin-right: 20px; |
||||
display: flex; |
display: inline-flex; |
||||
flex: 1; |
flex-direction: column; |
||||
pointer-events: none; |
|
||||
margin-top: 0px; |
|
||||
|
|
||||
>div { |
>div { |
||||
pointer-events: auto; |
margin-bottom: 15px; |
||||
} |
|
||||
|
|
||||
.content-l { |
|
||||
width: calc(32.2%); |
|
||||
margin-right:20px; |
|
||||
display: inline-flex; |
|
||||
flex-direction: column; |
|
||||
|
|
||||
>div { |
|
||||
margin-bottom:15px; |
|
||||
} |
|
||||
} |
} |
||||
|
} |
||||
|
|
||||
.content-r { |
.content-r { |
||||
width: calc(33%); |
width: calc(33%); |
||||
display: inline-flex; |
display: inline-flex; |
||||
} |
} |
||||
|
|
||||
.content-rm { |
.content-rm { |
||||
width: calc(33%); |
width: calc(33%); |
||||
margin-right:10px; |
margin-right: 10px; |
||||
} |
} |
||||
|
|
||||
.content-mi { |
.content-mi { |
||||
width: calc(50%); |
width: calc(50%); |
||||
|
|
||||
margin-right:20px; |
|
||||
} |
|
||||
|
|
||||
.content-mi:last-child { |
margin-right: 20px; |
||||
margin-right:10px; |
} |
||||
} |
|
||||
|
|
||||
|
|
||||
.content-m { |
|
||||
display: inline-flex; |
|
||||
width: 66%; |
|
||||
margin-right:20px; |
|
||||
} |
|
||||
|
|
||||
|
.content-mi:last-child { |
||||
|
margin-right: 10px; |
||||
} |
} |
||||
|
|
||||
.foot{ |
|
||||
width: 98%; |
|
||||
margin: auto; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
flex: 1; |
|
||||
pointer-events: none; |
|
||||
margin-top: 8px; |
|
||||
>div { |
|
||||
pointer-events: auto; |
|
||||
} |
|
||||
|
|
||||
.foot-w { |
.content-m { |
||||
width:100%; |
display: inline-flex; |
||||
|
width: 66%; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
} |
} |
||||
|
|
||||
.foot-l { |
.foot { |
||||
width: 726px; |
width: 98%; |
||||
} |
margin: auto; |
||||
.foot-m { |
display: flex; |
||||
width: 613px; |
justify-content: space-between; |
||||
} |
flex: 1; |
||||
.foot-r { |
pointer-events: none; |
||||
width: 493px; |
margin-top: 8px; |
||||
} |
|
||||
|
>div { |
||||
|
pointer-events: auto; |
||||
|
} |
||||
|
|
||||
|
.foot-w { |
||||
|
width: 100%; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.foot-l { |
||||
|
width: 726px; |
||||
|
} |
||||
|
|
||||
|
.foot-m { |
||||
|
width: 613px; |
||||
|
} |
||||
|
|
||||
|
.foot-r { |
||||
|
width: 493px; |
||||
} |
} |
||||
} |
} |
||||
</style> |
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue