dorm-manager/dorm-manager-wx/pages/teacher/statistics/statistics.js

const wxCharts = require('../../../utils/wxcharts.js');
const util = require('../../../utils/util.js');
const api = require('../../../utils/api.js');
const app = getApp()
let ringChart = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    totalInfo: '',
    startDate: '2019-10-29',
    endDate: '2019-10-29',
    scopeIndex: 0,
    scopeArray: ['全部人员'],
    weiguiList: []
  },

  bindStartDateChange: function(e) {
    this.setData({
      startDate: e.detail.value
    })
  },

  bindendDateChange: function(e) {
    this.setData({
      endDate: e.detail.value
    })
  },

  bindScopeChange: function(e) {
    this.setData({
      scopeIndex: e.detail.value
    })
  },

  getChart: function(e) {
    const that = this;
    ringChart = new wxCharts({
      animation: true,
      canvasId: 'ringCanvas',
      type: 'ring',
      extra: {
        ringWidth: 10,
        pie: {
          offsetAngle: -40
        }
      },
      title: {
        name: '归勤率',
        color: '#333',
        fontSize: 15
      },
      subtitle: {
        name: that.data.totalInfo.attendance * 100 + '%',
        color: '#6282f4',
        fontSize: 18
      },
      series: [{
        name: '归勤',
        data: that.data.totalInfo.attendance * 100,
        stroke: false,
        color: '#6282f4'
      }, {
        name: '缺勤',
        data: 100 - that.data.totalInfo.attendance * 100,
        stroke: false,
        color: '#ed5c68'
      }],
      disablePieStroke: true,
      width: 160,
      height: 160,
      dataLabel: false,
      legend: false,
      background: '#fff',
      padding: 0
    });
    ringChart.addEventListener('renderComplete', () => {
      console.log('renderComplete');
    });
    setTimeout(() => {
      ringChart.stopAnimation();
    }, 500);
  },

  touchHandler: function(e) {
    console.log(ringChart.getCurrentDataIndex(e));
  },

  getStatisticsInfo: function(e) {
    const that = this;
    util.httpRequest(api.getStatisticsInfo, {
      start: that.data.startDate,
      end: that.data.endDate
    }, 'post').then(res => {
      that.setData({
        totalInfo: res.data.data
      })
      that.getChart();
    })
  },

  getUnInInfo: function(e) {
    const that = this;
    util.httpRequest(api.getUnInfo, {
      start: that.data.startDate,
      end: that.data.endDate,
      page: 1,
      rows: 20
    }, 'post').then(res => {

    })
  },

  getOutAndInInfo: function(e) {
    const that = this;
    util.httpRequest(api.getOutAndInInfo, {
      startDate: that.data.startDate,
      endDate: that.data.endDate,
      page: 1,
      rows: 20
    }, 'post').then(res => {
      that.setData({
        weiguiList: res.data.data.data
      })
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    const that = this;
    that.getStatisticsInfo();
    that.getUnInInfo();
    that.getOutAndInInfo();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  }
})