zrx-chart

Appearance

1.基础用法 ​

0.0%

风险指数

vue
<template>
    <gradient-ring-chart :value="v" subTitle="风险指数" valueUnit="%"></gradient-ring-chart>
    <el-button @click="randomValue">随机值</el-button>
</template>
<script setup>;
import { ref } from 'vue';

const v = ref(50);

const randomValue = () => (v.value = Math.round(Math.random() * 100));
</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: #042a44;
    padding: 32px;
}
</style>

2.颜色半径设置 ​

0.0人

副标题

vue
<template>
    <gradient-ring-chart v-bind="option"></gradient-ring-chart>
</template>
<script setup>
const option = {
    value: 80,
    subTitle: '副标题',
    valueUnit: '人',
    radius: 200,
    barWidth: 60,
    layerColor: 'rgba(255, 100, 100, 0.2)',
    startColor: '#4da2cb',
    endColor: '#67b26f'
};
</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: rgb(27, 27, 31);
    padding: 32px;
}
</style>

3.角度范围控制 ​

0.0人

副标题

0.0人

副标题

0.0人

副标题

vue
<template>
    <gradient-ring-chart v-bind="option"></gradient-ring-chart>
    <gradient-ring-chart v-bind="option2"></gradient-ring-chart>
    <gradient-ring-chart v-bind="option3"></gradient-ring-chart>
</template>
<script setup>
const option = {
    value: 60,
    subTitle: '副标题',
    valueUnit: '人',
    startAngle: 120,
    angleRange: 120
};
const option2 = {
    value: 80,
    subTitle: '副标题',
    valueUnit: '人',
    startAngle: 240,
    angleRange: 240
};
const option3 = {
    value: 80,
    subTitle: '副标题',
    valueUnit: '人',
    startAngle: 0,
    angleRange: 360
};
</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: #042a44;
    padding: 32px;
}
</style>

4.顺时针、逆时针 ​

0.0
0.0
vue
<template>
    <gradient-ring-chart v-bind="option"></gradient-ring-chart>
    <gradient-ring-chart v-bind="option2"></gradient-ring-chart>
</template>
<script setup>
const option = {
    value: 66,
    clockwise: true,
    startAngle: 140
};
const option2 = {
    value: 66,
    clockwise: false,
    startAngle: 40,
    angleRange: 260
};
</script>
<style lang="scss" scoped>
.zrx-chart {
    background-color: #042a44;
    padding: 32px;
}
</style>

属性 ​

属性名
说明
类型
默认值
参考值
radius
半径
Number
120
130
barWidth
进度条宽度
Number
25
26
layerColor
圆环底色
String
'#13374f'
'#13374f'
startAngle
起始角度
Number
140
180
angleRange
角度范围
Number
260
200
value
数值
Number
0
66
max
最大值
Number
100
100
min
最小值
Number
0
100
startColor
起始颜色
String
'#0e8fff'
'red'
endColor
终止颜色
String
'#30d5eb'
'green'
showValue
是否显示中心数字
Boolean
true
false
valueFixBit
中心数字的位数
Number
1
0
valueUnit
中心数值单位
String
''
'%'
subTitle
副标题
String
''
'风险指数'
clockwise
是否是顺时针排布。
Boolean
true
false