Vue-ECharts 多图表自动调整尺寸问题分析与解决方案

问题背景

在使用 Vue-ECharts 6.7.3及以上版本时，开发者可能会遇到一个关于图表自动调整尺寸（autoresize）的特殊问题。具体表现为：当页面包含多个图表且都启用了autoresize功能时，页面放大时所有图表都能正常跟随放大，但在页面缩小时，只有部分图表能够正确缩小，其他图表会出现宽度不变或高度无法缩小的情况。

问题现象详细描述

1. 页面放大时：所有图表都能正常跟随页面尺寸增大
2. 页面缩小时：
   • 在6.7.3版本中：只有1个图表会缩小，其他图表宽度保持不变，高度可以缩小
   • 在7.0.3版本中：宽度可以自动缩小，但高度只能变大不能变小

问题原因分析

这个问题主要与Vue-ECharts内部实现的自动调整尺寸机制有关。在6.7.3版本后，组件对ResizeObserver的实现进行了调整，可能导致在某些布局情况下：

1. 多个图表共享同一个父容器时，尺寸计算可能出现冲突
2. CSS布局的层叠上下文影响了尺寸变化的传播
3. 图表容器的overflow属性设置不当，阻碍了正确的尺寸计算

解决方案

方案一：添加CSS样式

在图表容器元素上添加以下CSS样式可以解决大部分问题：

.echarts-container {
  overflow: hidden;
}

这个解决方案的原理是：

1. 明确指定容器的overflow行为
2. 确保容器能够正确响应外部尺寸变化
3. 防止内容溢出干扰尺寸计算

方案二：降级版本

如果项目允许，可以暂时降级到6.7.2版本，该版本不存在此问题。但这不是长期解决方案，建议配合CSS方案使用。

方案三：手动控制resize

对于复杂场景，可以考虑：

1. 关闭autoresize功能
2. 自行监听窗口或容器尺寸变化
3. 手动调用图表的resize方法

const handleResize = () => {
  chartInstance.value.resize()
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

最佳实践建议

1. 确保图表容器有明确的尺寸定义（固定值或百分比）
2. 为图表容器添加overflow: hidden样式
3. 在复杂布局中，考虑为每个图表提供独立的父容器
4. 保持Vue-ECharts版本更新，及时关注官方修复

总结

Vue-ECharts的autoresize功能在多数情况下工作良好，但在特定布局和版本组合下可能出现尺寸调整异常。通过添加简单的CSS样式或调整布局结构，可以有效解决这些问题。对于关键业务场景，建议结合手动resize控制以获得更可靠的行为。