statistics.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. const wxCharts = require('../../../utils/wxcharts.js');
  2. const util = require('../../../utils/util.js');
  3. const api = require('../../../utils/api.js');
  4. const app = getApp()
  5. let ringChart = null;
  6. Page({
  7. /**
  8. * 页面的初始数据
  9. */
  10. data: {
  11. startDate: '2019-10-29',
  12. endDate: '2019-10-29',
  13. scopeIndex: 0,
  14. scopeArray: ['机械工程学院', '电子计算机系', '文学系'],
  15. weiguiList: [{
  16. name: '刘天仙',
  17. build: '1号楼',
  18. room: '1101',
  19. num: '1',
  20. time: ''
  21. }, {
  22. name: '陈方明',
  23. build: '3号楼',
  24. room: '1101',
  25. num: '1',
  26. time: ''
  27. }, {
  28. name: '刘天仙',
  29. build: '1号楼',
  30. room: '1101',
  31. num: '1',
  32. time: ''
  33. }, {
  34. name: '陈方明',
  35. build: '3号楼',
  36. room: '1101',
  37. num: '1',
  38. time: ''
  39. }]
  40. },
  41. bindStartDateChange: function(e) {
  42. this.setData({
  43. startDate: e.detail.value
  44. })
  45. },
  46. bindendDateChange: function(e) {
  47. this.setData({
  48. endDate: e.detail.value
  49. })
  50. },
  51. bindScopeChange: function(e) {
  52. this.setData({
  53. scopeIndex: e.detail.value
  54. })
  55. },
  56. getChart: function(e) {
  57. ringChart = new wxCharts({
  58. animation: true,
  59. canvasId: 'ringCanvas',
  60. type: 'ring',
  61. extra: {
  62. ringWidth: 10,
  63. pie: {
  64. offsetAngle: -40
  65. }
  66. },
  67. title: {
  68. name: '归勤率',
  69. color: '#333',
  70. fontSize: 15
  71. },
  72. subtitle: {
  73. name: '98%',
  74. color: '#6282f4',
  75. fontSize: 18
  76. },
  77. series: [{
  78. name: '归勤',
  79. data: 90,
  80. stroke: false,
  81. color: '#6282f4'
  82. }, {
  83. name: '缺勤',
  84. data: 10,
  85. stroke: false,
  86. color: '#ed5c68'
  87. }],
  88. disablePieStroke: true,
  89. width: 160,
  90. height: 160,
  91. dataLabel: false,
  92. legend: false,
  93. background: '#fff',
  94. padding: 0
  95. });
  96. ringChart.addEventListener('renderComplete', () => {
  97. console.log('renderComplete');
  98. });
  99. setTimeout(() => {
  100. ringChart.stopAnimation();
  101. }, 500);
  102. },
  103. touchHandler: function(e) {
  104. console.log(ringChart.getCurrentDataIndex(e));
  105. },
  106. /**
  107. * 生命周期函数--监听页面加载
  108. */
  109. onLoad: function(options) {
  110. const that = this;
  111. that.getChart();
  112. },
  113. /**
  114. * 生命周期函数--监听页面初次渲染完成
  115. */
  116. onReady: function() {
  117. },
  118. /**
  119. * 生命周期函数--监听页面显示
  120. */
  121. onShow: function() {
  122. },
  123. /**
  124. * 生命周期函数--监听页面隐藏
  125. */
  126. onHide: function() {
  127. },
  128. /**
  129. * 生命周期函数--监听页面卸载
  130. */
  131. onUnload: function() {
  132. },
  133. /**
  134. * 页面相关事件处理函数--监听用户下拉动作
  135. */
  136. onPullDownRefresh: function() {
  137. },
  138. /**
  139. * 页面上拉触底事件的处理函数
  140. */
  141. onReachBottom: function() {
  142. }
  143. })