xCharts 饼状图 opts.extra.pie

以下是在 xCharts 中配置饼状图 opts.extra.pie 的属性列表：

属性名	类型	默认值	说明
activeOpacity	Number	0.5	启用 Tooltip 点击时，突出部分的透明度
activeRadius	Number	10	启用 Tooltip 点击时，突出部分的宽度
offsetAngle	Number	0	起始角度偏移度数，顺时针方向，3 点钟位置为 0 度
customRadius	Number	0	自定义半径
labelWidth	Number	15	数据标签到饼图外圆连线的长度
border	Boolean	true	是否绘制各类别中间的分割线
borderWidth	Number	2	分割线宽度
borderColor	Color	#FFFFFF	分割线颜色
linearType	String	none	渐变类型，可选值：none、custom
customColor	Array	-	自定义渐变颜色

新版项目中的实际写法

xcharts/pie/pie.uvue:13 也采用了和其他图表一致的策略：本地配置保留在 index.uts，示例页默认通过接口拿分页数据。

const data = { type: 'pie', current: 1, pageSize: 10, uts: true }
TuiApi('getPagedCharts', data, true).then((res : UTSJSONObject) => {
	opts = res.getArray('data.list') as UTSJSONObject[]
	canvasInsHeight.value = opts.length * itemH
})

所以文档完全可以直接引用本地配置，而不需要强行写成接口方案。

本地配置示例

xcharts/pie/index.uts:1 第一组“基本饼状图”配置如下：

export default [
	{
		name: '基本饼状图',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				pie: {
					activeOpacity: 0.5,
					activeRadius: 10,
					border: false,
					borderColor: '#FFFFFF',
					borderWidth: 3,
					labelWidth: 15,
					offsetAngle: 0
				},
				tooltip: {}
			},
			series: [
				{ name: '一班', data: [{ value: 50 }] },
				{ name: '二班', data: [{ value: 30 }] },
				{ name: '三班', data: [{ value: 20 }] },
				{ name: '四班', data: [{ value: 18 }] },
				{ name: '五班', data: [{ value: 8 }] }
			],
			type: 'pie'
		}
	}
]

页面初始化示例

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/pie/index.uts，当前饼图主要覆盖这些场景：

• 基本饼状图
• 带分割线 + 渐变色
• 自定义标签内容
• 起始角度偏移
• 点击高亮扇区

这些能力主要通过下面字段实现：

• extra.pie.activeOpacity
• extra.pie.activeRadius
• extra.pie.border / borderWidth / borderColor
• extra.pie.labelWidth
• extra.pie.offsetAngle
• series[].data[].labelText

动态更新示例

xcharts/pie/pie.uvue:34 里演示了初始化后的数据更新：

function updatearcbar() {
	const char = charts!
	const bar = char.getDrawCharts(0)!
	bar.update({
		series: [
			{ name: '成交量A', data: [{ value: 16 }, { value: 80 }, { value: 84 }, { value: 96 }, { value: 50 }, { value: 2 }] },
			{ name: '成交量B', data: [{ value: 87 }, { value: 95 }, { value: 48 }, { value: 43 }, { value: 86 }, { value: 25 }] },
			{ name: '成交量C', data: [{ value: 45 }, { value: 12 }, { value: 95 }, { value: 64 }, { value: 68 }, { value: 85 }] }
		]
	})
}

适合占比分析、分类统计、结构分布、比例构成等场景。