项目场景:
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中,