RayChart

Appearance

雷达图 ​

3D 雷达图展示多维数据对比，通过多边形或圆形立体网格呈现各维度数值。

快速开始 ​

vue
<template>
  <RayRadar :option="chartOption" />
</template>

<script setup>
import { ref } from 'vue'
import { RayRadar } from 'raychart'

const chartOption = ref({
  series: [{
    data: [
      { value: [4200, 3000, 20000, 35000, 50000, 18000] }
    ]
  }],
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '信息技术', max: 30000 },
      { name: '客服', max: 38000 },
      { name: '研发', max: 52000 },
      { name: '市场', max: 25000 }
    ]
  }
})
</script>

核心配置 ​

属性类型默认值说明
radar.indicatorArray-雷达图指标配置（必填）
radar.radiusnumber10雷达图半径
radar.center[number, number]自动雷达图中心（网格坐标）
radar.splitNumbernumber5雷达网格圈数
radar.splitLineobject自动网格线样式
radar.axisLabelobject自动指标名称标签样式

指标配置

每个指标需包含 name（名称）和 max（最大值）字段。

常见场景 ​

多组数据对比 ​

一个系列内可包含多组数据（不同颜色自动分配）：

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [
      { value: [4200, 3000, 20000, 35000, 50000, 18000], name: '团队A' },
      { value: [5000, 3500, 22000, 30000, 45000, 20000], name: '团队B' }
    ]
  }],
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '信息技术', max: 30000 },
      { name: '客服', max: 38000 },
      { name: '研发', max: 52000 },
      { name: '市场', max: 25000 }
    ]
  }
})
</script>

指标最小值 ​

indicator 支持 min 字段（默认 0），用于非零起点：

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [{ value: [4200, 3000, 20000] }]
  }],
  radar: {
    indicator: [
      { name: '销售', max: 6500, min: 1000 },
      { name: '管理', max: 16000, min: 2000 },
      { name: '信息技术', max: 30000, min: 5000 }
    ]
  }
})
</script>

形状说明

当前版本雷达图网格固定为多边形，不支持 circle 圆形形态。

组件属性 ​

属性类型默认值说明
optionRayChartOption-图表配置对象（必填）
widthstring | number'100%'图表宽度
heightstring | number'600px'图表高度

相关文档 ​

基础学习 ​

进阶主题 ​

API 参考 ​

其他图表类型 ​

在线示例 ​