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中，事件所获得的数据，是全部维度的数据，而不是单独某个维度的数据，以下图：
可是此时我已经获取到拐点的维度下标了，所以根据下标就能够获取到该维度的数据了。