zrx-chart

Appearance

1.基础用法 ​

vue
<template>
    <ring-chart-3 ref="chartRef" v-bind="chartOption"></ring-chart-3>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();
const unit = '单位';

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

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 340px;
    background-color: white;
}
</style>

2.颜色设置 ​

vue
<template>
    <ring-chart-3 ref="chartRef" v-bind="chartOption"></ring-chart-3>
</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 color = ['rgb(0, 221, 255)', 'rgb(55, 162, 255)', 'rgb(255, 0, 135)', 'rgb(255, 191, 0)'];
// 组合配置项
const chartOption = {
    seriesData,
    color
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 340px;
    background-color: white;
}
</style>

3.尺寸设置 ​

vue
<template>
    <ring-chart-3 ref="chartRef" v-bind="chartOption"></ring-chart-3>
</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 radius = [78, 106];
const backgroundRadius = [70, 106];
const scaleSize = 20;
// 组合配置项
const chartOption = {
    seriesData,
    radius,
    backgroundRadius,
    scaleSize
};

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 340px;
    background-color: white;
}
</style>

4.底色跟随每一项颜色 ​

vue
<template>
    <ring-chart-3 ref="chartRef" v-bind="chartOption"></ring-chart-3>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const chartRef = ref();

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

onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
    height: 340px;
    background-color: white;
}
</style>

属性 ​

属性名
说明
类型
默认值
参考值
radius
半径
Array
[58, 76]
[60, 70]
itemGap
间距
Number
0
4
backgroundRadius
底色圆环半径
Array
[53, 76]
[50, 70]
backgroundColor
底色
String
'rgb(232, 234, 240)'
'green'
color
预设颜色
Array
['#1BBE8C', '#F0465A', '#FFA433', '#B8BED5']
['#405FFE', '#1BBE8C', '#48CBA3', '#A4E5D1', '#ECEFFE']
similarBackgroundColor
是否让底层图层的颜色与 color 相似，若设置为 true 则 backgroundColor 将失效
Boolean
false
true
seriesData
数据项
Array
[]
[
    { value: 1048, name: '正常' },
    { value: 735, name: '故障' },
    { value: 580, name: '告警' },
    { value: 484, name: '离线' }
]
unit
单位
String
''
'个'
scaleSize
悬浮选中单项时，增加的半径
Number
5
20
clockwise
饼图的扇区是否是顺时针排布
Boolean
true
false
tooltipConfine
是否将 tooltip 框限制在图表的区域内
Boolean
true
false
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()