小程序 echarts使用tabbar进行显示隐藏以及样式设置

• tabbar对echarts的显示与隐藏

因为近期遇到需求需要对多图的canvas进行tabbar切换，查找了很久方法，大多都是建议对canvas中的样式style=‘left：10000px’设置去解决，但是好像没有效果，就自己琢磨用wx:if去进行判断，最后成功了，比较笨拙需要绕了一下。

下面说一下方法需要对canvas原生组件进行tabbar进行显示与隐藏功能时，可以对canvas的父级控件view绑定wx:if={{show}}
根据tabbar的值进行判断show是为true或是为false

wxml：

<view class="tab">
  <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="click" >aaa</view>
  <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="click">bbb</view>
  <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="click">ccc</view>
</view>

<view wx:if="{{show0}}" >
  <view class="card-day" >
    <view class="container-pie">
      <ec-canvas id="container-pie-bar" canvas-id="container-pie-bar" ec="{{ ecbar0 }}"></ec-canvas>
    </view>
  </view>
</view>

<view wx:if="{{show1}}">
  <view class="card-day">
    <view class="container-pie">
      <ec-canvas id="container-pie-bar" canvas-id="container-pie-bar" ec="{{ ecbar1 }}" ></ec-canvas>
    </view>
  </view>
</view>

<view wx:if="{{show2}}">
  <view class="card-day">
    <view class="container-pie">
      <ec-canvas id="container-pie-bar" canvas-id="container-pie-bar" ec="{{ ecbar2 }}"></ec-canvas>
    </view>
  </view>
</view>

wxss：

page{
  background-color: #f6f6f6;
}
.card-day{
  border-radius: 2%;
  background-color: #ffffff;
   }
.card-mouth{
  border-radius: 2%;
  background-color: #ffffff;
}
.container-pie {
  width: 100%;
  min-height: 180px;
  /* background-color:  */
}
#container-pie-bar {
  width: 90%;
  height: 250px;
  margin: -0px 5%;
  display: flex;
}
.tab{
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    text-align: center;
    color: #f6f6f6;
    font-size: 16px;
}
.tab-item{
    width: 30%; 
    color:#323132;
}
.active{
  color:#F65959;
  font-size: 16px;
}

js:

  data: {
    currentTab: '',
    show0:true,
    show1:false,
    show2:false,
  },

......
click: function (e) {
    let that = this;  
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,
      })
    }
    if(that.data.currentTab == 0){
      that.setData({
        show0:true,
        show1:false,
        show2:false
      })
    }
    if (that.data.currentTab == 1) {
      that.setData({
        show0: false,
        show1: true,
         show2: false
      })
    }
    if (that.data.currentTab == 2) {
      that.setData({
        show0: false,
        show1: false,
         show2: true
      })
    }
  },

成果图：点击上方可进行相应切换

• 接下来是样式设置

使用echarts的柱状图或者线状图是，如果需要对上方标注文字进行样式设置，需要在legend中修改

legend: {
      textStyle: {
        color: '#ffffff',	//设置颜色
      }
    },

而需要对横坐标和纵坐标进行样式修改，则需要在xAxis以及yAxis添加axisLine进行设置

 xAxis: [{
      axisLine: {
        lineStyle: {
          color: '#ffffff',
          width: 1
        }
      }
    }],
    yAxis: [{
      axisLine: {
        lineStyle: {
          color: '#ffffff',
          width: 1
        }
      },

效果如图：