56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template>
|
|
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
const prop = defineProps({
|
|
data: {
|
|
type: Number,
|
|
default: 84.3
|
|
}
|
|
});
|
|
|
|
|
|
const options = computed(() => {
|
|
return {
|
|
backgroundColor: 'transparent',
|
|
series: [{
|
|
type: 'gauge',
|
|
startAngle: 90,
|
|
endAngle: -270,
|
|
pointer: { show: false },
|
|
progress: {
|
|
show: true,
|
|
overlap: false,
|
|
roundCap: true,
|
|
clip: false,
|
|
itemStyle: {
|
|
color: '#58D9F9'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 20
|
|
}
|
|
},
|
|
splitLine: { show: false },
|
|
axisTick: { show: false },
|
|
axisLabel: { show: false },
|
|
data: [{
|
|
value: prop.data,
|
|
// name: '完成率',
|
|
title: { offsetCenter: ['0%', '0%'] },
|
|
detail: {
|
|
offsetCenter: ['0%', '0%'], formatter: function (value) {
|
|
return value.toFixed(1) + '%';
|
|
}
|
|
},
|
|
|
|
}]
|
|
}]
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style> |