vue项目中对于echarts图表随着浏览器窗口resize的处理

说明： 有时候项目中会显示一些图表，而且width可能并不是固定的（可能100%），那么当浏览器窗口变化的时候，图表的大小应该跟随着变大或变小，称之为resize

/**
 * 用来处理每一个有图表的页面添加resize , 离开时移除resize函数
 */
import echarts from 'echarts'
import _ from 'lodash'
export default {
  data () {
    return {
      doms: []
    }
  },
  computed: {
    chartResize () {
      return _.throttle(() => {
        return this.doms.forEach(dom => {
          dom && dom.resize()
        })
      }, 400)
    }
  },
  methods: {
    initChart () {
      this.doms.forEach(dom => {
        dom && echarts.init(dom)
      })
    }
  },
  mounted () {
    console.log('mixins mounted')
    this.doms = [this.$refs['charts']]
    this.initChart()
    window.addEventListener('resize', this.chartResize)
  },
  destroyed () {
    console.log('mixins destroyed')
    window.removeEventListener('resize', this.chartResize)
  }
}

复制代码

ps: 使用的时候在需要图表的页面引入这个mixins

转载于:https://juejin.im/post/5d078b12e51d4510624f97d0