项目场景：

vue2项目中使用了echarts图标库来进行数据展示，需要解决图表自适应窗口变化以及菜单收缩后容器变化。

---

问题描述

1、在组件中设置监听window的resize时，出现只会最后一个使用的组件出现响应，例如：

上图的柱状图是三个一样的组件，但是窗口改变大小时候，仅仅最后一个柱状图会自适应大小。

如果你的页面上只有一个图表实例，没有进行复用，应该感觉不到两种方式的区别。但如果有多个复用图表，你会发现每次更新只有最后一个图表大小会发生改变。

这是因为addEventListener 提到它允许给一个事件注册多个监听器，也就是说通过 addEventListener 添加事件监听，比如我们要用到的 resize，是可以多次给这个事件注册监听器的。

2、当侧边菜单收缩或者展开时，图表不会自适应。

如果我们只是监听window的resize，那么菜单收缩或者展开时，window的大小并未改变，所以需要监听侧边栏的宽度变化，如果变化，也需要重新渲染表单。

解决方案：

1、关于只会更新最后一个组件，我们将监听resize的时间放在main.js中即可：

这里我们在vuex中设置一个变量用来触发图表示例的resize方法。

2、响应菜单的折叠和展开：

点击菜单开关事件：

在组件中监听vuex中的对应变量，如果改变，那么调用当前图表的resize方法，从而实现响应式：

使用了计算属性和监听器。