Echarts图表根据DIV和窗口大小自适应容器

项目场景：

vue单页面项目新增一个首页，内容主要为数据展示，包括饼图、折线图、柱状图，通过echarts图表库开发页面。

#实现：普通页面会展开左侧菜单，但首页是全屏展示，需要在打开首页的同时隐藏菜单并使首页宽度100%，图表根据容器宽度自适应

---

问题描述：

一般echart图通过监听window窗口大小并使用 this.myChart.resize() 重新调整尺寸来自适应容器的大小。

但目前遇到一个问题，#question：首页的左侧菜单栏属于document内容，不触发窗口监听，所以需要#监听div的大小来使图表内容resize#。

---

解决方案：

解决方法一：使用“element-resize-detector”插件监听div宽度变化。

1、下载包：npm install element-resize-detector

        我使用的版本是："element-resize-detector": "^1.2.3"

2、在需要用的组件内引入

        import elementResizeDetectorMaker from 'element-resize-detector'

3、因为项目多个地方用到，所以封装到了工具类utils.js中，