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

<!--
 * @Author: your name
 * @Date: 2025-01-15 15:49:57
 * @LastEditTime: 2025-03-13 16:25:02
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultUntal.vue
-->
<template>
  <div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
  </div>
</template>

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

export default {
  name: "faultAll",
  props: {
    faultTypes: {
      type: Array,
      default: [],
    }, // 故障机组
    faultCounts: {
      type: Array,
      default: [],
    }, // 故障次数
    faultDurations: {
      type: Array,
      default: [],
    }, // 故障时长
    fenFaultCsvData: {
      type: Array,
      default: [],
    },
  },
  watch: {
    faultCounts: {
      deep: true,
      handler(v) {
        console.log(this.faultDurations, this.faultTypes);
        this.renderChart();
      },
    },
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      // 故障次数的散点图数据（左侧 Y 轴）
      const scatterFaultCounts = {
        x: this.faultTypes.slice(0, 10),
        y: this.faultCounts.slice(0, 10),
        mode: "markers", // 散点图
        marker: { color: "#64ADC2", size: 10 }, // 蓝色散点
        name: "故障次数",
        hovertemplate: `机组:` + ` %{x} <br> ` + `故障次数:` + "%{y} 分钟<br>",
      };

      // 故障时长的散点图数据（右侧 Y 轴）
      const scatterFaultDurations = {
        x: this.faultTypes.slice(0, 10),
        y: this.faultDurations.slice(0, 10),
        mode: "markers", // 散点图
        marker: { color: "#1A295D", size: 10 }, // 红色散点
        name: "故障时长",
        yaxis: "y2", // 使用第二个 Y 轴（右侧）
        hovertemplate: `机组:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
      };

      // 布局配置，设置双 Y 轴
      const layout = {
        title: "机组故障次数与时长分析Top10",
        xaxis: {
          title: "故障机组",
          tickangle: 30,
          tickmode: "array",
          tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
          ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
          tickfont: { size: 12 },
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
        },
        yaxis: {
          title: "故障次数",
          titlefont: { color: "#64ADC2" },
          tickfont: { color: "#64ADC2" },
          side: "left", // 左侧的 Y 轴
          showline: true,
          linecolor: "#64ADC2",
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
        },
        yaxis2: {
          title: "故障时长(秒)",
          titlefont: { color: "#1A295D" },
          tickfont: { color: "#1A295D" },
          overlaying: "y", // 在第一个 Y 轴上方绘制
          side: "right", // 右侧的 Y 轴
          position: 1, // 调整右侧轴的位置
          showline: true,

          // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
          // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
          linecolor: "#1A295D", // 设置右侧轴线颜色
        },
        plot_bgcolor: "#e5ecf6",
        gridcolor: "#fff",
        bgcolor: "#e5ecf6", // 设置背景颜色
        showlegend: false, // 显示图例
        margin: {
          t: 80, // 上边距
          b: 150, // 下边距，给 X 轴标签更多空间
        },
      };

      // 渲染图表
      Plotly.newPlot(
        this.$refs.chart,
        [scatterFaultCounts, scatterFaultDurations],
        layout
      );
    },
  },
};
</script>

<style scoped>
/* 你可以根据需要添加样式 */
</style>