performance-test/src/views/performance/components/chartsCom/3DDrawingChart.vue

<template>
  <div>
    <!-- 配色方案选择和图表类型切换 -->
    <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"
            :style="getOptionStyle(scheme.colors)"
          ></el-option>
        </el-select>
      </div>
    </div>
    <!-- 点大小控制 -->
    <div style="display: flex; align-items: center">
      <el-slider
        v-model="pointSize"
        :min="1"
        :max="15"
        :step="1"
        label="点的大小"
        show-stops
        style="width: 150px"
        @change="updateChartColor"
      ></el-slider>
    </div>

    <!-- 图表展示区域 -->
    <div style="height: 600px">
      <div
        :id="`plotly-3d-chart-` + index"
        style="width: 100%; height: 600px"
      ></div>
      <div
        v-loading="loading"
        :id="`plotly-3d-chart-` + index"
        ref="plotlyChart"
        style="height: 600px"
      >
        <el-empty v-if="isError" description="请求失败"></el-empty>
      </div>
    </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";

export default {
  props: {
    fileAddr: {
      default: "",
      type: String,
    },
    index: {
      default: "",
      type: String,
    },
  },
  data() {
    return {
      color1: [
        "#DBEEBC",
        "#A8D7BE",
        "#8ECAC1",
        "#77BDC2",
        "#64ADC2",
        "#559ABE",
        "#4884B7",
        "#406DAB",
        "#3856A0",
        "#314291",
        "#28357A",
        "#1A285E",
        "#FF7F50",
        "#FFD700",
        "#90EE90",
      ], // 默认颜色
      chartData: {},
      chartType: "scatter", // 当前图表类型（默认是散点图）
      colorSchemes: [...colorSchemes],
      pointSize: 2, // 默认点大小
    };
  },
  mixins: [myMixin],
  async mounted() {
    this.getData();
  },

  methods: {
    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(); // 去除前后空格
            dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 替换 Infinity 为 "Infinity"
            try {
              const parsedData = JSON.parse(dataString);
              this.chartData = parsedData;
            } catch (error) {
              console.error("JSON 解析失败:", error);
            }
          } else {
            this.chartData = resultChartsData.data;
          }
          this.renderChart();
          this.isError = false;
          this.loading = false;
        } catch (error) {
          this.isError = true;
          this.loading = false;
        }
      }
    },

    // 更新配色方案
    updateChartColor() {
      this.renderChart(); // 当配色方案或点大小发生变化时重新渲染图表
    },

    // 切换图表类型
    setChartType(type) {
      this.chartType = type;
      this.renderChart(); // 切换图表类型时重新渲染图表
    },

    // 获取配色选项样式
    getOptionStyle(scheme) {
      return {
        background: `linear-gradient(to right, ${scheme.join(", ")})`,
        color: "#fff",
        height: "30px",
        lineHeight: "30px",
        borderRadius: "4px",
      };
    },

    renderChart() {
      const uniqueColors = [...new Set(this.chartData.data[0].color)];
      if (!this.color1) {
        this.color1 = colorSchemes[0].colors;
      }
      const traces = uniqueColors.map((color, idx) => {
        const colorData = this.chartData.data[0].color.map((c) =>
          c === color ? 1 : 0
        );

        const trace = {
          x: this.chartData.data[0].xData.filter((_, i) => colorData[i] === 1),
          y: this.chartData.data[0].yData.filter((_, i) => colorData[i] === 1),
          z: this.chartData.data[0].zData.filter((_, i) => colorData[i] === 1),
          mode: this.chartType === "scatter" ? "markers" : "lines", // 根据选择的图表类型来设置模式
          type: "scatter3d",
          marker: {
            size: this.pointSize, // 使用动态点大小
            color: this.color1[idx], // 使用配色方案
            colorscale: "YlGnBu",
          },
          name: ` ${color}`,
          legendgroup: `group-${idx}`,
          hovertemplate:
            `${this.chartData.xaixs}:` +
            ` %{x} <br> ` +
            `${this.chartData.yaixs}:` +
            "%{y} <br>" +
            `${this.chartData.zaixs}:` +
            "%{z} <br>",
        };
        return trace;
      });

      const layout = {
        title: this.chartData.data[0].title,
        scene: {
          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,
          },
          zaxis: {
            title: this.chartData.zaixs,
            gridcolor: "rgb(255,255,255)",
            tickcolor: "rgb(255,255,255)",
            backgroundcolor: "#e5ecf6",
            showbackground: true,
          },
          // aspectratio: {
          //   x: 1,
          //   y: 3,
          //   z: 1,
          // },
          plot_bgcolor: "#e5ecf6",
          gridcolor: "#fff",
          // camera: {
          //   center: { x: 0, y: 0, z: 0 },
          //   eye: { x: 0, y: 0, z: 2.5 },
          //   up: { x: 0, y: 0, z: 1 },
          // },
        },
        margin: { t: 50, b: 50, l: 50, r: 50 },
        staticPlot: false,
        showlegend: true,
        legend: {
          marker: {
            size: 10, // 图例中点的大小
          },
        },
      };

      Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需求自定义 */
#plotly-3d-chart {
  width: 100%;
  height: 500px;
}

::v-deep canvas {
  /* height: 400px !important; */
}
</style>