轉載：https://blog.csdn.net/izengjing/article/details/83539426

問題描述

關於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()
})