echarts当容器大小变化时跟着变

<template>
  <div ref="chartContainer" class="chart-container">
    <!-- 图表将渲染到这个容器中 -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import { bars } from "@/api/api";
export default {
  name: "EChartsComponent",
  data() {
    return {
      chart: null, // 用于存储ECharts实例
      barsData: [],
    };
  },
  mounted() {
    this.getdata();
    setInterval(() => {
      this.getdata();
    }, 120000);
    // this.initChart();
    window.addEventListener("resize", this.resizeChart);
  },
  // beforeUpdate() {
  //   window.removeEventListener("resize", this.resizeChart);
  // },
  // updated() {
  //   this.initChart();
  //   window.addEventListener("resize", this.resizeChart);
  // },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
    if (this.chart) {
      this.chart.dispose(); // 销毁图表实例
    }
  },
  methods: {
    getdata() {
      let obj = {
        t: "GetTestBars",
        f: "7",
        l: JSON.parse(window.localStorage.getItem("user")).LastSysLineID,
        testRoomCode: JSON.parse(window.localStorage.getItem("user"))
          .TestRoomCode,
      };
      bars(obj).then((res) => {
        if (res.data.Flag == 1) {
          this.barsData = res.data.Data;
          this.initChart();
        }
      });
    },
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      if (chartContainer) {
        const width = chartContainer.clientWidth;
        const height = chartContainer.clientHeight;
        if (this.chart) {
          this.chart.resize({
            width,
            height,
          });
        } else {
          this.chart = echarts.init(chartContainer);
          this.chart.setOption({
            // 设置ECharts图表配置
            title: {
              text: "配料签名信息",
              left: "center",
              top: "5%",
              textStyle: {
                color: "#01d1f2",
                fontSize: 16,
              },
            },
            tooltip: {
              trigger: "axis",
            },
            grid: {
              // 设置图表的布局位置
              height: "auto", // 柱状图向左偏移20%
              padding: [0, 0, 0, 5],
              bottom: "15%",
            },
            xAxis: {
              type: "category",
              data: ["试验", "批准", "领取", "监理"],
              axisLabel: {
                // 设置X轴标签的字体颜色
                color: "#01d1f2", // 红色
                // 设置X轴标签的字体大小
                fontSize: 13,
              },
            },
            yAxis: {
              type: "value",
              axisLabel: {
                // 设置X轴标签的字体颜色
                color: "#01d1f2", // 红色
                // 设置X轴标签的字体大小
                fontSize: 12,
              },
            },
            series: [
              {
                name: "已签数",
                type: "bar",
                data: this.barsData[0],
                itemStyle: {
                  barBorderRadius: 12, // 左上角、右上角、右下角、左下角
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#fccb05" }, // 起点颜色
                    { offset: 1, color: "#f5804d" }, // 终点颜色
                  ]),
                },
              },
              {
                name: "待签数",
                type: "bar",
                data: this.barsData[1],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#8bd46e",
                    },
                    {
                      offset: 1,
                      color: "#09bcb7",
                    },
                  ]),
                  barBorderRadius: 11,
                },
              },
              {
                name: "超时数",
                type: "bar",
                data: this.barsData[2],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#248ff7",
                    },
                    {
                      offset: 1,
                      color: "#6851f1",
                    },
                  ]),
                  barBorderRadius: 11,
                },
              },
            ],
          });
          window.dispatchEvent(new Event("resize")); // 触发resize事件以适应初始大小
        }
      }
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize(); // 当容器大小变化时，调用resize方法以适应新的宽高
      }
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%; /* 可以设置具体的像素值，或者相对值（如vh, vw, %等） */
}
</style>

第二种简单点

let myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
     myChart.resize();
});