团队打卡——echarts flex布局缩放问题

这是今天将html页面替换成flex布局时遇到的问题。

问题描述:

当使用浏览器打开网页时，如果一开始是小屏状态下打开是下图这样

 这个时候是比较正常的，但是当放大浏览器的时候就变成下图

 可以看到两侧的item大小刷新了，但是中间的echarts地图没有变化，需要手动刷新修复。

当一开始就是全屏状态下打开网页，网页变化如下图

问题分析：

中间的echarts地图是js函数生成的，是静态的，不会随着浏览器窗口大小的变化而变化，问题就出现在这，我们需要在窗口大小变化时执行地图重绘

解决方法：

在js函数中添加下列语句，在每次窗口大小变化之后重绘地图页面

window.onresize = () => {
    this.myEcharts.resize();
}