option = {
color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
title: {
text: 'Customized Radar Chart'
},
legend: {
show: true,
icon: 'rect',
top: '40%',
left: '15%',
itemWidth: 10,
itemHeight: 10,
itemGap: 30,
orient: 'vertical',
textStyle: {
fontSize: 15,
color: '#fff'
},
data:[{...},{...}]
},
radar: [
{
indicator: [
{ text: 'Indicator1' },
{ text: 'Indicator2' },
{ text: 'Indicator3' },
{ text: 'Indicator4' },
{ text: 'Indicator5' }
],
center: ['25%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
axisName: {
formatter: '【{value}】',
color: '#428BD4'
},
splitArea: {
areaStyle: {
color: ['#77EADf', '#26C3BE', '#64AFE9', '#428BD4'],
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
width: 1,
type: 'solid',
}
},
splitLine: {
lineStyle: {
color: 'rgba(213, 253, 250, 0.8)'
}
}
},
{
indicator: [
{ text: 'Indicator1', max: 150 },
{ text: 'Indicator2', max: 150 },
{ text: 'Indicator3', max: 150 },
{ text: 'Indicator4', max: 120 },
{ text: 'Indicator5', max: 108 },
{ text: 'Indicator6', max: 72 }
],
center: ['75%', '50%'],
radius: 120,
axisName: {
color: '#fff',
backgroundColor: '#666',
borderRadius: 3,
padding: [3, 5]
}
}
],
series: [
{
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
data: [
{
value: [100, 8, 0.4, -80, 2000],
name: 'Data A'
},
{
value: [60, 5, 0.3, -100, 1500],
name: 'Data B',
areaStyle: {
color: 'rgba(255, 228, 52, 0.6)'
}
}
]
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: [120, 118, 130, 100, 99, 70],
name: 'Data C',
symbol: 'rect',
symbolSize: 12,
lineStyle: {
type: 'dashed'
},
label: {
show: true,
formatter: function (params) {
return params.value;
}
}
},
{
value: [100, 93, 50, 90, 70, 60],
name: 'Data D',
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: 'rgba(255, 145, 124, 0.1)',
offset: 0
},
{
color: 'rgba(255, 145, 124, 0.9)',
offset: 1
}
])
}
}
]
}
]
};
实例效果图
参考地址 https://www.tqwba.com/x_d/jishu/355893.html