问题
今天修复一个早期项目的问题，具体情况是：页面上有一些使用 echats 渲染的图表，当修改浏览器窗口大小的时候，这些图表没有自动重新渲染至合适大小。
一开始我的想法是监听 的 事件，当 被触发的时候，调用渲染 图表的函数。
用法
方法接受一个可选参数 ，参数类型如下：
参数解释
- opts 可缺省。有下面几个属性：
- 可显式指定实例宽度，单位为像素。如果传入值为 //，则表示自动取 （实例容器）的宽度。
- 可显式指定实例高度，单位为像素。如果传入值为 //，则表示自动取 （实例容器）的高度。
- 是否禁止抛出事件。默认为 。
- resize 的时候是否应用过渡动画，包含时长和缓动两个配置，默认为 0，即不应用过渡动画。
Tip: 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 方法获取正确的高宽并且刷新画布，或者在 中显示指定图表高宽。
解决问题
为了便于阅读，就不放大段代码在这里了，为了便于理解，这里只写最核心代码。
因为项目是 vue 2.x 版本，所以这里主要是在 标签中的代码。首先就是要定义一个 用来表示 实例：
定义一个渲染图表的函数 :
最重要的代码在这里：
这里做了三件事：
- 在 阶段先渲染图表(调用 )
- 封装重新渲染图表函数，使用防抖函数包裹
- 监听 事件，重新渲染图表。
最后也不要忘记在 阶段取消事件监听函数：
至此， 图表根据浏览器窗口大小自动渲染问题算是解决了。