连续加载多个封装echarts好的图标组件只有最后一个组件的图标根据屏幕尺寸自适应

当你在前端使用ECharts这个强大的数据可视化库时，连续加载多个封装后的ECharts图表组件，并且希望每个组件都能根据屏幕尺寸自适应显示，可能会遇到一个问题：由于ECharts本身的设计，在动态创建和初始化图表时，如果后续图表覆盖了之前的，它只会应用到最后渲染的那个组件上的样式和配置。

解决这个问题的一种常见做法是：

1. **确保每个组件独立初始化**：给每个图表一个独立的容器ID，这样每次创建新的图表时，都会基于其自身的容器进行大小调整。

const chartInstance1 = echarts.init(document.getElementById('chart1'), 'default');
// ...
const chartInstance2 = echarts.init(document.getElementById('chart2'), 'default');

2. **使用resize事件处理**：为每个图表添加窗口resize事件监听，确保图表能在窗口大小变化时自动更新大小。

window.addEventListener('resize', function () {
    chartInstance1.resize();
    chartInstance2.resize(); // 如果有多个图表，都加上这行
});

3. **关闭自动resize**：在创建图表时设置`autoresize`属性为false，然后手动调用`resize`方法，可以更好地控制每个图表的大小。

chartInstance1.setOption({
    autoResize: false,
    ... // 其他选项
});
chartInstance1.resize();

这样，尽管你一次性加载了多个图表，但是每个图表都会根据各自容器的大小进行调整，不会仅有一个组件响应屏幕大小改变。