vue中在tabs选项卡切换时echarts图表宽度由100%变为100px

缺乏、安全感 2022-12-20 02:58 276阅读 0赞

使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px
问题原因：echarts 渲染时 tab 选项卡 的 display 属性为 none，所以 width 属性为 100% 就没有可继承项，被 echarts 自带的方法切割成 100px
解决办法：使用 this.$nextTick

  1. <ul class="tabbar">
  2.    <li><a href="javascript:void(0);" :class="{selected: key == activeTab}" v-for="(item, key) in childrentabs" @click="changeChildTab(key)" :key="key">{ { item.name}}</a></li>
  3. </ul>
  4. <div class="tab-contain" v-show="activeTab == 'first'">
  5.     <div ref="line" style="width:100%;height:100%;"></div>
  6. </div>
  7. <div class="tab-contain" v-show="activeTab == 'second'">
  8.     <div ref="pie" style="width:100%;height:100%;"></div>
  9. </div>
  11. methods: { 
  12.     changeChildTab(key) { 
  13.       this.activeTab = key
  14.       if (key === 'first') { 
  15.         this.$nextTick(() => { 
  16.           this.drawLine()
  17.         })
  18.       } else { 
  19.         this.$nextTick(() => { 
  20.           this.drawPie()
  21.         })
  22.       }
  23.     },
  24.  }

发表评论

表情：
评论列表 （有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读