elementUI tabs切換 echarts寬度擠壓到一起 由100%變成100px

1.需求：點擊tab切換echarts

2.所用技術：引的vue.js elementUI 切換用的是elementUI中的Tabs標簽頁

3.遇到了幾個問題：

　　1》報錯：[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

　　2》點擊切換 tabs,導致echarts寬擠到一起,只有100px

　　3》點擊切換tabs,改變（放大或縮小）頁面大小,再切換tabs,導致echarts的寬擠到一起 只有100px,再改變頁面大小，echarts圖表恢復正常

5.查看源碼 原因如下

Painter.prototype._getWidth = function() {
        var root = this.root;
        var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
        return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
    };

echarts繪制圖表計算寬度的時候，由於第二個tab的屬性display: none; 所以無法獲取到clientWidth，而 parseInt(stl.width, 10)) 將width: 100%;轉為100，所以計算出的圖表寬度為100px。

6.網上查了好多資料解決辦法：

6-1：第一個報錯的問題是：

 出現該錯誤的原因是：Echarts的圖形容器還未生成就對其進行了初始化所造成的  解決方法如下：

//echarts容器 添加ref
<div id="bar_dv" ref="chart">

　// 基於准備好的dom 初始化echarts實例，(把第一行代碼修改成第二行)
　var bar_dv = document.getElementById('bar_dv');

　var bar_dv = this.$refs.chart;

　let myChart = this.$echarts.init(bar_dv):

 6-2：

1> 通過elementui 自帶的 lazy/:lazy=true （本項目添加后無效）

<el-tab-pane label="用戶" name="user" lazy>用戶</el-tab-pane>

  2> 通過添加 mychart.resize() 重置容器大小（本項目添加后無效）

let _this = this;
window.addEventListener("resize", function () {
    _this.siteLine.resize();
}); 

  3> 通過添加 setTimeout  （本項目添加后無效）

setTimeout(() => {
　　let weekVisitData = this.$echarts.init(this.$refs.weekVisit);
　　weekVisitData.setOption(this.opt)
},0)

  4> js中通過父元素的寬度預先給容器賦寬度，在window的resize里先修改dom的width 然后再調用echart的resize

$("#chartMain").css('width',$("#TabContent").width());

　　經過修改發現可以自適應，但是resize這個方法和獲取div寬度的方法不能一起使用，導致隱藏的div還是沒有寬度。瀏覽器縮小再放大 隱藏的div就無法自適應了。

　　又出現了新的問題，尷尬···

 

 5> 通過v-if控制  (修改后可湊合解決)

　   參考網上其他的解決方案，自己又做了下修改 添加了點東西,解決方法如下：

　　(這邊不清楚的需要看下elementUI文檔 --Tabs標簽頁理解）

html:
<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用戶管理" name="first">
      // echarts圖表標簽
　　　　<div v-if='activeName === "first"'> 　　
　　　　　　<div id='echartsDemo'></div>
　　　　</div>
 　　</el-tab-pane>

 <el-tab-pane label="配置管理" name="second">
　　　　<div v-if='activeName === "second"'> 
　　　　　　<div id='echartsDemo'></div>
　　　　</div>
　　</el-tab-pane>　

　　<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>

</el-tabs>

data:activeName:'first',

　mounted() { //如果默認顯示第一頁，要記得初始化第一頁echarts的方法

  　　 this.$nextTick(function() {
       　　this.echartsLine()
　　　　})
  },

js methods{}:
handleClick(tab, event) {
                    if(tab.index == 1){
                        this.$nextTick(function() {
                             this.echartsMap()//通過axios拿到的后台數據填充的echarts圖表方法
                        })
                    }else{
                        this.$nextTick(function() {                                            
                             this.echartsLine()   
                        })
                    }
                 },

如果按網上其他答案，只做v-if判斷，不走js點擊方法的話，項目點擊切換后就會報錯：(這個我沒注意查看是什么原因導致的)

echarts.min.js:22 Uncaught (in promise) TypeError: Cannot read property 'getAttribute' of undefined
    at echarts.min.js:22
    at Kd (echarts.min.js:22)
    at Object.t.init (echarts.min.js:22)
    at Object.s.a.init (echarts-gl.min.js:1)
    at main.html:540

7.現在就可以解決我上面的寫的后兩個問題了，當然還得根據自己的項目情況找到最適合的方法

8.也有其他文章寫到的解決方法，如果適合也可以參考一下

 

9. 自己遇到的問題 僅在這里做下記錄，歡迎大家參考交流哈

參考鏈接：　　

https://blog.csdn.net/izengjing/article/details/83539426　

https://blog.csdn.net/zhangshab/article/details/81364943