signed

QiShunwang

“诚信为本、客户至上”

vue项目使用echarts(封装函数:监听dom元素尺寸变化resize echarts)

2020/12/28 16:29:19   来源:

在这里插入图片描述
场景:如上图,页面左侧有个控制收缩的菜单面板,页面右边是一个数据大屏,有很多的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)

当然,具体封装参数就你的业务需求灵活而定。