vue echarts 雷达图

雷达图代码如下：

<template>
  <div>
    <div 
      id="radarChart" 
      ref="radarChartRef" 
      style="width: 100%; height: 450px"></div>
  </div> 
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'annualStyleTrendChange',
  components: {},
  props: {},
  data () {
    return {
      chart: null,
      _thisForChart: null,
      _thisForWindow: null,
      radarData: [],

    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.initRadarChart()
      this.addEventListenerToSidebarContainer(this)
      this.addEventListenerToWindowResize(this)
    })
  },
  beforeDestroy () {
    this.removeEventListenerToSidebarContainer()
    this.removeEventListenerToWindowResize()
  },
  computed: {},
  watch: {},
  methods: {
    initRadarChart() {
      var chartDom = document.getElementById('radarChart');
      this.chart = echarts.init(chartDom);
      let option = {
        center: ["50%", "50%"], // 图的位置
        color: ['#409EFF','#E6A23C','#67C23A'],
        legend: {
          show: true,
          data: ['2022','2023','2024'],
          x: "center",
          y: "bottom",
          icon: "circle",
          itemWidth: 6,
          itemHeight: 6,
          bottom: 10,
          formatter: (name) => `{a|${name}}      `,
          textStyle: {
            rich: {
              a: {
                color: '#606266',
                padding: [3, 0, 0, 0],
            },
          }
          },

          // formatter: (name) => {
          //   return name === '2022' || name === '2023' ? '{a|' + name + '}' + ' ' + '{line|' + '|' + '}' : '{a|' + name + '}'
          // },
          //  textStyle: {
          //   rich: {
          //     a: {
          //       color: '#606266',
          //       padding: [3, 0, 0, 0],
          //     },
          //     line: {
          //       color: '#ccc',
          //       padding: [0, 10],
          //     }
          //   }
          // },
        }, 
        radar: {
          name: {
            textStyle: {
              color: '#000',
            }
          },
          splitArea: {
            areaStyle: {
                color: ['transparent']
            }
          },
          splitNumber: 3,
          indicator: [
            // { name: 'name1',axisLabel: {show: true,color: '#C0C4CC'}},
            { name: 'name1',},
            { name: 'name2',},
            { name: 'name3',},
            { name: 'name4',},
            { name: 'name5',},
          ],
          axisLine: {
            show:true,
            lineStyle: {
              color: "#DCDFE6", // 设置轴线的颜色
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#DCDFE6" // 设置网格的颜色
            }
          },
          splitArea: {
            show: false
        }
        },
        polar: {},
        angleAxis:{
          show: false
        },
        radiusAxis: {
          show: false
          // min: 0,
          // max: 100,
          // interval: 20,
          // splitLine: {
            // show: false
          // }
        },
        series: [
         {
          name: '',
          type: 'radar',

          data: [
            {
              value: ['50','25','10','80','110'],
              name: '2022',
            },
            {
              value: ['10','75','60','37','200'],
              name: '2023',
            },
            {
              value: ['130','95','49','56','150'],
              name: '2024',
            }
          ],
         }
        ],
      }
      this.chart.setOption(option,true);
    },

    // 监听侧边栏导航的宽度发生变化
    addEventListenerToSidebarContainer(_this) {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = _this;
      sidebarContainer &&
        sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
    },
    removeEventListenerToSidebarContainer() {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = null
      sidebarContainer &&
        sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
    },

    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this._thisForChart.chart.resize();
      }
    },

    // window 的尺寸发生变化的时候 会执行图表的resize
    addEventListenerToWindowResize(_this) {
      this._thisForWindow = _this;
      window.addEventListener("resize", this.windowResizeHandler);
    },
    removeEventListenerToWindowResize(_this) {
     this. _thisForWindow = null
      window.removeEventListener("resize", this.windowResizeHandler);
    },

    windowResizeHandler(e) {
      this._thisForWindow.chart.resize();
    },

  },
}
</script>

<style lang="scss" scoped>
  
</style>

展示效果图如下：