<template>
  <div ref="chart" style="width: 100%; height: 250px;font-size: 10px;"></div>
</template>

<script>

export default {
  name: "RadarChart",
  props: {
    chartData: {
      type: Array,
      default: () => []
    },
    categories: {
      type: Array,
      default: () => []
    }

    // title: {
    //   type: String,
    //   default: 'Radar Chart'
    // }
  },
  data() {
    return {
      bLeg: [{ name: "第一次评估" }, { name: "第二次评估" }, { name: "第三次评估" }],
      // bLeg: ["开学", "期中", "期末"],
      chartObj:null
    };
  },
  mounted() {
    this.renderChart();
    this.$forceUpdate();
  },
 
  methods: {
    renderChart() {
      this.chartObj = this.$echarts.init(this.$refs.chart);
      const seriesData = this.chartData.map((values, index) => ({
        value: values,
        name: this.bLeg[index].name
      }));
      // console.log("seriesData", seriesData);
      const option = {
        // title: {
        //   text: this.title
        // },
        // hover状态
        tooltip: {},
        legend: {
          data: this.bLeg.map(series => series.name),
          bottom: 0 // 将图例显示在底部
        },
        // 标签渲染
        radar: {
          indicator: this.categories.map(category => ({
            name: category,
            max: 5
          }))
        },
        series: [
          {
            type: "radar",
            data: seriesData
          }
        ]
      };
      this.chartObj.setOption(option);
    }
  }
};
</script>
