解决Vue在同一页面引入多个echarts组件无法自适应，resize失效的问题，lodash实现节流的基本使用

解决Vue在同一页面引入多个echarts组件无法自适应，resize失效的问题

window.onresize()方法只会对最后一个组件里的图表产生效果，是组件加载顺序导致的，所以将window.onresize监听放到父组件去执行

父组件：

<BarChart ref="bar" />
    
<PieChart ref="pie" />

mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        this.$refs.bar.resetCharts()
        this.$refs.pie.resetCharts()
      }
    })
  }

使用节流的写法

安装npm i lodash
import _ from 'lodash

window.addEventListener(
        'resize',
        _.debounce(() => {
          console.log(2)
          this.$refs.bar.resetCharts()
          this.$refs.pie.resetCharts()
        }, 300)
      )

子组件：

methods: {
    resetCharts() {
      // 重置图表大小
     this.$echarts.init(this.$refs.myChart).resize()
    }
  }