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
上一篇:echarts 随屏幕大小改变大小(resize)


下一篇:echarts 随屏幕大小改变大小(resize)