twong329/view/xcx/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();
  },
})