摘要：另外，需要將雷達圖的半徑設置和極坐標的半徑設置設為相同，以便他們有相同的放縮比例。極坐標的徑向軸的分隔個數(shù)和雷達圖的指示器軸的分割個數(shù)必須相同。

最近做的項目其中一個功能是畫雷達圖，鼠標滑過雷達圖的拐點，展示該維相關數(shù)據(jù)，并且需要顯示雷達圖的刻度。

但是我發(fā)現(xiàn)單純的雷達圖似乎沒辦法展示一維數(shù)據(jù)。

我總結了一下，關于畫雷達圖，我遇到的難點有三個：

（1）如何顯示刻度。

（2）如何判斷滑過的是拐點。

（3）如何找出拐點對應的該維數(shù)據(jù)。

問題（1）：
echarts的版本從4.x以后不再提供雷達圖的刻度標簽屬性了，但3.x版本是有刻度這個配置屬性的，radar.axisLabel。所以要想顯示雷達圖的刻度，可以將echarts的版本換回3.x版本。但是對于我的項目來說，這個辦法不太可行，因為我的項目中有很多的圖表是基于4.x版本繪制的，如果改回3.x版本，要改動的東西就太多了，牽一發(fā)而動全身。

所以我必須想別的辦法。我考慮用極坐標做雷達圖的底圖，將極坐標的刻度作為雷達圖的刻度，關鍵步驟如下：

1、我的雷達圖的顯示數(shù)值的范圍是1~10，顯示的刻度間隔是2，因此我用極坐標的徑向軸radiusAxis來顯示刻度間隔是2的刻度。

2、另外，需要將雷達圖的半徑設置radar.radius和極坐標的半徑設置polar.radius設為相同，以便他們有相同的放縮比例。

3、極坐標的徑向軸的分隔個數(shù)radiusAxis.splitNumber和雷達圖的指示器軸的分割個數(shù)radar.splitNumber必須相同。

4、極坐標的中心點polar.center和雷達圖的中心點radar.center也必須相同。

var dimensionData = [
    {name: "覆蓋", max: 10},
    {name: "干擾", max: 10},
    {name: "感知", max: 10},
    {name: "故障", max: 10},
    {name: "容量", max: 10}
];
data = [7.9, 3, 3, 5.11, 4.4];
var radius = "60%";
var radarOption = {
    radar:{
        center:["50%", "50%"],
        startAngle:90,
        indicator:dimensionData,
        splitNumber: 5,
        radius: radius,
        shape: "circle",
        name: {
           show:true,
           textStyle: {
             color: "#ffffff",
             fontSize: 12
            }
        },
        splitArea: {
           areaStyle: {
             color: ["rgba(0, 21, 102, 0.4)"],
           },
        },
        splitLine: {
            show:true,
            lineStyle: {
              color: ["rgba(238,238,238, 0.2)"]
            }
        },
        axisLine: {
           lineStyle: {
             color: ["rgba(238,238,238, 0.2)"]
           }
        }
    },
    //極坐標系
    polar: {
        radius: radius,
    },
    angleAxis: {
       axisLine: {
          lineStyle: {
             color: "rgba(238,238,238, 0.2)"
          }
       },
    },
    radiusAxis: {
        //用注釋掉的這個用法可以動態(tài)控制刻度的個數(shù)，但有時候會出現(xiàn)刻度標簽顯示不全的現(xiàn)象
        // type: "value",
        // min: 0,
        // max: 10,
        // interval: 2
        type: "category",
        axisLabel:{
           show:true,
           interval: 0,
           fontSize:9,
           color:"rgba(255, 255, 255, 0.5)",
        },
        axisTick:{
           show:true,
           inside:true,
        },
        axisLine:{
           show:true,
           lineStyle:{
              color:"rgba(238,238,238, 0.2)"
           }
        },
        splitLine:{
           show:false,
           lineStyle:{
             color:"rgba(238,238,238, 0.2)"
           }
        },
        data:["2", "4", "6", "8", "10"]
    },
    tooltip: {
        show:false,
        trigger:"item"
    },
    series:[
    {
        type: "radar",
        radarIndex:0,
        data:[{
           value:data
         }],
         symbol: "circle",
         symbolSize: 6,
         itemStyle: {
            normal: {
               color: "rgba(255, 255,255, 1)",
               borderColor: "rgba(255, 179, 0, 1)",
               borderWidth: 1,
            }
         },
         areaStyle: {
            normal: {
               color: "rgba(255, 179, 0, 0.8)",
            }
         },
         lineStyle: {
            width: 2,
            color: "rgba(255, 179, 0, 1)"
         }
      }
   ]
}

問題（2）：
點擊雷達圖的拐點，顯示相關數(shù)據(jù)。我一開始想法是用tooltip來實現(xiàn)，但是我發(fā)現(xiàn)tooltip無法實現(xiàn)。原因有兩個：一是tooltip的觸發(fā)條件只能為trigger:"item"，trigger:"axis"不能用。二是設置trigger:"item"之后，鼠標滑過雷達圖的任何區(qū)域，tooltip都會展示所有維度的數(shù)據(jù)，沒有辦法實現(xiàn)滑過拐點，才展示數(shù)據(jù)和只展示該維數(shù)據(jù)。

所以我考慮用echarts提供API的鼠標事件來實現(xiàn)效果，我用的是mouseover事件和mouseout事件。我想要通過事件傳遞的參數(shù)來判斷鼠標滑過的是不是拐點。我先去查看了echarts官方文檔中提供的參數(shù)，沒有什么明顯的參數(shù)可以讓我判斷出是不是鼠標滑過的是不是拐點。


?但是我的組長堅信，鼠標滑過不同的地方，一定傳的參數(shù)是有某個地方不同的。因此在堅持不懈和仔細的查看事件參數(shù)后，終于找到了。params.event.target.__dimIdx這個參數(shù)，在滑過拐點時，顯示的是該拐點的維度下標，滑過其他區(qū)域時，顯示的是undefied。因此可以用這個參數(shù)來判斷鼠標滑過的是不是拐點。

this.radarChart.on("mouseover", function(params){
    var isSelectedDot = params.event.target.__dimIdx;
    if(isSelectedDot == undefined) return;

    //做鼠標滑過拐點的操作
});

問題（3）：
拐點找到了，如何找出拐點對應的該維數(shù)據(jù)？在echarts4.x中，事件所得到的數(shù)據(jù)，是所有維度的數(shù)據(jù)，而不是多帶帶某個維度的數(shù)據(jù)，如下圖：

但是此時我已經(jīng)獲取到拐點的維度下標了，因此根據(jù)下標就可以獲取到該維度的數(shù)據(jù)了。