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

<template>
  <div>
    <!-- 图表控制面板 总图-->
    <div style="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>
        <el-button size="small" @click="toggleChartType">
          切换为{{ chartType === "line" ? "面积图" : "折线图" }}
        </el-button>
      </div>
    </div>

    <!-- 图表容器 -->
    <div
      v-loading="loading"
      :id="`bar-chart${index}`"
      :ref="`bar-chart${index}`"
      style="width: 100%; height: 400px"
    >
      <el-empty v-if="isError" description="请求失败"></el-empty>
    </div>
  </div>
</template>

<script>
import { nextTick } from "vue"; // 导入 nextTick
import Plotly from "plotly.js-dist";
import axios from "axios";
import { colorSchemes } from "@/views/overview/js/colors";
import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
import { mapState } from "vuex";
import min_pitch3 from "./json/min_pitch3.json";
export default {
  props: {
    fileAddr: {
      type: String,
      default: "",
    },
    index: {
      type: String,
      default() {
        return "0";
      },
    },
    setUpImgData: {
      default: () => [],
      type: Array,
    },
  },
  mixins: [myMixin],
  data() {
    return {
      chartData: {},
      chartType: "line", // 默认图表类型是折线图
      color1: [], // 默认颜色
      // 配色方案列表（每个方案是一个颜色数组）
      colorSchemes: colorSchemes,
      loading: false,
      isError: false,
      colors: [...colorSchemes[0].colors],
    };
  },
  computed: {
    ...mapState("themes", {
      themeColor: "themeColor",
    }),
  },
  watch: {
    themeColor: {
      handler(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          this.color1 = newVal;
          this.updateChartColor();
        }
      },
      deep: true,
    },
    setUpImgData: {
      handler(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          // 异步执行，避免同步触发 watcher 嵌套执行
          this.$nextTick(() => {
            this.drawChart();
          });
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.getData();
    if (this.fileAddr) {
      this.$nextTick(() => {
        this.color1 = this.colorSchemes[0].colors;
        this.getData();
      });
    }
  },
  methods: {
    // 获取数据
    async getData() {
      console.log("jinru");
      if (this.fileAddr !== "") {
        try {
          this.loading = true;
          this.cancelToken = axios.CancelToken.source();
          const resultChartsData = await axios.get(this.fileAddr, {
            cancelToken: this.cancelToken.token,
          });
          this.chartData = resultChartsData.data;

          // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
          nextTick(() => {
            this.drawChart();
          });
          this.isError = false;
          this.loading = false;
        } catch (error) {
          console.error("Error loading data:", error);
          this.isError = true;
          this.loading = false;
        }
      } else {
        console.log(
          JSON.parse(JSON.stringify(min_pitch3)),
          "JSON.parse(JSON.stringify(min_pitch3))",
        );
        this.chartData = JSON.parse(JSON.stringify(min_pitch3));
        // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
        nextTick(() => {
          this.drawChart();
        });
        this.isError = false;
        this.loading = false;
      }
    },
    // 绘制图表
    drawChart() {
      if (!this.$refs[`bar-chart${this.index}`]) {
        return false;
      }
      const data = [];
      const newData =
        this.chartData.analysisTypeCode === "风电机组叶尖速比和风速分析"
          ? this.chartData &&
            this.chartData.data &&
            JSON.parse(JSON.stringify(this.chartData.data)).sort((a, b) => {
              return a.engineName.localeCompare(b.engineName);
            })
          : JSON.parse(JSON.stringify(this.chartData.data));
      newData.forEach((turbine, index) => {
        console.log(
          index,
          this.color1.length > 0,
          index % this.colors.length,
          "this.color1.length > 0",
        );
        // 判断图表类型，根据类型调整绘制方式
        const chartConfig = {
          x: turbine.xData, // X 数据
          y: turbine.yData, // Y 数据
          name: turbine.engineName, // 使用机组名称
          line: {
            color:
              this.color1.length > 0
                ? this.color1[(index % this.color1.length) + 3]
                : this.colors[(index % this.colors.length) + 3], // 为每个机组分配不同的颜色
          },
          marker: {
            color:
              this.color1.length > 0
                ? this.color1[index % this.color1.length]
                : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
          },
          hovertemplate:
            `${this.chartData.xaixs}:` +
            ` %{x} <br> ` +
            `${this.chartData.yaixs}:` +
            "%{y} <br>",
        };
        if (this.chartData.yaixs === "概率密度函数") {
          chartConfig.line.color =
            this.color1.length > 0 ? this.color1[7] : this.colors[7]; // 为每个机组分配不同的颜色
        }
        if (this.chartType === "line") {
          chartConfig.mode = "lines"; // 如果是折线图
          chartConfig.fill = "none";
        } else if (this.chartType === "bar") {
          // chartConfig.type = "bar"; // 如果是柱状图
          chartConfig.fill = "tonexty";
        }

        data.push(chartConfig);
      });

      const layout = {
        title: {
          text: this.chartData.title || this.chartData.data[0].title,
          font: {
            size: 16, // 设置标题字体大小（默认 16）
            weight: "bold",
          },
        },
        xaxis: {
          title: this.chartData.xaixs || "X轴", // 横坐标标题
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
          dtick: this.chartData.xaixs === "风速" ? 1 : undefined,
          range:
            this.chartData.analysisTypeCode === "风电机组风能利用系数分析" &&
            this.chartData.contract_Cp_curve_xData
              ? [
                  0,
                  Math.max(
                    ...this.chartData.contract_Cp_curve_xData
                      .map(Number)
                      .filter((val) => !isNaN(val)),
                  ) * 0.9,
                ]
              : undefined,
        },
        yaxis: {
          title: this.chartData.yaixs || "Y轴", // 纵坐标标题
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
          range:
            this.chartData.analysisTypeCode === "风电机组风能利用系数分析"
              ? [0, 1.5]
              : undefined,
        },
        margin: {
          l: 50,
          r: 50,
          t: 50,
          b: 50,
        },
        plot_bgcolor: "#e5ecf6",
        gridcolor: "#fff",
        bgcolor: "#e5ecf6", // 设置背景颜色
        autosize: true, // 开启自适应
        barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
      };
      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 = [Number(xChartSetUp.min), Number(xChartSetUp.max)];
      }
      const yChartSetUp = getChartSetUp(layout.yaxis.title);
      if (yChartSetUp) {
        layout.yaxis.dtick = yChartSetUp.dtick;
        layout.yaxis.range = [Number(yChartSetUp.min), Number(yChartSetUp.max)];
      }
      if (
        this.chartData.contract_Cp_curve_yData &&
        this.chartData.contract_Cp_curve_yData.length > 0
      ) {
        data.push({
          x: this.chartData.contract_Cp_curve_xData,
          y: this.chartData.contract_Cp_curve_yData,
          mode: "lines+markers",
          name: "合同功率曲线",
          line: {
            color: "red",
            width: 1, // 设置线条的宽度为1
          },
          marker: { color: "red", size: 4 },
        });
      }
      // 使用 Plotly.react 来更新图表
      Plotly.react(`bar-chart${this.index}`, data, layout, {
        responsive: true,
        modeBarButtonsToRemove: [
          // 移除不需要的工具按钮
          "lasso2d",
          "sendDataToCloud",
          "resetCameraLastSave3d",
          "resetCameraDefault3d",
          "resetCameraLastSave",
          "sendDataToCloud",
          "zoom2d", // 缩放按钮
          "zoom3d",
          "plotlylogo2D",
          "plotlylogo3D",
        ],
        displaylogo: false,
      }).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]);
          }
        });
      });
    },

    // 切换图表类型
    toggleChartType() {
      this.chartType = this.chartType === "line" ? "bar" : "line"; // 切换图表类型
      this.drawChart(); // 重新绘制图表
    },

    // 更新图表颜色
    updateChartColor() {
      this.drawChart(); // 更新颜色后重新绘制图表
    },
    // 根据配色方案设置每个选项的样式
    getOptionStyle(scheme) {
      return {
        background: `linear-gradient(to right, ${scheme
          .slice(0, 8)
          .join(", ")})`,
        color: "#fff",
        height: "30px",
        lineHeight: "30px",
        borderRadius: "0px",
      };
    },
  },
  beforeUnmount() {
    if (this.cancelToken) {
      this.cancelToken.cancel("组件卸载，取消请求");
    }
  },
};
</script>

<style scoped>
/* 样式可以根据需求自定义 */
</style>