performance-test/src/views/performance/components/chartsCom/Radar.vue

<template>
  <div>
    <!-- Chart container -->
    <div ref="radarChart" style="width: 100%; height: 400px"></div>
    <!-- Button to trigger dynamic chart update -->
  </div>
</template>

<script>
import Plotly from "plotly.js-dist-min";

export default {
  props: {
    chartData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      //   chartData: {
      //     Qp: "87955465.05833334",
      //     Thc: "2094.177739484127",
      //     Rdr: "12",
      //     Qdr: "-87955465.05833334",
      //     fs: "12333",
      //   },
    };
  },
  mounted() {
    if (this.chartData) {
      this.drawRadarChart();
    }
  },
  methods: {
    drawRadarChart() {
      console.log("this.chartData 雷达图设置", this.chartData);
      // 获取动态数据的 keys 和 values
      const keys = Object.keys(this.chartData);
      const values = Object.values(this.chartData).map((val) =>
        val === "" ? 0 : parseFloat(val)
      );

      // 构造 Plotly 雷达图数据
      const trace = {
        type: "scatterpolar",
        r: [
          this.chartData.TurbinePowerRate,
          this.chartData.TurbineRunRate,
          this.chartData.WindSpeedAvr,
          this.chartData.Thi,
          this.chartData.Ws,
        ],
        theta: [
          "风机能量利用率",
          "风机可利用率",
          "平均风速",
          "利用小时",
          "功率曲线一致性系数",
        ],
        // r: [...values, values[0]], // 闭合多边形，起点与终点一致
        // theta: [...keys, keys[0]], // 闭合多边形，起点与终点一致
        // fill: "toself", // 填充多边形区域
        name: "多边形雷达图",
        marker: {
          color: "#636efc",
        },
        line: {
          color: "#636efc", // 多边形边框颜色
          width: 2, // 边框宽度
        },
      };

      // 雷达图布局
      const layout = {
        polar: {
          radialaxis: {
            visible: true,
            range: [Math.min(...values) * 1.1, Math.max(...values) * 1.1], // 设置范围
          },
          angularaxis: {
            showline: false, // 隐藏 `angularaxis` 线
            showticklabels: true, // 隐藏角度标签
            ticks: "", // 隐藏刻度
          },
        },
        showlegend: false, // 隐藏图例
        title: "多边形雷达图",
      };

      // 渲染图表
      Plotly.react(this.$refs.radarChart, [trace], layout);
    },
  },
};
</script>