解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时，图表显示错乱-实现滑动tab...-白红宇

解决Echarts在微信小程序tab切换时的显示会出现位置移动问题

tab切换时，图表显示错乱


    复制代码

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

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后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注

小礼物走一走 or 点赞