Vue多图表自适应解决方案：使用addEventListener

"解决Vue项目中多个ECharts图表自适应问题的代码示例和方法" 在Vue应用程序中，当需要显示多个ECharts图表并且希望它们能够自动根据窗口大小变化进行自适应调整时，可能会遇到一些挑战。ECharts本身提供了`resize`方法来实现图表的尺寸更新，但如何在Vue组件中正确地调用这个方法以确保所有图表都能自适应呢？以下是一个详细的解决方案。 首先，让我们看看初始的代码片段： ```html <div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts> </div> ``` 在Vue组件的`mounted`生命周期钩子中，有如下代码： ```javascript mounted() { this.selfAdaption(); }, methods: { selfAdaption() { const self = this; setTimeout(() => { window.onresize = function() { self.$refs.echarts.resize(); } }, 10); } } ``` 这段代码的问题在于，当页面上有多个ECharts图表时，只有一个图表的`resize`方法会被绑定到`window.onresize`事件上。这是因为事件监听器会被覆盖，而不是添加新的监听器。 为了解决这个问题，我们需要使用`addEventListener`来添加多个事件监听器，而不是直接赋值给`window.onresize`。下面是修正后的代码： ```javascript mounted() { this.selfAdaption(); }, methods: { selfAdaption() { let _this = this; setTimeout(() => { window.addEventListener('resize', function() { _this.$refs.echarts.resize(); }); }, 10); } } ``` 这样，每个图表都有自己的事件监听器，当窗口大小改变时，所有图表都会调用`resize`方法进行自适应调整。 另外，在一个页面中引入多个ECharts图表，可以考虑将初始化和自适应逻辑封装成一个通用的方法。例如： ```html <div class="linebox"> <div id="id" style="width: 100%; height: 100%;" ref="Echart"></div> </div> ``` 在Vue组件的方法中： ```javascript methods: { init() { const self = this; // 保存this指针，防止在箭头函数中丢失 setTimeout(() => { window.addEventListener('resize', function() { self.chart = self.$echarts.init(self.$refs.Echart); self.chart.resize(); }); }, 10); } } ``` 这个`init`方法可以用于任何需要初始化ECharts图表的地方，同时包含了自适应窗口大小的处理。通过这种方式，我们可以有效地管理和维护多个ECharts图表实例，确保它们在页面布局变化时都能正常工作。 总结来说，解决Vue中多个ECharts图表自适应问题的关键在于正确地使用`addEventListener`来添加多个窗口大小变化的监听器，以及封装图表的初始化和自适应方法。这不仅可以保证每个图表都能响应窗口大小的变化，还能提高代码的可复用性和可维护性。