1.基础用法

<template>
    <ring-chart-4 ref="chartRef" v-bind="chartOption"></ring-chart-4>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();

const seriesData = [
    { value: 1048, name: '正常' },
    { value: 735, name: '故障' },
    { value: 580, name: '告警' },
    { value: 484, name: '离线' }
];
// 组合配置项
const chartOption = {
    seriesData
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 664px;
    background-color: rgb(3, 43, 68);
}
</style>

属性

属性名

说明

类型

默认值

参考值

radius

半径

Array

[128, 150]

[60, 70]

itemGap

间距

Number

4

4

seriesData

数据项

Array

[]

[
    { value: 2, name: '住宿业营业额' },
    { value: 3, name: '餐饮业营业额' },
    { value: 5, name: '零售业营业额' },
    { value: 4, name: '批发业营业额' }
]

color

预设颜色

Array

['#ae7efd', '#7670d7', '#709ad7', '#72dde0', '#d0f1ff', '#b5bfe2', '#206e8a', '#1dd1ff', '#d2abea', '#0e8fff']

['#405FFE', '#1BBE8C', '#48CBA3', '#A4E5D1', '#ECEFFE']

showLabel

是否显示 label

Number

true

false

unit

单位

String

''

'个'

labelFormatter

自定义 label 函数

Function

null

function (...params) {
    return '自定义 label 格式'
}

edgeDistance

文字与边缘之间的距离

Number

48

20

minAngle

单项的最小角度

Number

4

12

scale

图表缩放比例

Number

1

2

beforeSetOption

万能方法，图表渲染之前执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

afterSetOption

万能方法，图表渲染之后执行

Function

null

function (option, chart) {
    return '执行对 option 的修改，绑定自定义事件等'
}

支持方法

方法名

说明

例子

renderChart

渲染图表

chartRef?.value?.renderChart()

clearChart

清除图表

chartRef?.value?.clearChart()