vue+echarts中 图表容器无法自适应父级div

项目场景：

vue+echarts中 图表容器无法自适应

---

问题描述：

在做项目时，遇到问题，百度了很多都无法实现，解决之后总结一下，方便下次参考。

设置图表宽度为百分比，不生效，无法随着外层父容器大小自适应
补充：项目页面中加入左侧折叠菜单，点击折叠后，父容器百分比自适应浏览器，但是图表大小无法自适应父容器的调整。

---

原因分析：

调试发现 width:100%,变成了width:100px。并没有按照百分比实现自适应。

---

解决方案：

利用resize()方法来解决该问题。

leftMenu.vue折叠按钮事件添加发射事件resize

method:{
   
clickButton:function(){
   
....
//新的界面要添加该事件，最好更名事件名（resize1...）
添加到延时事件
setTimeout(this.$root.eventHub.$emit('resize'),200);
}

main.vue

<template>
	<div style="width:60%;height:30%;">
	//此处我只改变图表宽度自适应，高度固定
		<div id="demoChart" style="width:100%;height:300px;"&g