问题描述
关于elementui 中tab标签echart显示不完全的问题,
在通过tab显示echart的时候,容器宽度width: 100%,但是echart显示不完全,通过开发者工具查看网页属性,容器宽度是100%,echart自己添加的容器宽度也是100%,但是canvas标签的宽度就只有100px了。
网上查阅了很多解决办法:
有人说,通过elementui 自带的lazy,我试过了,但是不起作用
有人说,通过添加mychart.resize()重置容器大小,我试过了,不起作用
有人说,js中通过父元素的宽度重新给容器赋宽度,这狗xx的答案出现不止一次,全是一样的,有点逻辑好么?容器的宽度是我赋值的,明明可以通过css赋值,你还通过js,麻烦不说,问题是,最后也没有解决问题啊,echart还是只显示100px。这些抄袭答案的人,都不上点心,好歹你实际测一下啊!!!
最后,有一篇文章提到: echartjs执行太快,css的100%还没来得及反应,js就已经执行完了,所以把100%转成100px。
虽然这篇文章的方案也没有解决我的问题,但是,我想,既然是js执行太快,那我就让它慢一点。于是,添加了一个setTimeout()函数,把echart的初始化和绘图方法都放在里面,通过这个函数,延迟echart的执行,终于,这个问题得到解决了
setTimeout(() => {
let weekVisitData = this.$echarts.init(this.$refs.weekVisit);
weekVisitData.setOption(this.opt)
},0)
关于添加resize这个方法的补充
通过看echarts官网的例子,发现resize不是直接使用,而是放在setTimeout函数里面使用,思路大概更我直接添加setTimeout类似;
官网文档: resize改变图表尺寸,在容器大小发生改变时需要手动调用,官网文档点击此处
官网例子:点击此处 (resize出现在代码的399行)
let allVisitData = this.$echarts.init(this.$refs.allVisit);
allVisitData.setOption(this.opt);
setTimeout( () => {
allVisitData.resize()
})