场景:如上图,页面左侧有个控制收缩的菜单面板,页面右边是一个数据大屏,有很多的echart是图表,所以需要监听右侧dom元素,当其尺寸变化的时候resize 图表。
在这里可以通过element-resize-detector监听dom元素变化:
npm install element-resize-detector
封装的函数如下:
// 封装 监听dom元素尺寸变化resize echarts
resizeEcharts(echart, myChart) {
const elementResizeDetectorMaker = require('element-resize-detector')// 引入监听dom变化的组件
const erd = elementResizeDetectorMaker()
// 监听id为echart的元素 大小变化
erd.listenTo(echart, function(element) {
// const width = element.offsetWidth
// const height = element.offsetHeight
myChart.resize()
})
},
这里的echart就是我们的dom元素指的是:
this.$refs.echart 或者 document.getElementById(“echart”)
这里的myChart指的是初始化的echarts实例:
const myChart = echarts.init(this.$refs.echart)
所以调用函数就是:
this.resizeEcharts(echart, myChart)
当然,具体封装参数就你的业务需求灵活而定。