雷达图对应的图示，雷达图上显示男和女两组数据：
x: 'center',
data: ['男', '女'],
textStyle: {
color: '#fff'
}
},
设置雷达图各个坐标轴的含义、坐标轴位置、坐标轴间隔的样式等：
indicator: (function () {
const res = [
{
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）,跟data中 value 对应
name: '高中', // 指示器名称
max: 15000 // 指示器的最大值，可选，建议设置
//color: '#fff' // 标签特定的颜色。
},
{
name: '专科',
max: 10000
},
{
name: '本科',
max: 8000
},
{
name: '硕士',
max: 2000
},
{
name: '博士',
max: 500
}
];
return res;
})(),
center: ['68%', '56%'], // 坐标轴中心坐标
radius: '58%', // 坐标轴半径占可显示区域的比例
axisLine: { // 坐标轴样式
lineStyle: {
color: '#E9EBF1'
}
},
splitArea: { // 坐标轴分隔区显示颜色:默认是一深一浅的间隔颜色，这里我们设置间隔之间是空白
areaStyle: {
opacity: 0
}
}
},
设置雷达图的数据和数据展示样式：
series: [
// 1、男：
{
type: 'radar', // 雷达图
data: [
{
name: '男',
value: [13408, 5065, 5947, 856, 302],
emphasis: { // 鼠标悬浮时高亮显示，同时展示雷达图的数据样式
label: {
show: true,
color: '#fff',
fontSize: 14,
backgroundColor: '#0D1B42',
borderRadius: 5,
padding: 3,
shadowBlur: 3 // 阴影宽度
}
}
}
],
itemStyle: {
color: new echarts.graphic.LinearGradient( // 设置渐变色
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(0, 230, 98, 1)' },
{ offset: 1, color: 'rgba(0, 155, 171, 1)' }
]
)
},
areaStyle: // 雷达图辐射区域的样式
{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(0, 230, 98, 1)' },
{ offset: 1, color: 'rgba(0, 155, 171, 1)' }
]
)
},
},
// 2、女：
{
type: 'radar',
data: [
{
name: '女',
value: [11035, 6013, 5067, 1520, 184],
emphasis: {
label: {
show: true,
color: '#fff',
fontSize: 14,
backgroundColor: '#0D1B42',
borderRadius: 5,
padding: 3,
shadowBlur: 3
}
}
}
],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(1, 184, 252, 1)' },
{ offset: 1, color: 'rgba(100, 74, 255, 1)' }
]
)
},
areaStyle:
{
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: 'rgba(1, 184, 252, 1)' },
{ offset: 1, color: 'rgba(100, 74, 255, 1)' }
]
)
},
}
],
注意我们这样设置渐变色：
new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 230, 98, 1)' }, { offset: 1, color: 'rgba(0, 155, 171, 1)' } ] )
