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

<template>
  <div>
    <div
      v-loading="loading"
      :id="`plotDiv-${inds}`"
      style="width: 100%; height: 450px"
    >
      <el-empty v-if="isError" description="请求失败"></el-empty>
    </div>
  </div>
</template>

<script>
import Plotly from "plotly.js-dist";
import axios from "axios";
import { myMixin } from "@/mixins/chartRequestMixin";
import { colorSchemes } from "@/views/overview/js/colors";
import { mapState } from "vuex";

export default {
  props: {
    fileAddr: {
      default: "",
      type: String,
    },

    inds: {
      type: [Number, String],
      default: 1,
    },
  },
  mixins: [myMixin],
  data() {
    return {
      // 数据结构
      chartData: {},
      color1: colorSchemes[0].colors, // 默认颜色
      // 配色方案列表（每个方案是一个颜色数组）
      colorSchemes: [...colorSchemes],
    };
  },
  computed: {
    ...mapState("themes", {
      themeColor: "themeColor",
    }),
  },
  watch: {
    chartData: {
      deep: true,
      handler(v) {
        if (v) {
          this.renderChart();
        }
      },
    },
    themeColor: {
      handler() {
        this.color1 = this.themeColor;
        this.renderChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.getData();
    this.color1 = this.themeColor;
  },
  methods: {
    async getData() {
      if (this.fileAddr !== "") {
        try {
          this.loading = true;
          this.cancelToken = axios.CancelToken.source();
          console.log(this.cancelToken);
          const resultChartsData = await axios.get(this.fileAddr, {
            cancelToken: this.cancelToken.token,
          });
          console.log(resultChartsData);
          this.chartData = resultChartsData.data;
          this.renderChart();
          this.isError = false;
          this.loading = false;
        } catch (error) {
          this.isError = true;
          this.loading = false;
        }
      }
    },
    renderChart() {
      const { axes, data, analysisTypeCode } = this.chartData;
      // 从数据中提取 windSpeedRange 和动态生成 speedLabels 和 colorscale
      const windSpeedRanges = new Set();
      data.forEach((engine) => {
        engine.windRoseData.forEach((item) => {
          windSpeedRanges.add(item.windSpeedRange);
        });
      });
      const speedLabels = Array.from(windSpeedRanges).sort(); // 动态范围值
      const colors = [...this.color1]; // 可扩展颜色列表
      const colorscale = {};
      speedLabels.forEach((label, index) => {
        colorscale[label] = colors[index % colors.length];
      });

      // 定义风向的 16 等分
      const windDirections = Array.from({ length: 16 }, (_, i) => i * 22.5);

      // 数据聚合
      const counts = {};
      speedLabels.forEach((speedLabel) => {
        counts[speedLabel] = Array(windDirections.length).fill(0);
      });

      data.forEach((engine) => {
        engine.windRoseData.forEach((item) => {
          const { windDirection, windSpeedRange } = item;
          const index = windDirections.findIndex(
            (dir, i) =>
              windDirection >= dir && windDirection < windDirections[i + 1]
          );

          if (index !== -1 && counts[windSpeedRange]) {
            counts[windSpeedRange][index] += item.frequency;
          }
        });
      });

      // 构建 traces
      const traces = speedLabels.map((speedLabel) => {
        const percentage = counts[speedLabel];
        return {
          r: percentage,
          theta: windDirections,
          name: speedLabel,
          type: "barpolar",
          marker: {
            color: colorscale[speedLabel],
            line: {
              color: "white",
              width: 1,
            },
          },
          hovertemplate:
            `${axes.radial}:` +
            ` %{r} <br> ` +
            `${axes.angular}:` +
            "%{theta} <br> <extra></extra>",
        };
      });

      // 图表布局
      const layout = {
        title: `${analysisTypeCode} - ${data[0]?.enginName} `,
        plot_bgcolor: "#e5ecf6",
        polar: {
          bgcolor: "#e5ecf6",
          radialaxis: {
            title: { text: axes.radial },
            gridcolor: "rgb(255,255,255)",
            showgrid: true,
            linecolor: "rgb(255,255,255)",
          },
          angularaxis: {
            title: { text: axes.angular },
            tickvals: windDirections,
            gridcolor: "rgb(255,255,255)",
            tickcolor: "rgb(255,255,255)",
            linecolor: "rgb(255,255,255)",
          },
        },
        showlegend: true,
        legend: { title: { text: axes.levelname } },
      };

      Plotly.newPlot(`plotDiv-${this.inds}`, traces, layout);
    },
  },
};
</script>

<style scoped></style>