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

<template>
  <div id="myDiv"></div>
</template>

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

export default {
  name: "PlotlyChart",
  mounted() {
    this.initializeChart();
  },
  data() {
    return {
      imageDataUri: "",
    };
  },
  methods: {
    initializeChart() {
      const layout = {
        title: "Power Curve",
        xaxis: { title: "Wind Speed (m/s)" },
        yaxis: { title: "Power (kW)" },
        legend: {
          orientation: "h",
          y: -0.2,
          x: 0.5,
          xanchor: "center",
        },
      };
      const data = {
        analysisTypeCode: "power_curve",
        graphType: "scatter",
        data: [
          {
            engineName: "#1",
            windSpeed: [
              3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
              27, 30,
            ],
            power: [
              6.06, 76.54, 184.1, 345.94, 574.4, 879.9, 1274.73, 1664.94,
              1942.96, 2004.78, 2004.78, 2004.78, 2004.78, 2004.78, 2004.78,
              2004.78, 2004.78, 2004.78, 2230,
            ],
          },
          {
            engineName: "#2",
            windSpeed: [
              2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5,
              10, 10.5, 11, 11.5, 12, 12.5, 13, 13.5, 14, 14.5, 15, 15.5, 16,
              16.5, 33,
            ],
            power: [
              2, 9.23, 100.12, 155.51, 230.09, 400.15, 500.95, 689.55, 961.09,
              1257.53, 1346.02, 1479.78, 1528.01, 1618.52, 1789.09, 1819.35,
              1920.29, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52,
              2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52,
              2153.52, 2159,
            ],
          },
          {
            engineName: "#3",
            windSpeed: [
              2.7, 3.7, 4.7, 5.7, 6.7, 7.7, 8.7, 9.7, 10.7, 11.5, 12, 13.5, 14,
              15.5, 16, 17.5, 18, 19.5, 21, 21.5, 22, 22.5, 23, 23.5, 24, 27.5,
              28, 29.5, 30, 36.5,
            ],
            power: [
              2, 9.23, 100.12, 155.51, 230.09, 400.15, 500.95, 689.55, 961.09,
              1257.53, 1346.02, 1479.78, 1528.01, 1618.52, 1789.09, 1819.35,
              1920.29, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52,
              2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52, 2053.52,
              2053.52,
            ],
          },
        ],
      };
      const plotlyData = data.data.map((engine) => ({
        x: engine.windSpeed,
        y: engine.power,
        mode: "lines+markers",
        name: engine.engineName,
      }));
      const modeBarButtons = [
        {
          name: "套索选择",
          icon: Plotly.Icons.lasso,
          click: function (gd) {
            // 处理套索选择功能
            Plotly.relayout(gd, { dragmode: "lasso" });
          },
        },
        {
          name: "恢复",
          icon: Plotly.Icons.home,
          click: function (gd) {
            Plotly.relayout(gd, {
              "xaxis.autorange": true,
              "yaxis.autorange": true,
            });
          },
        },
        {
          name: "拍照",
          icon: Plotly.Icons.camera,
          click: function (gd) {
            Plotly.downloadImage(gd);
          },
        },
        {
          name: "放大",
          icon: Plotly.Icons.zoom_plus,
          click: function (gd) {
            Plotly.relayout(gd, {
              "xaxis.range": [
                gd._fullLayout.xaxis.range[0],
                gd._fullLayout.xaxis.range[1] * 0.5,
              ],
            });
          },
        },
        {
          name: "缩小",
          icon: Plotly.Icons.zoom_minus,
          click: function (gd) {
            Plotly.relayout(gd, {
              "xaxis.range": [
                gd._fullLayout.xaxis.range[0],
                gd._fullLayout.xaxis.range[1] * 2,
              ],
            });
          },
        },
        {
          name: "平移",
          icon: Plotly.Icons.pan,
          click: function (gd) {
            Plotly.relayout(gd, { dragmode: "pan" });
          },
        },
        {
          name: "自动缩放",
          icon: Plotly.Icons.autoscale,
          click: function (gd) {
            Plotly.relayout(gd, {
              "xaxis.autorange": true,
              "yaxis.autorange": true,
            });
          },
        },
        // 添加更多的自定义按钮
      ];

      const config = {
        modeBarButtonsToAdd: modeBarButtons,
        modeBarButtonsToRemove: [
          "toImage",
          "zoom2d",
          "pan2d",
          "select2d",
          "lasso2d",
          "zoomIn2d",
          "zoomOut2d",
          "autoScale2d",
          "resetScale2d",
          "hoverClosestCartesian",
          "hoverCompareCartesian",
        ],
        displaylogo: false, // 移除plotly logo
        scrollZoom: true,
        // editable: true,//编辑图表标题
      };
      Plotly.newPlot("myDiv", plotlyData, layout, config).then((gd) => {
        //生成图片方法
        Plotly.toImage(gd, { format: "png" }).then((dataUrl) => {
          // console.log(dataUrl, "dataUrl");
          this.imageDataUri = dataUrl;
        });
        // 处理选择事件
        gd.on("plotly_selected", (eventData) => {
          if (eventData) {
            const selectedPoints = eventData.points.map((point) => ({
              x: point.x,
              y: point.y,
            }));
            console.log("选中的点:", selectedPoints);
            // 这里可以保存选中的数据进行后续处理
          }
        });
        // 处理套索结束事件
        gd.on("plotly_relayout", (eventData) => {
          if (eventData["dragmode"] === "lasso") {
            console.log("套索选择模式激活");
            // 可以处理用户开始新的套索选择操作
          }
        });
      });
    },
  },
};
</script>

<style scoped>
/* 样式可选 */
</style>