vue--echart图表自适应父级div

问题描述:

在做vue项目中,使用echart后,后台系统左侧菜单在默认的情况下是有几百的宽度,在点击缩小菜单后宽度会变小, 缩小后右侧视图中的echart图表并没有自适应,还是显示原来的尺寸

解决方案:

父组件

<template>
	<div class="homeview">
        <indexChart ref="homechart" ></indexChart>
    </div>
</template>
 -------
 export default {
    name:'Index',
    components:{
        "indexChart": () => import('./indexchart.vue'),
    },
     watch: {
            //监听是否有展开面包屑导航
             "$store.state.common.isCollapse" () {
                if(this.$refs['homechart'].myChart){
                    setTimeout(() => {
                        this.$refs['homechart'] && this.$refs['homechart'].chartResize();
                    },0)
                }
            },
        },
}

 style
 .homeview{
    width: 100%;
    height: 100%;
	}

子组件

<template>
      <div id="moundNode" class="linechart"></div>
</template>


export default {
	name:'homechart',
	data:(){
		return {
			myChart:null;
		}
	},
	 mounted(){
	 //	里面就不展开了,这个就是初始化echart图标里面就有对myChart的赋值
            this.initChart()
        },
	method:{
		  chartResize(){
                this.myChart && this.myChart.resize();
            },
	}
}

这个方法主要是通过ref获取到子组件的vue实例然后获取到子组件的chartResize方法,由于点击面包屑菜单的变量放到了vuex的state中,所以就通过watch监听到store中的数据,然后在利用settimeout就可以了, 至于为什么用settimeout不用nextTick麻烦各位去自己了解.

成功解决