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

最近做的項(xiàng)目其中一個(gè)功能是畫雷達(dá)圖，鼠標(biāo)滑過雷達(dá)圖的拐點(diǎn)，展示該維相關(guān)數(shù)據(jù)，并且需要顯示雷達(dá)圖的刻度。

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

我總結(jié)了一下，關(guān)于畫雷達(dá)圖，我遇到的難點(diǎn)有三個(gè)：

（1）如何顯示刻度。

（2）如何判斷滑過的是拐點(diǎn)。

（3）如何找出拐點(diǎn)對(duì)應(yīng)的該維數(shù)據(jù)。

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

所以我必須想別的辦法。我考慮用極坐標(biāo)做雷達(dá)圖的底圖，將極坐標(biāo)的刻度作為雷達(dá)圖的刻度，關(guān)鍵步驟如下：

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

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

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

4、極坐標(biāo)的中心點(diǎn)polar.center和雷達(dá)圖的中心點(diǎn)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)"]
           }
        }
    },
    //極坐標(biāo)系
    polar: {
        radius: radius,
    },
    angleAxis: {
       axisLine: {
          lineStyle: {
             color: "rgba(238,238,238, 0.2)"
          }
       },
    },
    radiusAxis: {
        //用注釋掉的這個(gè)用法可以動(dòng)態(tài)控制刻度的個(gè)數(shù)，但有時(shí)候會(huì)出現(xiàn)刻度標(biāo)簽顯示不全的現(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）：
點(diǎn)擊雷達(dá)圖的拐點(diǎn)，顯示相關(guān)數(shù)據(jù)。我一開始想法是用tooltip來實(shí)現(xiàn)，但是我發(fā)現(xiàn)tooltip無法實(shí)現(xiàn)。原因有兩個(gè)：一是tooltip的觸發(fā)條件只能為trigger:"item"，trigger:"axis"不能用。二是設(shè)置trigger:"item"之后，鼠標(biāo)滑過雷達(dá)圖的任何區(qū)域，tooltip都會(huì)展示所有維度的數(shù)據(jù)，沒有辦法實(shí)現(xiàn)滑過拐點(diǎn)，才展示數(shù)據(jù)和只展示該維數(shù)據(jù)。

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


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

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

    //做鼠標(biāo)滑過拐點(diǎn)的操作
});

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

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