Echarts視配大小中屏

在項目中的兩個需求是輪播圖中需要出現不同的echart圖表且要視配大小中屏，出現警告框時左邊的echart圖表要跟著變小，警告框消失時，需要將echart圖表相應變大
此時，我的項目中，echart圖表都是寫在子組件，
在子組件中，我寫的echart图表视屏相应如下
mounted() {
this.DataProcess();
window.addEventListener(‘resize’, () => {
this.$echarts.init(this.$refs.myChart).resize();
});
},
activated() {
window.addEventListener(‘resize’, () => {
this.$echarts.init(this.$refs.myChart).resize();
});
},
beforeDestroy() {
window.removeEventListener(‘resize’, () => {
this.$echarts.init(this.$refs.myChart).resize();
});
this.$echarts.dispose(this.$refs.myChart);
},
在父组件中的屏幕大小改变时，并没有触发子组件中的echart图表宽度大小的改变。
我想的就是通过.style来操控echart图表宽度大小，但是都没有用，
最后还是看到了原先的代码this.$echarts.dispose(this.$refs.myChart);
发现父组件发生改变时，并没有触发该函数的调用。
在父组件出现警告框的同时，写一个标识告诉子组件父组件触发了，子组件再监听该标识
如下，则触发了该函数，响应父组件而改变echart图表宽度大小。
watch: {
show1(newVal,oldVal){
console.log(‘值’,newVal);
this.$echarts.init(this.$refs.myChart).resize();
}
},
相对应的是，轮播图也是如此，监听父元素的屏幕大小改变，但是该监听更加频繁。
用ElementUI可以很好的解决该轮播，但是样式却发生了些许改变。
于是我用原生js写轮播，(三个图表要显示在一个盒子里，一个一个的轮播，考虑子元素少于三个和大于三个)，例如:

用该样式写，相同div为祖先元素，ul的长度要无限长，li则为子元素的数量，循环li得到轮播表(消除ul，li的默认样式)样式如下1 .echart-container { //div width: 100%; height: 220px; overflow: hidden; .content-wrapper{ //ul width: 20000px; height: 220px; left: 0; position: relative; transition: left 0.5s ease 0s; } .echart-item{ //li position: relative; float: left; width: var(--UlWidth); //和div中的style相结合 // width: 32%; //var(--UlWidth) height: 100%; .echar-wrapper { width: var(--UlWidth); height: calc(100% - 42px); margin-bottom: 6px; } img{ position:absolute; left:0; right:0; margin:auto; } } } template如下