mirror of
https://github.com/keven1024/015.git
synced 2026-05-26 23:19:37 +00:00
31 lines
903 B
Vue
31 lines
903 B
Vue
<script lang="ts" setup>
|
|
import { VisSingleContainer, VisDonut } from '@unovis/vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
value?: number
|
|
size?: number
|
|
color?: string
|
|
}>(),
|
|
{
|
|
value: 0,
|
|
size: 40,
|
|
color: '#06b6d4',
|
|
}
|
|
)
|
|
const data = computed(() => {
|
|
const progress = Math.min(Math.max(props.value, 0), 100)
|
|
return [progress, 100 - progress]
|
|
})
|
|
const getValue = (d: number) => d
|
|
const getColor = (d: number, i: number) => [props?.color, 'transparent'][i]
|
|
</script>
|
|
|
|
<template>
|
|
<div :style="{ width: `${size}px`, height: `${size}px`, '--vis-donut-background-color': 'transparent' }">
|
|
<VisSingleContainer :data="data" :width="size" :height="size">
|
|
<VisDonut :value="getValue" :radius="size / 2" :arcWidth="size / 5" :cornerRadius="20" :color="getColor" />
|
|
</VisSingleContainer>
|
|
</div>
|
|
</template>
|