quinn-accounts/pages/chart/index.js

const app = getApp();
import * as echarts from '../../ec-canvas/echarts';
let pieData = [];
let pieChart;
let line1Chart;
let line1Data = [];
let line2Chart;
let line2Data = [];
function initPieChart(canvas, width, height, dpr) {
    pieChart = echarts.init(canvas, null, {
        width: 400,
        height: 250,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(pieChart);
    let option = app.$utils.getPieOption(pieData);
    pieChart.setOption(option);
    pieChart.on('click', 'series.pie', function(param) {
        wx.navigateTo({
            url: "./group/index?expendId=" + param.data.sId + '&rangeDate=' + param.data.sDate
        })
    });
    return pieChart
}
function initLineChart1(canvas, width, height, dpr) {
    line1Chart = echarts.init(canvas, null, {
        width: 400,
        height: 300,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(line1Chart);
    let option = app.$utils.getDayLineOption(line1Data);
    line1Chart.setOption(option);
    return line1Chart;
}
function initLineChart2(canvas, width, height, dpr) {
    line2Chart = echarts.init(canvas, null, {
        width: 400,
        height: 300,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(line2Chart);
    let option = app.$utils.getMonthLineOption(line2Data);
    line2Chart.setOption(option);
    return line2Chart;
}
Page({
    data: {
        start: '2000-01-01 00:00:00',
        end: '2030-09-09 12:12:12',
        showDateVisible:false,
        showDate:app.$utils.formatDateMonth(new Date()),
        accountList: [],
        sumExpend: 0,
        sumIncome: 0,
        sumTransfer: 0,
        sumRepayment: 0,
        payTypeList: [],
        incomeList : [],
        payList : [],
        ecPie: {
            onInit: initPieChart
        },
        ecLine1: {
            onInit: initLineChart1
        },
        ecLine2: {
            onInit: initLineChart2
        }
    },
    onLoad: function (options) {
        if (options.rangeDate){
            let showDate = options.rangeDate
            this.setData({showDate})
        }
    },
    onShow: function () {
        this.updateView();
        if (wx.canIUse('hideHomeButton')) {
            wx.hideHomeButton()
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        return {
            title: '南瓜瞄记账'
        }
    },
    updateView(){
        app.$api.listBillGroup({'rangeDate':this.data.showDate}).then(res => {
            if (res){
                let payTypeList = res.data
                pieData = [];
                if (payTypeList){
                    payTypeList.forEach(x => {
                        pieData = pieData.concat({
                            sId: x.expendId,
                            sDate: this.data.showDate,
                            value: x.progress,
                            name: x.moneyName
                        });
                    })
                }
                let option = app.$utils.getPieOption(pieData);
                if (pieChart) {
                    pieChart.setOption(option);
                }
                this.setData({payTypeList})
            }
        })
        app.$api.listBillChart({'rangeDate':this.data.showDate}).then(res => {
            if (res.data){
                line1Data = [];
                line2Data = [];
                line1Data = line1Data.concat({
                    name: '支出',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineDayExpend
                })
                line1Data = line1Data.concat({
                    name: '收入',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineDayIncome
                })
                line1Data = line1Data.concat({
                    name: '转账',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineDayTransfer
                })
                line1Data = line1Data.concat({
                    name: '还款',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineDayRepayment
                })
                // 近六个月
                line2Data = line2Data.concat({
                    name: '支出',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineMonthExpend
                })
                line2Data = line2Data.concat({
                    name: '收入',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineMonthIncome
                })
                line2Data = line2Data.concat({
                    name: '转账',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineMonthTransfer
                })
                line2Data = line2Data.concat({
                    name: '还款',
                    type: 'line',
                    smooth: true,
                    data: res.data.lineMonthRepayment
                })
                let line1Option = app.$utils.getDayLineOption(line1Data);
                if (line1Chart) {
                    line1Chart.setOption(line1Option);
                }
                let line2Option = app.$utils.getDayLineOption(line2Data);
                if (line2Chart) {
                    line2Chart.setOption(line2Option);
                }
            }
        })
        app.$api.listBillByAMonth({'rangeDate':this.data.showDate}).then(res => {
            if (res.data){
                let accountList = res.data.accountList
                let sumExpend = res.data.sumExpend
                let sumIncome = res.data.sumIncome
                let sumTransfer = res.data.sumTransfer
                let sumRepayment = res.data.sumRepayment
                this.setData({accountList,sumExpend,sumIncome,sumTransfer,sumRepayment})
            }
        })
        app.$api.listExpendOrderBills({'rangeDate':this.data.showDate}).then(res => {
            if (res){
                let payList = res.data
                this.setData({payList})
            }
        })
        app.$api.listIncomeOrderBills({'rangeDate':this.data.showDate}).then(res => {
            if (res){
                let incomeList = res.data
                this.setData({incomeList})
            }
        })
    },
    showPicker(e) {
        const { mode } = e.currentTarget.dataset;
        this.setData({
            mode,
            [`${mode}Visible`]: true,
        });
    },
    hidePicker() {
        const { mode } = this.data;
        this.setData({
            [`${mode}Visible`]: false,
        });
    },
    onConfirm(e) {
        const { value } = e.detail;
        const { mode } = this.data;
        this.setData({
            [mode]: value
            // [`${mode}Text`]: value,
        });
        this.updateView()
        this.hidePicker()
    }

});