处理微信小程序的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 chartnew 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      })    }  },})

往后余生，唯独有你
简书作者：达叔小生
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： https://www.songma.com/u/c785ece603d1

结语

• 下面我将继续对 其余知识 深入讲解 ，有兴趣可以继续关注
• 小礼物走一走 or 点赞

上一篇 目录 已是最后