wanzb_xcxv3/pages/avg/avg.js

// pages/avg/avg.js
import * as echarts from '../../ec-canvas/echarts';

const $api = require('../../utils/api.js').API;

var records = []
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tab:['全体选手','冠军组','千万组','百万组'],
    list:[],
    cur:0,
    match_name:'',
    ec: {
      onInit: null
    },
    datas:[],
    days:[],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let nlist = JSON.parse(decodeURIComponent(options.list))
    nlist.unshift(nlist[0])
    // nlist[0].name='全体选手'
    console.log(nlist)
    this.setData({
      cur:options.index,
      list:nlist,
      match_name:nlist[0].match_name,
    })

    if(options.index == 0){
      this.loadAvg()
    } else{
      this.loadGroupAvg()
    }

  },

  loadGroupAvg(){
    var group = this.data.list[this.data.cur]

    var param = {
      match_id:group.match_id,
      group_id:group.match_group,
    }

    $api.getAllDay(param).then(res => {
      // console.log(res.data.data.list)
      if(res.data.code == 0){
      var week=['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五']
        var days=res.data.data.list,weeks=[[]]
        days=days.reverse()
        week.forEach((item,index)=>{
          weeks[index]={
            name:'第'+item+'周',
            data:[],
            total:0
          }
        })
        var i=0
        days.forEach(item=>{
          var w=new Date(item.stock_date).getDay() 
          item.day=w
          if(w==1){
            i++
          }
          weeks[i].data.push(item)
        })
        weeks.forEach(item=>{
          if(item.data.length>0){
            var total=0
            var money = 10000.0
            item.data.forEach(i=>{
              var incom=Number(i.today_income.replace('%',''))
              money += money*incom/100.0
              i.date=(new Date(i.stock_date).getMonth()+1)+'/'+(new Date(i.stock_date).getDate())
            })
            total = (money-10000)*100.0/10000.0
            item.total=total.toFixed(2)
          }
        })
        records = res.data.data.list
        this.setData({
          ec: {
            onInit: initChart
          },
          days:weeks.reverse()
        })
      }
    })
  },
 //计算周数
 getWeekNumber:function(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  // 将年份的第一个周一作为第一周的开始
  const firstWeekStart = new Date(year, 0, 1);
  firstWeekStart.setDate(firstWeekStart.getDate() - firstWeekStart.getDay() + 1);
  // 计算给定日期是一年中的第几周
  const currentDate = new Date(date);
  currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1);
  let milliseconds = currentDate.getTime() - firstWeekStart.getTime();
  const weeks = Math.round(milliseconds / (7 * 24 * 60 * 60 * 1000));
  return weeks + 1; // 因为getWeek返回的是年初至今的周数，所以加1得到完整的周数
},
  loadAvg(){
    var group = this.data.list[0]
    var param = {
      match_id:group.match_id,
    }
    $api.getAvg(param).then(res => {
      if(res.data.code == 0){
        records = res.data.data.list.reverse()
        var days=res.data.data.list,weeks=[]
        days=days.reverse()
        for(let i=0;i<52;i++){
          weeks.push({
            name:'第'+(i+1)+'周',
            data:[],
            total:0
          })
        }
        days.forEach(item=>{
          var w=this.getWeekNumber(item.stock_date)
          weeks[w-1].data.push(item)
        })
        weeks.forEach(item=>{
          if(item.data.length>0){
            var total=0
            var money = 10000.0
            item.data.forEach(i=>{
              var incom=Number(i.today_income.replace('%',''))
              money += money*incom/100.0
              i.date=(new Date(i.stock_date).getMonth()+1)+'/'+(new Date(i.stock_date).getDate())
            })
            total = (money-10000)*100.0/10000.0
            item.total=total.toFixed(2)
          }
        })
        this.setData({
          ec: {
            onInit: initChart
          },
          days:weeks.reverse()
        })
      }
      
    })
  },

  tabChange(e){
    this.setData({
      cur:e.target.dataset.id
    })
    this.setData({
      ec:null,
      days:[]
    })
    if(e.target.dataset.id == 0){
      this.loadAvg()
    } else{
      this.loadGroupAvg()
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

/**折线图 */
function initChart(canvas, width, height, dpr) {
  var xdata = [], ydata = [];
  records = records.reverse()
  for (let i = 0; i < records.length; i++) {
    let date = records[i].stock_date.split('-');
    xdata.push(date[1] + '/' + date[2])
    let y = records[i].total_income.replace('%', '')
    ydata.push(Number(y))
  }
  xdata = xdata.reverse()
  ydata = ydata.reverse()
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option = {
    legend: {
      show: false
    },
    grid: {
      x: 40,
      y: 10,
      x2: 10,
      y2: 35
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: '{b0}: {c0}%',
    },
    xAxis: {
      type: 'category',
      data: xdata,
      axisLabel: {
        interval: 0,
        rotate: 40,
        color: '#999999',
        interval: 2
      }
    },
    yAxis: {
      axisLine: {
        show: true,
      },
      type: 'value',
      // name: '收益曲线',
      axisLabel: {
        color: '#999999',
        formatter: function (value, index) {//隐藏 0
          let texts = [];
          texts.push(value + '%')
          return texts;
        },
        show: true
      },
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      symbolSize: 4,
      lineStyle: {
        color: '#FF2D68'
        // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
        //   offset: 0,
        //   color: '#FF2D68'
        // }, {
        //   offset: 1,
        //   color: '#4C4BFF'
        // }]),
      },
      itemStyle: {
        borderWidth: 5,
        borderColor: '#FFAD52',
        color: '#FFAD52'
      },
      data: ydata
    }]
  };

  chart.setOption(option);
  return chart;
}