标题图
解决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
随时随地看视频
