wanzb_xcx/pages/gameDetail/gameDetail.js

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

const app = getApp();
var host = app.globalData.host;
var id, record_id;

Page({

  data: {
    ec: {
      onInit: initChart
    }
  },

  onLoad(options) {
    id = options.id, record_id = options.record_id
    this.setData({
      id:id,
      record_id: record_id
    })
    wx.showNavigationBarLoading()
    /**获取token */
    wx.getStorage({
      key: 'userInfo',
      success: res => {
        this.setData({
          userInfo: res.data
        })
        this.getData(id, record_id);
      },
      fail: error => {
        //跳转到登陆页面
        wx.switchTab({
          url: '../user/user',
        })
      }
    })
  },
  getData(id, record_id) {
    var data={}
    if(id){
      data.id=id
    }
    if (record_id) {
      data.record_id = record_id
    }
    wx.request({
      url: host + '/api/wx/player/match',
      data: data,
      header: {
        'Authorization': this.data.userInfo.token
      },
      success: res => {
        console.log(res)
        this.setData({
          datas: res.data.data
        })
        wx.hideNavigationBarLoading()
      },
      fail: error => {
        //跳转到登陆页面
        wx.switchTab({
          url: '../user/user',
        })
      }
    })
  },
});

/**折线图 */
function initChart(canvas, width, height, dpr) {
  var data = {}
  if (id) {
    data.id = id
  }
  if (record_id) {
    data.record_id = record_id
  }
  wx.getStorage({
    key: 'userInfo',
    success: res => {
      var info = res.data
      wx.request({
        url: host + '/api/wx/player/match',
        data: data,
        header: {
          'Authorization': info.token
        },
        success: res => {
          var records = res.data.data.records, 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: 40,
              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: 8,
              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;
        }
      })
    },
  })


}