|
|
|
@ -17,11 +17,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
class="tongjitu" |
|
|
|
id="homebar" |
|
|
|
style="height: 230px; width: 680px" |
|
|
|
></div> |
|
|
|
<div class="tongjitu" id="homebar" style="height: 230px; width: 680px"></div> |
|
|
|
|
|
|
|
<div class="qushiBaifb"> |
|
|
|
<div class="baifbLeft"> |
|
|
|
@ -44,46 +40,24 @@ |
|
|
|
</div> |
|
|
|
<div class="baiFbitem"> |
|
|
|
<div style="font-size: 14px">体育馆</div> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
color: white; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
margin-left: 10%; |
|
|
|
" |
|
|
|
> |
|
|
|
<div style=" color: white; font-size: 18px; font-weight: bold; margin-left: 10%; " > |
|
|
|
12% |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 10%; height: 60%" |
|
|
|
src="../../assets/index/体育馆图例.png" |
|
|
|
/> |
|
|
|
<img style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png"/> |
|
|
|
</div> |
|
|
|
<div class="baiFbitem"> |
|
|
|
<div style="font-size: 14px">游泳场馆</div> |
|
|
|
<div style="color: white; font-size: 18px; font-weight: bold"> |
|
|
|
12% |
|
|
|
</div> |
|
|
|
<img |
|
|
|
style="width: 10%; height: 60%" |
|
|
|
src="../../assets/index/体育馆图例.png" |
|
|
|
<img style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="baiFbRight"> |
|
|
|
<div class="baiFbitem"> |
|
|
|
<img |
|
|
|
style="width: 10%; height: 60%" |
|
|
|
src="../../assets/index/体育场图例.png" |
|
|
|
/> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
color: white; |
|
|
|
font-size: 18px; |
|
|
|
font-weight: bold; |
|
|
|
margin-right: 10%; |
|
|
|
" |
|
|
|
> |
|
|
|
<img style="width: 10%; height: 60%" src="../../assets/index/体育场图例.png" /> |
|
|
|
<div style=" color: white; font-size: 18px; font-weight: bold; margin-right: 10%; " > |
|
|
|
20% |
|
|
|
</div> |
|
|
|
<div style="font-size: 14px">图书馆</div> |
|
|
|
@ -124,9 +98,10 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 今日各场馆人数趋势 折线图 --> |
|
|
|
<div class="keliu keliuTu1"> |
|
|
|
<div class="keliuTxt">今日各场馆人数趋势</div> |
|
|
|
<div id="kl-line" style="width: 680px; height: 180px;"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -291,6 +266,8 @@ export default { |
|
|
|
mounted() { |
|
|
|
// 首页线图 |
|
|
|
this.home_bar(); |
|
|
|
// 折线图 |
|
|
|
this.line_zone(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
clickItme(val) { |
|
|
|
@ -309,37 +286,48 @@ export default { |
|
|
|
option = { |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun","0c","90","10"], |
|
|
|
data: [ |
|
|
|
"Mon", |
|
|
|
"Tue", |
|
|
|
"Wed", |
|
|
|
"Thu", |
|
|
|
"Fri", |
|
|
|
"Sat", |
|
|
|
"Sun", |
|
|
|
"0c", |
|
|
|
"90", |
|
|
|
"10", |
|
|
|
], |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
//网格线 |
|
|
|
splitLine:{ |
|
|
|
lineStyle:{ |
|
|
|
type:"soild", |
|
|
|
color:'#2F00FF' |
|
|
|
} |
|
|
|
} |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
type: "soild", |
|
|
|
color: "#2F00FF", |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
data: [120, 200, 150, 80, 70, 110, 130,630,530,460], |
|
|
|
data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460], |
|
|
|
type: "bar", |
|
|
|
showBackground: true, |
|
|
|
// 设置顶部圆形 |
|
|
|
symbolSize:function(d){ |
|
|
|
console.log(d) |
|
|
|
return d>0?[10,barWidth]:[0,0] |
|
|
|
symbolSize: function (d) { |
|
|
|
console.log(d); |
|
|
|
return d > 0 ? [10, barWidth] : [0, 0]; |
|
|
|
}, |
|
|
|
symbolPosition:'end', |
|
|
|
symbolPosition: "end", |
|
|
|
|
|
|
|
// symbolPosition:'end', |
|
|
|
// 背景颜色 |
|
|
|
backgroundStyle: { |
|
|
|
symbolPosition:'end', |
|
|
|
symbolSize:[20,20], |
|
|
|
symbolOffset:[0,"-20%"], |
|
|
|
opacity:0.75, |
|
|
|
symbolPosition: "end", |
|
|
|
symbolSize: [20, 20], |
|
|
|
symbolOffset: [0, "-20%"], |
|
|
|
opacity: 0.75, |
|
|
|
//color: 'rgba(180, 180, 180, 0.2)' |
|
|
|
color: { |
|
|
|
type: "linear", |
|
|
|
@ -363,21 +351,21 @@ export default { |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "#2F00FF", // 0% 处的颜色 |
|
|
|
} |
|
|
|
}, |
|
|
|
], |
|
|
|
global: false, // 缺省为 false |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
// |
|
|
|
// itemStyle:{ |
|
|
|
// |
|
|
|
// itemStyle:{ |
|
|
|
// normal:{ |
|
|
|
// barBorderRadius:[2,2,0,0] |
|
|
|
// } |
|
|
|
//symbolOffset:[14,14], |
|
|
|
//borderRadius:[15,15,0,0] |
|
|
|
// }, |
|
|
|
|
|
|
|
//borderRadius:[15,15,0,0] |
|
|
|
// }, |
|
|
|
|
|
|
|
// 条柱颜色 |
|
|
|
color: { |
|
|
|
type: "linear", |
|
|
|
@ -391,10 +379,12 @@ export default { |
|
|
|
color: "#00B4FF", // 0% 处的颜色 |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset:0.6,color:"#2f00ff" |
|
|
|
offset: 0.6, |
|
|
|
color: "#2f00ff", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset:0.8,color:"#2f00ff", |
|
|
|
offset: 0.8, |
|
|
|
color: "#2f00ff", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
@ -409,6 +399,71 @@ export default { |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
|
|
|
|
// 大面积折线图 |
|
|
|
line_zone() { |
|
|
|
var chartDom = document.getElementById("kl-line"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
|
|
|
|
let base = +new Date(2022, 9, 3); |
|
|
|
let oneDay = 24 * 3600 * 1000; |
|
|
|
let date = []; |
|
|
|
let data = [Math.random() * 300]; |
|
|
|
for (let i = 1; i < 20000; i++) { |
|
|
|
var now = new Date((base += oneDay)); |
|
|
|
date.push( |
|
|
|
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/") |
|
|
|
); |
|
|
|
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); |
|
|
|
} |
|
|
|
option = { |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
boundaryGap: false, |
|
|
|
data: date, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
boundaryGap: [0, "100%"], |
|
|
|
//网格线 |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
type: "soild", |
|
|
|
color: "#2F00FF", |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "Fake Data", |
|
|
|
type: "line", |
|
|
|
symbol: "none", |
|
|
|
sampling: "lttb", |
|
|
|
itemStyle: { |
|
|
|
color: "rgb(255, 170, 131)", |
|
|
|
}, |
|
|
|
areaStyle: { |
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: "rgba(255, 158, 68,0.6)", |
|
|
|
}, |
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: "rgb(255, 70, 131,0.6)", |
|
|
|
}, |
|
|
|
]), |
|
|
|
}, |
|
|
|
data: data, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@ -428,19 +483,19 @@ export default { |
|
|
|
.keliu { |
|
|
|
width: 100%; |
|
|
|
height: 8vh; |
|
|
|
background-image: url(../../assets/index/左1标题.png); |
|
|
|
background-image: url(../../assets/index/left_t1_bg.png); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: relative; |
|
|
|
.keliuTxt { |
|
|
|
position: absolute; |
|
|
|
left: 28%; |
|
|
|
top: 25%; |
|
|
|
color: white; |
|
|
|
color: #fff; |
|
|
|
font-size: 18px; |
|
|
|
color: #b5b7c5; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 8vh; |
|
|
|
padding-left: 22%; |
|
|
|
} |
|
|
|
// 年月日按钮 |
|
|
|
.keliuBtn { |
|
|
|
width: 20%; |
|
|
|
height: 50%; |
|
|
|
@ -474,7 +529,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.keliuTu1 { |
|
|
|
background-image: url("../../assets/index/左2标题.png"); |
|
|
|
background-image: url("../../assets/index/left_t2_bg.png"); |
|
|
|
} |
|
|
|
.tongjitu { |
|
|
|
width: 100%; |
|
|
|
|
