182 lines
3.8 KiB
Vue
182 lines
3.8 KiB
Vue
<template>
|
|
<div class="pie" :id="id" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { fitChartSize } from '@/utils/dataUtil'
|
|
import { useEchart } from '@/hooks/echart'
|
|
|
|
const { id, setOption } = useEchart()
|
|
|
|
let props = defineProps({
|
|
value: {
|
|
type: Number,
|
|
default: () => 0
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: () => ''
|
|
}
|
|
})
|
|
watch(
|
|
() => props.value,
|
|
(val) => {
|
|
if (val) {
|
|
nextTick(() => {
|
|
init()
|
|
})
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
let params = null
|
|
|
|
const init = () => {
|
|
if (!params) {
|
|
params = {
|
|
backgroundColor: 'transparent',
|
|
title: [
|
|
{
|
|
text: `${(props.value * 100).toFixed(2)}%`,
|
|
x: 'center',
|
|
top: '40%',
|
|
textStyle: {
|
|
color: '#02F9FA',
|
|
fontSize: fitChartSize(24)
|
|
}
|
|
},
|
|
{
|
|
text: props.label,
|
|
x: 'center',
|
|
top: '56%',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: fitChartSize(20)
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
radius: '100%',
|
|
center: ['50%', '50%'],
|
|
min: 0,
|
|
max: 1,
|
|
startAngle: 90,
|
|
endAngle: 450,
|
|
clockwise: false,
|
|
itemStyle: {
|
|
color: '#00D0FF'
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
roundCap: false,
|
|
lineStyle: {
|
|
color: [
|
|
[0, '#075199'],
|
|
[1, '#075199']
|
|
],
|
|
width: fitChartSize(6)
|
|
}
|
|
},
|
|
progress: {
|
|
show: true,
|
|
roundCap: false,
|
|
width: fitChartSize(6)
|
|
},
|
|
pointer: {
|
|
// 指针
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
// 刻度
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
// 分割线
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// 刻度标签
|
|
show: false
|
|
},
|
|
detail: {
|
|
// 仪表盘详情
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: props.value
|
|
}
|
|
]
|
|
},
|
|
{
|
|
type: 'gauge',
|
|
radius: '95%',
|
|
center: ['50%', '50%'],
|
|
min: 0,
|
|
max: 1,
|
|
startAngle: 90,
|
|
endAngle: 450,
|
|
clockwise: false,
|
|
itemStyle: {
|
|
color: '#057EB9'
|
|
},
|
|
axisLine: {
|
|
roundCap: false,
|
|
lineStyle: {
|
|
color: [
|
|
[0, '#075199'],
|
|
[1, '#075199']
|
|
],
|
|
width: fitChartSize(10)
|
|
}
|
|
},
|
|
progress: {
|
|
show: true,
|
|
roundCap: false,
|
|
width: fitChartSize(10)
|
|
},
|
|
pointer: {
|
|
// 指针
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
// 刻度
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
// 分割线
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
// 刻度标签
|
|
show: false
|
|
},
|
|
detail: {
|
|
// 仪表盘详情
|
|
show: false
|
|
},
|
|
data: [
|
|
{
|
|
value: props.value
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
} else {
|
|
params.series[0].data[0].value = props.value
|
|
}
|
|
setOption(params)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pie {
|
|
width: vw(250);
|
|
height: vh(250);
|
|
}
|
|
</style>
|