Echarts 雷达图 极坐标 及 折线图的完美结合

实践出真知

效果图

心路历程

大多数时候，使用echarts 就是参考示例图，根据需求进行改造，更多的研究就是在配置项的配置，看到没有的示例还真的是有一点点慌，但是怎么看需求的样式都是那么的合理，实用，所以我想一定是可以实现的，因为它并非不常见。怎么办呢，研究，找到方法之后，最终的实现还是轻松的。

需求分析

Q:是雷达图吗？

A:第一眼看上去，是雷达图，因为他有指示器，分割线都是雷达图的效果

Q:发现一个问题，效果图是有断点没有完全连接在一起的，但是雷达图是没有断点连接，而且没有值或者空出的部分是默认连接原点的，怎么办？

A:根据效果图，外围样式是雷达图，数据效果其实是折线图，因此数据的连接是折线图，根据需求图例也是折线的效果图。

Q:怎么把折线图画在雷达图上呢？

A:首先是不能用雷达图渲染数据了，在圆上连接折线，非极坐标不可了。

Q:极坐标实现后是完全的圆，和效果图又不太符合了？

A:那就尝试结合极坐标和雷达图一起用，最终就是要在极坐标里画折线图，然后和雷达图的指示器联系在一起。

代码实现

代码中添加了一些注释，

关键点：

• 雷达图和极坐标 polar 和 radar radius 要设置为相同的值，为了方便我是定义了变量  const radius = '70%' 
• indicator中的数据和折线图中的data 要 一 一 对应，没有数据的部分要用 "-" ,代替，这样折线能隔开形成断点
• angleAxios 设置 startAngle:0 ,使得极坐标分割线和雷达图分割线重合
• 其他的小设置 看官网吧 比较全，讲的详细。

 let option = {
        angleAxis: {
          type: 'category',
          startAngle: 0,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        //极坐标的设置
        radiusAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        // 极坐标设置
        polar: {
          //极坐标弧度
          radius: radius
        },
        // 雷达图设置
        radar: {
          // 雷达图指示器
          indicator: (function() {
            // 模拟指示器
            let indictors = []
            // 指示器和数据要对应
            for (var i = 1; i <= 14; i++) {
              indictors.push({
                text: '测试一下指示器的名字' + i
                // max:100,// max 值根据实际需求计算或者设置
              })
            }
            return indictors
          })(),
          name: {
            // 指示器的文本样式具体参考文档
          },
          radius: radius, // 极坐标和雷达图的radius 要保持一致
          // 以下的小细节的配置看文档就可以了
          areaStyle: {
            //根据需求设置雷达区域的样式
            color: '#000'
          },
          axisLine: {
            lineStyle: {
              type: 'dotted'
            }
          },
          splitLine: {
            // show: false
          },
          splitArea: {
            show: false
          }
        },
        series: [
          {
            type: 'line',
            data: [1, 2, '-', 3, 4, 3, 5, 1, 3, '-', 2, '-', 4, '-'],
            coordinateSystem: 'polar',
            name: 'A',
            stack: 'a',
            emphasis: {
              focus: 'series'
            },
            symbol: 'circle'
          },
          {
            type: 'line',
            data: [3, '-', 2, '-', 4, '-', 2, 4, 3, 1, 3, 2, '-', 5],
            coordinateSystem: 'polar',
            name: 'B',
            stack: 'a',
            emphasis: {
              focus: 'series'
            },
            symbol: 'circle'
          }
        ],
        legend: {
          show: true,
          data: ['A', 'B', 'C']
        }
      }

积跬步 至千里