zhangzhang
1 year ago
9 changed files with 480 additions and 306 deletions
@ -1,144 +1,136 @@ |
|||
const sxnja = [ |
|||
400,400,400 |
|||
]; |
|||
const sxnja2 = [ |
|||
700,700,700 |
|||
]; |
|||
|
|||
const minNumber = 90; |
|||
const minArray = []; |
|||
sxnja.map((value) => { |
|||
minArray.push(parseFloat((value - minNumber).toFixed(2))) |
|||
}) |
|||
console.log(minArray) |
|||
let xaxisData = [ |
|||
'客车', |
|||
'货车', |
|||
'专项车', |
|||
]; |
|||
|
|||
var options = { |
|||
title: { |
|||
text: '单位/%', |
|||
top: '4%', |
|||
left: '3%', |
|||
textStyle: { |
|||
fontSize: '10px', |
|||
fontWeight: 300, |
|||
color: '#B5C5D4', |
|||
opacity: 0.8 |
|||
} |
|||
const sxnja = [400, 400, 400]; |
|||
const sxnja2 = [700, 700, 700]; |
|||
|
|||
const minNumber = 90; |
|||
const minArray = []; |
|||
sxnja.map((value) => { |
|||
minArray.push(parseFloat((value - minNumber).toFixed(2))); |
|||
}); |
|||
console.log(minArray); |
|||
let xaxisData = ["客车", "货车", "专项车"]; |
|||
|
|||
var options = { |
|||
title: { |
|||
// text: "单位/%",
|
|||
top: "4%", |
|||
left: "3%", |
|||
textStyle: { |
|||
fontSize: "10px", |
|||
fontWeight: 300, |
|||
color: "#B5C5D4", |
|||
opacity: 0.8, |
|||
}, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return (value + minNumber).toFixed(2) + ' %'; |
|||
} |
|||
}, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return (value + minNumber).toFixed(2) + " %"; |
|||
}, |
|||
legend: { |
|||
// orient: 'vertical',
|
|||
icon: "circle", |
|||
itemHeight: 6, |
|||
itemWidth: 6, |
|||
top: "5%", |
|||
right: "0%", |
|||
textStyle: { |
|||
fontSize:10, |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
legend: { |
|||
// orient: 'vertical',
|
|||
icon: "circle", |
|||
itemHeight: 8, |
|||
itemWidth: 8, |
|||
top: "5%", |
|||
right: "0%", |
|||
textStyle: { |
|||
// 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: { |
|||
left: '1%', |
|||
right: '0%', |
|||
top: '16%', |
|||
bottom: '0%', |
|||
containLabel: true |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: xaxisData, |
|||
axisLabel: { |
|||
color: "#B5C5D4", |
|||
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: { |
|||
show: true, |
|||
show: false, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: '#545454' |
|||
} |
|||
color: "#545454", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#B2C2D3", |
|||
opacity: 0.3, |
|||
type: "dotted", |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
color: '#B5C5D4', |
|||
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: { |
|||
show: false, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: '#545454' |
|||
} |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#B2C2D3', |
|||
opacity: 0.3, |
|||
type: 'dotted' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
color: "#B5C5D4", |
|||
fontSize: "12px", |
|||
formatter: (value) => { |
|||
return value + minNumber; |
|||
}, |
|||
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: '平均处置时长（分钟）', |
|||
data: sxnja2 , |
|||
type: 'pictorialBar', |
|||
symbol: 'roundRect', |
|||
symbolRepeat: true, |
|||
symbolSize: [12, 5], |
|||
// symbolOffset: symbolOffset,
|
|||
// barWidth:'40%',
|
|||
itemStyle: { |
|||
color: '#20FFC9' |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "事件数量（起）", |
|||
data: minArray, |
|||
type: "pictorialBar", |
|||
symbol: "roundRect", |
|||
symbolRepeat: true, |
|||
symbolSize: [12, 5], |
|||
// symbolOffset: symbolOffset,
|
|||
// 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> |
|||
<div>1</div> |
|||
<div class='TrafficFlow'> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: 'digitalRoadNetwork', |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
changeTabs() { |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</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> |
|||
<div class='TrafficFlow'> |
|||
|
|||
</div> |
|||
</template> |
|||
<div class='TrafficFlow'> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: 'maintainQuery', |
|||
components: { |
|||
}, |
|||
data(){ |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods:{ |
|||
changeTabs(){ |
|||
|
|||
} |
|||
<script> |
|||
|
|||
|
|||
export default { |
|||
name: 'maintainQuery', |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
changeTabs() { |
|||
|
|||
} |
|||
|
|||
} |
|||
</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-image: url('./assets/online_bj.jpg'); |
|||
background-size: 100% 100%; |
|||
|
|||
} |
|||
</script> |
|||
|
|||
.header-shot{ |
|||
width: 98%; |
|||
margin: auto; |
|||
margin-top: 15px; |
|||
height:160px; |
|||
<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 { |
|||
width: 100%; |
|||
margin: auto; |
|||
display: flex; |
|||
flex: 1; |
|||
pointer-events: none; |
|||
margin-top: 0px; |
|||
.content-l { |
|||
width: calc(32.2%); |
|||
margin-right: 20px; |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
|
|||
>div { |
|||
pointer-events: auto; |
|||
} |
|||
|
|||
.content-l { |
|||
width: calc(32.2%); |
|||
margin-right:20px; |
|||
display: inline-flex; |
|||
flex-direction: column; |
|||
|
|||
>div { |
|||
margin-bottom:15px; |
|||
} |
|||
margin-bottom: 15px; |
|||
} |
|||
} |
|||
|
|||
.content-r { |
|||
width: calc(33%); |
|||
display: inline-flex; |
|||
} |
|||
.content-r { |
|||
width: calc(33%); |
|||
display: inline-flex; |
|||
} |
|||
|
|||
.content-rm { |
|||
width: calc(33%); |
|||
margin-right:10px; |
|||
} |
|||
.content-rm { |
|||
width: calc(33%); |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.content-mi { |
|||
width: calc(50%); |
|||
|
|||
margin-right:20px; |
|||
} |
|||
.content-mi { |
|||
width: calc(50%); |
|||
|
|||
.content-mi:last-child { |
|||
margin-right:10px; |
|||
} |
|||
|
|||
|
|||
.content-m { |
|||
display: inline-flex; |
|||
width: 66%; |
|||
margin-right:20px; |
|||
} |
|||
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 { |
|||
width:100%; |
|||
.content-m { |
|||
display: inline-flex; |
|||
width: 66%; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.foot-l { |
|||
width: 726px; |
|||
} |
|||
.foot-m { |
|||
width: 613px; |
|||
} |
|||
.foot-r { |
|||
width: 493px; |
|||
} |
|||
} |
|||
|
|||
.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> |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue