有如下页面需求：在一个页面展示多个echarts图表，并且根据屏幕大小变化而变化。

可以封装成组件使用，以增加代码复用性

// myCharts.vue
 <template>
  <div class="charts-comps" ref="charts"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'myCharts',
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      resizeTimer: null,
      myChart: null
    }
  },
  methods : {
    init () {
      let myChart = echarts.init(this.$refs.charts);
      this.myChart = myChart;
      myChart.setOption({
	   xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	   },
	   yAxis: {
	     type: 'value'
	   },
	   series: [{
	     data: [820, 932, 901, 934, 1290, 1330, 1320],
	     type: 'line',
	     areaStyle: {}
	    }]
	  });
    }
  }
  mounted () {
    this.init(); // 初始化图表
    let _this = this;
    window.addEventListener('resize', function () { 
      if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
      _this.resizeTimer = setTimeout(function () {
        _this.myChart.resize();
      }, 100)
    })
  }
}
</script>

<style lang="less" scoped>
  .charts-comps{
    width: 100%;
    height: 100%;
  }
</style>

这样就可以在需要用到的地方使用了

// index.vue
<template>
 <my-charts class="charts-comps" ref="charts"  v-for="item in dataList" :key="item"></my-charts>
</template>

<script>
import myCharts from './myCharts'
export default {
  name: 'test',
  components: {myCharts},
  data () {
  	return {
  	 dataList: ['test1','test2','test3','test4']
  	}
  }
 }
 </script>

let _this = this;
window.addEventListener('resize', function () { 
  ...
})

在myCharts组件中去监听窗口大小变化，这样可以针对每一个图表很方便的resize()重绘图表（Echarts.resize()是echarts的对图表进行重新绘制的方法）。这里使用window.addEventListener而不使用window.onresize的原因是：window.onresize绘覆盖掉前面定义的方法，而只执行最后一个，导致图表只有最后一个重绘了，而window.addEventListener避免了这个问题。

if (_this.resizeTimer) clearTimeout(_this.resizeTimer);
_this.resizeTimer = setTimeout(function () {
  _this.myChart.resize();
}, 100)

结合 函数防抖（debounce） 避免在窗口大小变化时频繁的进行图表的resize()。在处理复杂的function时可以很大限度的提高性能。实现原理就是对要执行的目标方法延时处理，设置一个定时器，当再次执行相同方法时（窗口大小变化时会被频繁的侦听到onresize），若前一个定时任务还未执行完，则清除掉定时任务，重新定时。这样当屏幕大小在100毫秒之内没有再次变化时才会对Echarts进行resize()，当然时间段可以根据自身需要设置长一点。