ECharts4.x雷达图如何展示一维数据？

最新推荐文章于 2024-11-18 17:40:34 发布

原创

最新推荐文章于 2024-11-18 17:40:34 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #程序人生 #经验分享

本文详细介绍了在ECharts 4.x版本中，如何解决雷达图展示一维数据的问题，包括显示刻度、判断滑过拐点以及获取拐点对应数据的方法。通过极坐标做底图实现刻度显示，利用鼠标事件判断拐点，以及根据维度下标获取数据。

最近做的项目其中一个功能是画雷达图，鼠标滑过雷达图的拐点，展示该维相关数据，并且需要显示雷达图的刻度。

但是我发现单纯的雷达图似乎没办法展示一维数据。

我总结了一下，关于画雷达图，我遇到的难点有三个：

（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