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

<!--
 * @Author: your name
 * @Date: 2024-09-11 14:36:31
 * @LastEditTime: 2025-01-21 18:55:00
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxMarkersCharts.vue
-->
<!-- <template>
  <div> -->
<!-- BoxMarkersCharts
    <h1>叶尖速比时序分析</h1>
    <h1>风能利用系数时序分析</h1> -->
<!-- <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
  </div>
</template>
 -->
<template>
  <div>
    <div
      v-loading="loading"
      ref="plotlyChart"
      style="width: 100%; height: 450px"
    >
      <el-empty v-if="isError" description="请求失败"></el-empty>
    </div>
  </div>
</template>

<script>
import Plotly from "plotly.js-dist-min";
import axios from "axios";
import { myMixin } from "@/mixins/chartRequestMixin";
export default {
  name: "BoxPlotWithMedians",
  mixins: [myMixin],
  props: {
    fileAddr: {
      default: "",
      type: String,
    },
    index: {
      type: Number,
    },
  },
  data() {
    return {
      chartData: {},
    };
  },
  mounted() {
    this.getData();
  },
  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,
          });
          this.chartData = resultChartsData.data;
          this.drawBoxPlot();
          this.isError = false;
          this.loading = false;
        } catch (error) {
          this.isError = true;
          this.loading = false;
        }
      }
    },
    drawBoxPlot() {
      const chartContainer = this.$refs.plotlyChart;
      const { data, xaixs, yaixs, analysisTypeCode } = this.chartData;

      const traces = [];
      const medianMarkers = [];

      // 处理每组数据
      data.forEach((group) => {
        // 添加箱线图
        traces.push({
          x: group.xData,
          y: group.yData,
          type: "box",
          name: group.title,
          marker: {
            color: group.color,
          },
          boxmean: true, // 显示均值
        });

        // 添加中位点
        if (group.medians) {
          medianMarkers.push({
            x: group.medians.x,
            y: group.medians.y,
            mode: group.medians.mode,
            marker: {
              color: group.medians.color,
              size: group.medians.size,
            },
            name: `${group.title} - 中位点`,
            type: "scatter",
          });
        }
      });

      const layout = {
        title: analysisTypeCode + data[0].engineName,
        xaxis: {
          title: xaixs,
        },
        yaxis: {
          title: yaixs,
        },
        showlegend: true,
      };

      // 绘制图表
      Plotly.newPlot(chartContainer, [...traces, ...medianMarkers], layout);
    },
  },
};
</script>

<style scoped>
/* 可根据需要自定义样式 */
</style>