1.带线段标签
vue
<template>
<ring-chart-2 v-bind="chartOption" ref="chartRef"></ring-chart-2>
</template>
2.中心自定义
自定义中心
vue
<template>
<ring-chart-2 v-bind="chartOption" ref="chartRef">
<h4 style="font-size: 16px; color: red; font-weight: 600;">自定义中心</h4>
</ring-chart-2>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const chartRef = ref();
const radius = [45, 82];
const color = ['#d6f0fd', '#396c87', '#60d2ec', '#b8bee0', '#408df7'];
const seriesData = [
{ value: 2, name: '文化、体育和娱乐业' },
{ value: 3, name: '居民服务、修理和其他' },
{ value: 5, name: '科学研究和技术服务业' },
{ value: 4, name: '租赁和商务服务业' },
{ value: 3, name: '物联网、软件和信息服务' }
];
const title = '企业总数';
const unit = '家';
const chartOption = {
radius,
color,
seriesData,
title,
unit
};
onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
width: 440px;
height: 296px;
background-color: rgb(3, 43, 68);
}
</style>3.自定义标签
自定义标签富文本对应名
title: label标题
split: 上下分割线
value: 数值
unit: 单位
colGap: 左右间距
flat: 持平的图标
rise: 上升图标
fall: 下降图标
vue
<template>
<ring-chart-2 v-bind="chartOption" ref="chartRef"></ring-chart-2>
<p style="font-size: 14px; line-height: 1.5; padding: 12px 0;">
自定义标签富文本对应名<br/>
title: label标题<br/>
split: 上下分割线<br/>
value: 数值<br/>
unit: 单位<br/>
colGap: 左右间距<br/>
flat: 持平的图标<br/>
rise: 上升图标<br/>
fall: 下降图标<br/>
</p>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const chartRef = ref();
const radius = [62, 86];
const labelFormatter = param => {
const rate = param.data.rate;
const formatterArray = [
`{title|${ param.name }}\n`,
'{split|}\n',
`{value|${ param.value }}`,
`{unit|${ unit }}`,
'{colGap|}',
`{value|${ param.percent }}`,
'{unit|%}',
'{colGap|}',
`{value|${ rate }}`,
'{unit|%}',
'{unit|同比增速}'
];
formatterArray.push(rate === 0 ? '{flat|}' : (rate > 0 ? '{rise|}' : '{fall|}'));
return formatterArray.join('');
};
const color = ['#d6f0fd', '#396c87', '#60d2ec', '#b8bee0', '#408df7'];
const seriesData = [
{ value: 2, name: '文化、体育和娱乐业', rate: 1.2 },
{ value: 3, name: '居民服务、修理和其他', rate: -2.3 },
{ value: 5, name: '科学研究和技术服务业', rate: 0 },
{ value: 4, name: '租赁和商务服务业', rate: 1.2 },
{ value: 3, name: '物联网、软件和信息服务', rate: -2.3 }
];
const title = '企业总数';
const unit = '家';
const edgeDistance = 20;
const chartOption = {
radius,
color,
seriesData,
title,
unit,
labelFormatter,
edgeDistance
};
onMounted(() => chartRef.value.renderChart());
</script>
<style lang="scss" scoped>
.zrx-chart {
width: 760px;
height: 256px;
background-color: rgb(3, 43, 68);
}
</style>4.绑定原生html属性
vue
<template>
<ring-chart-2 v-bind="chartOption" ref="chartRef"></ring-chart-2>
</template>
属性
属性名
说明
类型
默认值
参考值
title
标题
String
''
'标题'
radius
半径
Array
[68, 80]
[60, 70]
itemGap
间距
Number
2
4
seriesData
数据项
Array
[]
[
{ value: 2, name: '住宿业营业额' },
{ value: 3, name: '餐饮业营业额' },
{ value: 5, name: '零售业营业额' },
{ value: 4, name: '批发业营业额' }
]
{ value: 2, name: '住宿业营业额' },
{ value: 3, name: '餐饮业营业额' },
{ value: 5, name: '零售业营业额' },
{ value: 4, name: '批发业营业额' }
]
color
颜色
Array
['#ae7efd', '#7670d7', '#709ad7', '#72dde0', '#d0f1ff', '#b5bfe2', '#206e8a', '#1dd1ff', '#d2abea', '#0e8fff']
['#ae7efd', '#7670d7', '#709ad7', '#72dde0', '#d0f1ff', '#b5bfe2', '#206e8a', '#1dd1ff', '#d2abea', '#0e8fff']
unit
单位
String
''
'个'
labelFormatter
自定义 label 函数
Function
null
function (...params) {
return '自定义 label 格式'
}
return '自定义 label 格式'
}
edgeDistance
文字与边缘之间的距离
Number
10
20
minAngle
单项的最小角度
Number
0
4
scale
图表缩放比例
Number
1
2
beforeSetOption
万能方法，图表渲染之前执行
Function
null
function (option, chart) {
return '执行对 option 的修改，绑定自定义事件等'
}
return '执行对 option 的修改，绑定自定义事件等'
}
afterSetOption
万能方法，图表渲染之后执行
Function
null
function (option, chart) {
return '执行对 option 的修改，绑定自定义事件等'
}
return '执行对 option 的修改，绑定自定义事件等'
}
支持方法
方法名
说明
例子
renderChart
渲染图表
chartRef?.value?.renderChart()
clearChart
清除图表
chartRef?.value?.clearChart()