XRadar — 雷达图

基于 SVG 自研的雷达图组件，零三方依赖（不依赖 ECharts / Canvas 库）。支持自定义维度数据、网格层数、颜色主题，单组与多组对比均可。

实时演示

<XRadar :data="[
  { name: 'Vue', value: 95 },
  { name: 'React', value: 85 },
  { name: 'TypeScript', value: 90 },
  { name: 'Node.js', value: 80 },
  { name: 'CSS', value: 92 },
  { name: 'Webpack', value: 75 }
]" />

不传 data 时使用默认 6 维数据。

Props

属性	类型	默认值	说明
data	{ name, value }[]	—	维度数据数组
size	number	300	容器宽高（px），正方形
levels	number	5	网格层数
nameGap	number	12	标签与雷达图边缘间距（px）
areaColor	string	'rgba(64,158,255,0.3)'	数据区域填充色
lineColor	string	'#409eff'	数据区域边线颜色
pointColor	string	'#409eff'	数据点颜色
pointRadius	number	4	数据点半径（px）
lineWidth	number	2	数据边线宽度（px）
labelColor	string	'#666666'	维度标签颜色
labelFontSize	number	13	维度标签字号（px）
gridColor	string	'#e4e7ed'	网格和径向线颜色
series	Object[]	[]	多组对比，传入时优先于 data，自动生成图例并取色
max	number	null	坐标轴最大值；不传取数据最大值与 100 的较大者

多系列对比

<XRadar :series="[
  { name: '当前版本', data: [{ name: '性能', value: 90 }, { name: '易用性', value: 80 }] },
  { name: '竞品', data: [{ name: '性能', value: 75 }, { name: '易用性', value: 85 }] }
]" />

注意事项

• 完全基于 SVG，无需安装 echarts。
• 从正上方（12 点钟）顺时针分布维度。
• 纯矢量渲染，自适应容器，无需 ResizeObserver。
• 鼠标悬停数据点放大并显示 维度：数值 提示（原生 <title>）。