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

// myCharts.vue
 <template>
 <div class="charts-ps" 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-ps{
 width: 100%;
 height: 100%;
 }
</style>

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

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

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

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

this.$nextTick(_ => {  
   
});

window.addEventListener("resize", function() {        
 myChart.resize();      
});