ChartRadarLite 轻量雷达图

用于能力模型、健康维度、评分分布、风控画像等多维分值展示。组件基于 Canvas 绘制层级网格、填充区域、顶点和标签，适合移动端轻量看板。

基础用法

<template>
  <lk-chart-radar-lite :data="wellness" :height="320" />
</template>

<script setup lang="ts">
const wellness = [
  { label: '睡眠', value: 88 },
  { label: '活力', value: 76 },
  { label: '专注', value: 82 },
  { label: '恢复', value: 72 },
  { label: '压力', value: 62 },
  { label: '运动', value: 91 },
];
</script>

自定义最大值

<lk-chart-radar-lite
  :data="score"
  :max="5"
  :levels="5"
  color="#16a34a"
/>

数据格式

interface RadarLiteItem {
  label: string;
  value: number;
  max?: number;
}

单项传入 max 时优先使用该项最大值；未传时使用组件级 max。

Props

参数	说明	类型	默认值
data	雷达图维度数据	RadarLiteItem[]	[]
height	容器高度，数字按 rpx 处理	number / string	320
padding	内边距，单位 rpx	number	42
levels	网格层级	number	4
max	默认最大值	number	100
color	图表主色，支持主题色或 Canvas 颜色	string	primary
showLabel	是否显示维度标签	boolean	true
showPoint	是否显示顶点	boolean	true
animationDuration	动画时长，单位 ms	number	680
effect	图表特效等级	none / subtle / premium	premium
effectDuration	图表特效周期，单位 ms	number	3200

使用建议

• 维度数量建议控制在 4-8 个，过多会造成标签拥挤。
• 维度之间应有可比较的语义，不要把完全不同量纲的数据强行放进同一张雷达图。
• 小屏场景下可关闭 showLabel，在图表下方用列表解释维度。
• 如果需要多组数据对比，当前轻量版不建议叠加多面，优先使用柱状图或列表对比。

注意事项

WARNING

雷达图容易制造“面积误读”。关键业务结论应配合数值列表或说明文案展示。