statistics.js 2.8 KB

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