vue 对echart 切换时，容器宽度不是100%

1.这是因为切换时dom没有重绘导致的，v-show 有这个问题，v-if 没有此类问题
如果使用v-show 切换echart视图，要每次切换时，手动获取父元素宽度，重新赋值给echart容器
定义：

//定义变量inintWidth ，mounted里面执行  this.inintWidth = document.getElementById('echart容器id').offsetWidth 

draw(){
　　//省略了

　　echart.setoption()

　　//这里
　　

　　　　var widthResize = {

                width: this.initWidth,

                height:400,

              };

              overchart2Div.resize(widthResize )

　　　　

　　　　//以上保证切换时echart容器100%撑满　

　　　　//因为你手动设置了容器宽度，导致你的监听失效，所以监听里也要手动设置一次，保证窗口变化时 echart自适应

　　　　var _this = this;

              window.addEventListener("resize",function (){

                var _width = document.getElementById('你的容器id').offsetWidth

                var obj = {

                  width:_width,

                };

                overchart2Div.resize(obj);

                

              });

}

 

如果你用v-if切换，v-if主动重绘，不存在这个问题，但是要注意，切换时要将你的drawEchart()写在 this.$nextclick()里面，避免echart报 of null