feat：完善功能
This commit is contained in:
zjc
166
src/components/RegionTop/index.vue
Normal file
166
src/components/RegionTop/index.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<!-- 客源地分析TOP5 -->
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:style="{
|
||||
width: styleUtil.px2vw(width),
|
||||
height: styleUtil.px2vh(height)
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import styleUtil from '@/utils/styleUtil'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
|
||||
let props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
}
|
||||
})
|
||||
|
||||
const { id, setOption } = useEchart()
|
||||
let params = null
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(val) => {
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
params = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
top: '4%',
|
||||
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: props.list.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: props.list.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(
|
||||
() => props.list,
|
||||
(val) => {
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
width: vw(250);
|
||||
height: vh(366);
|
||||
}
|
||||
</style>
|
||||
190
src/components/TicketSource/index.vue
Normal file
190
src/components/TicketSource/index.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<!-- 购买来源 -->
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:style="{
|
||||
width: styleUtil.px2vw(width),
|
||||
height: styleUtil.px2vh(height)
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { useEchart } from '@/hooks/echart'
|
||||
import styleUtil from '@/utils/styleUtil'
|
||||
|
||||
const { id, setOption } = useEchart()
|
||||
|
||||
let props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
}
|
||||
})
|
||||
|
||||
let params = null
|
||||
|
||||
watch(
|
||||
() => props.list,
|
||||
(val) => {
|
||||
if (val.length > 0) {
|
||||
setTimeout(() => {
|
||||
init()
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
const getSeriesData = () => {
|
||||
return props.list.map((item) => {
|
||||
return {
|
||||
type: 'bar',
|
||||
name: item.name,
|
||||
clockwise: false,
|
||||
silent: true,
|
||||
roundCap: true,
|
||||
barWidth: '13%',
|
||||
showBackground: true,
|
||||
coordinateSystem: 'polar',
|
||||
data: [item.value]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
if (!params) {
|
||||
params = {
|
||||
legend: {
|
||||
show: true,
|
||||
x: 'center',
|
||||
y: '74%',
|
||||
itemHeight: fitChartSize(12),
|
||||
itemWidth: fitChartSize(12),
|
||||
itemGap: fitChartSize(6),
|
||||
formatter: function (name) {
|
||||
let obj = props.list.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'],
|
||||
polar: {
|
||||
center: ['50%', '40%']
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: getSeriesData()
|
||||
}
|
||||
} else {
|
||||
params.series = getSeriesData()
|
||||
}
|
||||
setOption(params)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.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>
|
||||
Reference in New Issue
Block a user