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

 问题：

跳转到别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

      近7天洗涤费趋势
      
        
      
    

//..
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)
    },
}