解決微信小程序的wx-charts插件tab切換時的顯示會出現位置移動問題-tab切換時，圖表顯示錯亂-實現滑動tab

解決Echarts在微信小程序tab切換時的顯示會出現位置移動問題

tab切換時，圖表顯示錯亂

<canvas class="kcanvas" canvas-id="ringCanvas" hidden="{{currentTab == 1}}"></canvas>

<view hidden="{{currentTab !== 1}}" id="one" class="currentPage">
 <view class="containerSales" wx: if="{{currentTab === 1}}">
 <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ecSales}}"></ec-canvas>
 </view>
</view>

ring chart

new wxCharts({
 canvasId: 'ringCanvas',
 type: 'ring',
 series: [{
  name: '成交量1',
  data: 15,
 }, {
  name: '成交量2',
  data: 35,
 }, {
  name: '成交量3',
  data: 78,
 }, {
  name: '成交量4',
  data: 63,
 }],
 width: 320,
 height: 200,
 dataLabel: false
});

js當中使用require引入即可：

let Charts = require('./../../utils/wxcharts.js');

一般以iPhone6為標准進行設計

/* 例如設計圖尺寸為320 x 300 */
.canvas {
    width: 640px;
    height: 600px;
    transform: scale(0.5)
}

new Charts({
      animation: true,
      canvasId: 'canvas5',
      type: 'ring',
      extra: {
        ringWidth: 10,//圓環的寬度
        pie: {
          offsetAngle: -45//圓環的角度
        }
      },
      title: {
        name: '70%',
        color: '#7cb5ec',
        fontSize: 25
      },
      subtitle: {
        name: '收益率',
        color: '#666666',
        fontSize: 15
      },
      series: [{
        name: '成交量1',
        data: 15,
        stroke: false
      }, {
        name: '成交量2',
        data: 35,
        stroke: false
      }, {
        name: '成交量3',
        data: 78,
        stroke: false
      }, {
        name: '成交量4',
        data: 63,
        stroke: false
      }],
      disablePieStroke: true,
      width: 640,
      height: 200,
      dataLabel: true,
      legend: false,
      padding: 0
    });

/* 環形 */

.canvas {
  z-index: 1;
  position: absolute;
  left: 32px;
  top: 60px;
  height: 350rpx;
}

new wxCharts({
          canvasId: 'ringCanvas',
          type: 'ring',
          legend: false,
          extra: {
            ringWidth: 15, //圓環的寬度
            pie: {
              offsetAngle: -45 //圓環的角度
            }
          },
          series: [{
            data: res.data.data.normalNum,
          }, {
            data: res.data.data.beLateNum,
          }, {
            data: res.data.data.leaveNum,
          }, {
            data: res.data.data.uncheckedNum,
          }],
          width: 320,
          height: 200,
          dataLabel: false
        });

switchNav: function(event) {
    var cur = event.currentTarget.dataset.current;
    if (this.data.currentTab == cur) { return false; }
    else {
      this.setData({
        currentTab: cur
      })
    }
 
    if(cur==1){
      this.setData({
        init_datas: nz_data,
        currentTab1: 1
      })
      var tmp_datas = this.data.init_datas;
      console.dir(tmp_datas);
      this.setData({
        nz_datas: tmp_datas,
        class:1
      })
    }
    if(cur==2){
      this.setData({
        init_datas1: man_data,
        currentTab1: 1
      })
      var tmp_datas = this.data.init_datas1;
      console.dir(tmp_datas);
      this.setData({
        nz_datas: tmp_datas,
        class:2
      })
    }
  },
 
  switchNav1: function (event) {
    var cur = event.currentTarget.dataset.curr;
    console.log("switchNav1_curr="+cur);
    console.log("class=" + this.data.class);
    if (this.data.currentTab1 == cur) { return false; }
    else {
      this.setData({
        currentTab1: cur
      })
    }
 
    if(cur==1){
      if(this.data.class==1){
        var tmp_datas = this.data.init_datas;
        this.setData({
          nz_datas: tmp_datas
        })
      }
      if (this.data.class == 2) {
        var tmp_datas = this.data.init_datas1;
        this.setData({
          nz_datas: tmp_datas
        })
      }
    }

實現滑動tab

<view>
  <view class="swiper-tab">
    <view class="swiper-tab-list {{tab==0 ? 'on' : ''}}" data-current="0" bindtap="tab_click">圖文</view>
    <view class="swiper-tab-list {{tab==1 ? 'on' : ''}}" data-current="1" bindtap="tab_click">產品</view>
  </view>
  <swiper current="{{tab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="tab_slide">
    <swiper-item>
      圖文
    </swiper-item>
 
    <swiper-item>
      產品
    </swiper-item>
  </swiper>
</view>

Page({
  data: {
    tab: 0
  },
  tab_slide: function (e) {//滑動切換tab 
    var that = this;
    that.setData({ tab: e.detail.current });
  },
  tab_click: function (e) {//點擊tab切換
    var that = this;
    if (that.data.tab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        tab: e.target.dataset.current
      })
    }
  },
})