vue实现多个echarts根据屏幕大小变化而变化

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

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

// myCharts.vue
 

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

// index.vue

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()，当然时间段可以根据自身需要设置长一点。