关于echarts图表大小自适应标签容器，以及页面切换后resize(窗口大小改变)再回到含有echarts图的页面，echarts图无法显示，直到再次触发resize的问题解决

本文主要是介绍关于echarts图表大小自适应标签容器，以及页面切换后resize(窗口大小改变)再回到含有echarts图的页面，echarts图无法显示，直到再次触发resize的问题解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.echarts实现大小自适应包含它的标签容器
实现方式：监听window上的resize事件，在事件中执行echarts自带的resize方法
首先包含echarts的容器应该有初始的宽高，否则echarts无法显示。第二，为了使窗口缩放时，容器也跟着缩放，包含echarts的标签的宽高应该设置为百分比的形式（或其他布局形式，不要直接都定死），一般宽度设置为百分比，高度可以固定。
举例：

<template><div class="echart"><div class="echart1"><div class="echart2"></div></div>
</template><script>
export default {mounted() {let container1 = document.querySelector(".echart1");let echart1= this.$echarts.init(container1);let container2 = document.querySelector(".echart2");let echart2 = this.$echarts.init(container2);echart1.setOption(Option);echart2.setOption(Option2);window.addEventListener("resize", function () {echart1.resize();echart2.resize();});},
};
</script><style>
.echart {width: 100%;height: 500px;display: flex;
}
.echart1,
.echart2 {width: 49%;/* flex: 1; */margin: 0 1%;box-shadow: 0 0 10px #aaa;
}
</style>

这里的option没有写出来，可以自己根据情况而定，另外这里是在vue文件中写的，如果是在原生中把标签样式和js分开写就行。
2.为什么页面切换后，如果触发了window.onresize（即页面大小发生了改变），再回到当前页，echarts图无法显示，需要在本页面再触发一次resize(缩放下窗口）才能正常展示
官方文档指出：
在这里插入图片描述
这里虽然没有隐藏标签但是情况和这个类似，所以解决方案就是在进入页面时让其触发echarts的resize方法。
这里是在vue中，且使用了keep-alive保存了当前组件状态，所以是在activated中触发的（如果没有keep-alive包裹当前组件或路由，那么可以在vue生命周期函数，如mounted中让其执行。）
在这里插入图片描述
注意上面的echart1就需要在全局或者data中定义了,初始值可以设置为undefined或者null
补充：上面的方式可能不会生效，报‘resize is not defined’的错,
更改代码