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.shape'polygon' | 'circle''polygon'雷达图形状
radar.radiusnumber80雷达图半径

指标配置

每个指标需包含 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>

圆形雷达图 ​

vue
<script setup>
const chartOption = ref({
  series: [{
    data: [{ value: [4200, 3000, 20000, 35000, 50000, 18000] }]
  }],
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '信息技术', max: 30000 }
    ],
    shape: 'circle'  // 使用圆形
  }
})
</script>

组件属性 ​

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

相关文档 ​