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

约定不等于承诺〃 2022-09-02 11:59 272阅读 0赞

## **问题描述:** ##

在做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麻烦各位去自己了解.

成功解决