YD_WeChatApplet/subpackage/train/user-report/user-report.js

const { getStatistics, getSportsRecord } = require("../../../utils/serve/user");
const utils = require("../../../utils/utils");
import uCharts from '../../../utils/chart/u-charts';

var uChartsInstance = {};
// subpackage/train/user-report/user-report.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
      tab:'1',
      type:'1',//日期类型
      chartType:'1',//y轴类型
      allData:{},
      cWidth: 330,
      cHeight: 280,
      pixelRatio: 2,
      page:1,
      sportList:[],
      haveMore:true
    },

    touchstart(e){
      uChartsInstance[e.target.id].scrollStart(e);
    },
    touchmove(e){
      uChartsInstance[e.target.id].scroll(e);
    },
    touchend(e){
      uChartsInstance[e.target.id].scrollEnd(e);
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      this.getTotal()
      this.getSports()
    },

    async getSports(){
      const that = this
      const res = await getSportsRecord({
        PageIndex:this.data.page,
        PageSize :50
      })
      that.setData({
        haveMore:res.data.total > that.data.page * 50,
        page:that.data.page + 1,
        sportList:[...that.data.sportList,...res.data.datas]
      })
    },

    onReady(){
      //这里的第一个 750 对应 css .charts 的 width
      const cWidth = 380 / 750 * wx.getWindowInfo().windowWidth;;
      //这里的 500 对应 css .charts 的 height
      const cHeight = 250 / 750 * wx.getWindowInfo().windowWidth;
      console.log(wx.getWindowInfo())
      const pixelRatio = wx.getWindowInfo().pixelRatio
      this.setData({ cWidth, cHeight ,pixelRatio});
      this.getTotal();
    },

    drawCharts(id){
      const query = wx.createSelectorQuery().in(this);
      query.select('#' + id).fields({ node: true, size: true }).exec(res => {
        if (res[0]) {
          const canvas = res[0].node;
          const ctx = canvas.getContext('2d');
          canvas.width = res[0].width * this.data.pixelRatio;
          canvas.height = res[0].height * this.data.pixelRatio;
          uChartsInstance[id] = new uCharts({
              type: "column",
              context: ctx,
              width: this.data.cWidth * this.data.pixelRatio,
              height: this.data.cHeight * this.data.pixelRatio,
              categories: this.data.allData[this.data.chartType == 1?'chartDataByDuration':this.data.chartType == 2? 'chartDataByCount':'chartDataByConsume'].axisX,
              series: [
                {
                  data: this.data.allData[this.data.chartType == 1?'chartDataByDuration':this.data.chartType == 2? 'chartDataByCount':'chartDataByConsume'].axisY
                },
              ],
              pixelRatio: this.data.pixelRatio,
              animation: true,
              background: "#FFFFFF",
              color: this.data.chartType == 1?["#FFA30C"]:this.data.chartType == 2?["#6CB7FB"]:["#FF4949"],
              padding: [15,15,50,0],
              enableScroll: true,
              // touchMoveLimit: 24,
              legend: {
                show: false,
                fontColor:"#37b7e8"
              },
              xAxis: {
                disableGrid: true,
                itemCount:5,
                scrollShow: true,
                fontSize:12,
                lineHeight:30,
                axisLineColor:"#f1f1f1",
                fontColor:"#000",
                scrollColor:"#f6ecc9",
                scrollBackgroundColor:"#F4F6F8"
              },
              yAxis: {
                gridColor:"#F1F1F1",
                data: [
                  {
                    min: 0,
                    axisLine:false,
                    fontSize:12
                  }
                ]
              },
              extra: {
                column: {
                  type: "group",
                  width: 23,
                  showBox:false,
                  barBorderRadius:[
                    8,8,0,0
                  ]
                },
                tooltip:{
                  showBox:false
                }
              }
            });
        }else{
          console.error("[uCharts]: 未获取到 context");
        }
      });
    },
    tap(e){
      uChartsInstance[e.target.id].touchLegend(e);
      uChartsInstance[e.target.id].showToolTip(e);
    },

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

    },

    //获取汇总统计
    async getTotal(){
      const that = this
      const res = await getStatistics({CycleType:this.data.type})
      console.log(res)
      if(res.data != null){
        res.data.accumulatedDuration = utils.formatTimeStr(res.data.accumulatedDuration)
        this.setData({
          allData:res.data
        })
        let ress = {
          categories: this.data.allData[this.data.chartType == 1?'chartDataByDuration':this.data.chartType == 2? 'chartDataByCount':'chartDataByConsume'].axisX,
          series: [
            {
              data: this.data.allData['chartDataByCount'].axisY
            },
          ]
        };
        this.drawCharts('mycanvas');
      }else{
        this.setData({
          noData:true
        })
      }
    },



    changeTab: function(e) {
      this.setData({
        tab: e.currentTarget.id
      });
    },

    changeTabB: function (e) {
      this.setData({
        type: e.currentTarget.id
      });
       this.getTotal()
    },

    changeTabC: function(e) {
      this.setData({
        chartType: e.currentTarget.id
      },()=>{
        this.drawCharts('mycanvas');
      });
      

    },

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

    },

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

    },

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

    },

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

      if(this.data.haveMore){
        this.getSports()
      }

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})