echarts 雷达图

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);


  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值