quinn-accounts/pages/chart/index.js

import * as echarts from '../../ec-canvas/echarts';
let pieData = [];
let line1Data = [];
let line2Data = [];
function initPieChart(canvas, width, height, dpr) {
    if (pieData.length <= 0){
        return;
    }
    const chart = echarts.init(canvas, null, {
        width: 400,
        height: 250,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    var option = {
        backgroundColor: "#3C4043",
        series: [{
            label: {
                normal: {
                    fontSize: 14
                }
            },
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['0%', '70%'],
            data: pieData
        }]
    };
    chart.setOption(option);
    chart.on('click', 'series.pie', function(param) {
        console.log(param);
        wx.navigateTo({
            url: "./group/index?expendId=" + param.data.sId + '&rangeDate=' + param.data.sDate
        })
    });
    return chart;
}

function initLineChart1(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: 400,
        height: 300,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    var option = {
        legend: {
            data: ['支出', '收入', '转账','还款'],
            top: 20,
            left: 'center',
            backgroundColor: 'white',
            z: 100
        },
        grid: {
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            show: false
        },
        yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        series: [{
            name: '支出',
            type: 'line',
            smooth: true,
            data: [18, 36, 65, 30, 78, 40, 33,123,123,12,23,123,123,123,123,213,23,21,12,31,3,12,32,31,3,31,5,4324,1,74,123,43]
        }, {
            name: '收入',
            type: 'line',
            smooth: true,
            data: [12, 50, 51, 35, 70, 30, 20]
        }, {
            name: '转账',
            type: 'line',
            smooth: true,
            data: [10, 30, 31, 50, 40, 20, 10]
        }, {
            name: '还款',
            type: 'line',
            smooth: true,
            data: [50, 80, 11, 25, 30, 110, 20]
        }]
    };
    chart.setOption(option);
    return chart;
}
function initLineChart2(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: 400,
        height: 300,
        devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
    var option = {
        legend: {
            data: ['支出', '收入', '转账','还款'],
            top: 20,
            left: 'center',
            backgroundColor: 'white',
            z: 100
        },
        grid: {
            containLabel: true
        },
        tooltip: {
            show: true,
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            show: false
        },
        yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
            // show: false
        },
        series: [{
            name: '支出',
            type: 'line',
            smooth: true,
            data: [18, 36, 65, 30, 78, 40, 33]
        }, {
            name: '收入',
            type: 'line',
            smooth: true,
            data: [12, 50, 51, 35, 70, 30, 20]
        }, {
            name: '转账',
            type: 'line',
            smooth: true,
            data: [10, 30, 31, 50, 40, 20, 10]
        }, {
            name: '还款',
            type: 'line',
            smooth: true,
            data: [50, 80, 11, 25, 30, 110, 20]
        }]
    };
    chart.setOption(option);
    return chart;
}
const app = getApp();
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()
        }
    },
    updateView(){
        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})
            }
        })
        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
                        });
                    })
                }
                this.setData({payTypeList})
            }
        })
    },
    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()
        wx.redirectTo({url:"./index?rangeDate=" + this.data.showDate})
    }

});