雷达图搭配极坐标

你得对Echarts雷达图文档先有一定了解，配置手册很清楚，下面不会介绍每一个配置项表示什么，只会讲解一下我自己遇到的问题。

项目搭建： vue + element UI + Echarts

需求：

利用Echarts的雷达图展示节点信息，需求效果图如下：
鼠标hover至拐点的时候，展示相关的信息，移出的时候不显示

遇到的坑：

1 我使用了Echarts4.x的版本，而Echarts4.x不同于其他版本，雷达图的tooltip触发方式不能设置成axis，而且如果设置成item，雷达图则展示所有数据，就拿效果图来讲，如果我浮动到平均骑手送餐时间的web拐点（黄色小圆）的时候，会展示web、h5、秀餐小程序、美团、饿了么、CallCenter的数据，这显然不是要要看到的，我只想看到web的相关数据。
2 Echart4.x 雷达图的刻度不再生效，也就是说没有刻度显示，也就是说，你看到的0-3.5-7-01.5-14这种刻度是不存在的。

解决方式：

针对问题1：tooltip数据如何展示，采用mouseOver事件
针对问题2：刻度显示，雷达图搭配极坐标

接口获取数据那些的，直接略过，我们从拿到数据后开始讲解

数据处理：

通过接口返回的数据肯定不是这样的，起码还有name，这只是value，但我单独集中value在一起，方便你们观看maxValue，进行处理，为我们下一步做准备。

我们已经得到处理过的maxValue了，maxValue用来划分刻度，由于我ui图是固定了4个圈，到时候除以4得到每一个刻度的间隔。


这张图我已经将的很详细了，为了图形看起来饱满，为了雷达图和极坐标的刻度能对上。


这是都是配置项，放在option对象中，你当然不能少了最后一步

this.chart.setOption(option);

当然最好用try catch捕捉一下异常，代码就更完美了

 try {
     const option = this.chart.getOption();
     option.series = series;
     option.radar.indicator = indicator;
     option.radiusAxis.data = radiusAxisData;
     this.chart.setOption(option);
 } catch (error) {
     this.chart = null;
     console.error("配置雷达图失败  ", error);
}

欢迎大家指错，一起进步！
转载请带上链接，谢谢！