pbl-teacher-table/src/components/pages/kindStudentEva/test/component/radar.vue

<template>
  <div class="data_body">
    <div style="width: 100%; height: 100%">
      <div
        ref="chartContainer"
        class="echart"
        style="width: 100%; height: 100%"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    workNumList: {
      type: Array
    }
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {
    // 假设已经在Vue上挂载了echarts实例，命名为this.$echarts
    const chart = this.$echarts.init(this.$refs.chartContainer);

    // 数据示例
    const dataSeries = [
      {
        name: "Series 1",
        data: [
          { name: "Category 1", value: 80 },
          { name: "Category 2", value: 50 },
          { name: "Category 3", value: 60 },
          { name: "Category 4", value: 70 },
          { name: "Category 5", value: 90 }
        ],
        lineStyle: {
          width: 2,
          color: "#0080FF"
        }
      },
      {
        name: "Series 2",
        data: [
          { name: "Category 1", value: 60 },
          { name: "Category 2", value: 70 },
          { name: "Category 3", value: 80 },
          { name: "Category 4", value: 50 },
          { name: "Category 5", value: 70 }
        ],
        lineStyle: {
          width: 2,
          color: "#FF0000"
        }
      },
      {
        name: "Series 3",
        data: [
          { name: "Category 1", value: 20 },
          { name: "Category 2", value: 20 },
          { name: "Category 3", value: 20 },
          { name: "Category 4", value: 20 },
          { name: "Category 5", value: 20 }
        ],
        lineStyle: {
          width: 2,
          color: "green"
        }
      }
    ];

    // 配置选项
    const option = {
      legend: {
        data: dataSeries.map(series => series.name)
      },
      radar: {
        indicator: dataSeries[0].data.map(item => ({
          text: item.name,
          max: 100
        }))
      },
      series: dataSeries.map(series => ({
        name: series.name,
        type: "radar",
        data: [
          {
            value: series.data.map(item => item.value),
            areaStyle: {
              opacity: 0.5
            },
            lineStyle: series.lineStyle,
            label: {
              show: true,
              formatter: "{c}",
              fontSize: 12,
              color: "#000"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14
              }
            }
          }
        ]
      }))
    };

    // 设置选项并渲染雷达图
    chart.setOption(option);
  }
};
</script>

<style scoped>
.data_body {
  height: 100%;
  position: relative;
  border-radius: 5px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
}
</style>