1、配置数据
(1)配置各个边角极限值
var dataMax=[{name:'名称',max:最大值, color:'标签颜色'}]
(2)配置展示数据
var radaData=[{name:'数据名称',value:[对应各个边角值]}]
2、配置radar坐标系
和series同级配置
radar:{
indicator:dataMax,
shape:'polygon', 设置雷达图显示形状,多边形|圆,'circle'
center:[n,m], 配置位置
},
3、配置series
series:[
{
type:'radar',
data:radaData,
symbol:'circle', 设置与各个方向的轴线相交的标记点
symbolSize,
radarIndex:n,
label:{
show:true 显示标签
},
legend:{
show:true
},
areaStyle:{} 设置封闭区域阴影面积
}
],
效果图:
代码示例:
export default {
name: 'App',
mounted:async function(){
var myMap=echarts.init(document.querySelector('.map'));
var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
var yData1=[88,92,63,77,94,80,72,86];
var yData2=[80,90,60,70,90,70,62,76];
var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
var radaData=[{name: '华为手机1',value: [80, 90, 80, 82, 90]},{name: '中兴手机1',value: [70, 82, 75, 70, 78]}]
var dataMax = [
{
name: '易用性',
max: 100
},
{
name: '功能',
max: 100
},
{
name: '拍照',
max: 100
},
{
name: '跑分',
max: 100
},
{
name: '续航',
max: 100
}
]
var option = {
radar:{
indicator:dataMax,
shape:'polygon', //设置雷达图显示形状,多边形|圆,'circle'
},
series:[
{
type:'radar',
data:radaData,
label:{
show:true //显示变钱
},
legend:{
show:true
},
areaStyle:{} //设置封闭区域阴影面积
}
],
};
myMap.setOption(option);
}
}