antd option宽度自适应_Vue实战092：Echarts图表宽度自适应

双11狂欢节，半价促销！[比心][比心][比心]

所有专栏5折哦，需要的朋友可以下手啦！

前面我们通过文章【Vue实战090：Vue使用ECharts图表详解 】分享了如何利用ECharts创建图表，但是在生成图表之后可能我们可能会遇到这样的问题。页面渲染后显示正常，但是当我们调整页面大小时会发现图表部分被遮挡(或者说溢出)没有随窗口大小改变而自动调整到最佳视觉效果。这里我们可以看到显示的区域只有650px多像素点，但是我们通过【开发者工具】可以看到该canvas容器实际长度有1016px像素。

不响应的原因

首先我们要知道Eechart绘制需图表时必须提供宽和高，所以我们在初始div时必须有指定高度和宽度。当我们在组件中通过mounted初始化Eechart图表，就会在页面中渲染出我们需要的图表。但是钩子函数mounted在Vue生命周期中默认只会在html和模板渲染之后执行一次，所以当我们调整页面大小时图表并不会再次进行渲染(除非我们重新加载该页面)。

resize方法

为了应对这个问题Eechart提供了一个resize方法来改变图表尺寸，但是该方法需要在容器大小发生改变时需要手动调用。因为有时候图表会放在多个标签页里，当标签中存在隐藏的标签时初始化图表的时候会因为获取不到容器的实际高宽。这时候就容易导致绘制图表失败，所以在切换到该标签页时需要手动调用resize方法。resize方法在获取到正确的高宽时会重新刷新canvas画布，所以我们可以通过监听窗口变化来触发resize方法来自动调整canvas画布大小达到自适应的效果。

resize使用

这里我通过父div的高来定义Echarts的宽高，然后通过window.onresize来监听窗口变化。如果想要有个过度效果，那可以利用setTimeout来设置一个定时效果在来执行resize方法。如果window.onresize不行的话可以利用 window.addEventListener('resize', this.Screen)添加监听事件来窗口变化，然后再调用函数Screen执行resize方法。

resize不存在

今天在做Echarts自适应浏览器时发现拖动窗口进行缩放时会出现一个问题：Cannot read property ‘resize’ of undefined，这个后来发现时因为初始化echart的时候把setOption属性接在ECharts对象的初始化init后面了。属性后面当然找不到resize方法了....！

Echarts响应异常

还遇到一个问题就是当设置了resize之后还是遇到响应异常，当调整窗口大小的时候发现放大时Echart会随着窗口变大，但是当缩小窗口时Echart却不会被改变..。当点击收起参数栏的时候图表放大，但是再次展开参数栏偶图表就会溢出屏幕。这个是因为布局时使用了flex属性导致的，后来改成float就好了。

总结：

这里需要注意的是当一个项目中用到多个Echarts图表时，如果每个图表后面都使用window.onresize事件可能会遇到只有最后一个图表被触发。这是因为多个组件使用window.onresize容易出现冲突，导致window.onresize失效。以上内容是小编给大家分享的【Vue实战092：Echarts图表宽度自适应】。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：