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

<template>
  <div style="width: 100%; height: 600px">
    <!-- 2D散点图 -->
    <div style="display: flex; align-items: center; padding-top: 20px">
      <div style="margin-right: 20px; display: flex; align-items: center">
        <el-select
          size="small"
          v-model="color1"
          @change="updateChartColor"
          placeholder="选择配色方案"
          style="width: 200px"
        >
          <el-option
            v-for="(scheme, index) in colorSchemes"
            :key="index"
            :label="scheme.label"
            :value="scheme.colors"
          >
            <span
              v-for="color in scheme.colors.slice(0, 8)"
              :style="{
                background: color,
                width: '20px',
                height: '20px',
                display: 'inline-block',
              }"
            ></span
          ></el-option>
        </el-select>
      </div>
      <!-- 点大小控制 -->
      <div style="display: flex; align-items: center">
        <!-- <span style="margin-right: 10px">点大小</span> -->
        <el-slider
          v-model="pointSize"
          :min="1"
          :max="15"
          :step="1"
          label="点的大小"
          show-stops
          style="width: 150px"
          @change="updateChartColor"
        ></el-slider>
      </div>
      <!-- 图表类型切换按钮 -->
      <!-- <div>
        <el-button size="small" @click="setChartType('scatter')"
          >散点图</el-button
        >
        <el-button size="small" @click="setChartType('line')">折线图</el-button>
      </div> -->
    </div>

    <div
      v-loading="loading"
      :ref="'plotlyChart-' + index"
      style="width: 100%; height: 500px"
    >
      <el-empty v-if="isError" description="请求失败"></el-empty>
    </div>
  </div>
</template>

<script>
import Plotly from "plotly.js-dist";
import axios from "axios";
import { myMixin } from "@/mixins/chartRequestMixin";
import { colorSchemes } from "@/views/overview/js/colors";
import { mapState } from "vuex";
import { isArray, isString } from "@/utils/validate";
export default {
  props: {
    fileAddr: {
      default: "",
      type: String,
    },
    index: {
      type: String,
    },
    setUpImgData: {
      default: () => [],
      type: Array,
    },
  },
  data() {
    return {
      pointSize: 5, // 默认点大小
      color1: colorSchemes[0].colors, // 默认颜色
      // 配色方案列表（每个方案是一个颜色数组）
      colorSchemes: [...colorSchemes],
      chartData: {},
      chartType: "scatter", // 初始化为散点图 (scatter)
      selectedPoints: [],
      originalColors: [],
      originalSizes: [],
    };
  },
  computed: {
    ...mapState("themes", {
      themeColor: "themeColor",
    }),
  },
  watch: {
    themeColor: {
      handler(newval) {
        if (newval.length === 0) {
          this.color1 = this.colorSchemes[0].colors;
        } else {
          this.color1 = newval;
        }
        this.updateChartColor();
      },
      deep: true,
    },
    setUpImgData: {
      handler(newType) {
        this.drawChart();
      },
      deep: true,
    },
  },
  mixins: [myMixin],
  async mounted() {
    this.$nextTick(() => {
      this.getData();
      // if (this.themeColor.length === 0) {
      this.color1 = this.colorSchemes[0].colors;
      // } else {
      //   this.color1 = this.themeColor;
      // }
    });
  },
  methods: {
    // 根据配色方案设置每个选项的样式
    getOptionStyle(scheme) {
      return {
        background: `linear-gradient(to right, ${scheme
          .slice(0, 8)
          .join(", ")})`,
        color: "#fff",
        height: "30px",
        lineHeight: "30px",
        borderRadius: "0px",
      };
    },
    async getData() {
      if (this.fileAddr !== "") {
        try {
          this.loading = true;
          this.cancelToken = axios.CancelToken.source();
          const resultChartsData = await axios.get(this.fileAddr, {
            cancelToken: this.cancelToken.token,
          });
          if (typeof resultChartsData.data === "string") {
            let dataString = resultChartsData.data;
            // 如果数据字符串的开头和结尾可能有多余的字符（比如非法字符），可以进行清理
            dataString = dataString.trim(); // 去除前后空格
            // 如果数据包含了类似 "Infinity" 或其他无法解析的字符，替换它们
            dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 例如，将 "Infinity" 转换为字符串
            try {
              const parsedData = JSON.parse(dataString);
              this.chartData = parsedData;
            } catch (error) {
              console.error("JSON 解析失败:", error);
            }
          } else {
            this.chartData = resultChartsData.data;
          }
          this.drawChart();
          this.isError = false;
          this.loading = false;
        } catch (error) {
          this.isError = true;
          this.loading = false;
        }
      }
    },
    // 清理非法字符（如换行符等）
    cleanJsonString(jsonString) {
      return jsonString.replace(/[\n\r\t]/g, "").replace(/,\s*([\]}])/g, "$1"); // 清理换行符等
    },
    drawChart() {
      if (!this.$refs[`plotlyChart-${this.index}`]) {
        return false;
      }
      const data = this.chartData.data && this.chartData.data[0];
      let trace = {};

      if (this.chartType === "scatter") {
        // 如果有 colorbar 数据
        const uniqueTimeLabels =
          data.colorbar && data.colorbar.length === data.xData.length
            ? [...new Set(data.colorbar)] // 从 colorbar 中提取唯一的标签
            : [...new Set(data.yData)]; // 如果没有 colorbar，使用 data.color
        const ticktext = uniqueTimeLabels.map((dateStr) => dateStr.toFixed(1)); // 格式化为标签
        const tickvals = uniqueTimeLabels.map((label, index) => index + 1); // 设置 tick 值
        const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
          acc[curr] = index + 1;
          return acc;
        }, {});
        // 获取 colorbar 的最小值和最大值来计算比例值
        const minValue = Math.min(...new Set(uniqueTimeLabels));
        const maxValue = Math.max(...new Set(uniqueTimeLabels));
        const colorStops = [
          this.color1[0],
          this.color1[4],
          this.color1[8],
          this.color1[12],
        ];
        // 计算渐变比例
        const colors = colorStops.map((color, index) => {
          const proportion = index / (colorStops.length - 1); // 计算比例值 (0, 1/3, 2/3, 1)
          return [proportion, color]; // 创建比例-颜色映射
        });
        // 确保 colors 至少有 2 种颜色，否则使用默认颜色
        if (colors.length < 2) {
          colors.push([1, colorStops[colorStops.length - 1] || "#1B2973"]);
        }

        // 计算颜色值映射
        let colorValues = [];
        if (data.colorbar && data.colorbar.length === data.xData.length) {
          colorValues = data.colorbar.map((date) => timeMapping[date]);
        } else {
          colorValues = data.yData.map((date) => timeMapping[date]);
        }
        // 保存原始颜色和大小
        // this.originalColors = [...data.yData];
        this.originalColors = [...colorValues];
        this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小

        // 绘制 2D 散点图
        trace = {
          x: data.xData,
          y: data.yData,
          mode: "markers",
          type: "scattergl", // 使用 scattergl 提高性能
          text: data.engineName, // 提示文本
          marker: {
            color: colorValues, // 根据 colorbar 映射的数字设置颜色
            colorscale: this.color1
              ? colors // 如果有 color1 使用自定义颜色比例
              : [
                  [0, "#F9FDD2"],
                  [0.15, "#E9F6BD"],
                  [0.3, "#C2E3B9"],
                  [0.45, "#8AC8BE"],
                  [0.6, "#5CA8BF"],
                  [0.75, "#407DB3"],
                  [0.9, "#2E4C9A"],
                  [1, "#1B2973"],
                ], // 默认颜色渐变
            // colorbar: data.colorbar
            //   ? { title: data.colorbartitle || "Color Legend" }
            //   : undefined, // 如果有 colorbar 显示，否则不显示
            size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
          },
        };
        if (data.colorbartitle === "密度") {
          trace.marker.cmin = 0;
          trace.marker.cmax = maxValue;
        } else if (data.colorbartitle === "百分比(%)") {
          trace.marker.cmin = 0;
          trace.marker.cmax = 100;
        }
        if (data.colorbar && isArray(data.colorbar)) {
          trace.hovertemplate =
            `${this.chartData.xaixs}:` +
            ` %{x} <br> ` +
            `${this.chartData.yaixs}:` +
            "%{y} <br> " +
            `${data.colorbartitle}:` +
            `%{customdata}<br><extra></extra>`;
          trace.customdata = data.colorbar || data.color;
        } else {
          if (data.colorbar && isString(data.colorbar)) {
            trace.hovertemplate =
              `${this.chartData.xaixs}:` +
              ` %{x} <br> ` +
              `${this.chartData.yaixs}:` +
              "%{y} <br> " +
              `${data.colorbartitle}:` +
              `${data.colorbar}<br><extra></extra>`;
          } else {
            trace.hovertemplate =
              `${this.chartData.xaixs}:` +
              ` %{x} <br> ` +
              `${this.chartData.yaixs}:` +
              "%{y} " +
              `<extra></extra>`;
          }
        }
      } else if (this.chartType === "line") {
        // 折线图
        trace = {
          x: data.xData,
          y: data.yData,
          mode: "lines",
          type: "scattergl", // 使用 scattergl 提高性能
          text: data.engineName,
          line: {
            color: this.color1 || "#FF5733", // 使用自定义颜色
          },
        };
      } else if (this.chartType === "bar") {
        // 柱状图
        trace = {
          x: data.xData,
          y: data.yData,
          type: "bar", // 柱状图
          marker: {
            color: this.color1 || "#FF5733", // 使用自定义颜色
          },
        };
      }

      // 图表布局
      let layout = {
        title: {
          text: data.title,
          font: {
            size: 16,
            weight: "bold",
          },
        },
        xaxis: {
          title: this.chartData.xaixs,
          gridcolor: "rgb(255,255,255)", // 网格线颜色
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
          showbackground: true, // 显示背景
        },
        yaxis: {
          title: this.chartData.yaixs,
          gridcolor: "rgb(255,255,255)", // 网格线颜色
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
          showbackground: true, // 显示背景
        },
        showlegend: false,
        plot_bgcolor: "#e5ecf6",
        gridcolor: "#fff", // 设置网格线颜色
      };

      const getChartSetUp = (axisTitle) => {
        return this.setUpImgData.find((item) => item.text.includes(axisTitle));
      };

      const xChartSetUp = getChartSetUp(layout.xaxis.title);
      if (xChartSetUp) {
        layout.xaxis.dtick = xChartSetUp.dtick;
        layout.xaxis.range = [xChartSetUp.min, xChartSetUp.max];
      }

      const yChartSetUp = getChartSetUp(layout.yaxis.title);
      if (yChartSetUp) {
        layout.yaxis.dtick = yChartSetUp.dtick;
        layout.yaxis.range = [yChartSetUp.min, yChartSetUp.max];
      }

      if (this.chartData.xaixs === "时间") {
        layout.xaxis.type = "date";
        layout.xaxis.tickformat = "%Y-%m-%d";
      }

      const config = {
        modeBarButtonsToAdd: [
          {
            name: "选择",
            icon: Plotly.Icons.pencil,
            click: (gd) => this.handleSelectClick(gd),
          },
          {
            name: "清除选中",
            icon: Plotly.Icons.undo,
            click: (gd) => this.handleClearSelect(gd),
          },
          {
            name: "下载CSV文件",
            icon: Plotly.Icons.disk,
            click: (gd) => this.handleDownloadCSV(gd),
          },
        ],
        modeBarButtonsToRemove: [
          "lasso2d", // 移除不需要的工具按钮
          // 移除不需要的工具按钮
          "lasso2d",
          "sendDataToCloud",
          "resetCameraLastSave3d",
          "resetCameraDefault3d",
          "resetCameraLastSave",
          "sendDataToCloud",
          "zoom2d", // 缩放按钮
          "zoom3d",
          "plotlylogo2D",
          "plotlylogo3D",
        ],
        displaylogo: false,
        editable: true,
        scrollZoom: false,
      };
      this.$nextTick(() => {
        // 使用 Plotly 绘制图表
        Plotly.react(
          this.$refs[`plotlyChart-${this.index}`],
          [trace],
          layout,
          config
        ).then(() => {
          // 确保在图表加载完成后设置工具栏按钮
          const plotElement = this.$refs[`plotlyChart-${this.index}`];
          Plotly.relayout(plotElement, layout).then(function (gd) {
            // 获取工具栏按钮
            const toolbar = gd.querySelector(".modebar");
            const buttons = toolbar.querySelectorAll(".modebar-btn");

            // 定义一个映射对象，方便修改按钮提示
            const titleMap = {
              "Download plot as a png": "保存图片",
              Autoscale: "缩放",
              Pan: "平移",
              "Zoom out": "放大",
              "Zoom in": "缩小",
              "Box Select": "选择框操作",
              "Lasso Select": "套索选择操作",
              "Reset axes": "重置操作",
              "Reset camera to default": "重置相机视角",
              "Turntable rotation": "转台式旋转",
              "Orbital rotation": "轨道式旋转",
            };

            // 遍历所有按钮，修改它们的 title
            buttons.forEach(function (button) {
              const dataTitle = button.getAttribute("data-title");

              // 如果标题匹配，修改属性值
              if (titleMap[dataTitle]) {
                button.setAttribute("data-title", titleMap[dataTitle]);
              }
            });
          }); // 使用 relayout 来确保自定义按钮应用
        });
      });
    },

    generateHSLColor(index, total) {
      const hue = (index / total) * 360; // 色相值从 0 到 360
      return `hsl(${hue}, 100%, 50%)`; // 饱和度和亮度设置为固定值，生成多样的颜色
    },
    handleSelectClick(gd) {
      // 绑定 plotly_click 事件
      gd.on("plotly_click", (data) => {
        const pointIndex = data.points[0].pointIndex;
        const xClick = data.points[0].x;
        const yClick = data.points[0].y;

        // 将点击的点添加到选中的点数组
        this.selectedPoints.push({
          x: xClick, // 点击点的 x 坐标
          y: yClick, // 点击点的 y 坐标
          index: pointIndex, // 点击点的索引
          time: data.points[0].text, // 点击点的时间信息
        });

        // 初始化颜色和大小数组
        let newColors = [...this.originalColors];
        let newSize = [...this.originalSizes];

        // 如果选中的点数大于等于3，进行多边形选择区域的处理
        if (this.selectedPoints.length >= 3) {
          const xv = this.selectedPoints.map((p) => p.x);
          const yv = this.selectedPoints.map((p) => p.y);

          // 判断点是否在多边形内
          function inPolygon(x, y, xv, yv) {
            let inside = false;
            for (let i = 0, j = xv.length - 1; i < xv.length; j = i++) {
              const intersect =
                yv[i] > y !== yv[j] > y &&
                x < ((xv[j] - xv[i]) * (y - yv[i])) / (yv[j] - yv[i]) + xv[i];
              if (intersect) inside = !inside;
            }
            return inside;
          }

          // 用于跟踪已添加的 (x, y) 组合
          const addedPoints = {};

          // 遍历图表数据中的所有点，检查是否在多边形内
          gd.data[0].x.forEach((xVal, i) => {
            const yVal = gd.data[0].y[i];
            if (inPolygon(xVal, yVal, xv, yv)) {
              const pointKey = `${xVal}-${yVal}`;
              if (!addedPoints[pointKey]) {
                this.selectedPoints.push({
                  x: gd.data[0].x[i],
                  y: gd.data[0].y[i],
                  time: gd.data[0].text[i],
                });

                newColors[i] = "red"; // 高亮选择的点
                newSize[i] = 10; // 设置点的大小
                addedPoints[pointKey] = true;
              }
            }
          });
        }

        // 更新选中点的颜色和大小
        this.selectedPoints.forEach((point) => {
          newColors[point.index] = "red";
          newSize[point.index] = 10;
        });

        // 使用 Plotly.restyle 更新颜色和大小
        // Plotly.restyle(gd, {
        //   "marker.color": [newColors],
        //   "marker.size": [newSize],
        // });

        // 确保选中的点在最上面
        // const scatterTrace = gd.data[0]; // 原来的散点数据
        // const selectedTrace = {
        //   x: this.selectedPoints.map((p) => p.x),
        //   y: this.selectedPoints.map((p) => p.y),
        //   mode: "markers",
        //   type: "scattergl",
        //   marker: {
        //     color: "red", // 选中点颜色
        //     size: 10,
        //   },
        // };

        // // 合并数据，并保证选中点在最后
        // const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后

        // // 更新图表
        // Plotly.react(gd, updatedTraces, gd.layout);
        Plotly.addTraces(gd, {
          x: this.selectedPoints.map((p) => p.x),
          y: this.selectedPoints.map((p) => p.y),
          mode: "markers",
          type: "scattergl",
          marker: {
            color: "red",
            size: 10,
          },
          name: "选中点",
          showlegend: false,
        });
        // 处理选中的数据
        this.getSelectData(this.selectedPoints, gd.layout);
      });
    },
    handleClearSelect(gd) {
      this.selectedPoints = [];
      Plotly.restyle(gd, {
        "marker.color": [this.originalColors],
        "marker.size": [this.originalSizes],
        // "marker.colorscale": [
        //   [0, "#F9FDD2"],
        //   [0.15, "#E9F6BD"],
        //   [0.3, "#C2E3B9"],
        //   [0.45, "#8AC8BE"],
        //   [0.6, "#5CA8BF"],
        //   [0.75, "#407DB3"],
        //   [0.9, "#2E4C9A"],
        //   [1, "#1B2973"],
        // ],
      });
    },
    getSelectData(selectedPoints, layout) {
      // 在这里处理选中的数据，您可以将其展示或导出等
      console.log("选中的点数据：", selectedPoints);
    },
    handleDownloadCSV(gd) {
      if (this.selectedPoints.length === 0) {
        alert("没有选中的数据，请选择数据后进行文件下载。");
        return;
      }
      this.downloadCSV();
    },

    downloadCSV() {
      const headers = [this.chartData.xaixs, this.chartData.yaixs];
      const csvRows = [headers]; // 保存标头
      // 使用 Set 或 Map 去重
      const uniquePoints = [];
      this.selectedPoints.forEach((point) => {
        if (!uniquePoints.some((p) => p.x === point.x && p.y === point.y)) {
          uniquePoints.push(point);
        }
      });

      // 将去重后的点加入 CSV 数据
      uniquePoints.forEach((point) => {
        csvRows.push(`${point.x},${point.y}`);
      });

      const csvString = csvRows.join("\n");
      const blob = new Blob([csvString], { type: "text/csv; charset=utf-8" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "selected_data.csv";
      a.click();
      URL.revokeObjectURL(url);
    },
    setChartType(type) {
      // 切换图表类型
      this.chartType = type;
      this.drawChart(); // 重新绘制图表
    },

    updateChartColor(color) {
      // 更新图表颜色
      this.drawChart();
    },
  },
};
</script>

<style scoped></style>