1.基础用法(画像app)

风险指数

0.0%

<template>
    <gradient-ring-chart-2 :value="v" subTitle="风险指数" valueUnit="%"></gradient-ring-chart-2>
</template>
<script setup>;
import { ref } from 'vue';

const v = ref(50);

</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: white;
    padding: 32px;
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border: 14px solid rgb(238, 240, 245);
        mask-image: linear-gradient(180deg, red, transparent);
    }
}
</style>

属性

属性名

说明

类型

默认值

参考值

radius

半径

Number

88

130

barWidth

进度条宽度

Number

13

26

layerColor

圆环底色

String

'rgb(247, 248, 250)'

'#13374f'

startAngle

起始角度

Number

140

180

angleRange

角度范围

Number

260

200

value

数值

Number

0

66

max

最大值

Number

100

100

min

最小值

Number

0

100

startColor

起始颜色

String

'rgb(0, 85, 255)'

'red'

endColor

终止颜色

String

'rgb(97, 203, 255)'

'green'

showValue

是否显示中心数字

Boolean

true

false

valueFixBit

中心数字的位数

Number

1

0

valueUnit

中心数值单位

String

''

'%'

subTitle

副标题

String

''

'风险指数'

clockwise

是否是顺时针排布。

Boolean

true

false

scale

图表缩放比例

Number

1

2