Tui Plus Vapor

xCharts 进度条 `opts.extra.arcbar`

以下是在 xCharts 中配置进度条 opts.extra.arcbar 的属性列表：

属性名	类型	默认值	说明
type	String	default	圆弧进度图样式，可选值：`default` 半圆弧模式、`circle` 整圆模式
direction	String	cw	动画方向，可选值：`cw` 顺时针、`ccw` 逆时针
width	Number	12	圆弧进度图弧线宽度
lineCap	String	round	进度条两端样式，可选值：`round`、`square`、`butt`
backgroundColor	Color	#E9E9E9	圆弧进度图背景颜色
startAngle	Number	0.75	起始角度，范围 `0-2`，`0` 为 3 点钟方向
endAngle	Number	0.25	结束角度，范围 `0-2`，`1.5` 为 12 点钟方向
radius	Number	-	自定义半径，无特殊需求可不填
gap	Number	2	多圆弧之间的间隔，单位 `px`
centerX	Number	-	自定义圆心 x 坐标
centerY	Number	-	自定义圆心 y 坐标
linearType	String	none	渐变类型，可选值：`none`、`custom`
customColor	Array	-	自定义渐变颜色，通常与 `series` 数量对应

新版项目中的实际写法

在新版项目中，xcharts/arcbar/arcbar.uvue 没有直接写：

import opts from './index.uts'

而是改成了接口获取数据：xcharts/arcbar/arcbar.uvue:14

const data = { type: 'arcbar', 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/arcbar/index.uts
示例页走接口，不是因为 arcbar 配置必须请求接口
主要原因是图表示例数据量大时，长期直接内置在示例工程链路中，可能让编译阶段的内存压力变高

所以从文档和业务项目实践的角度，完全可以直接使用本地配置。

本地配置示例

下面这段就是 xcharts/arcbar/index.uts:1 中第一组本地配置示例，文档里可以直接使用：

export default [
	{
		name: '圆弧进度条+渐变色',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				arcbar: {
					backgroundColor: '#E9E9E9',
					endAngle: 0.25,
					gap: 2,
					linearType: 'custom',
					startAngle: 0.75,
					type: 'default',
					width: 12
				}
			},
			fontSize: 13,
			padding: [0, 0, 0, 0],
			series: [
				{
					color: '#2fc25b',
					data: [{ value: 0.8 }],
					name: '正确率'
				}
			],
			subtitle: {
				color: '#666666',
				fontSize: 25,
				name: '正确率'
			},
			title: {
				color: '#2fc25b',
				fontSize: 35,
				name: '80%'
			},
			type: 'arcbar'
		}
	}
]

页面初始化示例

如果你希望直接使用本地配置，页面可以写成这种形式：

import opts from './index.uts'

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

如果你的配置量非常大，再考虑像示例工程那样改为接口方案。

常见用法归纳

结合 xcharts/arcbar/index.uts，当前 arcbar 主要有这些常见用法：

半圆弧进度条 + 渐变色
多重整圆进度条
逆时针圆弧进度条
逆时针多重整圆进度条

这几种能力主要通过下面这些字段组合出来：

type: 'default' | 'circle'
direction: 'cw' | 'ccw'
startAngle / endAngle
series[].data[].value
title / subtitle
linearType / customColor

动态更新示例

arcbar.uvue 还演示了图表初始化后如何更新第一块绘制区域：xcharts/arcbar/arcbar.uvue:37

function updatearcbar() {
	const char = charts!
	const bar = char.getDrawCharts(0)!
	bar.update({
		series: [
			{
				color: '#2fc25b',
				data: [{ value: 0.2 }],
				name: '正确率'
			}
		],
		subtitle: {
			color: '#0055ff',
			fontSize: 18,
			name: '正确率'
		},
		title: {
			color: '#ff5500',
			fontSize: 20,
			name: '60%'
		}
	})
}

这种方式适合做实时进度、动态评分、完成率变化等场景。

xCharts 进度条 opts.extra.arcbar ​

新版项目中的实际写法 ​

推荐文档写法 ​

本地配置示例 ​

页面初始化示例 ​

常见用法归纳 ​

动态更新示例 ​