uni-app H5使用 tabbars切换,echartst图表变小 宽度只有100px问题解决_uniapp u-tab切换影响宽度

 问题：

跳转到别tabbars页面之后，再回来，echarts图显示缩小小团子。

原因分析：

在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。
这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。
因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是display：none；没有宽度，所以会发生以上问题。

解决：

tabbars跳转后，将echarts删除，跳转回来之后，再重新绘制。使用v-if解决

 增加： v-if="chart"

 tabbars点击事件：onTabItemTap，点击回来时，将chart:true，

页面离开时，onHide: 将chart=false

<view class="seven">
      <view class="chart-title">近7天洗涤费趋势</view>
      <view class="charts-box" v-if="chart">
        <qiun-data-charts
            type="column"
            :eopts="eopts"
            :chartData="chartData"
            :echartsH5="true"
            :resize="echartsResize"
            padding="0"
            margin="0"/>
      </view>
    </view>
 
//..
data(){
return {
 chart: false,
}
}
 
  onHide() {
    console.log(">>页面不见了")
    this.chart = false;
  },
  onShow() {
    console.log(">>>2. onShow，tabs每次跳转触发 ")
    this.chart = true
  },
 
  methods: {
    onTabItemTap(item) {
      console.log(">>|------------点击事件", item)
    },
}