xCharts 玫瑰图 opts.extra.rose

以下是在 xCharts 中配置玫瑰图 opts.extra.rose 的属性列表：

属性名	类型	默认值	说明
type	String	area	玫瑰图样式，可选值：area 面积模式、radius 半径模式
minRadius	Number	-	最小半径值
activeOpacity	Number	0.5	点击高亮时透明度
activeRadius	Number	10	点击高亮时宽度
offsetAngle	Number	0	起始角度偏移
labelWidth	Number	15	数据标签连线长度
border	Boolean	true	是否绘制类别分割线
borderWidth	Number	2	分割线宽度
borderColor	Color	#FFFFFF	分割线颜色
linearType	String	none	渐变类型，可选值：none、custom
customColor	Array	-	自定义渐变颜色

新版项目中的实际写法

xcharts/rose/rose.uvue:12 依然是“本地配置保留 + 示例页默认接口获取”的结构，所以文档里同样可以优先贴 index.uts 中的真实配置。

本地配置示例

xcharts/rose/index.uts:1 第一组“面积玫瑰图”可以直接作为使用示例：

export default [
	{
		name: '面积玫瑰图',
		option: {
			animation: true,
			dataLabel: true,
			extra: {
				rose: {
					activeOpacity: 0.5,
					activeRadius: 10,
					border: false,
					borderColor: '#FFFFFF',
					borderWidth: 2,
					labelWidth: 15,
					minRadius: 50,
					offsetAngle: 0,
					type: 'area'
				},
				tooltip: {}
			},
			legend: { lineHeight: 25, position: 'left', show: true },
			series: [
				{ name: '一班', data: [{ value: 50 }] },
				{ name: '二班', data: [{ value: 30 }] },
				{ name: '三班', data: [{ value: 20 }] },
				{ name: '四班', data: [{ value: 18 }] },
				{ name: '五班', data: [{ value: 8 }] }
			],
			type: 'rose'
		}
	}
]

页面初始化示例

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

• 面积玫瑰图
• 半径玫瑰图 + 分割线 + 渐变色
• 自定义标签内容

关键配置主要是：

• extra.rose.type
• extra.rose.minRadius
• extra.rose.border
• extra.rose.linearType
• legend.position

动态更新示例

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

适合权重分析、类别占比对比、视觉强调型分布图场景。