|
@ -1,5 +1,6 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="cityDistribution"> |
|
|
<div class="cityDistribution"> |
|
|
|
|
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh"> |
|
|
<div class="top"> |
|
|
<div class="top"> |
|
|
<p class="title">服务商总数量</p> |
|
|
<p class="title">服务商总数量</p> |
|
|
<p class="num">{{poxy_sum | capitalize}}</p> |
|
|
<p class="num">{{poxy_sum | capitalize}}</p> |
|
@ -10,7 +11,7 @@ |
|
|
<div> |
|
|
<div> |
|
|
<p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}:</span>{{item.value}}</p> |
|
|
<p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}:</span>{{item.value}}</p> |
|
|
</div> |
|
|
</div> |
|
|
<div ref='chartBar' id="home"></div> |
|
|
|
|
|
|
|
|
<div ref='chartBar' id="home" v-show="!isLoading"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="ranking"> |
|
|
<div class="ranking"> |
|
|
<p class="title">代理城市排名</p> |
|
|
<p class="title">代理城市排名</p> |
|
@ -26,14 +27,21 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</van-pull-refresh> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
import * as echarts from 'echarts'; |
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
import { |
|
|
|
|
|
PullRefresh |
|
|
|
|
|
} from 'vant'; |
|
|
import '../../utils/china' |
|
|
import '../../utils/china' |
|
|
import data from "@/api/data.js"; |
|
|
import data from "@/api/data.js"; |
|
|
export default { |
|
|
export default { |
|
|
name: 'cityDistribution', |
|
|
name: 'cityDistribution', |
|
|
|
|
|
components: { |
|
|
|
|
|
'van-pull-refresh': PullRefresh |
|
|
|
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
poxy_sum: '', |
|
|
poxy_sum: '', |
|
@ -41,6 +49,7 @@ |
|
|
cityName: '广东', |
|
|
cityName: '广东', |
|
|
cityInfo: [], |
|
|
cityInfo: [], |
|
|
chartBar: null, |
|
|
chartBar: null, |
|
|
|
|
|
isLoading: false, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
filters: { |
|
|
filters: { |
|
@ -54,6 +63,14 @@ |
|
|
this.statistical(this.cityInfo) |
|
|
this.statistical(this.cityInfo) |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
async onRefresh() { |
|
|
|
|
|
this.cityInfo = []; |
|
|
|
|
|
this.chartBar = null; |
|
|
|
|
|
await this.getData() |
|
|
|
|
|
await this.drawarea(); |
|
|
|
|
|
await this.statistical(this.cityInfo) |
|
|
|
|
|
this.isLoading = false; |
|
|
|
|
|
}, |
|
|
async getData() { |
|
|
async getData() { |
|
|
const res = await data.dataDistribution(); |
|
|
const res = await data.dataDistribution(); |
|
|
this.poxy_sum = res.data.poxy_sum |
|
|
this.poxy_sum = res.data.poxy_sum |
|
@ -214,6 +231,7 @@ |
|
|
min-height: 100vh; |
|
|
min-height: 100vh; |
|
|
background: #3C3F50; |
|
|
background: #3C3F50; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.top { |
|
|
.top { |
|
|
height: 258px; |
|
|
height: 258px; |
|
|
background: linear-gradient(90deg, #729EFF, #5D48E1); |
|
|
background: linear-gradient(90deg, #729EFF, #5D48E1); |
|
@ -221,6 +239,10 @@ |
|
|
border-radius: 0px 0px 20px 20px; |
|
|
border-radius: 0px 0px 20px 20px; |
|
|
padding: 0 68px; |
|
|
padding: 0 68px; |
|
|
padding-top: 50px; |
|
|
padding-top: 50px; |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
// top: 85px; |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
.title { |
|
|
.title { |
|
|
font-size: 40px; |
|
|
font-size: 40px; |
|
@ -243,7 +265,8 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#area { |
|
|
#area { |
|
|
height: 400px; |
|
|
|
|
|
|
|
|
padding-top: 34.2vw; |
|
|
|
|
|
height: 89.33vw; |
|
|
width: 750px; |
|
|
width: 750px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -251,7 +274,7 @@ |
|
|
width: 690px; |
|
|
width: 690px; |
|
|
height: 364px; |
|
|
height: 364px; |
|
|
// margin: 0 auto; |
|
|
// margin: 0 auto; |
|
|
// margin-top: 60px; |
|
|
|
|
|
|
|
|
margin-top: 60px; |
|
|
left: 50%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
} |
|
@ -259,7 +282,7 @@ |
|
|
.info { |
|
|
.info { |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
width: 690px; |
|
|
width: 690px; |
|
|
height: 724px; |
|
|
|
|
|
|
|
|
height: 105.53vw; |
|
|
background: linear-gradient(0deg, #729EFF, #5D48E1); |
|
|
background: linear-gradient(0deg, #729EFF, #5D48E1); |
|
|
border-radius: 20px; |
|
|
border-radius: 20px; |
|
|
padding: 46px 24px; |
|
|
padding: 46px 24px; |
|
|