基础雷达图（radar）

基础雷达图

代码

    var chartDom=document.getElementById("radar");
    var myChart=echarts.init(chartDom);
    var option;
    option={
      title:{
        text:'雷达图标题',
        textStyle:{
          fontSize:18,
          color:'red',
          fontStyle:'oblique',
        },
        subtext:'副标题',
        subtextStyle:{
          fontSize:16,
          color:'blue',//'transparent'透明
          fontStyle:'oblique',
        },
          left:'20%',
      },
        tooltip:{
          trigger: 'item',
          show:true,
        },
      legend:{
          left:'center',
          data:['亚索','亚瑟']
      },
      radar:{
        //shape:'circle'
        nameGap:5,//指标文字距离图标的距离
        indicator:[//指标
          {
              name:"满级血量",max:3000,
          },
          {
              name:"满级技能伤害",max:100,
          },
          {
              name:"操作难度",max:5,
          },
          {
              name:"上手速度",max:10,
          },
          {
              name:"对线能力",max:10,
          }
        ]
      },
      series:[{
          type:"radar",
          data:[
            {
                name:"亚索",
                value:[1500,80,3,6,8]
            },
            {
                name:"亚瑟",
                value:[2000,50,1,9,7]
            }
          ]
      }

      ]
    };

    option & myChart.setOption(option);

效果图：

总结：

1.雷达图的角: 都在radar:{} 属性中，这个属性中的 indicator 属性的中文意思叫做：指标，可以在indicator:[] 中定义有几个角，每个角需要写上角的名称和最大值：{name:'',max:,}

2.雷达图的值(value)：仍然定义在series:{} 元素中,在这个元素中至少需要有如下几个属性:① type:'rader', ② data:[]

3.legend中的data中的每一个元素需要和series中data中每一个元素的name属性相对应，否则会识别不到value，将无法正常显示legend,当然也可以选则直接不写legend中的data属性，也能正常显示图例

4.雷达图的series中的数据data:[{name:"",value:[]}]是键值对类型