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: {
          text: "机组静态偏航误差值分布", // 图表标题
          font: {
            size: 16, // 设置标题字体大小（默认 16）
            weight: "bold",
          },
        },
        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,
          modeBarButtonsToRemove: [
            "lasso2d", // 移除不需要的工具按钮
            // 移除不需要的工具按钮
            "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 === "bar" ? "scatter" : "bar";
      this.drawChart();
    },
    // 更新图表颜色
    updateChartColor() {
      this.drawChart();
    },
  },
};
</script>

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