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"
          :style="getOptionStyle(scheme.colors)"
        ></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}`"
      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 { colorSchemesLine } from "@/views/overview/js/colors";
import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin

export default {
  props: {
    fileAddr: {
      type: String,
      default: "",
    },
    index: {
      type: String,
      default() {
        return "0";
      },
    },
  },
  mixins: [myMixin],
  data() {
    return {
      chartData: {},
      chartType: "line", // 默认图表类型是折线图
      color1: [], // 默认颜色
      // 配色方案列表（每个方案是一个颜色数组）
      colorSchemes: [...colorSchemesLine],
      loading: false,
      isError: false,
      colors: [
        "#636EFA",
        "#EF553B",
        "#00CC96",
        "#AB63FA",
        "#FFA15A",
        "#19D3F3",
        "#FF6692",
        "#B6E880",
        "#FF97FF",
        "#FECB52",
        "#636EFB",
        "#EF553C",
        "#00CC97",
        "#AB63FB",
        "#FFA15B",
        "#19D3F4",
        "#FF6693",
        "#B6E881",
        "#FF97FE",
        "#FECB51",
        "#1F77B4",
        "#FF7F0E",
        "#2CA02C",
        "#D62728",
        "#9467BD",
        "#8C564B",
        "#E377C2",
        "#7F7F7F",
        "#BCBD22",
        "#17BECF",
        "#1A55F2",
        "#FF5733",
        "#33FF57",
        "#3375FF",
        "#FF33A6",
        "#57FF33",
        "#3380FF",
        "#FF8033",
        "#57FF80",
        "#8033FF",
        "#FF3380",
        "#FFD733",
      ],
    };
  },
  mounted() {
    if (this.fileAddr) {
      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,
          });
          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;
        }
      }
    },
    // 绘制图表
    drawChart() {
      const data = [];
      console.log(this.chartData, "this.chartData");
      this.chartData &&
        this.chartData.data &&
        this.chartData.data.forEach((turbine, index) => {
          // 判断图表类型，根据类型调整绘制方式
          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]
                  : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
            },
            marker: {
              color:
                this.color1.length > 0
                  ? this.color1[index % this.color1.length]
                  : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
            },
          };

          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: this.chartData.title,
        xaxis: {
          title: this.chartData.xaixs || "X轴", // 横坐标标题
        },
        yaxis: {
          title: this.chartData.yaixs || "Y轴", // 纵坐标标题
        },
        margin: {
          l: 50,
          r: 50,
          t: 50,
          b: 50,
        },
        autosize: true, // 开启自适应
        barmode: this.chartType === "bar" ? "stack" : "group", // 如果是柱状图则启用堆叠
      };
      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,
      });
    },

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

    // 更新图表颜色
    updateChartColor() {
      this.drawChart(); // 更新颜色后重新绘制图表
    },
    // 根据配色方案设置每个选项的样式
    getOptionStyle(scheme) {
      return {
        background: `linear-gradient(to right, ${scheme.join(", ")})`,
        color: "#fff",
        height: "30px",
        lineHeight: "30px",
        borderRadius: "4px",
      };
    },
  },
};
</script>

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