zrx-chart

1.基础用法

vue

<template>
    <ring-chart-5 ref="chartRef" v-bind="chartOption"></ring-chart-5>
</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: '离线' },
    { value: 123, name: '危险' }
];
// 组合配置项
const chartOption = {
    seriesData
};

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

属性

属性名

说明

类型

默认值

参考值

title

标题

String

'标题标题'

radius

半径

Array

[128, 150]

[60, 70]

itemGap

间距

Number

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']

unit

单位

String

'个'

centerDisplay

中心部分的展示部分
null，'' 或者不传，表示中心部分不显示
'item' 表示中心部分展示单项
'sum' 表示中心部分展示总量
'itemValue' 表示中心部分展示值
'itemPercentage' 表示中心部分展示单项占比

String

null

'item'

minAngle

单项的最小角度

Number

tooltipConfine

是否将 tooltip 框限制在图表的区域内

Boolean

true

false

scale

图表缩放比例

Number

beforeSetOption

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

Function

null

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

afterSetOption

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

Function

null

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

支持方法

方法名

说明

例子

renderChart

渲染图表

chartRef?.value?.renderChart()

clearChart

清除图表

chartRef?.value?.clearChart()

1.基础用法 ​

属性 ​

支持方法 ​

1.基础用法

属性

支持方法