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