零云®lyCharts v26

Appearance

Radar 雷达图 ​

雷达图是一种使用多边形网状表示数据不同特征大小的图表，用于比较不同特性。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基础雷达图 ​

通过设置 series 属性，可以生成基础雷达图。

vue
<template>
  <view>
    <ly-charts-radar 
      width="720rpx"
      height="250px"
      :option="chartOption"
      @click="handleChartClick"
    ></ly-charts-radar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '基础雷达图'
    },
    // legend: {
    //     data: ['部门表现'],
    //     left: 'center',
    //     top: 0
    // },
    radar: {
      indicator: [
        { name: '攻击', max: 100 },
        { name: '防御', max: 100 },
        { name: '速度', max: 100 },
        { name: '力量', max: 100 },
        { name: '耐力', max: 100 },
        { name: '敏捷', max: 100 }
      ],
      axisLine: { show: true },
      name: { show: true }
    },
    series: [{
      name: '角色能力',
      type: 'radar',
      data: [82, 93, 89, 95, 75, 80]
    }]
  })

  const handleChartClick = (e) => {
    console.log('雷达图点击事件', e)
  }
</script>

填充雷达图 ​

通过设置 series.areaStyle 属性，可以为雷达图添加填充效果。

vue
<template>
  <view>
    <ly-charts-radar 
      width="720rpx"
      height="250px"
      :option="chartOption"
      @click="handleChartClick"
    ></ly-charts-radar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '填充雷达图'
    },
    legend: {
        data: ['部门表现', '预期表现'],
        left: 'center'
    },
    radar: {
      indicator: [
        { name: '销售', max: 100 },
        { name: '管理', max: 100 },
        { name: '技术', max: 100 },
        { name: '市场', max: 100 },
        { name: '财务', max: 100 }
      ],
      axisLine: { show: true },
      name: { show: true }
    },
    series: [{
      name: '部门表现',
      type: 'radar',
      areaStyle: {
        color: 'rgba(84, 112, 198, 0.5)'
      },
      data: [90, 80, 95, 70, 85]
    }, {
      name: '预期表现',
      type: 'radar',
      areaStyle: {
        // color: 'rgba(145, 204, 117, 0.5)'
      },
      data: [50, 60, 65, 30, 46]
    }]
  })

  const handleChartClick = (e) => {
    console.log('雷达图点击事件', e)
  }
</script>

自定义网格背景色 ​

通过设置 radar.splitArea.areaStyle.color 属性，可以自定义网格背景色。

vue
<template>
  <view>
    <ly-charts-radar 
      width="720rpx"
      height="230px"
      :option="chartOption"
      @click="handleChartClick"
    ></ly-charts-radar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '自定义网格背景色'
    },
    radar: {
      indicator: [
        { name: '销售', max: 100 },
        { name: '管理', max: 100 },
        { name: '技术', max: 100 },
        { name: '市场', max: 100 },
        { name: '财务', max: 100 }
      ],
      // 配置splitArea来自定义网格背景色
      splitArea: {
        areaStyle: {
          // 自定义颜色数组，交替使用不同颜色
          color: ['rgba(255, 173, 177, 0.3)', 'rgba(179, 229, 252, 0.3)']
        }
      },
      axisLine: { show: true },
      name: { show: true }
    },
    series: [{
      name: '部门表现',
      type: 'radar',
      areaStyle: {
        color: 'rgba(84, 112, 198, 0.6)'
      },
      data: [90, 80, 95, 70, 85]
    }]
  })
  
  const handleChartClick = (e) => {
    console.log('雷达图点击事件', e)
  }
</script>

圆形雷达图 ​

通过设置 radar.shape 为 'circle'，可以绘制圆形雷达图。

vue
<template>
  <view>
    <ly-charts-radar 
      width="720rpx"
      height="230px"
      :option="chartOption"
      @click="handleChartClick"
    ></ly-charts-radar>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  
  const chartOption = ref({
    title: {
      text: '圆形雷达图'
    },
    radar: {
      indicator: [
        { name: '销售', max: 100 },
        { name: '管理', max: 100 },
        { name: '技术', max: 100 },
        { name: '市场', max: 100 },
        { name: '财务', max: 100 }
      ],
      // 设置为圆形雷达图
      shape: 'circle',
      splitNumber: 4,
      splitArea: {
        areaStyle: {
          color: ['rgba(250, 250, 250, 0.2)', 'rgba(210, 219, 238, 0.2)']
        }
      },
      axisLine: { show: true },
      name: { show: true }
    },
    series: [{
      name: '部门表现',
      type: 'radar',
      areaStyle: {
        color: 'rgba(84, 112, 198, 0.3)'
      },
      data: [90, 80, 95, 70, 85]
    }]
  })
  
  const handleChartClick = (e) => {
    console.log('雷达图点击事件', e)
  }
</script>

Props ​

参数说明类型默认值可选值
option图表配置项，格式与 ECharts 相似Object--
width图表容器宽度String | Number100%-
height图表容器高度String | Number300-
theme图表主题配置Object--
chartId图表实例ID（多图表场景）StringradarChart-

Events ​

事件名说明回调参数
click点击图表时触发event对象

Option 属性 ​

属性名说明类型默认值
title标题配置Object-
title.text标题文本String-
title.subtext副标题文本String-
title.show是否显示标题Booleantrue
legend图例配置Object-
legend.data图例数据Array-
legend.show是否显示图例Booleantrue
legend.left图例水平位置String/Numbercenter
legend.top图例垂直位置String/Number-
radar雷达图配置Object-
radar.indicator指示器配置Array-
radar.indicator[].name指示器名称String-
radar.indicator[].max指示器最大值Number100
radar.splitNumber雷达图圈数Number5
radar.shape雷达图形状Stringpolygon
radar.radius雷达图半径Number/String/Array-
radar.splitArea分割区域配置Object-
radar.splitArea.areaStyle分割区域样式Object-
radar.splitArea.areaStyle.color分割区域颜色Array-
radar.axisLine轴线配置Object-
radar.axisLine.show是否显示轴线Booleantrue
radar.name指示器名称配置Object-
radar.name.show是否显示指示器名称Booleantrue
series系列列表Array-
series[].type系列类型Stringradar
series[].name系列名称String-
series[].data系列数据Array-
series[].color系列颜色String-
series[].areaStyle填充区域样式Object-
series[].areaStyle.color填充区域颜色String-

方法 ​

方法名说明参数
updateData更新图表数据data
getChartInstance获取图表实例-