【踩坑+实践】elementui 中关于tab标签echart width100%显示不完全的问题

问题描述

关于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()
})