xCharts 仪表盘 opts.extra.gauge

以下是在 xCharts 中配置仪表盘 opts.extra.gauge 的属性列表：

属性名	类型	默认值	说明
type	String	default	仪表盘样式
width	Number	15	仪表盘坐标轴线宽
labelColor	Color	#666666	仪表盘刻度标签颜色
labelOffset	Number	13	仪表盘标签文字径向偏移距离
startAngle	Number	0.75	起始角度，范围 0-2
endAngle	Number	0.25	结束角度，范围 0-2
startNumber	Number	0	起始数值
endNumber	Number	100	结束数值
formatter	Function	-	原生数据标签自定义函数
format	String	-	组件层数据标签格式化
splitLine.fixRadius	Number	0	刻度线径向偏移量
splitLine.splitNumber	Number	10	刻度线分段数量
splitLine.width	Number	15	分割线长度
splitLine.color	Color	#FFFFFF	分割线颜色
splitLine.childNumber	Number	5	子刻度线数量
splitLine.childWidth	Number	5	子刻度线长度
pointer.width	Number	15	指针宽度
pointer.color	String	auto	指针颜色，auto 时随仪表盘背景颜色变化

新版项目中的实际写法

xcharts/gauge/gauge.uvue:12 同样采用了“本地配置保留、示例页默认接口获取”的方式：

const data = { type: 'gauge', 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/gauge/index.uts:1 第一组“基本仪表盘”配置如下：

export default [
	{
		name: '基本仪表盘',
		option: {
			animation: true,
			categories: [
				{ color: '#1890ff', value: 0.2 },
				{ color: '#2fc25b', value: 0.8 },
				{ color: '#f04864', value: 1 }
			],
			dataLabel: true,
			extra: {
				gauge: {
					endAngle: 0.25,
					endNumber: 100,
					labelColor: '#666666',
					pointer: { color: 'auto', width: 24 },
					splitLine: {
						childNumber: 5,
						childWidth: 12,
						color: '#FFFFFF',
						fixRadius: 0,
						splitNumber: 10,
						width: 30
					},
					startAngle: 0.75,
					startNumber: 0,
					type: 'default',
					width: 30
				}
			},
			series: [{ name: '完成率', data: [{ value: 0.66 }] }],
			subtitle: { color: '#666666', fontSize: 15, name: '实时速度', offsetY: -50 },
			title: { color: '#2fc25b', fontSize: 25, name: '60Km/H', offsetY: 50 },
			type: 'gauge'
		}
	}
]

页面初始化示例

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/gauge/index.uts，当前仪表盘主要覆盖这些场景：

• 基本仪表盘
• 进度型仪表盘
• 中心标题 + 副标题展示
• 分段阈值颜色

核心配置集中在：

• categories[].value / categories[].color
• extra.gauge.startAngle / endAngle
• extra.gauge.pointer
• extra.gauge.splitLine
• title / subtitle

动态更新示例

xcharts/gauge/gauge.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 }] }
		]
	})
}

适合速度表、达成率、评分盘、健康指数等场景。