解决 ECharts 切换图表时的 Resize 问题

问题

场景：页面中需要切换展示多个图表——只有第一个切换的图表会自动应用 resize 方法，而后续切换的图表则无法正确响应尺寸变化，有时甚至连第一个图表都无法正常调整尺寸。

分析

ECharts 的 resize 方法是用于手动触发图表尺寸调整的。在正常情况下，当浏览器窗口大小发生变化时，ECharts 会自动调用 resize 方法来重新渲染图表。但在图表切换的场景下，由于 ECharts 实例的切换和 DOM 元素的动态变化，可能导致 resize 方法无法正确触发。此外，如果图表实例没有正确保存，或者在切换过程中没有及时调用 resize 方法，也会导致图表无法正确响应尺寸变化。

解决

全部代码可见博客echarts图表的轮播切换功能_echarts 轮播-优快云博客

初始化图表实例

在初始化图表时，我们需要保存当前图表实例的引用，以便在需要时调用其 resize 方法。

let currentChartInstance: ECharts | null = null;
const myChart = initEcharts(ref, annularList, gradientColors, gradientColors, title);
currentChartInstance = myChart; // 保存当前图表实例<