vue中tab页签切换导致echarts被压缩的问题

  • Post author:
  • Post category:vue




问题描述

vue中使用tab进行页签切换,echarts图表的宽度设为100%的情况下,图表出现压缩变形的情况。




解决方案:


1. 设置静态的宽度

使用vm单位来设置宽度

vm与“%”的区别:

两个效果大致相同。

  • ‘%’:对于父元素
  • ‘vm’:对于浏览器


2. v-if

利用v-if值切换来重绘图形页面。

	<van-tabs
          v-model="active"
          title-active-color="#303135"
          title-inactive-color="#8d8e90"    
        >
          <van-tab title="国资口径" name="state">
            <Artificial v-if="active == 'state' "/>
          </van-tab>
          <van-tab title="管理口径" name="management">
            <Artificial v-if="active == 'management'" />
          </van-tab>
        </van-tabs>



版权声明:本文为weixin_48474646原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。