src/components/charts/radarChart.vue

<template>
  <div class="chart" :id="id"></div>
</template>
<script>
export default {
  name: "radarChart",
  props: {
    id: String,
    params: Object,
  },
  watch: {
    params: {
      handler: function (val) {
        if (!!val.indicator) {
          this.initData();
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() { },
  mounted() {
    this.initData();
  },
  methods: {
    setOption() {
      let that = this
      const option = {
        color: that.colors || ["#4472c4", "#ed7d32", "#a5a5a5"],
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          confine: true,
          formatter: function (param) {
            let marker = param.marker
            let oHtml = `<p>${marker}${param.name}</p>`
            param.value.map((item, index) => {
              oHtml += `<p>${that.params.indicator[index].name}：${item}</p>`
            })
            return oHtml
          }
        },
        legend: {
          show: true,
          top: 0,
          right: 20,
          itemHeight: 15,
          icon: "circle"
        },
        radar: {
          indicator: [...that.params.indicator],
          splitNumber: 5,
          center: ['50%', '65%'],
          radius: "90%",
          shape: "polygon",
          nameGap: 6,
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              width: 0.5,
              color: '#e2e2e2'
            },
          },
          splitArea: {
            areaStyle: {
              color: ['rgba(250,250,250,0)', 'rgba(200,200,200,0)']
            }
          },
          // axisLabel: {
          //   show: false,
          //   hideOverlap: true,
          //   formatter: '{value}%'
          // },
        },
        series: [
          {
            type: "radar",
            lineStyle: {
              width: 1,
            },
            symbolSize: 4,
            areaStyle: {
              color: "transparent",
            },
            data: that.params.seriesData,
          },
        ],
      };
      return option;
    },
    initData() {
      if (!this.chart) {
        const div = document.getElementById(this.id);
        this.chart = this.$echarts.init(div);
      }
      const options = this.setOption();
      this.chart?.clear();
      this.chart.setOption(options, true);
      this.chart.off("click");
      this.chart.on("click", "series", (params) => {
        // this.$emit("clickPieChart", params);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chart {
  height: 100%;
}
</style>