• 解决思路：

先正常渲染出雷达图

name:"正常"，value：[1,2,1,1,2]

name:"异常"，value：[2,1,2,2,1]

再通过配置以下方式渲染出所有的拐点，覆盖之前正常渲染出来的拐点

name:"温度湿度监测" ，value[1,0,0,0,0] 

name:"温度湿度监测"， value[2,0,0,0,0]

name:"烟雾监测" ，value[0,2,0,0,0] 

name:"烟雾监测"， value[0,1,0,0,0]

name:"空调监测" ，value[0,0,1,0,0] 

name:"空调监测"， value[0,0,2,0,0]

name:"漏水监测" ，value[0,0,0,1,0] 

name:"漏水监测"， value[0,0,0,2,0]

name:"UPS监测" ，value[0,0,0,0,2] 

name:"UPS监测"， value[0,0,0,0,1]

此时鼠标经过拐点就能拿到该点的name值，就可以去筛所需要的数据渲染出tooltip的内容

• 效果图：

• 全部代码 ：

<template>
  <div class="radar">
    <div class="chart-view" ref="dynamicRadar"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getDeviceTypeList } from "@/api/dynamic/index";

export default {
  name: "Radar",
  data() {
    return {
      scaleWidth: 1,
      scaleHeight: 1,
      max: 0,
    };
  },
  mounted() {
    const defaultWidth = 1920;
    const defaultHeight = 1080;
    const width = document.body.clientWidth;
    const height = document.body.clientHeight;
    if (height && width) {
      this.scaleWidth = (width / defaultWidth).toFixed(2);
      this.scaleHeight = (height / defaultHeight).toFixed(2);
    }
    this.init();
    this.timer = setInterval(() => {
      this.init();
    }, 17000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    async init() {
      const { rows } = await getDeviceTypeList();
      let maxArr = [];
      let initData = ["正常", "异常"].map(name => {
        return {
          name,
          valueArr: rows.map(x => {
            let val = [];
            if (name === "正常") {
              val = x.normalList;
            } else {
              val = x.errorList;
            }
            maxArr.push(val.length);
            return {
              name: `${x.device_name}`,
              value: val.length,
              spaceNameArr: val.map(i => i.spaceName),
            };
          }),
        };
      });
      this.max = Math.max(...maxArr) + 1;
      const chartView = echarts.init(this.$refs.dynamicRadar);
      chartView.setOption(this.getChartJson(initData));
      // 屏幕重置大小
      window.addEventListener("resize", () => {
        chartView.resize();
      });
    },
    getChartJson(data) {
      const option = {
        title: {
          top: "4%",
          text: `机房安全环境因数`,
          left: "left",
          textStyle: {
            color: "#B9EFF6",
            fontWeight: "normal",
            fontSize: 16 * this.scaleWidth,
          },
        },
        tooltip: {
          show: false,
          position: "bottom",
          confine:true,
          backgroundColor: "rgba(0, 28, 57, 0.6)",
          trigger: "item",
          // alwaysShowContent:true
        },
        legend: {
          data: ["正常", "异常"],
          top: "5%",
          left: "right",
          width: "40%",
          itemWidth: 16 * this.scaleWidth,
          itemHeight: 8 * this.scaleWidth,
          textStyle: {
            color: "#B9EFF6",
            fontSize: 12 * this.scaleWidth,
          },
        },
        radar: {
          center: ["50%", "55%"],
          radius: "55%",
          indicator: data[0].valueArr.map(({ name }) => {
            return { name, max: this.max };
          }),
          splitArea: {
            // 图表背景的颜色
            show: true,
            areaStyle: {
              color: "rgba(255,255,255,0)",
            },
          },
          name: {
            color: "rgba(185, 240, 248, .8)",
          },
          splitLine: {
            // 图表网格线的颜色
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.3)",
            },
          },
          axisLine: {
            // 坐标轴线
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.3)",
            },
          },
        },
        series: [
          {
            areaStyle: {},
            symbol: "none", // 去除拐点
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "rgba(0,0,0,0)", // 图表中各个图区域的边框线颜色
                },
              },
            },
            type: "radar",
            data: [
              ...data.map(({ name, valueArr }) => {
                return {
                  value: valueArr.map(x => x.value),
                  name,
                  itemStyle: {
                    color: name === "异常" ? "rgba(239, 150, 57, 1)" : "rgba(127, 248, 246, 1)",
                  },
                };
              }),
              //正常
              ...data[0].valueArr.map((x, i) => {
                let value = [];
                for (let index = 0; index < data[0].valueArr.length; index++) {
                  value.push(0);
                }
                value[i] = x.value;
                return {
                  value,
                  name: x.name,
                  itemStyle: {
                    color: "rgba(127, 248, 246, 1)",
                  },
                  normalData: x.spaceNameArr,
                  abnormalData: data[1].valueArr.filter(i => i.name === x.name)[0].spaceNameArr,
                  z: 5,
                  tooltip: {
                    show: true,
                    formatter(params) {
                      return `<div class="radar-tooltip">
                                <div class="tooltip-title">${params.name}</div>
                                <div class="tooltip-content">
                                  <div>正常机房：${params.data.normalData.length}个</div>
                                  <div class="pt5">
                                  ${params.data.normalData
                                    .map(x => {
                                      return `<div class="item">${x}</div>`;
                                    })
                                    .join("")}
                                  </div>
                                </div>
                                <div class="tooltip-bottom">
                                  <div>异常机房：${params.data.abnormalData.length}个</div>
                                  <div class="pt5">
                                  ${params.data.abnormalData
                                    .map(x => {
                                      return `<div class="item">${x}</div>`;
                                    })
                                    .join("")}
                                  </div>
                                </div>
                              </div>`;
                    },
                  },
                };
              }),
              //异常
              ...data[1].valueArr.map((x, i) => {
                let value = [];
                for (let index = 0; index < data[1].valueArr.length; index++) {
                  value.push(0);
                }
                value[i] = x.value;
                return {
                  value,
                  itemStyle: {
                    color: "rgba(239, 150, 57, 1)",
                  },
                  name: x.name,
                  abnormalData: x.spaceNameArr,
                  normalData: data[0].valueArr.filter(i => i.name === x.name)[0].spaceNameArr,
                  z: 5,
                  tooltip: {
                    show: true,
                    formatter(params) {
                      return `<div class="radar-tooltip">
                                <div class="tooltip-title">${params.name}</div>
                                 <div class="tooltip-content">
                                  <div>正常机房：${params.data.normalData.length}个</div>
                                  <div class="pt5">
                                  ${params.data.normalData
                                    .map(x => {
                                      return `<div>${x}</div>`;
                                    })
                                    .join("")}
                                  </div>
                                </div>
                                <div class="tooltip-bottom">
                                  <div>异常机房：${params.data.abnormalData.length}个</div>
                                  <div class="pt5">
                                  ${params.data.abnormalData
                                    .map(x => {
                                      return `<div>${x}</div>`;
                                    })
                                    .join("")}
                                  </div>
                                </div>
                              </div>`;
                    },
                  },
                };
              }),
            ],
          },
        ],
      };
      return option;
    },
  },
};
</script>
<style lang="scss" scoped>
.radar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .chart-view {
    padding: 0 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
<style lang="scss">
.radar {
  .radar-tooltip {
    padding: 13px;
    z-index: 10;
    width: 420px;
    height: auto;
    * {
      margin: 0;
      padding: 0;
    }
    .tooltip-title {
      font-size: 16px;
      color: rgba(185, 240, 248, 0.8);
    }
    .tooltip-content {
      padding-top: 13px;
      padding-bottom: 11px;
      font-size: 14px;
      // line-height: 23px;
      color: rgba(185, 240, 248, 0.8);
    }
    .tooltip-bottom {
      padding-top: 12px;
      font-size: 14px;
      color: rgba(239, 150, 57, 0.8);
      border-top: 1px solid rgba(185, 239, 246, 0.2);
    }
    .pt5 {
      padding-top: 6px;
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        // &:nth-child(2n)::before {
        //   content: "|";
        //   margin: 8px;
        // }
      }
    }
  }
}
</style>

• 接口数据处理后的数据，可用于参考使用：

     initData = [
        {
          name: "正常",
          valueArr: [
            { name: "配电监测", value: 8, spaceNameArr: ["4301长沙市市政府站", "4301长沙市市政府站"] },
            { name: "USP监测", value: 8, spaceNameArr: ["4301长沙市市政府站", "4301长沙市市政府站"] },
            { name: "温湿度监测", value: 8, spaceNameArr: ["4301长沙市市政府站", "4301长沙市市政府站"] },
            { name: "门禁监控", value: 8, spaceNameArr: ["4301长沙市市政府站", "4301长沙市市政府站"] },
            { name: "烟雾监测", value: 8, spaceNameArr: [] },
            { name: "漏水监测", value: 8, spaceNameArr: [] },
            { name: "空调监控", value: 8, spaceNameArr: [] },
            { name: "照明控制", value: 8, spaceNameArr: [] },
          ],
        },
        {
          name: "异常",
          valueArr: [
            { name: "配电监测", value: 6, spaceNameArr: ["4301长沙市市政府站", "4301长沙市市政府站"] },
            { name: "USP监测", value: 6, spaceNameArr: [] },
            { name: "温湿度监测", value: 6, spaceNameArr: [] },
            { name: "门禁监控", value: 6, spaceNameArr: ["4301长沙市市政府站", "4301长沙市市政府站"] },
            { name: "烟雾监测", value: 6, spaceNameArr: [] },
            { name: "漏水监测", value: 6, spaceNameArr: [] },
            { name: "空调监控", value: 6, spaceNameArr: [] },
            { name: "照明控制", value: 6, spaceNameArr: [] },
          ],
        },
      ];