feat：完善功能
This commit is contained in:
zjc
@@ -112,7 +112,7 @@
|
||||
|
||||
<div class="box-1">
|
||||
<Title3 title="客源地TOP5" />
|
||||
<top />
|
||||
<RegionTop :list="homeStore.userPortraitData.provinceRate" :width="230" :height="260" />
|
||||
</div>
|
||||
|
||||
<div class="box-1">
|
||||
@@ -120,17 +120,15 @@
|
||||
<div v-if="channelTotal > 0" class="count">
|
||||
游客总数：<countup :end-val="channelTotal" />
|
||||
</div>
|
||||
<ticket />
|
||||
<TicketSource :list="homeStore.userPortraitData.channel" :width="230" :height="230" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import top from './top'
|
||||
import age from './age'
|
||||
import gauge from './gauge'
|
||||
import ticket from './ticket'
|
||||
import countup from 'vue-countup-v3'
|
||||
import { useHomeStore } from '@/stores/home'
|
||||
|
||||
|
||||
@@ -194,7 +194,7 @@
|
||||
map.value.addOverlay(polyline)
|
||||
})
|
||||
})
|
||||
getBaiduMapCrowded()
|
||||
// getBaiduMapCrowded()
|
||||
}
|
||||
const getBaiduMapCrowded = async () => {
|
||||
let res = await getBaiduMapCrowdedApi({
|
||||
|
||||
@@ -1,171 +0,0 @@
|
||||
<!-- 购票来源 -->
|
||||
<template>
|
||||
<div class="ticket" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
import { useHomeStore } from '@/stores/home'
|
||||
|
||||
const homeStore = useHomeStore()
|
||||
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
let x = 25
|
||||
let y = 35
|
||||
let params = null
|
||||
|
||||
watch(
|
||||
() => homeStore.userPortraitData.channel,
|
||||
(val) => {
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const setSeries = () => {
|
||||
return homeStore.userPortraitData.channel.map((item, index) => {
|
||||
return {
|
||||
name: item.name,
|
||||
type: 'pie',
|
||||
clockwise: false,
|
||||
silent: true,
|
||||
radius: [`${x * (index + 1)}%`, `${y + index * 25}%`],
|
||||
center: ['50%', '40%'],
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
emphasis: { show: false },
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(item.value),
|
||||
name: item.name
|
||||
}
|
||||
// {
|
||||
// value: 100,
|
||||
// itemStyle: {
|
||||
// color: '#07439C'
|
||||
// }
|
||||
// }
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
params = {
|
||||
backgroundColor: 'transparent',
|
||||
legend: {
|
||||
show: true,
|
||||
x: 'center',
|
||||
y: '74%',
|
||||
itemHeight: fitChartSize(12),
|
||||
itemWidth: fitChartSize(12),
|
||||
itemGap: fitChartSize(6),
|
||||
formatter: function (name) {
|
||||
let obj = homeStore.userPortraitData.channel.find((item) => item.name == name)
|
||||
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(12)
|
||||
},
|
||||
value: {
|
||||
color: '#00D5F6',
|
||||
fontWeight: 600,
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
color: ['#F15A25', '#01FEFE', '#12B5FD'],
|
||||
series: setSeries()
|
||||
}
|
||||
} else {
|
||||
params.series = setSeries()
|
||||
}
|
||||
setOption(params)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ticket {
|
||||
width: 100%;
|
||||
height: vh(230);
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@mixin icon($column) {
|
||||
padding: 0 vw(10);
|
||||
height: vh(70);
|
||||
display: flex;
|
||||
flex-direction: $column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: vw(8);
|
||||
}
|
||||
&-item {
|
||||
color: #fff;
|
||||
}
|
||||
&-item:nth-child(1) {
|
||||
@include icon(column);
|
||||
background-image: url('@/assets/images/legend-item-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(2) {
|
||||
@include icon(column);
|
||||
background-image: url('@/assets/images/legend-item-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(3) {
|
||||
@include icon(column);
|
||||
background-image: url('@/assets/images/legend-item-1.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(4) {
|
||||
@include icon(column-reverse);
|
||||
background-image: url('@/assets/images/legend-item-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(5) {
|
||||
@include icon(column-reverse);
|
||||
background-image: url('@/assets/images/legend-item-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item:nth-child(6) {
|
||||
@include icon(column-reverse);
|
||||
background-image: url('@/assets/images/legend-item-2.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
&-item-label {
|
||||
font-weight: 400;
|
||||
font-size: vw(12);
|
||||
line-height: vh(14);
|
||||
}
|
||||
&-item-value {
|
||||
font-weight: bold;
|
||||
font-size: vw(16);
|
||||
line-height: vh(18);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,132 +0,0 @@
|
||||
<!-- 客源地分析TOP5 -->
|
||||
<template>
|
||||
<div class="top" :id="id" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
import { useHomeStore } from '@/stores/home'
|
||||
|
||||
const homeStore = useHomeStore()
|
||||
const { id, setOption } = useEchart()
|
||||
let params = null
|
||||
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
params = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '10%',
|
||||
bottom: '-4%',
|
||||
containLabel: false
|
||||
},
|
||||
xAxis: [{ max: 100, show: false }],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: 'none',
|
||||
axisLine: 'none',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(18),
|
||||
verticalAlign: 'bottom',
|
||||
padding: [0, -fitChartSize(10), fitChartSize(10), 0],
|
||||
inside: true,
|
||||
formatter: function (value) {
|
||||
return `{value|${value}}%`
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
align: 'center',
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(14)
|
||||
}
|
||||
}
|
||||
},
|
||||
data: homeStore?.userPortraitData?.provinceRate.map((item) => Number(item.value))
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: fitChartSize(12),
|
||||
showBackground: true,
|
||||
borderRadius: [0, 0, 0, 0],
|
||||
backgroundStyle: {
|
||||
color: 'rgba(0, 150, 255, 0.15)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
offset: [fitChartSize(12), -fitChartSize(20)],
|
||||
color: '#D3E5FF',
|
||||
fontWeight: 500,
|
||||
position: 'left',
|
||||
align: 'left',
|
||||
fontSize: fitChartSize(14),
|
||||
formatter: function (params) {
|
||||
return params.data.name ?? '其他'
|
||||
}
|
||||
},
|
||||
data: homeStore?.userPortraitData?.provinceRate.map((item) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: Number(item.value),
|
||||
itemStyle: {
|
||||
borderRadius: [0, 0, 0, 0],
|
||||
color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
setOption(params)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => homeStore?.userPortraitData?.provinceRate,
|
||||
(val) => {
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
width: 100%;
|
||||
height: vh(260);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user