echarts雷达图使用和详细参数 （雷达图）
1、🍉 认识、引入和使用
先来看看我们雷达图是什么样子：
雷达图的使用跟我们的echarts折线图差不多，只不过我们在echarts折线图文章之中进行了大量的铺垫，习惯了echarts折线图的使用以后，使用我们雷达图就轻而易举了。
2、🍉 使用
先确保你安装的是Echarts5，否则的化安装一下
js
yarn add echarts
js
// 结构部分
<!-- 雷达图 -->
<div ref="echartradarRef1" style="width: 50%; height: 400px;"></div>
// 引入部分
import * as echarts from 'echarts';// 5.4区别4引入方式
/ 雷达图
const echartradarRef1 = ref(null);
onMounted(() => {
initChartradar(); //雷达图
});展示一下官方给我们的雷达图的默认设置
js
// 雷达图
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 大小，这个直接解决了我们大小圆圈的问题
js
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
雷达图位置：中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
js
center: ["30%", "50%"],🍓调整形状
option => radar => shape
js
shape: 'circle',🍓调整开始角度
option => radar => startAngle
js
startAngle: 100, 下面是10到100的区别
🍓 调整雷达图线的颜色color
这里我们想要自定义一下雷达圈上的线的颜色
在option里面添加颜色
js
color: ['green', 'red'],🍓雷达图圈数
option => radar => splitNumber
js
splitNumber: 3, // 雷达图圈数 下面是默认和设置的区别
🍓指示器名称和指示器轴的距离
option => radar => nameGap
js
nameGap:150, //指示器名称和指示器轴的距离。下面是默认和设置的区别
🍓雷达图背景
option => radar => splitArea
js
//雷达图背景的颜色
splitArea: {
// 图表背景的颜色
areaStyle: {
// color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10,
color: '#fff',
opacity: 0.3 //雷达图数据线段颜色
}
},下面是默认和设置的区别
🍓雷达图射线、分割线颜色
option => radar => axisLine
js
// 设置雷达图中间射线的颜色
axisLine: {
lineStyle: {
color: 'red'
}
},下面是默认和设置的区别
🍓雷达图分割线设置
option => radar => splitLine
js
splitLine: {
lineStyle: {
color: '#BEEFDC',
type: 'dashed' //dashed solid dotted 射线类型【实线 虚线】
}
},下面是默认和设置的区别
🍓图上的标题数据格式 (雷达图axisName)
option => radar => splitLine
js
axisName: {
formatter: '【{value}--我是自定义】',
color: 'red'
},下面是默认和设置的区别
🍓 调整雷达图标题(雷达图图上的标题textStyle)
option => textStyle
js
textStyle: {
color: "rgba(0,0,0,1)", //标题颜色
fontSize: 8,
lineHeight: 8,
},🍓调整雷达图标题(整个图的标题)
调整option下面的title
隐藏图表标题
js
title: { text: null }, //隐藏图表标题这里直接赋值null即可
🍓调整雷达图圈文字大小
fontSize 用来调节雷达图圈文字大小，需要注意它的位置：
之前我写的一直是
js
radar: {
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
],
textStyle: {
color: "#000",
fontSize: 12,
},
},其实正确的写法应该是下面这种：
js
radar: {
indicator: [
{ name: 'Sales', max: 6500 },
{ name: 'Administration', max: 16000 },
{ name: 'Information Technology', max: 30000 },
],
// 设置外圈文字样式
name: {
textStyle: {
fontSize: 14 // 设置外圈文字的字体大小
}
},
},🍓图例legend
option => legend
图例就是雷达图为我们提供的这部分内容
js
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进行动手
js
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
js
symbol: "none", // 拐点的样式，还可以取值'rect','angle'等
symbolSize: 10, // 拐点的大小下面是默认和设置的区别
🍓雷达圈阴影部分（series）
对series=> 单项 => areaStyle
js
areaStyle: {
// 阴影部分设置
color: "rgba(0, 204, 84, 0.4)",
opacity: 0.5,
},下面是默认和设置的区别
🍓雷达圈区域边框和区域的颜色（series=> data=> itemStyle ）
对series=> 单项 => itemStyle
js
// 设置区域边框和区域的颜色
itemStyle: {
normal: {
color: "rgba(0, 214, 88, 1)",
lineStyle: {
color: "rgba(190, 239, 220, 1)",
},
},
},下面是默认和设置的区别
🍓雷达圈圈颜色（series=> data=> areaStyle ）
对series=> data => areaStyle
js
areaStyle: {
color: "rgba(255, 228, 52, 0.6)",
},下面是默认和设置的区别
🍓调整雷达图文字距离雷达图的距离
js
nameGap: 2,