weilaibike-work-mini/pages/lineChart/lineChart.js

// pages/lineChart/lineChart.js
import * as echarts from '../../components/ec-canvas/echarts.min'
var app = getApp();

Page({
  /**
   * 页面的初始数据
   */
  data: {
    option1: [], //下拉菜单选项
    value1: 0, //下拉菜单默认选中项
    screenHeight: '', //屏幕可视高度
    areaID: '', //区域id
    user: {
      lazyLoad: true // 延迟加载
    },
    order: {
      lazyLoad: true // 延迟加载
    },
    userDate: '',
    userData: '',
    newOrderChartData: {},
    earningsChartData: {},
    dayOrderChartData: {},
    earnShow: false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(wx.getStorageSync('areaID'))
    var that = this;
    that.setData({
      screenHeight: app.globalData.screenHeight,
      option1: wx.getStorageSync('allArea'),
      option3: wx.getStorageSync('allState')
    })
    console.log(that.data.option1)
    let curVal = wx.getStorageSync('curVal')
    console.log(curVal, 'log_curVal')
    if (curVal) {
      that.setData({
        value1: curVal
      })
    }
    let areaID = wx.getStorageSync('curId')
    console.log(areaID, 'log_areaID')
    if (areaID) {
      that.setData({
        areaID
      })
    } else {
      let id = that.data.option1[0].areaID
      that.setData({
        areaID: id
      })
    }
    that.menu = that.selectComponent("#menu");
    that.menu.changeTitle(that.data.option1[that.data.value1].text);
    that.getData();
  },
  back() {
    wx.navigateBack({
      delta: 1
    })
  },
  change(e) {
    let that = this;
    wx.setStorageSync('curVal', that.data.option1[e.detail].value)
    wx.setStorageSync('curId', that.data.option1[e.detail].areaID)
    this.setData({
      areaID: that.data.option1[e.detail].areaID
    })
    this.getData();
  },
  userInit: function () {
    this.userEcharts = this.selectComponent('#userChart');
    this.userEcharts.init((canvas, width, height, dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
      });
      Chart.setOption(this.userOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  orderInit: function () {
    this.orderEcharts = this.selectComponent('#orderChart');
    this.orderEcharts.init((canvas, width, height, dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, 'light', {
        width: width,
        height: height,
        devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
      });
      Chart.setOption(this.orderOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  dayOrderInit: function () {
    this.orderEcharts = this.selectComponent('#dayOrderChart');
    this.orderEcharts.init((canvas, width, height, dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, 'light', {
        width: width,
        height: height,
        devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
      });
      Chart.setOption(this.dayOrderOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  earningsInit: function () {
    this.earningsChart = this.selectComponent('#earningsChart');
    this.earningsChart.init((canvas, width, height, dpr) => {
      // 初始化图表
      const Chart = echarts.init(canvas, 'light', {
        width: width,
        height: height,
        devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
      });
      Chart.setOption(this.earningsOption());
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return Chart;
    });
  },
  getData() {
    wx.showLoading({
      title: '加载中...',
    })
    let data = {
      area_id: this.data.areaID,
      days: 'thirtyDays'
    }
    app.request('user/newUsersChart', data, 'GET').then(res => {
      console.log(res)
      var user = res.data;
      var userDate = [];
      var userData = [];
      user.map(i => {
        userDate.push(i.date)
        userData.push(i.value)
      })
      this.setData({
        userDate,
        userData
      })
      this.userInit();
    })
    app.request('order/newOrderChart', data, 'GET').then(res => {
      console.log(res.data, '订单')
      let order = res.data;
      let newOrderChartData = {
        expectedData: {
          data: [],
          date: [],
          legendData: [],
        }
      }
      order.map(i => {
        newOrderChartData.expectedData.legendData.push(i.name)
        let arr = []
        let date = []
        i.data.map(e => {
          arr.push(e.value)
          date.push(e.date)
        })
        newOrderChartData.expectedData.data.push(arr)
        newOrderChartData.expectedData.date = date
      })
      this.setData({
        newOrderChartData
      })
      this.orderInit();
    })
    app.request('order/profitChart', data, 'GET').then(res => {
      console.log(res.data, '收益')
      let earnings = res.data;
      if (earnings.length > 0) {
        console.log(1111)
        this.setData({
          earnShow: true
        })
        let earningsChartData = {
          expectedData: {
            data: [],
            date: [],
            legendData: [],
          }
        }
        earnings.map(i => {
          earningsChartData.expectedData.legendData.push(i.name)
          let arr = []
          let date = []
          i.data.map(e => {
            arr.push(e.value)
            date.push(e.date)
          })
          earningsChartData.expectedData.data.push(arr)
          earningsChartData.expectedData.date = date
        })
        this.setData({
          earningsChartData
        })
        this.earningsInit();
      }
    })
    let day = {
      area_id: this.data.areaID,
    }
    app.request('order/hourOrderNumber', day, 'GET').then(res => {
      if (res.statusCode == 200) {
        console.log(res, '测试')
        let dayOrderChart = res.data;
        let dayOrderChartData = {
          expectedData: {
            data: [],
            date: [],
            legendData: [],
          }
        }
        dayOrderChartData.expectedData.data = dayOrderChart.data
        dayOrderChartData.expectedData.date = dayOrderChart.date
        this.setData({
          dayOrderChartData
        })
        this.dayOrderInit();
      }
    })
    wx.hideLoading();
  },
  userOption() {
    let that = this;
    var option = {
      xAxis: {
        data: that.data.userDate,
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          rotate: 60,
        },
        axisLine: {
          lineStyle: {
            color: '#409EFF'
          }
        }
      },
      grid: {
        left: 10,
        right: 10,
        bottom: 20,
        top: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        padding: [5, 10],
      },
      yAxis: {
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#409EFF'
          }
        }
      },
      legend: {
        data: ['expected'],
      },
      series: [{
        name: '每日新增',
        itemStyle: {
          normal: {
            color: '#FF005A',
            lineStyle: {
              color: '#FF005A',
              width: 2,
            },
          },
        },
        smooth: true,
        type: 'line',
        data: that.data.userData,
        animationDuration: 2800,
        animationEasing: 'cubicInOut',
      }],
    };
    return option;
  },
  orderOption() {
    let that = this;
    var expectedData = that.data.newOrderChartData.expectedData
    let seriesDatas = []
    expectedData.data.map((i, index) => {
      seriesDatas.push({
        name: expectedData.legendData[index],
        type: 'line',
        smooth: true,
        animationDuration: 2800,
        animationEasing: 'cubicInOut',
        data: i,
      })
    })
    var option = {
      xAxis: {
        data: expectedData.date,
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          rotate: 60,
        },
        axisLine: {
          lineStyle: {
            color: '#409EFF'
          }
        }
      },
      grid: {
        left: '2%',
        right: 10,
        bottom: 20,
        top: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        padding: [5, 10],
      },
      yAxis: {
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#409EFF'
          }
        }
      },
      legend: {
        data: expectedData.legendData,
      },
      series: seriesDatas,
    }
    return option;
  },
  earningsOption() {
    let that = this;
    var earningsData = that.data.earningsChartData.expectedData
    let seriesDatas = []
    earningsData.data.map((i, index) => {
      seriesDatas.push({
        name: earningsData.legendData[index],
        type: 'line',
        smooth: true,
        animationDuration: 2800,
        animationEasing: 'cubicInOut',
        data: i,
      })
    })
    var option = {
      xAxis: {
        data: earningsData.date,
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          rotate: 60,
        },
        axisLine: {
          lineStyle: {
            color: '#409EFF'
          }
        }
      },
      grid: {
        left: '2%',
        right: 10,
        bottom: 20,
        top: 30,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
        padding: [5, 10],
      },
      yAxis: {
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#409EFF'
          }
        }
      },
      legend: {
        data: earningsData.legendData,
      },
      series: seriesDatas,
    }
    return option;
  },
  dayOrderOption() {
    let that = this;
    var expectedData = that.data.dayOrderChartData.expectedData
    // console.log(expectedData)
    var options1 = []
    expectedData.date.map(i => {
      options1.push({
        title: {
          text: i
        },
        series: [{
          data: expectedData.data[i]
        }],
      })
    })
    var option = {
      baseOption: {
        timeline: {
          // y: 0,
          axisType: 'category',
          realtime: true,
          loop: true,
          autoPlay: false,
          // currentIndex: 2,
          playInterval: 1000,
          // controlStyle: {
          //     position: 'left'
          // },
          data: expectedData.date,
          label: {
            formatter: function (s) {
              return (new Date(s).getMonth() + 1) + '-' + new Date(s).getDate()
            },
            color: '#409EFF'
          },
          lineStyle: {
            color: '#409EFF'
          },
          itemStyle: {
            color: '#409EFF',
          },
          controlStyle: {
            color: '#409EFF',
            borderColor: '#409EFF',
          }
        },
        title: {
          // subtext: '数据来自国家统计局',
        },
        tooltip: {},
        legend: {
          x: 'right',
          data: ['新订单'],
        },
        calculable: true,
        grid: {
          top: 80,
          bottom: 100,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true,
                formatter: function (params) {
                  return params.value.replace('\n', '')
                },
              },
            },
          },
        },
        xAxis: [{
          type: 'category',
          axisLabel: {
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          },
          data: [
            '0',
            '\n1',
            '2',
            '\n3',
            '4',
            '\n5',
            '6',
            '\n7',
            '8',
            '\n9',
            '10',
            '\n11',
            '12',
            '\n13',
            '14',
            '\n15',
            '16',
            '\n17',
            '18',
            '\n19',
            '20',
            '\n21',
            '22',
            '\n23',
            '24',
          ],
          splitLine: {
            show: false
          },
        }, ],
        yAxis: [{
          type: 'value',
          name: '数量',
          axisLine: {
            lineStyle: {
              color: '#409EFF'
            }
          }
        }],
        series: [{
          name: '新订单',
          type: 'bar'
        }],
      },
      options: options1,
    }
    return option;
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})