jinhongjian/view/pages/admin/order_statistics/index.js

import { getStatisticsTime,getStatisticsMonth  } from "../../../api/admin"; 
import * as echarts from './../components/ec-canvas/echarts';
const app = getApp();
let chart = null;
var option = {}
Page({
  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    },
    xData:[],
    yData:[],
    parameter: {
      'navbar': '1',
      'return': '1',
      'title': '',
      'color': false
    },
    start:'',
    stop:'',
    type: '',
    title:'',
    time:'',
    growth_rate: "", //增长率
    increase_time: "", //增长率
    increase_time_status: "", //增长率
    time_price: "", //增长率
    loading:false,//是否加载中
    loadend:false,//是否加载完毕
    loadTitle:'加载更多',//提示语
    page: 1,
    limit: 15,
    dataList:[],
    isClose:false,
    imageWidth:'',
    current:false,
    isRange:true,
  },
  touchHandler(e) {
    console.log(chartLine.getCurrentDataIndex(e))
  },
  /**
  * 日期选择
  * 
  */
  onPickDay(e){
    let start = e.detail[0].split('-');
    let stop =  e.detail[1].split('-');
    this.setData({
      start: new Date(Date.parse(start[0] + "/" + start[1] + "/" + start[2])).getTime() /1000,
      stop:new Date( Date.parse(stop[0] + "/" + stop[1] + "/" + stop[2])).getTime() /1000 +24 * 60 * 60 -1
    });
  },
  close(){
    this.setData({
      current: false
    });
    this.getIndex();
    this.setData({ loadend: false, page: 1, dataList: [] });
    this.getList();
  },
  // 2、进行初始化数据
  initChartOption:function(xData, yData) {
    return {
    backgroundColor: "#fff",
      color: ["#37A2DA", "#f2960d", "#67E0E3", "#9FE6B8"],
      title: {
        textStyle: {
          fontWeight: '500',
          fontSize: 15,
          color: '#000'
        },
        x:'center',
        y:'0'
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: [""]
      },
      toolbox: {
        show: false,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line"] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: {
        type: 'category',
        data: xData,
        boundaryGap: false,
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: "#999",
            width: 1 //这里是为了突出显示加上的
          }
        }
      },
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#f5f5f5"],
              width: 1,
              type: "solid"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999",
              width: 1 //这里是为了突出显示加上的
            }
          }
        }
      ],
      series: [{
          data: yData,
          type: 'line',
          itemStyle: {
            normal: {
              color: "#2291f8", //折点颜色
              lineStyle: {
                color: "#2291f8" //折线颜色
              }
            }
          }
      }],
      grid: {
         left : '0%',   //组件离容器左侧的距离
         right : '0%',
         bottom : '4%',
         containLabel : true   
      },
      animationDuration: 1000
    }
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.barComponent = this.selectComponent('#mychart-one');
    // this.handleCanvarToImg();
    this.setData({ 
      type: options.type,
      time: options.time,
      parameter: {
        title: options.type==='1'?'营业额统计':'订单数据统计',
        navbar: '1',
        return: '1',
        color: false
      }
    });  
  },
  /**
  * 登录回调
  * 
  */
  onLoadFun: function () {
    this.oneComponent = this.selectComponent('#mychart-one');
    this.setTime(this.data.time);
  },
  
  handleCanvarToImg() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 260,
      height: 180,
      canvasId: 'mychart-bar',
      success: function(res) {
        this.setData({ radarImg: res.tempFilePath});
      }
    });
  },
  /**
  * 打开自定义
  * 
  */
  dateTitle: function() {
    wx.navigateTo({
      url: '/pages/admin/order_statistics_time/index'
    })
  },
  getIndex: function () {
    let that = this;
    getStatisticsTime({
      start: that.data.start,
      stop: that.data.stop,
      type: that.data.type
    }).then(
      res => {
        let _info = res.data.chart || [],
          day = [],
          num = [];
        _info.forEach(function (item) {
          day.push(item.time);
          num.push(item.num);
        });
        that.setData({
          growth_rate: res.data.growth_rate,
          increase_time: res.data.increase_time,
          increase_time_status: res.data.increase_time_status,
          time_price: res.data.time,
          xData:day,
          yData:num
        });
        that.barComponent.init((canvas, width, height) => {
          // 初始化图表
          const barChart = echarts.init(canvas, null, {
            width: width,
            height: height
          });
          barChart.setOption(that.initChartOption(day,num));
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return barChart;
        });
      },
      error => {
        app.Tips({ title: error.msg });
      }
    );
  },
  setTime: function (e) {
    let time='';
    if(e.currentTarget) {
      time = e.currentTarget.dataset.time;
    }else{
      time = e;
    }
    let year = new Date().getFullYear(),
      month = new Date().getMonth() + 1,
      day = new Date().getDate();
    switch (time) {
      case "today":
        this.setData({
          time: time,
          start: new Date(Date.parse(year + "/" + month + "/" + day)).getTime() / 1000,
          stop: new Date(Date.parse(year + "/" + month + "/" + day)).getTime() / 1000 + 24 * 60 * 60 -1,
          title: "今日"
        });
        this.getIndex();
        this.setData({ loadend: false, page: 1, dataList: [] });
        this.getList();
        break;
      case "yesterday":
        this.setData({
          time: time,
          start: new Date(Date.parse(year + "/" + month + "/" + day)).getTime() / 1000 - 24 * 60 * 60,
          stop: new Date(Date.parse(year + "/" + month + "/" + day)).getTime() / 1000 - 1,
          title: "昨日"
        });
        this.getIndex();
        this.setData({ loadend: false, page: 1, dataList: [] });
        this.getList();
        break;
      case "month":
        this.setData({
          time: time,
          start: new Date(year, new Date().getMonth(), 1).getTime() / 1000,
          stop: new Date(year, month, 1).getTime() / 1000 - 1,
          title: "本月"
        });
        this.getIndex();
        this.setData({ loadend: false, page: 1, dataList: [] });
        this.getList();
        break;
      case "seven":
        this.setData({
          time: time,
          start: new Date(Date.parse(year + "/" + month + "/" + day)).getTime() / 1000 + 24 * 60 * 60 - 7 * 3600 * 24,
          stop: new Date(Date.parse(year + "/" + month + "/" + day)).getTime() / 1000 + 24 * 60 * 60 - 1,
          title: "七日"
        });
        this.getIndex();
        this.setData({ loadend: false, page: 1, dataList: [] });
        this.getList();
        break;
    }
  },
     /**
   * 获取详细数据
  */
  getList: function (){
    if(this.data.loadend) return;
    if(this.data.loading) return;
    this.setData({ loading: true, loadTitle:""});
    getStatisticsMonth({
      page: this.data.page,
      limit: this.data.limit,
      start: this.data.start,
      stop: this.data.stop
    }).then(res=>{
      let list = res.data || [];
      let loadend = list.length < this.data.limit;
      this.data.dataList = app.SplitArray(list, this.data.dataList);
      this.setData({
        dataList: this.data.dataList,
        loadend: loadend,
        loading: false,
        loadTitle: loadend ? "我也是有底线的" : '加载更多',
        page: this.data.page + 1,
      });
    }).catch(err=>{
      this.setData({ loading: false, loadTitle: "加载更多" });
    })
  },
/**
 * 生命周期函数--监听页面隐藏
 */
onHide: function () {
  this.setData({ isClose:true});
},
 /**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
  if (app.globalData.isLog && this.data.isClose){
    this.setData({ loadend: false, page: 1, dataList:[]});
    this.getList();
  }
  let pages = getCurrentPages();
  let currPage = pages[pages.length - 1]; //当前页面
  if (currPage.data.start && currPage.data.stop) {
    this.setData({
      start: currPage.data.start,
      stop: currPage.data.stop,
      title: "",
      time: 'date'
    });
    this.getIndex();
  }
},
 /**
 * 页面上拉触底事件的处理函数
 */
onReachBottom: function () {
  this.getList();
},
})