echarts4.x雷達圖如何展現一維數據？

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

可是我發現單純的雷達圖彷佛沒辦法展現一維數據。

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

（1）如何顯示刻度。

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

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

下面總結問題的解決辦法：

問題（1）：
echarts的版本從4.x之後再也不提供雷達圖的刻度標籤屬性了，但3.x版本是有刻度這個配置屬性的，radar.axisLabel。因此要想顯示雷達圖的刻度，能夠將echarts的版本換回3.x版本。可是對於個人項目來講，這個辦法不太可行，由於個人項目中有不少的圖表是基於4.x版本繪製的，若是改回3.x版本，要改動的東西就太多了，牽一髮而動全身。

因此我必須想別的辦法。我考慮用極座標作雷達圖的底圖，將極座標的刻度做爲雷達圖的刻度，關鍵步驟以下：

一、個人雷達圖的顯示數值的範圍是1~10，顯示的刻度間隔是2，所以我用極座標的徑向軸radiusAxis來顯示刻度間隔是2的刻度。

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

三、極座標的徑向軸的分隔個數radiusAxis.splitNumber和雷達圖的指示器軸的分割個數radar.splitNumber必須相同。

四、極座標的中心點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中，事件所獲得的數據，是全部維度的數據，而不是單獨某個維度的數據，以下圖：
可是此時我已經獲取到拐點的維度下標了，所以根據下標就能夠獲取到該維度的數據了。