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

var wxCharts = require('../../../utils/wxcharts.js');
var data = require('../../../utils/util.js');
const api = require('../../../utils/api.js');
var ringChart = null;
Page({
  data: {
  }, 
  bindDateChange(e) {
    this.setData({
      startdata: e.detail.value
    })
  },
  bindendDateChange(){
    this.setData({
      enddata: e.detail.value
    })
  },
  touchHandler: function (e) {
    console.log(ringChart.getCurrentDataIndex(e));
  },
  onLoad(options){
    let that=this
    wx.request({
      url: api.selfInfo,
      data: { 
        loginId: wx.getStorageSync('loginId'), 
        start: data.getDateStr(data.formatDate(), -30),
        end: data.formatDate()
      },
      success(res) {
        console.log(res)
      }
    })
  },
  onReady: function (e) {
    this.setData({
      enddata:data.formatDate(),
      startdata: data.getDateStr(data.formatDate(),-30)
    })
    var windowWidth = 320;
    try {
      var res = wx.getSystemInfoSync();
      windowWidth = res.windowWidth;
    } catch (e) {
      console.error('getSystemInfoSync failed!');
    }

    ringChart = new wxCharts({
      animation: true,
      canvasId: 'ringCanvas',
      type: 'ring',
      extra: {
        ringWidth: 25,
        pie: {
          offsetAngle: -45
        }
      },
      title: {
        name: '汇总',
        color: '#333',
        fontSize: 18
      },
      subtitle: {
        name: '',
        color: '#6282f4',
        fontSize: 15
      },
      series: [{
        name: '正常进入',
        data: 15,
        stroke: false,
        color:'#6282f4'
      }, {
        name: '正常外出',
        data: 35,
        stroke: false,
          color:'#ed5c68'
      }, {
        name: '晚归',
        data: 78,
        stroke: false,
          color:'#89c997'
      }, {
        name: '未归寝',
        data: 63,
        stroke: false,
        color:'#f29b76'
      }],
      disablePieStroke: true,
      width: 200,
      height: 200,
      dataLabel: false,
      legend: false,
      background: '#fff',
      padding: 0
    });
    ringChart.addEventListener('renderComplete', () => {
      console.log('renderComplete');
    });
    setTimeout(() => {
      ringChart.stopAnimation();
    }, 500);
  }
});