|
|
|
@ -5,19 +5,14 @@ |
|
|
|
<div class="keliu"> |
|
|
|
<div class="keliuTxt">客流趋势</div> |
|
|
|
<div class="keliuBtn"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in keliuList" |
|
|
|
:key="index" |
|
|
|
class="btnItem" |
|
|
|
@click="clickQushi(item.unit)" |
|
|
|
:class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'" |
|
|
|
> |
|
|
|
<div v-for="(item, index) in keliuList" :key="index" class="btnItem" @click="clickQushi(item.unit)" |
|
|
|
:class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'"> |
|
|
|
<div class="txt">{{ item.unit }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="tongjitu" id="homebar" style="height: 230px; width: 680px"></div> |
|
|
|
<div class="tongjitu" id="homebar" style="height: 230px; width: 100%"></div> |
|
|
|
|
|
|
|
<div class="qushiBaifb"> |
|
|
|
<div class="baifbLeft"> |
|
|
|
@ -101,20 +96,12 @@ |
|
|
|
<!-- 今日各场馆人数趋势 折线图 --> |
|
|
|
<div class="keliu keliuTu1"> |
|
|
|
<div class="keliuTxt">今日各场馆人数趋势</div> |
|
|
|
<div id="kl-line" style="width: 680px; height: 180px;"></div> |
|
|
|
<div id="kl-line" style="width: 100%; height: 180px;"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="middle"> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
position: absolute; |
|
|
|
color: white; |
|
|
|
top: 11%; |
|
|
|
left: 18%; |
|
|
|
font-weight: bold; |
|
|
|
" |
|
|
|
> |
|
|
|
<div style=" position: absolute; color: white; top: 11%; left: 18%; font-weight: bold; " > |
|
|
|
345,235 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
@ -243,6 +230,8 @@ |
|
|
|
<script> |
|
|
|
// 引入echarts |
|
|
|
import * as echarts from "echarts"; |
|
|
|
// 引入api |
|
|
|
import * as homeApi from '@/api/home' |
|
|
|
|
|
|
|
var uChartsInstance = {}; |
|
|
|
export default { |
|
|
|
@ -260,6 +249,10 @@ export default { |
|
|
|
unit: "日", |
|
|
|
}, |
|
|
|
], |
|
|
|
// 条线图 |
|
|
|
bar_data:[], |
|
|
|
// 柱子图x轴 |
|
|
|
bar_tdata:[], |
|
|
|
selectVal1: "年", |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -268,6 +261,8 @@ export default { |
|
|
|
this.home_bar(); |
|
|
|
// 折线图 |
|
|
|
this.line_zone(); |
|
|
|
|
|
|
|
this.getStat(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
clickItme(val) { |
|
|
|
@ -277,27 +272,34 @@ export default { |
|
|
|
this.selectVal1 = val; |
|
|
|
}, |
|
|
|
|
|
|
|
//获取统计数据 |
|
|
|
getStat(){ |
|
|
|
let that = this |
|
|
|
homeApi.allGroupTimeNum().then(res=>{ |
|
|
|
// get allTimeData |
|
|
|
const tmpdata = res.data.allTimeData |
|
|
|
let btdata = new Array(); |
|
|
|
let bvdata = new Array(); |
|
|
|
tmpdata.foreach(function(item,index){ |
|
|
|
console.log(item); |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 透明背景柱状统计图 |
|
|
|
home_bar() { |
|
|
|
var chartDom = document.getElementById("homebar"); |
|
|
|
var myChart = echarts.init(chartDom); |
|
|
|
var option; |
|
|
|
|
|
|
|
// |
|
|
|
let that = this |
|
|
|
|
|
|
|
option = { |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
data: [ |
|
|
|
"Mon", |
|
|
|
"Tue", |
|
|
|
"Wed", |
|
|
|
"Thu", |
|
|
|
"Fri", |
|
|
|
"Sat", |
|
|
|
"Sun", |
|
|
|
"0c", |
|
|
|
"90", |
|
|
|
"10", |
|
|
|
], |
|
|
|
data: that.bar_tdata, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
@ -311,7 +313,8 @@ export default { |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460], |
|
|
|
//data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460], |
|
|
|
data: that.bar_data, |
|
|
|
type: "bar", |
|
|
|
showBackground: true, |
|
|
|
// 设置顶部圆形 |
|
|
|
|