xCharts 雷达图 opts.extra.radar

以下是在 xCharts 中配置雷达图 opts.extra.radar 的属性列表：

属性名	类型	默认值	说明
gridType	String	radar	网格类型，可选值：radar 蜘蛛网格、circle 圆形背景网格
gridColor	Color	#CCCCCC	网格颜色
gridCount	Number	3	网格数量
gridEval	Number	1	数据点位网格抽稀
radius	Number	0	自定义半径
axisLabel	Boolean	false	是否显示刻度值
axisLabelTofix	Number	0	刻度值小数位数
labelShow	Boolean	true	是否显示各项标识文案
labelColor	Color	#666666	标识文案颜色
labelPointShow	Boolean	false	是否显示末端刻度圆点
labelPointRadius	Number	3	刻度圆点半径
labelPointColor	Color	#CCCCCC	刻度圆点颜色
opacity	Number	0.2	主图区域透明度
border	Boolean	false	是否绘制主图区域描边线
borderWidth	Number	2	描边线宽度
max	Number	-	数据最大值
linearType	String	none	渐变类型，可选值：none、custom
customColor	Array	-	自定义渐变颜色

新版项目中的实际写法

xcharts/radar/radar.uvue:12 同样采用了“本地配置保留、示例页默认接口加载”的方式，因此文档可以直接使用本地 index.uts 配置。

本地配置示例

xcharts/radar/index.uts:1 第一组“多边形雷达图”配置如下：

export default [
	{
		name: '多边形雷达图',
		option: {
			animation: true,
			categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
			dataLabel: false,
			extra: {
				radar: {
					border: true,
					gridColor: '#CCCCCC',
					gridCount: 3,
					gridType: 'radar',
					labelShow: true,
					max: 200,
					opacity: 0.2
				},
				tooltip: {}
			},
			legend: { lineHeight: 25, position: 'right', show: true },
			series: [
				{ name: '成交量1', data: [{ value: 90 }, { value: 110 }, { value: 165 }, { value: 195 }, { value: 187 }, { value: 172 }] },
				{ name: '成交量2', data: [{ value: 190 }, { value: 210 }, { value: 105 }, { value: 35 }, { value: 27 }, { value: 102 }] }
			],
			type: 'radar'
		}
	}
]

页面初始化示例

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

• 多边形雷达图
• 圆形雷达图
• 刻度标签 + 网格抽稀
• 多组数据对比

核心配置主要集中在：

• extra.radar.gridType
• extra.radar.gridCount
• extra.radar.gridEval
• extra.radar.axisLabel
• extra.radar.max
• series[].data[].value

动态更新示例

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

适合能力评估、维度分析、多指标画像、方案对比等场景。