技术标签： echars 前端 vue element javascript
网上搜的乱七八糟的onsize什么的没看懂，用的简单粗暴地方法，如有问题请指正~
一共分两步：
let _width = document.getElementById("tab_box").offsetWidth;
let lineChars = document.getElementById("line_chars");
lineChars.style.width = _width + "px";
let myChart = document.getElementById("tab_box");
handleClick(tab, event) {
if (tab.index == 1) {
this.$nextTick(this.drawLineChars());
}
},
如有问题，请联系我~
问题描述 在echats图表使用tabs选项卡切换时，只有第一个图表宽度显示正常，echats图表宽度设置的100%，但是第二个，第三个。。。都图表宽度都只显示100px宽度，所有的东西都压缩显示在一小块，显示不完整。 原因：由于v-show只是设置了元素的display属性为none，在切换的时候没有获取到元素的宽高所有会有问题，echats图表在初始化数据的时候，元素被隐藏了，获取不到宽高。 ...
$("#main_start").css('width',$("#main").width()); //#main为第一个页面的div宽度 var myChart = echarts.init(document.getElementById('main_start'));...
echarts页面一加载是隐藏状态，点击nav切换的时候显示出来，造成宽度为100px。解决办法：先给ehcarts赋值高宽，再隐藏。 刚开始我是直接判断navIndex的值来切换两种数据。后来发现容易造成echarts图表宽度为100px变形了。 解决办法如下：...
在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。 因为echarts会根据父级给宽度，而在初始化页面的时候其他t...
...
重点是组件的引用和组件：is方法，点击组件跟随变动...
tab切换 ...
HTML部分： CSS部分： JS部分：...
1.tab标签 2.内容 3.data 4.如果我们想切换tab的时候请求些事件可以这样些...
1.可以用element里面的Tabs 组件点这里 2，我们自己可以写一个 如果有多个页面用到tab可以把头部的那个封装成组件 用法：引用tabs这个组件，把切换标题放到数组传给子组件。然后接收子组件切时换传递给父组件的内容就行了 ...