废话不多说、直接上代码实践。
var nameList = [
{ name: '销售（sales）', max: 6500},
{ name: '管理（Administration）', max: 16000, color: 'red'}, // 标签设置为红色 { name: '信息技术（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研发（Development）', max: 52000},
{ name: '市场（Marketing）', max: 25000}
]
// name：指示器名称。
// max：指示器的最大值，可选，建议设置
// min：指示器的最小值，可选，默认为 0。
// color：标签特定的颜色。
var option = {
radar: {
// 雷达图的指示器，用来指定雷达图中的多个变量（维度）
indicator: nameList,
// 中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
// 支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
center: ['50%', '50%'],
// 半径。可以为如下类型：
// number：直接指定外半径值。
// string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
// Array.
radius: '80%',
// 位置
top: '3%',
right: '3%',
// 坐标系起始角度，也就是第一个指示器轴的角度。
startAngle: 90,
// 指示器轴的分割段数。
splitNumber: 5,
// 雷达图每个指示器名称的配置项。
name: {
// 指示器名称显示的格式器。支持字符串和回调函数
formatter: '{value}',
// 指示器名称文本样式
textStyle: {
color: '#fff',
fontSize: '14',
fontFamily: 'SourceHanSansCN-Regular,Sans-serif'
}
},
// 坐标轴在grid区域中的分隔区域，默认不显示。
splitArea: {
// 分隔区域的样式设置。
areaStyle: {
color: ['#27282F', '#212329', '#1C1F26', '#171A22', '#0D1017']
}
},
// 坐标轴刻度相关设置。
axisTick: {
show: false,
lineStyle: {
color: 'rgba(255, 255, 255, 0.8)'
}
},
// 坐标轴刻度标签的相关设置。
axisLabel: {
show: false,
textStyle: {
color: 'white'
}
},
// 坐标轴轴线相关设置。
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
// 坐标轴在grid区域中的分隔线。
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
}
},
// color: color,
series: [
{
type: 'radar',
symbol: 'none',
lineStyle: {
color: 'rgba(0, 255, 234, 0.8)'
},
areaStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: 'rgba(0, 255, 234, 0)' // 0% 处的颜色
},
{
offset: 0.3,
color: 'rgba(0, 255, 234, 0.05)' // 30% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 255, 234, 0.2)' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
data: [
{
value: radarData // 值数组
}
]
}
]
}
var radarChart = this.$echarts.init(
document.getElementById('myChart') // ’mychart‘雷达图展示的层级id
)
// radarChart
radarChart.setOption(option)
官方文档：Documentation - Apache ECharts