echarts单个图表随屏幕放大或缩小自适应调整

 当页面放大 或者缩小时，页面中的图表不随页面变化而变化，需要刷新后才可以恢复到正常状态！！！

Vue中的ECharts图表随屏幕放大或缩小自适应调整，您可以使用ECharts提供的resize方法和Vue的生命周期函数来实现 。

在Vue组件中引入ECharts库，并在mounted生命周期函数中初始化和渲染图表 如下：

<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
import echarts from 'echarts';
 
export default {
  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer);
    this.renderChart(); // 渲 染图表
  }, 
  methods: {
    renderChart() {
      // 使用this.chart绘 制图表
    }
  }
}
</script>复制

然后，您可以使用window的resize事件监听器来捕获屏幕大小的变化，并在变化时触发ECharts的resize方法进行图表的自适应调整。

<script>
import echarts from 'echarts';
 
export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chartContainer);
    this.renderChart(); // 渲染图表
 
    window.addEventListener('resize', this.handleResize); // 添加resize 事件监听器
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize); // 移除resize 事件监听器
  },
  methods: {
    renderChart() {
      // 使用this.chart绘制图表
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize(); // 调用ECharts的resize方法
      }
    }
  }
}
</script>复制

这样，当这个屏幕大小发生变化时，会触发这个resize事件，并调用这个handleResize方法进行图表的自适应调整。在handleResize方法中，使用this.chart.resize()来重新计算图表尺寸和布局，使其适应新的屏幕大小。

记得在组件销毁前使用beforeDestroy生命周期函数移除resize事件监听器，以避免内存泄漏哦。