vue3+echarts+flex布局自适应

做可视化数据大屏响应式展示

需实现的效果图

<div style="display: flex;flex-direction:column; width:300px;height: 300px;border:solid 1px red;">
	<div id="div1" class="div1" style="flex: 1;border:solid 1px red;">1</div>
	<div id="div2" class="div2" style="flex: 1;border:solid 1px red;">2</div>
</div>

用了flex布局，但是echarts的div的高度没有固定，所以每次echart加载进来的时候echart默认给这个div100px的高度，使得图表没有在div内布满，底下会有一些空缺

​ 

<div style="display: flex;flex-direction:column; width:300px;height: 300px;border:solid 1px red;">
	<div id="div1" class="div1" style="flex: 1;border:solid 1px red;">1</div>
	<div id="div2" class="div2" style="flex: 1;border:solid 1px red;">2</div>
</div>

这样布局，在div1中直接加载了动画后，就会出现上面的空隙问题。

(以下博文把原因说的很详细)

在Vue中使用flex布局 echarts多图标不能自适应缩放问题-优快云博客

echart使用flex布局实现高度自适应遇到的问题_echarts:echarts中flex布局可能会导致高度不能适应-优快云博客

此时，因为需求是要求任意拉到网页屏幕大小，不按刷新键，页面布局也能自动改变。 就毙掉了之前想通过在js内计算div的高度再赋值的方式。

但是，在外面加入一个div（div-wrapper）,div1再用absolute去布局，这里可避开此问题

<div style="display: flex;flex-direction:column; width:200px;height: 200px;border:solid 1px red;">

  <div class="div-wrapper" style="flex: 1; position: relative;">
	<div id="div1" class="div1" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: pink;">1</div>
  </div>

  <div style="display: flex;flex-direction:column; width:200px;height: 200px;border:solid 1px red;">
	<div class="div-wrapper" style="flex: 1; position: relative;">
		<div id="div2" class="div2" style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: pink;">1</div>
	</div>
  </div>
</div>

 

这样子就完美的解决了

另外屏幕拉大变小监听事件，借鉴了博客vue3中使用echarts和echarts自适应_vue3 echarts resize_开发那点事儿~的博客-优快云博客的，用了插件element-resize-detector

借鉴的关键代码