1.基础用法

0.0

0.0

0.0

风险运营1

风险运营2

风险运营3

风险运营4

<template>
	<div class="page">
		<gradient-ring-chart v-for="n in 3" :value="66"></gradient-ring-chart>
		<blur-tip v-for="n in 4" :placement="['top', 'right', 'bottom', 'left'][n % 4]"><p>风险运营{{ n }}</p></blur-tip>
	</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
</script>
<style lang="scss" scoped>
.page {
	background-color: rgb(3, 43, 68);
	position: relative;
	white-space: nowrap;
	.zrx-tip {
		z-index: 1;
		position: absolute;
		&:deep(p) {
			color: white;
			font-size: 24px;
			white-space: nowrap;
			padding: 4px 12px;
		}
		&:nth-child(4) {
			left: 100px;
			top: 110px;
		}
		&:nth-child(5) {
			left: 310px;
			top: 110px;
		}
		&:nth-child(6) {
			left: 540px;
			top: 50px;
		}
		&:nth-child(7) {
			left: 530px;
			top: 180px;
		}
	}
}
</style>

属性

属性名

说明

类型

默认值

参考值

placement

内容部分的位置，可选值 'top', 'right', 'bottom', 'left'

String

'top'

'left'

tipWidth

凸起部分的宽度

Number

14

12

tipHeight

凸起部分的高度

Number

10

12

borderRadius

容器圆角

Number

10

12

filterBlur

模糊程度

Number

6

6

borderWidth

线条的宽度

Number

1

1

borderColor

线条的颜色

String

'rgba(255, 255, 255, 0.05)'

rgba(255, 0, 0, 0.5)