performance-test/src/views/performance/components/JsonMarkerCharts.vue

<!--
 * @Author: your name
 * @Date: 2024-08-16 16:19:19
 * @LastEditTime: 2024-09-05 08:57:40
 * @LastEditors: milo-MacBook-Pro.local
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/JsonMarkerCharts.vue
-->
<template>
  <div>
    <div ref="chart" style="width: 100%; height: 500px"></div>
  </div>
</template>
<script>
import Plotly from "plotly.js-dist";
import axios from "axios";

export default {
  data() {
    return {
      dataArr: [], // 存储好点标识的数据
      dataBrr: [], // 存储坏点标识的数据
      dataCrr: [], // 存储限电点标识的数据
    };
  },
  async mounted() {
    try {
      // 从服务器获取数据
      const response = await axios.get(
        // "http://localhost:3006/wof053600062/WOF053600062-WOB00021/power_curve/manual/demo.json"
        "http://localhost:3006/getEchartsData"
      );
      this.processData(response.data); // 处理并分类数据
      this.initChart(); // 初始化图表
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  },
  methods: {
    processData(data) {
      data.forEach((item) => {
        switch (item.lab) {
          case "1":
            this.dataArr.push({ x: item.wind_velocity, y: item.active_power });
            break;
          case "5":
            this.dataBrr.push({ x: item.wind_velocity, y: item.active_power });
            break;
          case "4":
            this.dataCrr.push({ x: item.wind_velocity, y: item.active_power });
            break;
          default:
            return;
        }
      });
    },
    initChart() {
      const chartElement = this.$refs.chart;
      const trace1 = {
        x: this.dataArr.map((d) => d.x),
        y: this.dataArr.map((d) => d.y),
        mode: "markers",
        marker: { color: "green" },
        name: "好点",
      };
      const trace2 = {
        x: this.dataBrr.map((d) => d.x),
        y: this.dataBrr.map((d) => d.y),
        mode: "markers",
        marker: { color: "red" },
        name: "坏点",
      };
      const trace3 = {
        x: this.dataCrr.map((d) => d.x),
        y: this.dataCrr.map((d) => d.y),
        mode: "markers",
        marker: { color: "blue" },
        name: "限电点",
      };

      const data = [trace1, trace2, trace3];

      const layout = {
        title: "Scatter Plot",
        xaxis: {
          title: "Wind Velocity",
          gridcolor: "rgb(255,255,255)",
          range: [1, 10],
          showgrid: true,
          showline: false,
          showticklabels: true,
          tickcolor: "rgb(127,127,127)",
          ticks: "outside",
          zeroline: false,
        },
        yaxis: {
          title: "Active Power",
          gridcolor: "rgb(255,255,255)",
          showgrid: true,
          showline: false,
          showticklabels: true,
          tickcolor: "rgb(127,127,127)",
          ticks: "outside",
          zeroline: false,
        },
        showlegend: true,
        hovermode: "closest",
        hovermode: "closest",
        paper_bgcolor: "rgb(255,255,255)",
        // plot_bgcolor: "rgb(229,229,229)",
        // paper_bgcolor: "lightgray", // 设置图表外部区域背景色
        plot_bgcolor: "#e5ecf6", // 设置绘图区背景色
      };

      Plotly.newPlot(chartElement, data, layout);

      // 响应窗口大小变化
      window.addEventListener("resize", () => {
        Plotly.Plots.resize(chartElement);
      });

      // 处理图表的选择事件
      chartElement.on("plotly_selected", (eventData) => {
        if (eventData) {
          const selectedPoints = [];
          eventData.points.forEach((pt) => {
            selectedPoints.push({
              x: pt.x,
              y: pt.y,
              curveNumber: pt.curveNumber,
            });
          });
          console.log("Selected data:", selectedPoints);
        }
      });
    },
  },
};
</script>
<style scoped>
/* 自定义样式 */
</style>