wanzb_xcxv3/pages/matchdetail/matchdetail.js

// pages/matchdetail/matchdetail.js
const app = getApp()
import * as echarts from '../../ec-canvas/echarts';
const $api = require('../../utils/api.js').API;
var records = [], today_stock=[];

Page({

  /**
   * 页面的初始数据
   */
  data: {
    datas:{},
    total_money:0,
    user_id:'',
    match_id:'',
    date:'',
    days:[],
    ec: {
      onInit: null
    },
    ec1: {
      onInit: null
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      user_id:options.user_id,
      match_id:options.match_id,
    })
    this.getMatchData()

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

  getMatchData(){
    wx.showNavigationBarLoading();
    var data      = {}
    data.user_id  = this.data.user_id
    data.id       = this.data.match_id
    $api.getPlayerMatch(data).then(res=>{
      let stock_date=res.data.data.today_record.stock_date.split('-')
      records       = res.data.data.records
      today_stock   = res.data.data.today_record.today_stock
      console.log(records,2323)
      let tmoney = ((res.data.data.today_record.today_fund - res.data.data.today_record.init_fund)*10000).toFixed(0)
      this.setData({
        datas: res.data.data,
        total_money:tmoney,
        date: stock_date[0] + '-' + stock_date[1],
        ec: {
          onInit: initChart
        },
        // ec1: {
        //   onInit: initChart1
        // }
      })

    
      this.getDays()
      wx.hideNavigationBarLoading()
      wx.setNavigationBarTitle({
        title: res.data.data.userinfo.username,
      })
      if(this.data.total_money >= 0){
        wx.setNavigationBarColor({
          backgroundColor: '#D94B24',
          frontColor: '#ffffff',
        })
      } else{
        wx.setNavigationBarColor({
          backgroundColor: '#07B20B',
          frontColor: '#ffffff',
        })
      }
      

    })
    .catch(err=>{
      wx.hideNavigationBarLoading()
    })
    
  },

  toThousandFilter(num) {
    return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
  },

  getDays(){
    $api.getCalendar({
      user_id:this.data.user_id,
      match_id:this.data.match_id,
      month: this.data.date
    }).then(res=>{
      var days = [], w = new Date(this.data.date + '-01').getDay();
      for (let i = 0; i < w; i++) {
        days.push({
          day: '',
          income: ''
        })
      }
      for (let i = 0; i < res.data.data.length; i++) {
        days.push({
          day: i+1,
          income: res.data.data[i].today_income,
          record_id:res.data.data[i].record_id,
        })
      }
      this.setData({
        days: days
      })
    })
  },

  preview(e){
    console.log(e)
    wx.previewImage({
      urls: e.target.dataset.urls,
      current: e.target.dataset.src
    })
  },
  
  bindDateChange(e){
    this.setData({
      date: e.detail.value
    })
    this.getDays()
  },
  prev(){
    var date=this.data.date.split('-'),y=date[0],m=date[1];
    if(m>1){
      m--
    }else{
      m=12
      y--
    }
    m=(m>9)?m:'0'+m
    this.setData({
      date: y+'-'+m
    })
    this.getDays()
  },

  next() {
    var date = this.data.date.split('-'), y = date[0], m = date[1];
    if (m < 12) {
      m++
    } else {
      m = 1
      y++
    }
    m = (m > 9) ? m : '0' + m
    this.setData({
      date: y + '-' + m
    })
    this.getDays()
  },

})

function initChart(canvas, width, height, dpr) {
  var xdata = [], ydata = [];
  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: 50,
      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: {
        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;
}




function initChart1(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
  width: width,
  height: height,
  devicePixelRatio: dpr // new
});
canvas.setChart(chart);
today_stock.forEach(item=>{
  item.value = item.fund
})
var radius = today_stock.length<9?'65%':'50%';
var option = {
  backgroundColor: "#ffffff",
  legend: {
    show: true,
    orient: 'vertical',
    right: '1%',
    formatter: function (name){
      var index = 0;
      today_stock.forEach(function (value, i) {
        if (value.name == name) {
          index = i;
        }
      });
      return name + "  " + today_stock[index].value;
    }
  },
  series: [{
    label: {
      
      normal: {
        show: true,
        fontSize: 12,
        formatter: function (a) {
          return Math.round(a.percent)+'%'
        }
      }
    },
    type: 'pie',
    center: ['37%', '40%'],
    radius: ['0%', radius],
    data: today_stock
    
  }]
};

chart.setOption(option);
return chart;
}