453530270@qq.com
3 years ago
4 changed files with 477 additions and 140 deletions
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 33 KiB |
@ -1,10 +1,297 @@ |
|||||
<template> |
<template> |
||||
<div class=""> |
<div class="tyc"> |
||||
第三個頁面 |
<div class="topnav">文化</div> |
||||
|
<!-- 图形 --> |
||||
|
<div class="tyclogo"> |
||||
|
<div class="tyname">文化</div> |
||||
|
<div class="tydesc">图书馆|文化馆|博物馆</div> |
||||
|
</div> |
||||
|
<!-- 总计进馆人数 --> |
||||
|
<div class="jgbox"> |
||||
|
<div class="jg_title">总计进馆人数</div> |
||||
|
<div class="jgcon"> |
||||
|
|
||||
|
<div class="jgitem"> |
||||
|
<div class="jgimg"><img src="../assets/icon01.png"/></div> |
||||
|
<span class="jgival">234,255</span> |
||||
|
<span class="jgdesc">今日进馆人数</span> |
||||
|
</div> |
||||
|
<div class="jgitem"> |
||||
|
<div class="jgimg"><img src="../assets/icon02.png"/></div> |
||||
|
<span class="jgival">234,255</span> |
||||
|
<span class="jgdesc">本月进馆人数</span> |
||||
|
</div> |
||||
|
<div class="jgitem"> |
||||
|
<div class="jgimg"><img src="../assets/icon03.png"/></div> |
||||
|
<span class="jgival">234,255</span> |
||||
|
<span class="jgdesc">本年进馆人数</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 进馆人数统计 --> |
||||
|
<div class="gcins"> |
||||
|
<div class="gcins_title">进馆人数统计</div> |
||||
|
<div id="gcins_charts" style="height:16rem"></div> |
||||
|
</div> |
||||
|
<!-- 人数状态 --> |
||||
|
<div class="incbox"></div> |
||||
|
|
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<script> |
<style scoped> |
||||
export default{ |
.tyc { |
||||
name:"gym" |
position: relative; |
||||
} |
} |
||||
</script> |
|
||||
|
.topnav { |
||||
|
height: 46px; |
||||
|
line-height: 46px; |
||||
|
text-align: center; |
||||
|
padding: 12rpx; |
||||
|
width: 100%; |
||||
|
position: fixed; |
||||
|
z-index: 90; |
||||
|
color: #fff; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
background-color: #080A25; |
||||
|
margin-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.tyclogo { |
||||
|
margin-top: 1.6rem; |
||||
|
background-image: url("../assets/wh_00.png"); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
background-position: 0 0; |
||||
|
height: 12rem; |
||||
|
} |
||||
|
|
||||
|
.tyclogo .tyname { |
||||
|
height: 3rem; |
||||
|
line-height: 3rem; |
||||
|
text-align: right; |
||||
|
padding-right: 6.06rem; |
||||
|
font-size: 2.02rem; |
||||
|
padding-top: 4.8rem; |
||||
|
} |
||||
|
.tyclogo .tydesc{ |
||||
|
height: 2rem; |
||||
|
line-height: 2rem; |
||||
|
font-size: 1.03rem; |
||||
|
text-align: right; |
||||
|
padding-right: 1.06rem; |
||||
|
color: #999; |
||||
|
} |
||||
|
/* 总计进馆 */ |
||||
|
.jgbox{ |
||||
|
margin-top: 1.02rem; |
||||
|
width: 100%; |
||||
|
height: 12rem; |
||||
|
} |
||||
|
.jgbox .jg_title{ |
||||
|
background-image: url('../assets/ty_jg_bg.png'); |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
background-position: 0 0; |
||||
|
padding-left: 3.2rem; |
||||
|
height: 2.06rem; |
||||
|
line-height: 2.06rem; |
||||
|
} |
||||
|
.jgbox .jgcon{ |
||||
|
width: 100%; |
||||
|
height: 7rem; |
||||
|
padding-top: 2rem; |
||||
|
} |
||||
|
.jgbox .jgcon .jgitem{ |
||||
|
width: 30%; |
||||
|
margin-left: 3%; |
||||
|
float: left; |
||||
|
} |
||||
|
.jgbox .jgcon .jgitem .jgimg{ |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.jgbox .jgcon .jgitem span{ |
||||
|
display: block; |
||||
|
text-align: center; |
||||
|
height: 1.8rem; |
||||
|
line-height: 1.8rem; |
||||
|
} |
||||
|
.jgbox .jgcon .jgitem .jgival{ |
||||
|
font-size: 1.06rem; |
||||
|
} |
||||
|
.jgbox .jgcon .jgitem .jgdesc{ |
||||
|
color: #666; |
||||
|
font-size: 0.8rem; |
||||
|
} |
||||
|
/* 进馆人数统计 */ |
||||
|
.gcins { |
||||
|
margin-top: 1.6rem; |
||||
|
} |
||||
|
|
||||
|
.gcins .gcins_title { |
||||
|
background-image: url("../assets/tyc_tbg.png"); |
||||
|
background-position: 0 0; |
||||
|
background-repeat: no-repeat; |
||||
|
background-size: 100%; |
||||
|
height: 1.8rem; |
||||
|
line-height: 1.8rem; |
||||
|
padding-left: 2.02rem; |
||||
|
} |
||||
|
|
||||
|
/* 进馆人数 */ |
||||
|
.incbox{ |
||||
|
margin-top: 1.2rem; |
||||
|
background: url("../assets/tyc_bhd.png") no-repeat 0 center; |
||||
|
background-size: 100%; |
||||
|
height: 8rem; |
||||
|
} |
||||
|
</style> |
||||
|
<script> |
||||
|
import * as echarts from 'echarts'; |
||||
|
export default { |
||||
|
name: 'TycView', |
||||
|
data() { |
||||
|
return { |
||||
|
// |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.cgsf_line() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 山峰图 |
||||
|
cgsf_line() { |
||||
|
var chartDom = document.getElementById('gcins_charts'); |
||||
|
var myChart = echarts.init(chartDom); |
||||
|
var option; |
||||
|
|
||||
|
option = { |
||||
|
|
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '3%', |
||||
|
bottom: '3%', |
||||
|
top: '10%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: [{ |
||||
|
data: [ |
||||
|
'08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', |
||||
|
], |
||||
|
axisLine: { |
||||
|
lineStyle: { |
||||
|
color: '#0095FF', |
||||
|
width: 1, |
||||
|
type: 'solid', |
||||
|
}, |
||||
|
show: true |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
show: true, |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
}], |
||||
|
yAxis: [{ |
||||
|
type: 'value', |
||||
|
axisLine: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTick: { |
||||
|
show: false, |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
// 使用深浅的间隔色 |
||||
|
color: '#027eff' |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
color: '#0095FF', |
||||
|
} |
||||
|
}], |
||||
|
series: [{ |
||||
|
// name: '厂用电量', |
||||
|
type: 'bar', |
||||
|
barGap: '5%', |
||||
|
barWidth: '10%', |
||||
|
barCategoryGap: '60%', |
||||
|
stack: 1, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
barBorderRadius: [30, 30, 0, 0], |
||||
|
color: new echarts.graphic.LinearGradient( |
||||
|
0, 0, 0, 1, [{ |
||||
|
offset: 0, |
||||
|
color: '#00feff' |
||||
|
}, |
||||
|
{ |
||||
|
offset: 1, |
||||
|
color: '#0286ff' |
||||
|
} |
||||
|
] |
||||
|
) |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
14000, |
||||
|
11000, |
||||
|
10000, |
||||
|
9000, |
||||
|
8000, |
||||
|
7000, |
||||
|
5000, |
||||
|
4000, |
||||
|
3000, |
||||
|
], |
||||
|
zlevel: 11 |
||||
|
}, |
||||
|
{ |
||||
|
// name: '厂用电量', |
||||
|
type: 'scatter', |
||||
|
stack: 1, |
||||
|
xAxisIndex: 0, |
||||
|
symbolOffset: [0, 0], //相对于原本位置的偏移量 |
||||
|
data: [0, 0, 0, 0, 0, 0, 0, 0, 0], |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
symbolSize: 13, |
||||
|
zlevel: 10, |
||||
|
z: 2, |
||||
|
}, |
||||
|
{ |
||||
|
name: '背景', |
||||
|
type: 'bar', |
||||
|
barWidth: '10%', |
||||
|
barGap: '-100%', |
||||
|
data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000], |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
color: '#004298', |
||||
|
barBorderRadius: 30, |
||||
|
} |
||||
|
}, |
||||
|
z: 1, |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
option && myChart.setOption(option); |
||||
|
}, |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue