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

<template>
  <div>
    <!-- 图表控制面板 -->
    <div style="display: flex; align-items: center">
      <!-- <div style="margin-right: 20px; display: flex; align-items: center">
        <el-color-picker
          size="small"
          v-model="color1"
          show-alpha
          @change="updateChartColor"
        ></el-color-picker>
        <span style="margin-left: 10px">自定义颜色</span>
      </div> -->
      <div>
        <el-button size="small" @click="toggleChartType">
          切换为{{ chartType === "bar" ? "折线图" : "柱状图" }}
        </el-button>
      </div>
    </div>

    <!-- 图表容器 -->
    <div
      v-loading="loading"
      :id="`bar-chart-sum` + 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 { myMixin } from "@/mixins/chartRequestMixin";

export default {
  props: {
    zongFaultCsvData: {
      default: [],
      type: Array,
    },
    index: {
      type: String,
    },
    setUpImgData: {
      default: () => [],
      type: Array,
    },
  },
  mixins: [myMixin],
  data() {
    return {
      chartData: {
        analysisTypeCode: "",
        engineCode: "",
        engineTypeName: "",
        xaixs: "",
        yaixs: "",
        data: [],
      },
      chartType: "bar", // 当前图表类型 ('bar' 或 'scatter')
      color1: "#406DAB", // 默认颜色
      isError: false, // 错误标志
      loading: true, // 加载标志
    };
  },
  mounted() {
    nextTick(() => {
      this.drawChart();
      this.isError = false;
      this.loading = false;
    });
  },

  methods: {
    getData() {
      console.log(this.zongFaultCsvData[0].data);
    },
    // 为每个数据点返回对应颜色
    getColor(value) {
      if (value <= 3) {
        return "#8AC8BE"; // (0, 3]
      } else if (value <= 5) {
        return "#407DB3"; // (3, 5]
      } else {
        return "#1B2973"; // (5, ∞]
      }
    },
    drawChart() {
      const chartDataset = this.zongFaultCsvData[0].data;
      const xData = chartDataset.map((item) => item.engine_name); // 机组编号
      const yData = chartDataset.map((item) => item.yaw_error1); // 偏航误差值

      // 为每个数据点分配颜色
      const colors = yData.map(this.getColor);

      const trace = {
        x: xData, // 横坐标数据
        y: yData, // 纵坐标数据
        type: this.chartType, // 当前图表类型 ('bar' 或 'scatter')
        marker: {
          color: colors, // 每个点的颜色
        },
        line: {
          color: this.color1, // 折线图颜色
        },
        name: "偏航误差值", // 图例名称
        hovertemplate:
          `机组名称:` +
          ` %{x} <br> ` +
          `偏航误差值:` +
          "%{y} <br> <extra></extra>",
      };

      // 创建虚拟的 trace 以便显示图例
      const legendTrace1 = {
        x: [null],
        y: [null],
        name: "(0, 3]",
        mode: "markers",
        marker: { color: "#8AC8BE", size: 10 },
      };
      const legendTrace2 = {
        x: [null],
        y: [null],
        name: "(3, 5]",
        mode: "markers",
        marker: { color: "#407DB3", size: 10 },
      };
      const legendTrace3 = {
        x: [null],
        y: [null],
        name: "(5, ∞]",
        mode: "markers",
        marker: { color: "#1B2973", size: 10 },
      };

      const layout = {
        title: "机组静态偏航误差值", // 图表标题
        xaxis: {
          title: "机组编号", // 横坐标标题
          tickmode: "array",
          tickvals: xData, // 设置刻度值（机组编号）
          ticktext: xData, // 设置刻度文本（机组编号）
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
        },
        yaxis: {
          title: "静态偏航误差值（度）", // 纵坐标标题
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
        },
        margin: {
          l: 50,
          r: 50,
          t: 50,
          b: 50,
        },
        plot_bgcolor: "#e5ecf6",
        gridcolor: "#fff",
        bgcolor: "#e5ecf6", // 设置背景颜色
        autosize: true, // 开启自适应
        showlegend: true, // 显示图例
        legend: {
          x: 1.05,
          y: 1,
        },
        annotations: [
          {
            x: 1.05,
            y: 4,
            xref: "paper",
            yref: "paper",
            text: "(0, 3] ",
            showarrow: false,
            font: { size: 12, color: "#8AC8BE" },
          },
          {
            x: 1.05,
            y: 3,
            xref: "paper",
            yref: "paper",
            text: "(3, 5] ",
            showarrow: false,
            font: { size: 12, color: "#407DB3" },
          },
          {
            x: 1.05,
            y: 2,
            xref: "paper",
            yref: "paper",
            text: "(5, ∞] ",
            showarrow: false,
            font: { size: 12, color: "#1B2973" },
          },
        ],
      };

      // 渲染图表
      Plotly.newPlot(
        `bar-chart-sum` + this.index,
        [trace, legendTrace1, legendTrace2, legendTrace3],
        layout,
        {
          responsive: true,
        }
      );
    },
    // 切换图表类型
    toggleChartType() {
      this.chartType = this.chartType === "bar" ? "scatter" : "bar";
      this.drawChart();
    },
    // 更新图表颜色
    updateChartColor() {
      this.drawChart();
    },
  },
};
</script>

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