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

<!--
 * @Author: your name
 * @Date: 2025-08-15 16:31:43
 * @LastEditTime: 2025-08-20 14:14:19
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart1.vue
-->
<template>
  <div ref="chart" style="width: 100%; height: 500px"></div>
</template>

<script>
import * as echarts from "echarts";
import chartDataJson from "./json/production_indicator11.json"; // 你的数据文件
import yaw_error1 from "./json/yaw_error1.json";
import { colorSchemes } from "@/views/overview/js/colors";
export default {
  props: {
    charts: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart);
    if (this.charts === "prd") {
      this.renderChart(chartDataJson);
    } else {
      this.renderChart(yaw_error1);
      //   this.renderChart(chartDataJson);
    }

    window.addEventListener("resize", this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
    if (this.chart) this.chart.dispose();
  },
  methods: {
    resizeChart() {
      if (this.chart) this.chart.resize();
    },
    renderChart(dataObj) {
      if (!dataObj || !dataObj.data || dataObj.data.length === 0) return;

      // X 轴（风机编号）
      const xData = dataObj.data[0].xData;

      // 系列名称
      const seriesNames = dataObj.data.map((item) => item.enginName);

      // 构造 series
      const series = dataObj.data.map((item) => ({
        name: item.enginName,
        type: "bar",
        stack: "lossStack", // 设置堆叠
        data: item.yData,
        emphasis: { focus: "series" },
      }));

      const option = {
        backgroundColor: "#e5ecf6", // 整个图表背景色
        grid: {
          left: "10%", // 左边距
          right: "10%", // 右边距
          top: "15%", // 上边距
          //   bottom: "15%", // 下边距
          containLabel: true, // 保证坐标轴标签显示完整
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "shadow" },
        },
        color: [
          "#8ECAC1",
          "#77BDC2",
          "#64ADC2",
          "#559ABE",
          "#4884B7",
          "#406DAB",
        ],
        legend: {
          data: seriesNames,
        },

        xAxis: {
          type: "category",
          data: xData,
          name: dataObj.xaixs || "",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: { alignWithLabel: true },
          //   nameLocation: "middle", // 设置名称位置
          //   nameGap: 30, // 与轴线的距离
          //   nameRotate: 0, // 旋转角度（可选）
        },
        yAxis: {
          type: "value",
          name: dataObj.yaixs || "",
          nameLocation: "middle", // 设置名称位置
          nameGap: 30, // 与轴线的距离
          nameRotate: 90, // 旋转角度（可选）
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: series,
      };

      this.chart.setOption(option);
    },
  },
};
</script>