vue echarts 容器发生改变 echarts自适应

当Vue Echarts的容器发生改变时，Echarts具备自适应能力。我们只需要触发相应的事件来使Echarts重新渲染即可实现容器大小的自适应。

一种常见的方法是在Vue组件的mounted方法中监听容器大小的变化，并手动触发Echarts的resize方法。我们可以使用Vue的$refs来获取Echarts容器的DOM元素，并通过调用Echarts实例的resize方法来使Echarts自适应容器大小。

具体实现步骤如下：
1. 在Vue组件的mounted方法中，使用$refs获取Echarts容器的DOM元素，例如：const chartContainer = this.$refs.chartContainer。
2. 创建Echarts实例，将图表渲染到相应的容器中。
3. 使用addEventListener方法监听窗口大小变化事件，并在回调函数中触发Echarts的resize方法。例如：

window.addEventListener('resize', function() {
  myChart.resize();
});

4. 在Vue组件的beforeDestroy方法中移除窗口大小变化事件的监听。例如：

window.removeEventListener('resize', function() {
  myChart.resize();
});

这样，当Echarts容器发生改变时，窗口大小变化事件就会触发Echarts的resize方法，从而实现Echarts的自适应。

需要注意的是，如果Echarts容器的父元素也具有动态改变大小的特性（例如使用了flex布局），则还需要考虑父元素的大小变化对Echarts容器的影响，可能需要在父元素大小变化时同样触发resize方法。