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