基礎雷達圖（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:[]}]是鍵值對類型