xCharts 圆环图 opts.extra.ring

以下是在 xCharts 中配置圆环图 opts.extra.ring 的属性列表：

属性名	类型	默认值	说明
ringWidth	Number	30	圆环宽度
centerColor	Color	#FFFFFF	中间填充圆的颜色
activeOpacity	Number	0.5	点击高亮时扇区透明度
activeRadius	Number	10	点击高亮时扇区宽度
offsetAngle	Number	0	起始角度偏移
customRadius	Number	0	自定义半径
labelWidth	Number	15	标签连线长度
border	Boolean	true	是否绘制类别分割线
borderWidth	Number	2	分割线宽度
borderColor	Color	#FFFFFF	分割线颜色
linearType	String	none	渐变类型，可选值：none、custom
customColor	Array	-	自定义渐变颜色

新版项目中的实际写法

xcharts/ring/ring.uvue:12 也默认通过接口加载示例数据，但本地 xcharts/ring/index.uts 仍然是完整可用的配置来源，文档里完全可以直接写本地示例。

本地配置示例

xcharts/ring/index.uts:1 第一组“基本环形图”配置如下：

export default [
	{
		name: '基本环形图',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				ring: {
					activeOpacity: 0.5,
					activeRadius: 10,
					border: false,
					borderColor: '#FFFFFF',
					borderWidth: 3,
					labelWidth: 15,
					offsetAngle: 0,
					ringWidth: 60
				},
				tooltip: {}
			},
			legend: { lineHeight: 25, position: 'right', show: true },
			series: [
				{ name: '一班', data: [{ value: 50 }] },
				{ name: '二班', data: [{ value: 30 }] },
				{ name: '三班', data: [{ value: 20 }] },
				{ name: '四班', data: [{ value: 18 }] },
				{ name: '五班', data: [{ value: 8 }] }
			],
			subtitle: { color: '#7cb5ec', fontSize: 25, name: '70%' },
			title: { color: '#666666', fontSize: 15, name: '收益率' },
			type: 'ring'
		}
	}
]

页面初始化示例

import opts from './index.uts'

function initFinished(e : ITuiCharts) {
	charts = e
	opts.forEach((item : UTSJSONObject, index : number) => {
		const chart = e.add(index, item.getJSON('option')!)
		chart.setCoordinates({ height: 287, xOffset: 0, yOffset: itemH * index })
		chart.draw()
	})
}

常见用法归纳

结合 xcharts/ring/index.uts，当前圆环图主要覆盖这些场景：

• 基本环形图
• 分割线 + 渐变色
• 自定义标签内容
• 中心标题 + 副标题展示

常见关键字段包括：

• extra.ring.ringWidth
• extra.ring.border
• extra.ring.linearType
• title / subtitle
• legend.position

动态更新示例

xcharts/ring/ring.uvue:33 演示了初始化后更新图表数据：

function updatearcbar() {
	const char = charts!
	const bar = char.getDrawCharts(0)!
	bar.update({
		series: [
			{ name: '目标值', data: [{ value: 50 }, { value: 60 }, { value: 55 }, { value: 65 }, { value: 45 }, { value: 70 }] },
			{ name: '完成量', data: [{ value: 10 }, { value: 20 }, { value: 15 }, { value: 25 }, { value: 5 }, { value: 30 }] }
		]
	})
}

适合收益率、构成比例、中心指标总结等场景。