如何让echarts在vue里自适应外部div的大小

最近做的项目里有很多数据可视化的页面，如下图，因为一个页面有多个图表，图标外部div使用的百分比，因此使图表自适应外部div大小变得很重

要，为了方便自己下次使用。特地记下来，以免自己忘记

一，首先布局外部div

二， 然后写四个对应的组件 引入

如下图这样

name绑定div的id名

然后给div样式

最后加上监听事件

这样就图表就可以自适应外部div大小了

附上一个完整的