echarts雷达图使用和详细参数 （雷达图）

echarts雷达图使用和详细参数 （雷达图）

1、🍉 认识、引入和使用

先来看看我们雷达图是什么样子：

雷达图的使用跟我们的echarts折线图差不多，只不过我们在echarts折线图文章之中进行了大量的铺垫，习惯了echarts折线图的使用以后，使用我们雷达图就轻而易举了。

2、🍉 使用

先确保你安装的是Echarts5，否则的化安装一下

yarn add echarts

// 结构部分
<!-- 雷达图 -->
<div ref="echartradarRef1" style="width: 50%; height: 400px;"></div>


// 引入部分
import * as echarts from 'echarts';// 5.4区别4引入方式
/ 雷达图
const echartradarRef1 = ref(null);
onMounted(() => {
    initChartradar(); //雷达图
});

展示一下官方给我们的雷达图的默认设置

// 雷达图
const initChartradar=()=>{
  // 在 DOM 挂载后初始化 ECharts
    let chart = echarts.init(echartradarRef1.value);
    // 设置图表的配置项和数据
    let option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: 'Actual Spending'
        }
      ]
    }
  ]
};
    // 使用配置项和数据显示图表
    chart.setOption(option);
}

然后我们看看效果

3、🍉详细参数使用和雷达图调整

🍓 调整雷达图圈的大小

雷达图圈大小调整：option => radar=> radius 大小，这个直接解决了我们大小圆圈的问题

  radar: {
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ],
    radius:80,  // 这个属性用来调整雷达图圈大小
  },

🍓调整位置

option => radar => center

雷达图位置：中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。

center: ["30%", "50%"],

🍓调整形状

option => radar => shape

shape: 'circle',

🍓调整开始角度

option => radar => startAngle

startAngle: 100, 

下面是10到100的区别

🍓 调整雷达图线的颜色color

这里我们想要自定义一下雷达圈上的线的颜色

在option里面添加颜色

color: ['green', 'red'],

🍓雷达图圈数

option => radar => splitNumber

splitNumber: 3, // 雷达图圈数 

下面是默认和设置的区别

🍓指示器名称和指示器轴的距离

option => radar => nameGap

nameGap:150, //指示器名称和指示器轴的距离。

下面是默认和设置的区别

🍓雷达图背景

option => radar => splitArea

//雷达图背景的颜色
splitArea: {
  // 图表背景的颜色
  areaStyle: {
    // color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowBlur: 10,
    color: '#fff',
    opacity: 0.3 //雷达图数据线段颜色
  }
},

下面是默认和设置的区别

🍓雷达图射线、分割线颜色

option => radar => axisLine

// 设置雷达图中间射线的颜色
axisLine: {
  lineStyle: {
    color: 'red'
  }
},

下面是默认和设置的区别

🍓雷达图分割线设置

option => radar => splitLine

 splitLine: {
  lineStyle: {
    color: '#BEEFDC',
    type: 'dashed' //dashed  solid dotted 射线类型【实线 虚线】
  }
},

下面是默认和设置的区别

🍓图上的标题数据格式 (雷达图axisName)

option => radar => splitLine

axisName: {
  formatter: '【{value}--我是自定义】',
  color: 'red'
},

下面是默认和设置的区别

🍓 调整雷达图标题(雷达图图上的标题textStyle)

option => textStyle

textStyle: {
        color: "rgba(0,0,0,1)", //标题颜色
        fontSize: 8,
        lineHeight: 8,
},

🍓调整雷达图标题(整个图的标题)

调整option下面的title

隐藏图表标题

title: { text: null }, //隐藏图表标题

这里直接赋值null即可

🍓调整雷达图圈文字大小

fontSize 用来调节雷达图圈文字大小，需要注意它的位置：

之前我写的一直是

  radar: {
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
    ],
    textStyle: {
        color: "#000",
        fontSize: 12,
    },
  },

其实正确的写法应该是下面这种：

  radar: {
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
    ],
    // 设置外圈文字样式
    name: {
        textStyle: {
            fontSize: 14  // 设置外圈文字的字体大小
        }
    },
  },

🍓图例legend

option => legend

图例就是雷达图为我们提供的这部分内容

legend: {
    type: 'plain', //图例的类型
    show: true, //是否显示图例
    data: ['Allocated Budget', 'Actual Spending'],
    right: 40,
    top: 230,
    orient: 'vertical',
    itemGap: 29,
    itemWidth: 19,
    itemHeight: 7,
    textStyle: {
      fontSize: 18,
      fontFamily: 'Source Han Sans CN',
      fontWeight: 'bold',
      color: '#333333'
    }
  },

🍓雷达图文字换行

又时候我们会遇到一种情况，文字过长，这个时候我们如何让Echarts 雷达图文字超过三个字换行如何设置呢

对radar=> name => formatter进行动手

  name: {
      textStyle: {
        fontSize: 10 // 设置外圈文字的字体大小
      },
      formatter: function (value, indicator) {
                // 自定义格式化函数，value 是指示器名称，indicator 是指示器对象
                if (value.length > 3) {
                    // 如果名称长度超过三个字，进行换行处理
                    return value.substring(0, 3) + '\n' + value.substring(3);
                } else {
                    return value;
                }
      },
 },

🍓雷达图拐点的样式（series）

对series=> 单项 => symbol

symbol: "none", // 拐点的样式，还可以取值'rect','angle'等
symbolSize: 10, // 拐点的大小

下面是默认和设置的区别

🍓雷达圈阴影部分（series）

对series=> 单项 => areaStyle

areaStyle: {
    // 阴影部分设置
    color: "rgba(0, 204, 84, 0.4)",
    opacity: 0.5,
},

下面是默认和设置的区别

🍓雷达圈区域边框和区域的颜色（series=> data=> itemStyle ）

对series=> 单项 => itemStyle

// 设置区域边框和区域的颜色
itemStyle: {
  normal: {
      color: "rgba(0, 214, 88, 1)",
      lineStyle: {
          color: "rgba(190, 239, 220, 1)",
      },
  },
},

下面是默认和设置的区别

🍓雷达圈圈颜色（series=> data=> areaStyle ）

对series=> data => areaStyle

areaStyle: {
            color: "rgba(255, 228, 52, 0.6)",
  },

下面是默认和设置的区别

🍓调整雷达图文字距离雷达图的距离

nameGap: 2,

🍓同时显示name和value