vue echarts中宽高自适应 And tab切换影响图表的宽度

一 echarts中宽高自适应

最近在做关于图表的项目(移动端),避免不了手机屏幕的宽高不一致 而eharts 中宽高在div style 上设置(最开始使用的是固定ipone6/7/8) 固定设置的宽高 为 342 和200 但是当我切换别的（譬如ipone6/7/8 plus）的时 要比6/7/8 宽 这是就可看出来并不是自适应的
这是 需要修改 div上的宽要改成10%

 <div id="mouseRate" style="width: 100%;height:200px;"></div>

其次在
mounted添加

 window.onresize = () => {
 				//单个和多个可以如此添加 注：如果是tab的话则这样添加无效 main、mainOn、maintWe 则是tab切换元素 
				// this.$echarts.init(document.getElementById('main')).resize();
				// this.$echarts.init(document.getElementById('mainyOn')).resize();
				// this.$echarts.init(document.getElementById('maintWe')).resize();
				this.$echarts.init(document.getElementById('mouseRate')).resize();
				this.$echarts.init(document.getElementById('dataSubmitted')).resize();
			}

二、tab切换影响图表的宽度

上代码则是无效的

能看到当页面刷新默认是 ytd 则是ok 的 但是一旦切换就宽度就变了

 这时 我们就要在tab切换的方法里添加 (查看结构 意思一样实现了就好)

<div class="groupData">
				<div class="groupOption">
					<span :class="{active : activeName == 'first'}" @click="switchTab('first')">今日</span>
					<span :class="{active : activeName == 'second'}" @click="switchTab('second')">本月</span>
					<span :class="{active : activeName == 'third'}" @click="switchTab('third')">YTD</span>
				</div>
			</div>
			<div id="main" style="width: 100%;height:170px;" v-show="activeName === 'first'"></div>

			<div id="mainyOn" style="width: 100%;height:170px;" v-show="activeName === 'second'"></div>

			<div id="maintWe" style="width: 100%;height:170px;" v-show="activeName === 'third'" ></div>

if (tab === 'first') {
					this.$nextTick(() => {
						this.$echarts.init(document.getElementById('main')).resize();
						
					})
				}else if(tab === 'second'){
					this.$nextTick(() => {
						this.$echarts.init(document.getElementById('mainyOn')).resize();
					})
				}else if(tab === 'third'){
					this.$nextTick(() => {
						this.$echarts.init(document.getElementById('maintWe')).resize();
					})
				}

这种方法比较笨但是是我感觉好实现的。