shuichacha/shuichacha-for-KL/pages/wateranalysis/wateranalysis.js

// pages/wateranalysis/wateranalysis.js
import * as echarts from '../../components/ec-canvas/echarts.js';
import {
  barChartOptions,
  lineChartOptions
} from '../../utils/chart.js';
let moment = require('../../utils/moment.js');
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentYear: moment().year(),
    waterInfo: {},
    ec: {
      lazyLoad: true,
    },
  },
  // 初始化echart图表
  initChart({
    id,
    type,
    data,
    color,
    configs
  }) {
    const {
      legend = [], xAxis = [], series = []
    } = data;
    const setOption = () => {
      if (type == 'bar') {
        this[id].setOption(barChartOptions({
          legend,
          xAxis,
          series
        }, color, configs), true);
      } else {
        this[id].setOption(lineChartOptions({
          legend,
          xAxis,
          series
        }, color), true);
      }
    }
    if (this[id]) {
      setOption();
      return
    }
    this.selectComponent(`#${id}`).init((canvas, width, height) => {
      this[id] = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(this[id]);
      setOption();
      return this[id];
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  getWaterAnalysis() {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    app.$http.get('/statistics/getUseWaterAnalyze').then(({
      status,
      msg,
      data: {
        list = [],
        averageUseVolume = 0,
        maxUseWater = 0,
        minUseWater = 0,
        totalUseVolume = 0
      }
    }) => {
      if (status === 0) {
        this.setData({
          waterInfo: {
            list,
            averageUseVolume,
            maxUseWater,
            minUseWater,
            totalUseVolume
          }
        })
        list = list.sort(function(a, b) {
          return a.date - b.date
        })
        const legend = ['用水量'],
          xAxis = [],
          series = [
            []
          ];
        if (list.length) {
          this.setData({
            list: list
          })
          list.forEach(v => {
            let date = v.date.toString();
            date = date.substr(4, 2);
            xAxis.push(date);
            series[0].push(v.useVolume)
          })
          const option = {
            id: 'weekChart',
            type: 'bar',
            data: {
              legend,
              series,
              xAxis
            },
            color: ['#FFF'],
            configs: {
              barWidth: 16
            }
          }
          this.initChart(option);
        }
      }
      wx.hideLoading();
    }).catch(() => {
      wx.hideLoading();
    })
  },
  onLoad: function(options) {
    this.getWaterAnalysis();
  },
})