RailwayTwo/mini/pages/data/index.js

// pages/data/index.js
import http from '../../utils/http'
import util from '../../utils/util'
import api from '../../utils/api'
const app = getApp()
import * as echarts from '../../ec-canvas/echarts';

let chart = null;
let option = {}

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  option = {
    legend: {
      data: []
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [],
      type: 'bar'
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    projects: [],
    project_ids: [],
    project_names: '',
    total_project: '0',
    total_month: '0',
    projectShow: false,
    index: 0,
    show: false,
    isSearch: true,
    charts: [{
      name: '柱状图',
      type: 'bar'
    }, {
      name: '折线图',
      type: 'line'
    }, {
      name: '饼状图',
      type: 'pie'
    }, {
      name: '明细图',
      type: 'detail'
    }, {
      name: '雷达图',
      type: 'radar'
    }],
    chartIndex: 0,
    dateTypes: [{
      name: '按年',
      type: 'year'
    }, {
      name: '按月',
      type: 'month'
    }],
    dateIndex: 0,
    dateShow: false,
    years_months: [],
    date: '',
    yearDate: '',
    monthDate: '',
    max_date: (new Date()).getTime(),
    min_date: (new Date()).getTime(),
    filter: {},
    data: [],
    ec: {
      onInit: initChart
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    api.getByName(this, 'projects/getAll', 'projects', {}, function (res) {
      that.getData()
    });
    api.getByName(this, 'data/getYearsAndMonths', 'years_months');
    // var maxDate = (new Date()).getTime()
    // var minDate = (new Date()).getTime() - 2 * 365 * 24 * 3600 * 1000
    // this.setData({
    //   minDate,
    //   maxDate
    // })
    this.getDateInfo()
    app.resetDataFilter()
  },

  switchCheck: function(e) {
    var index = e.currentTarget.dataset.index
    var projects = this.data.projects
    projects[index].checked = projects[index].checked ? false : true
    this.setData({projects})
  },

  closeProject: function(e) {
    var project_ids = []
    var project_names = []
    var projects = this.data.projects
    for(var i = 0; i < projects.length; ++i) {
      if(projects[i].checked) {
        project_ids.push(projects[i].id)
        project_names.push(projects[i].name)
      }
    }
    project_names = project_names.join(',')
    this.setData({project_ids, project_names})
    this.switchShow(e)
    this.getData()
  },

  getData() {
    var ids = this.data.project_ids
    if (ids.length <= 0) return false
    var data = Object.assign({}, {
      project_ids: ids,
      date: this.data.date,
      type: this.data.dateIndex == 0 ? 'year' : 'month'
    }, this.data.filter)
    var that = this
    api.getByName(this, 'data/getStat', 'data', data, function(res) {
      that.updateChart()
    });
  },

  getDateInfo() {
    var that = this
    http({
      url: 'data/getDateInfo',
      data: {},
      success: function (res) {
        if (res.code == 0) {
          that.setData(res.data)
          that.setData({
            yearDate: res.data.date
          })
        }
      }
    })
  },

  onDateChange: function (e) {
    var yearDate = e.detail.value[0].value + '-' + e.detail.value[1].value
    this.setData({
      yearDate
    })
  },
  dateConfirm: function (e) {
    this.switchShow(e)
    this.updateDate()
  },
  monthDateConfirm: function (e) {
    var date = e.detail
    var monthDate = util.formatDate(date)
    this.setData({
      monthDate
    })
    this.switchShow(e)
    this.updateDate()
  },
  updateDate: function () {
    var date = this.data.dateIndex == 0 ? this.data.yearDate : this.data.monthDate
    this.setData({
      date
    })
    this.getData()
  },

  onChange: function (e) {
    var index = e.detail.value
    var name = e.currentTarget.dataset.name
    this.setData({
      [name]: index
    })
    if(name == 'chartIndex') {
      this.updateChart()
    }
  },
  updateChart: function() {
    var data = this.data.data
    option.xAxis.data = data.names;
    option.legend = {
      data: data.legends
    }
    var type = this.data.charts[this.data.chartIndex].type
    var values = data.values
    for(var i = 0; i < values.length; ++i) {
      option.series[i] = {
        label: {
          show: true,
          position: 'top'
        },
        name: data.legends[i],
        type: type,
        data: values[i]
      }
    }
    chart.setOption(option)
  },

  radioChange: function (e) {
    var dateIndex = e.currentTarget.dataset.index
    this.setData({
      dateIndex
    })
  },

  switchShow: function (e) {
    var name = e.currentTarget.dataset.name
    var show = e.currentTarget.dataset.show ? e.currentTarget.dataset.show : !this.data[name]
    this.setData({
      [name]: show
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().init();
    this.setData({
      project_id: ''
    })
    var filter = wx.getStorageSync('sg-data-filters')
    this.setData({
      filter: filter
    })
  },

  navigate: function(e) {
    var url = e.currentTarget.dataset.url
    wx.navigateTo({
      url: url,
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})