performance-test/src/views/performance/components/chartsCom/yawErrorBarSum.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-sums` + 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,
    },
  },
  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: {
    // 为每个数据点返回对应颜色
    getColor(value) {
      if (value <= 3) {
        return "#8AC8BE"; // (0, 3] 蓝色
      } else if (value <= 5) {
        return "#407DB3"; // (3, 5] 绿色
      } else {
        return "#1B2973"; // (5, ∞] 红色
      }
    },
    drawChart() {
      let a = [];
      let b = [];
      let c = [];
      this.zongFaultCsvData[0].data.map((item) => {
        if (item["[0,3]"] != "0.0") {
          a.push(item["[0,3]"]);
        }
        if (item["(3,5]"] != "0.0") {
          b.push(item["(3,5]"]);
        }
        if (item["(5, )"] != "0.0") {
          c.push(item["(5, )"]);
        }
      });
      const chartDataset = this.zongFaultCsvData[0].data;
      const xData = ["(0,3]", "(3,5]", "(>5]"]; // 机组编号
      const yData = [a.length, b.length, c.length]; // 分别为"(0,3]", "(3,5]", "(>5]的机组有几个

      // 每个柱子的颜色
      const colors = [
        "#8AC8BE", // (0, 3] 蓝色
        "#407DB3", // (3, 5] 绿色
        "#1B2973", // (5, ∞] 红色
      ];

      const trace = {
        x: xData, // 横坐标数据
        y: yData, // 纵坐标数据
        type: this.chartType, // 当前图表类型 ('bar' 或 'scatter')
        marker: {
          color: colors, // 为每个柱子分配不同的颜色
        },
        line: {
          color: this.color1, // 折线图颜色（如果切换到折线图）
        },
        hovertemplate:
          `偏航误差值:` + ` %{x} <br> ` + `台数:` + "%{y} <br> <extra></extra>",
      };

      const layout = {
        title: {
          text: "静态偏航误差的绝对值机组台数分布情况",
          font: {
            size: 16,
            weight: "bold",
          },
        }, // 图表标题
        xaxis: {
          title: "静态偏航误差值（度）", // 横坐标标题
          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,
        },
        autosize: true, // 开启自适应
        // showlegend: true, // 显示图例
        plot_bgcolor: "#e5ecf6",
        gridcolor: "#fff",
        bgcolor: "#e5ecf6", // 设置背景颜色
      };

      // 渲染图表
      Plotly.newPlot(`bar-chart-sums` + this.index, [trace], layout, {
        responsive: true,
        displaylogo: false,
        modeBarButtonsToRemove: [
          "lasso2d", // 移除不需要的工具按钮
          // 移除不需要的工具按钮
          "lasso2d",
          "sendDataToCloud",
          "resetCameraLastSave3d",
          "resetCameraDefault3d",
          "resetCameraLastSave",
          "sendDataToCloud",
          "zoom2d", // 缩放按钮
          "zoom3d",
          "plotlylogo2D",
          "plotlylogo3D",
        ],
      }).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>