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

灰太狼 2023-01-20 14:55 42阅读 0赞

> 实践出真知

### 效果图 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

### 心路历程 ###

大多数时候，使用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']
            }
          }

> 积跬步 至千里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221021/0d1601dae81e4dad9106b46dcce95164.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/bb56fd47b68a4ebc981b36dd50b010cb.png