student.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. const app = getApp()
  2. import * as echarts from '../../../commpents/ec-canvas/echarts'
  3. let chart;
  4. Page({
  5. data: {
  6. frameStyle: { useTop: true, name: '学员统计', leftArrow: true, useBar: false },
  7. piedata: []
  8. },
  9. // 返回
  10. back(e) {
  11. wx.navigateBack({ delta: 1 })
  12. },
  13. /**
  14. * 生命周期函数--监听页面加载
  15. */
  16. onLoad: async function (options) {
  17. const that = this;
  18. that.setData({ ec: { onInit: that.initChart } })
  19. // 监听用户是否登录
  20. await that.watchLogin();
  21. },
  22. // 监听用户是否登录
  23. watchLogin: async function () {
  24. const that = this;
  25. wx.getStorage({
  26. key: 'user',
  27. success: async res => {
  28. const arr = await app.$get(`/statistics/schoolStudentAge`, { school_id: res.data.info.id });
  29. if (arr.errcode == '0') {
  30. that.setData({ piedata: arr.data })
  31. const option = {
  32. series: [{ data: arr.data }],
  33. }
  34. if (chart) chart.setOption(option)
  35. }
  36. },
  37. fail: async res => {
  38. wx.redirectTo({ url: '/pages/index/index' })
  39. }
  40. })
  41. },
  42. // 饼图
  43. initChart(canvas, width, height, dpr) {
  44. let that = this;
  45. var piedata = that.data.piedata;
  46. chart = echarts.init(canvas, null, {
  47. width: width,
  48. height: height,
  49. devicePixelRatio: dpr
  50. });
  51. canvas.setChart(chart);
  52. var option = {
  53. backgroundColor: "#ffffff",
  54. series: [{
  55. label: {
  56. normal: {
  57. show: true,
  58. formatter: '{b}:{c}人' + '\n\r' + '({d}%)'
  59. },
  60. },
  61. type: 'pie',
  62. center: ['50%', '50%'],
  63. radius: ['20%', '40%'],
  64. data: piedata
  65. }],
  66. legend: {
  67. orient: 'vertical',
  68. height: 40,
  69. padding: 50,
  70. },
  71. tooltip: {
  72. trigger: 'item',
  73. formatter: '{b}:{c}人' + '\n\r' + '({d}%)' // 格式化数值百分比输出
  74. },
  75. };
  76. chart.setOption(option, true);
  77. return chart;
  78. },
  79. /**
  80. * 生命周期函数--监听页面初次渲染完成
  81. */
  82. onReady: function () { },
  83. /**
  84. * 生命周期函数--监听页面显示
  85. */
  86. onShow: function () {
  87. },
  88. /**
  89. * 页面上拉触底事件的处理函数
  90. */
  91. /**
  92. * 生命周期函数--监听页面隐藏
  93. */
  94. onHide: function () {
  95. },
  96. /**
  97. * 生命周期函数--监听页面卸载
  98. */
  99. onUnload: function () {
  100. },
  101. /**
  102. * 页面相关事件处理函数--监听用户下拉动作
  103. */
  104. onPullDownRefresh: function () {
  105. },
  106. /**
  107. * 用户点击右上角分享
  108. */
  109. onShareAppMessage: function (res) {
  110. },
  111. })