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

<!--
 * @Author: your name
 * @Date: 2025-01-15 14:24:59
 * @LastEditTime: 2025-02-21 17:22:22
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultAll.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: [],
    }, // 故障时长
    zongFaultCsvData: {
      type: Array,
      default: [],
    },
  },
  watch: {
    zongFaultCsvData: {
      deep: true,
      handler(v) {
        console.log("zongFaultCsvData 更新:", v);
        if (v && v[0] && v[0].data) {
          this.faultTypes = v[0].data.map((item) => item.fault_detail);
          this.faultCounts = v[0].data.map((item) => item.count);
          this.faultDurations = v[0].data.map((item) => item.fault_time_sum);
          this.renderChart();
        }
      },
    },

    faultCounts: {
      deep: true,
      handler(v) {
        console.log("V 更新:", v);
        console.log(this.faultDurations, this.faultTypes);
        this.renderChart();
      },
    },
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      // 故障次数的柱状图数据（左侧 Y 轴）
      const barTrace = {
        x: this.faultTypes.slice(0, 10),
        y: this.faultCounts.slice(0, 10),
        type: "bar",
        marker: { color: "#64ADC2" }, // 蓝色柱状图
        name: "故障次数",
        hovertemplate:
          `故障类型:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
      };

      // 故障时长的折线图数据（右侧 Y 轴）
      const lineTrace = {
        x: this.faultTypes.slice(0, 10),
        y: this.faultDurations.slice(0, 10),
        type: "scatter",
        mode: "lines+markers", // 线性图 + 点标记
        line: { color: "#1A295D" }, // 红色折线
        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),
          tickfont: { size: 12 },
        },
        yaxis: {
          title: "故障次数",
          titlefont: { color: "#64ADC2" },
          tickfont: { color: "#64ADC2" },
          side: "left", // 左侧的 Y 轴
          showline: true,
          linecolor: "#64ADC2",
        },
        yaxis2: {
          title: "故障时长 (分钟)",
          titlefont: { color: "#1A295D" },
          tickfont: { color: "#1A295D" },
          overlaying: "y", // 在第一个 Y 轴上方绘制
          side: "right", // 右侧的 Y 轴
          position: 1, // 调整右侧轴的位置
          showline: true,
          linecolor: "#1A295D", // 设置右侧轴线颜色
        },
        barmode: "group", // 柱状图分组
        showlegend: false,
        // legend: {
        //   //   x: 1, // 设置 legend 水平位置
        //   //   y: 1, // 设置 legend 垂直位置
        //   xanchor: "left", // 使图例与 x 轴对齐
        //   yanchor: "top", // 使图例与 y 轴对齐
        //   pad: {
        //     r: 100, // 设置图表与 legend 之间的上间距
        //   },
        // },
        margin: {
          t: 80, // 上边距
          b: 150, // 下边距，给 X 轴标签更多空间
          //   r: 200, // 增加右边距，避免图例遮挡右侧 Y 轴
        },
      };

      // 渲染图表
      Plotly.newPlot(this.$refs.chart, [barTrace, lineTrace], layout);
    },

    // renderChart() {
    //   var trace1 = {
    //     x: [
    //       "Jan",
    //       "Feb",
    //       "Mar",
    //       "Apr",
    //       "May",
    //       "Jun",
    //       "Jul",
    //       "Aug",
    //       "Sep",
    //       "Oct",
    //       "Nov",
    //       "Dec",
    //     ],
    //     y: [
    //       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
    //     ],
    //     type: "bar",
    //     name: "Evaporation",
    //     marker: { color: "#5470C6" },
    //   };

    //   var trace2 = {
    //     x: [
    //       "Jan",
    //       "Feb",
    //       "Mar",
    //       "Apr",
    //       "May",
    //       "Jun",
    //       "Jul",
    //       "Aug",
    //       "Sep",
    //       "Oct",
    //       "Nov",
    //       "Dec",
    //     ],
    //     y: [
    //       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
    //     ],
    //     type: "bar",
    //     name: "Precipitation",
    //     yaxis: "y2", // 使用第二个 Y 轴
    //     marker: { color: "#91CC75" },
    //   };

    //   var trace3 = {
    //     x: [
    //       "Jan",
    //       "Feb",
    //       "Mar",
    //       "Apr",
    //       "May",
    //       "Jun",
    //       "Jul",
    //       "Aug",
    //       "Sep",
    //       "Oct",
    //       "Nov",
    //       "Dec",
    //     ],
    //     y: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
    //     type: "scatter",
    //     mode: "lines+markers",
    //     name: "Temperature",
    //     line: { color: "#EE6666" },
    //     yaxis: "y3", // 使用第三个 Y 轴
    //   };

    //   var layout = {
    //     title: "Evaporation, Precipitation, and Temperature",
    //     xaxis: {
    //       title: "Month",
    //     },
    //     yaxis: {
    //       title: "Evaporation",
    //       titlefont: { color: "#5470C6" },
    //       tickfont: { color: "#5470C6" },
    //       side: "left",
    //       showline: true,
    //       linecolor: "#5470C6",
    //     },
    //     yaxis2: {
    //       title: "Precipitation",
    //       titlefont: { color: "#91CC75" },
    //       tickfont: { color: "#91CC75" },
    //       overlaying: "y",
    //       side: "right",
    //       showline: true,
    //       linecolor: "#91CC75",
    //     },
    //     yaxis3: {
    //       title: "Temperature (°C)",
    //       titlefont: { color: "#EE6666" },
    //       tickfont: { color: "#EE6666" },
    //       overlaying: "y",
    //       side: "right",
    //       position: 0.85, // 调整右侧 Y 轴的位置
    //       showline: true,
    //       linecolor: "#EE6666",
    //     },
    //     showlegend: true,
    //     margin: {
    //       t: 50,
    //       b: 50,
    //       r: 100,
    //     },
    //   };

    //   Plotly.newPlot(this.$refs.chart, [trace1, trace2, trace3], layout);
    // },
  },
};
</script>

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