191 lines
4.1 KiB
Vue
191 lines
4.1 KiB
Vue
<!-- 购买来源 -->
|
|
<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: 'bottom',
|
|
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>
|