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',
      show: false
    },
    series: [{
      data: [],
      type: 'bar'
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    projects: [],
    project_ids: [],
    project_names: '',
    year_money: '0',
    month_money: '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: 1,
    dateTypes: [{
      name: '按年',
      type: 'year'
    }, {
      name: '按月',
      type: 'month'
    }],
    dateIndex: 0,
    dateShow: false,
    years_months: [],
    date: '',
    start: '',
    end: '',
    max_date: '',
    min_date: '',
    filter: {},
    data: [],
    ec: {
      onInit: initChart
    },
    detail_data: [],
    orderBy: 'asc'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    api.getByName(this, 'projects/getAll', 'projects', {});
  },

  updateValue: function (e) {
    var name = e.currentTarget.dataset.name
    var value = e.currentTarget.dataset.value
    this.setData({
      [name]: value
    })
    if (name == 'orderBy') {
      this.getChartData()
    }
  },

  updateDate(e) {
    this.setData({
      date: e.detail.date
    })
    this.getYearAndMonthMoney()
    this.getChartData()
  },

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

  getChartData: function () {
    var chartIndex = this.data.chartIndex
    var that = this
    if (chartIndex == 1) {
      http({
        url: 'data/projectStat',
        data: {
          date: this.data.date,
          orderBy: this.data.orderBy
        },
        success: function (res) {
          if (res.code == 0) {
            that.setData({
              data: res.data
            })
            that.updateChart()
          }
        }
      })
    }
  },
  updateChart: function () {
    var data = this.data.data
    option.legend = {
      data: data.legends
    }
    var chartIndex = this.data.chartIndex
    if (chartIndex == 1) {
      option.xAxis = [{
        type: 'value'
      }]
      option.yAxis = [{
        type: 'category',
        axisTick: {
          show: false
        },
        data: data.names
      }];
      var values = data.values
      
      option.series = [{
        label: {
          show: false
        },
        name: '租赁费用',
        type: 'bar',
        data: values
      }]
      // chart.resize({width: '80vw', height: '80vh'})
    }

    chart.setOption(option)
  },

  radioChange: function (e) {
    var dateIndex = e.currentTarget.dataset.index
    if (dateIndex == this.data.dateIndex) return false
    var start_date = this.data.start_date
    var end_date = this.data.end_date
    var start_date = dateIndex == 1 ? start_date + '-01' : start_date.substr(0, 7)
    var end_date = dateIndex == 1 ? end_date + '-01' : end_date.substr(0, 7)
    this.setData({
      dateIndex,
      start_date,
      end_date
    })
  },

  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
    })
    if (name == 'dateShow' && !show) {
      this.getData()
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().init();
  },

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

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

  },

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

  },

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

  },

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

  },

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

  }
})