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