解决微信小程序的wx-charts插件tab切

标题图

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

var dateTimePicker = require('../../utils/dateTimePicker.js');var wxCharts = require('../../utils/wxcharts.js');var util = require('../../utils/util.js');var app = getApp();

Page({  /**
   * 页面的初始数据
   */
  data: {    selected: true,    selected1: false,    date: '',    date1: '',    startYear: 2008,    endYear: 2222,    // 日期数据
    datas: [],    // 月数据
    attendDays: '',    lateTimes: '',    leaveEarlyTimes: '',    unusualTimes: '',    zao: '',    chi: '',    qifen: '',    items: [{      name: 'morning',      value: '上午',      checked: 'true'
    }, {      name: 'moom',      value: '下午'
    }, ]
  },  zaodao: function() {    var that = this;    var time = that.data.date.substring(0, 10);
    wx.navigateTo({      url: '../zaodao/zaodao?id=' + time,
    })
  },  chidao: function() {    var that = this;    var ytime = that.data.date1.substring(0, 7);
    wx.navigateTo({      url: '../chidao/chidao?id=' + ytime,
    })
  },  qifen: function() {    var that = this;    var ytime = that.data.date1.substring(0, 7);
    wx.navigateTo({      url: '../qifen/qifen?id=' + ytime,
    })
  },  // 单选按钮
  radioChange: function(e) {    var that = this;    console.log("radio", e.detail.value);    var time = that.data.date.substring(0, 10);    if (e.detail.value == "morning") {      // 发送用户请求
      wx.request({        method: 'GET',        header: {          'Authorization': 'Bearer' + wx.getStorageSync('token')
        },
        success(res) {          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
          });          console.log("考勤上午按钮", res.data.data);
          that.setData({            datas: res.data.data,
          })
          wx.showToast({            title: '加载成功',            icon: 'loading',            duration: 500
          })
        }
      })
    } else {      // 发送用户请求
      wx.request({        method: 'GET',        header: {          'Authorization': 'Bearer' + wx.getStorageSync('token')
        },
        success(res) {          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
          });          console.log("考勤下午按钮", res.data.data);
          that.setData({            datas: res.data.data,
          })
          wx.showToast({            title: '加载成功',            icon: 'loading',            duration: 500
          })
        }
      })
    }
  },  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {    var that = this;    console.log("kq,username", wx.getStorageSync("username"));    // 获取当天时间
    var time = util.formatTime(new Date());
    that.setData({      date: time,      date1: time,      username: wx.getStorageSync("username"),
    });    // 获取完整的年月日 时分秒，以及默认显示的数组
    var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);    var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);    // 精确到分的处理，将数组的秒去掉
    var lastArray = obj1.dateTimeArray.pop();    var lastTime = obj1.dateTime.pop();
  },  // 改变日期
  changeDate(e) {    // 全局
    var that = this;
    that.setData({      date: e.detail.value
    });    var date = e.detail.value;    // 发送用户请求
    wx.request({      method: 'GET',      header: {        'Authorization': 'Bearer' + wx.getStorageSync('token')
      },
      success(res) {        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
        });        console.log("选择日期数据", res.data.data);
        that.setData({          datas: res.data.data,
        })
        wx.showToast({          title: '加载成功',          icon: 'loading',          duration: 500
        })
      }
    })
  },  // 改变月份
  changeDate1(e) {    // 全局
    var that = this;
    that.setData({      date1: e.detail.value, //数据源
    })    var date1 = e.detail.value;    // 发送用户请求
    wx.request({      method: 'GET',      header: {        'Authorization': 'Bearer' + wx.getStorageSync('token')
      },
      success(res) {        console.log("家长的月考勤", res.data)        if (res.data.code == 1) {
          that.setData({            attendDays: 0,            lateTimes: 0,            leaveEarlyTimes: 0,            unusualTimes: 0,
          })
          wx.showModal({            title: '提示',            content: '当天没有数据',            // showCancel: false,
            success: function(res) {              if (res.confirm) {                console.log('用户点击确定');
                wx.navigateBack({                  delta: 1 //小程序关闭当前页面返回上一页面
                })
              } else if (res.cancel) {                console.log('用户点击取消');
              }
            }
          })
        } else {
          that.setData({            attendDays: res.data.data.attendDays,            lateTimes: res.data.data.lateTimes,            leaveEarlyTimes: res.data.data.leaveEarlyTimes,            unusualTimes: res.data.data.unusualTimes,
          })
          wx.showToast({            title: '加载成功',            icon: 'loading',            duration: 500
          })
        }
      }
    })

作者：达叔小生
链接：https://www.jianshu.com/p/dd9d7f7e0a3e