数据可视化的时候用到echarts，要想生成图表能够根据大小自适应，就要用到echarts自己的resize方法。chartDemo是echarts实例，this.$refs.chartContainerParent是echarts元素父级元素。
1、页面大小变化（window.onresize）
window.onresize=() => {
if (chartDemo) chartDemo.resize();
}
2、上面的写法遇到有左导航栏的，导航栏打开关闭切换就歇菜了。这时候就会用到resize-detector这个插件去监听echarts实例元素的父级元素。resize-detector是个npm插件，地址：https://www.npmjs.com/package/resize-detector。用法上地址有，但还是要写一下我在vue里的使用😀。
<div class="body" ref="chartContainerParent">
<div ref="chartCantainer" style="width: 100%;height:238px;"></div>
</div>
mounted() {//上来就给他监听上，看他还不自适应呢
addListener(this.$refs.chartContainerParent, this.resize);
},
beforeDestroy() { //一定要在这个生命周期销毁，不然在销毁时找不到元素报错，不信你试试🤨
removeListener(this.$refs.chartContainerParent, this.resize);
if (this.chart.dispose) this.chart.dispose();
},
methods: {
resize() {
if (this.chart.resize) this.chart.resize();
}
}
网上很多都是window.onresize，所以就把第二种写出来了，希望对大家能有帮助，有用就点个赞么，靓仔靓女🤣。
