404 lines
10 KiB
Vue
404 lines
10 KiB
Vue
<template>
|
|
<img src="/static/index/PTYHL.png" style="position: absolute;width: 100%;height: 100%; " alt="">
|
|
<div class="user" id="user"></div>
|
|
<div class="storeNum">
|
|
<div class="tit"></div>
|
|
<div class="townList" style="color: white;height: 14.4vh;">
|
|
<div class="storebox" v-for="(item, index) in (storeData.length || [1, 1, 1, 1, 1, 1, 1, 1])" :key="index">
|
|
<div class="store" :id="'store' + index"></div>
|
|
<div class="toenName">
|
|
<div>{{ storeData[index]?.name }}</div>
|
|
<div>{{ storeData[index]?.num }}个</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="color: white;display: flex; justify-content: center;
|
|
">
|
|
<div class="page-num" v-for="(item, index) in pageNum" @click="pageFN(index + 1)"> {{ index + 1 }}</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import * as echarts from 'echarts';
|
|
import { ref, reactive, defineProps } from "vue"
|
|
import { getUserNumApi } from "@/api.js"
|
|
import { globalEventBus } from '@/common/eventBus'
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
areaCodes: Object,
|
|
})
|
|
|
|
|
|
const getFiveDaysFn = () => {
|
|
var today = new Date();
|
|
var dateArray = new Array();
|
|
|
|
for (var i = 0; i < 5; i++) {
|
|
var date = new Date(today);
|
|
date.setDate(today.getDate() - i);
|
|
var month = date.getMonth() + 1;
|
|
var day = Number(date.getDate());
|
|
day = day >= 10 ? day : '0' + day
|
|
var formattedDate = month + "." + day;
|
|
dateArray.unshift(formattedDate);
|
|
}
|
|
|
|
return dateArray
|
|
}
|
|
// 图表
|
|
const initCharts = (tag, option) => {
|
|
var chartDom = document.getElementById(tag);
|
|
var myChart = echarts.init(chartDom);
|
|
myChart.setOption(option);
|
|
}
|
|
// 平台用户总量统计option
|
|
let Option = {
|
|
color: [
|
|
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 1, color: 'transparent' },
|
|
{ offset: 0, color: '#0081C3' },
|
|
])
|
|
, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 1, color: 'transparent' },
|
|
{ offset: 0, color: '#3E54BF' },
|
|
]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
{ offset: 1, color: 'transparent' },
|
|
{ offset: 0, color: '#4DBFD9' },
|
|
]),
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
},
|
|
// color: transparent;
|
|
|
|
legend: {
|
|
textStyle: {
|
|
color: "white"
|
|
}
|
|
|
|
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: getFiveDaysFn()
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',//背景色为虚线,
|
|
color: '#256980'
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
],
|
|
series: [
|
|
{
|
|
name: '新增用户数量',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [],
|
|
itemStyle: {
|
|
borderWidth: 1,
|
|
borderColor: "#384FB4",
|
|
},
|
|
|
|
|
|
},
|
|
{
|
|
name: '访问用户数量',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [],
|
|
itemStyle: {
|
|
borderWidth: 1,
|
|
borderColor: "#3E54BF",
|
|
},
|
|
},
|
|
{
|
|
name: '累计用户数量',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [],
|
|
itemStyle: {
|
|
borderWidth: 1,
|
|
borderColor: "#4EC1DB",
|
|
},
|
|
},
|
|
|
|
]
|
|
}
|
|
|
|
// 地方店铺数量统计option
|
|
let angle = 0;//角度，用来做简单的动画效果的
|
|
|
|
let getRange = (Num,colors) => {
|
|
return {
|
|
backgroundColor: "#061740",
|
|
title: {
|
|
text: '{a|' + Num + '}{c|%}',
|
|
x: 'center',
|
|
y: 'center',
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 10,
|
|
color: '#ffffff',
|
|
fontWeight: 'bold'
|
|
},
|
|
c: {
|
|
fontSize: 10,
|
|
color: '#ffffff',
|
|
fontWeight: 'normal'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
//内环
|
|
{
|
|
name: "",
|
|
type: 'custom',
|
|
coordinateSystem: "none",
|
|
renderItem: function (params, api) {
|
|
return {
|
|
type: 'arc',
|
|
shape: {
|
|
cx: api.getWidth() / 2,
|
|
cy: api.getHeight() / 2,
|
|
r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
|
|
startAngle: (0 + -angle) * Math.PI / 180,
|
|
endAngle: (360 + -angle) * Math.PI / 180
|
|
},
|
|
style: {
|
|
stroke: "#0CD3DB",
|
|
fill: "transparent",
|
|
lineWidth: 0.5
|
|
},
|
|
silent: true
|
|
};
|
|
},
|
|
data: [0]
|
|
},
|
|
//外环
|
|
{
|
|
name: '',
|
|
type: 'pie',
|
|
radius: ['85%', '70%'],
|
|
silent: true,
|
|
clockwise: true,
|
|
startAngle: 90,
|
|
z: 0,
|
|
zlevel: 0,
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
}
|
|
},
|
|
data: [
|
|
{
|
|
value: Num,
|
|
name: "",
|
|
itemStyle: {
|
|
normal: {
|
|
//外环发光
|
|
borderWidth: 0.5,
|
|
shadowBlur: 20,
|
|
borderColor: colors,
|
|
shadowColor: '#9bfeff',
|
|
color: { // 圆环的颜色
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: colors, // 0% 处的颜色
|
|
}, {
|
|
offset: 1,
|
|
color: colors, // 100% 处的颜色
|
|
}]
|
|
},
|
|
}
|
|
}
|
|
},
|
|
{
|
|
value: 100 - Num,
|
|
name: "",
|
|
label: {
|
|
normal: {
|
|
show: false
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#173164"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
]
|
|
}
|
|
|
|
}
|
|
|
|
const storeData = reactive([])
|
|
const initStoreOption = (pageData, total) => {
|
|
storeData.splice(0, storeData.length);
|
|
pageData.forEach((item,index) => {
|
|
let range = ((item.merchant_count / total) * 100).toFixed(2)
|
|
storeData.push({
|
|
name: item.street_name,
|
|
num: item.merchant_count,
|
|
option: getRange(range, index%2?"#4B5FDB":"#4bf3f9")
|
|
})
|
|
})
|
|
storeData.forEach((item, index) => {
|
|
initCharts(`store${index}`, item.option)
|
|
})
|
|
}
|
|
|
|
let pageNum = ref(0)
|
|
let merchatCountList = []
|
|
let merchantTotalCount = []
|
|
|
|
getUserNumApi(
|
|
props.areaCodes
|
|
|
|
).then(res => {
|
|
merchatCountList = res.data.merchatCountList
|
|
merchantTotalCount = res.data.merchantTotalCount
|
|
let { userCountlist } = res.data
|
|
userCountlist.forEach(item => {
|
|
Option.series[0].data.push(item.newUserCount)
|
|
Option.series[1].data.push(item.viewUserCount)
|
|
Option.series[2].data.push(item.totalUserCount)
|
|
});
|
|
pageNum.value = Math.ceil(merchatCountList.length / 8)
|
|
initCharts('user', Option)
|
|
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
|
})
|
|
|
|
|
|
const pageFN = (Num) => {
|
|
|
|
switch (Num) {
|
|
case 1:
|
|
initStoreOption(merchatCountList.slice(0, 8), merchantTotalCount)
|
|
break;
|
|
case 2:
|
|
initStoreOption(merchatCountList.slice(8, 16), merchantTotalCount)
|
|
break;
|
|
case 3:
|
|
initStoreOption(merchatCountList.slice(16, 24), merchantTotalCount)
|
|
break;
|
|
case 4:
|
|
initStoreOption(merchatCountList.slice(24, 32), merchantTotalCount)
|
|
break;
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
globalEventBus.on('indextopleft', data => {
|
|
console.log("houdao",data)
|
|
pageFN(Number(data.num) )
|
|
})
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
.user {
|
|
box-sizing: border-box;
|
|
padding-top: 5vh;
|
|
width: 100%;
|
|
height: 58%;
|
|
|
|
.btn {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.storeNum {
|
|
width: 100%;
|
|
height: 42%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.tit {
|
|
height: 15%;
|
|
}
|
|
|
|
.townList {
|
|
height: 5vh;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
padding-bottom: 0;
|
|
|
|
|
|
.storebox {
|
|
width: 22%;
|
|
height: 40%;
|
|
position: relative;
|
|
display: flex;
|
|
margin-left: 10px;
|
|
|
|
.store {
|
|
flex: 1;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.toenName {
|
|
flex: 1;
|
|
height: 100%;
|
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), #216278);
|
|
border-radius: 0 15px 15px 0;
|
|
font-size: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
color: white;
|
|
box-sizing: border-box;
|
|
padding: 7px 2px;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-num {
|
|
padding: 0 5px;
|
|
margin-right: 5px;
|
|
border: #2A538D 1px solid;
|
|
cursor: pointer;
|
|
position: relative;
|
|
font-size: 12px;
|
|
|
|
}
|
|
</style> |