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

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

但是我發現單純的雷達圖似乎沒辦法展示一維數據。

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

（1）如何顯示刻度。

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

（3）如何找出拐點對應的該維數據。

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

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

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

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

3、極坐標的徑向軸的分隔個數radiusAxis.splitNumber和雷達圖的指示器軸的分割個數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: {
        //用注釋掉的這個用法可以動態控制刻度的個數，但有時候會出現刻度標簽顯示不全的現象
        // 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）：
點擊雷達圖的拐點，顯示相關數據。我一開始想法是用tooltip來實現，但是我發現tooltip無法實現。原因有兩個：一是tooltip的觸發條件只能為trigger:"item"，trigger:"axis"不能用。二是設置trigger:"item"之后，鼠標滑過雷達圖的任何區域，tooltip都會展示所有維度的數據，沒有辦法實現滑過拐點，才展示數據和只展示該維數據。

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


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

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

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

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

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