Calculation/app/public/js/contract_panel.js

$(document).ready(function() {
    autoFlashHeight();

    const expensesPieValues = [
        {value: _.filter(expensesList, function (item) {
            return !item.settle_code && item.yf_price < item.total_price;
        }).length, name: '履行中'},
        {value: _.filter(expensesList, function (item) {
            return !item.settle_code && item.yf_price >= item.total_price;
        }).length, name: '已完成'},
        {value: _.filter(expensesList, function (item) {
            return !!item.settle_code;
        }).length, name: '已结算'}
    ];
    console.log(expensesPieValues);

    const expensesPieChart = echarts.init(document.getElementById('expensesPieChart'));
    const expensesPieOption = {
        color: ['#c7b8a1','#9ca8b8','#7b8b6f','#d8caaf'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            left: 0,
            data: ['履行中', '已完成', '已结算']
        },
        series: [
            {
                name: '合同',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: expensesPieValues,
            }
        ]
    };
    expensesPieChart.setOption(expensesPieOption);

    // 按create_time月份整理expensesList数据
    const expensesBarDatas = [];
    for (const expenses of expensesList) {
        const yearMonth = moment(expenses.create_time).format('YYYY年MM月');
        const ymExpenses = _.find(expensesBarDatas, { yearMonth });
        if (ymExpenses) {
            ymExpenses.yf_price = ZhCalc.add(ymExpenses.yf_price, expenses.yf_price);
        } else {
            expensesBarDatas.push({ yearMonth, yf_price: expenses.yf_price });
        }
    }
    for (const e of expensesBarDatas) {
        e.rate = ZhCalc.round(ZhCalc.div(e.yf_price, prices.expenses_total_price) * 100, 2);
    }
    console.log(expensesBarDatas);

    const expensesBarChart = echarts.init(document.getElementById('expensesBarChart'));
    const expensesBarOption = {
        color: ['#b5c4b1','#965454','#9ca8b8','#d8caaf'],
        title : {
            text: '支出合同结算趋势'
        },
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        legend: {
            data:['支付金额','占总金额比例']
        },
        dataZoom: [
            {show: true,start: 0, end: 100}
        ],
        xAxis : [
            {
                type : 'category',
                splitLine : {show : true},
                data : _.map(expensesBarDatas, 'yearMonth'),
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: '{value} 元'
                },
                splitArea : {show : true}
            },
            {
                type : 'value',
                name:'占总金额比例',
                axisLabel : {
                    formatter: '{value} %'
                },
                position: 'right',
                splitArea : {show : true}
            }
        ],
        series : [
            {
                name:'支付金额',
                type:'bar',
                tooltip : {formatter: "{b}<br/>{a}：{c} %"},
                stack: '结算金额',
                data: _.map(expensesBarDatas, 'yf_price'),
            },
            {
                name:'占总金额比例',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data: _.map(expensesBarDatas, 'rate'),
            },
        ]
    };
    expensesBarChart.setOption(expensesBarOption);

    const incomePieValues = [
        {value: _.filter(incomeList, function (item) {
                return !item.settle_code && item.yf_price < item.total_price;
            }).length, name: '履行中'},
        {value: _.filter(incomeList, function (item) {
                return !item.settle_code && item.yf_price >= item.total_price;
            }).length, name: '已完成'},
        {value: _.filter(incomeList, function (item) {
                return !!item.settle_code;
            }).length, name: '已结算'}
    ];
    console.log(incomePieValues);

    const incomePieChart = echarts.init(document.getElementById('incomePieChart'));
    const incomePieOption = {
        color: ['#c7b8a1','#9ca8b8','#7b8b6f','#d8caaf'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            left: 0,
            data: ['履行中', '已完成', '已结算']
        },
        series: [
            {
                name: '合同',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: incomePieValues,
            }
        ]
    };
    // 为echarts对象加载数据
    incomePieChart.setOption(incomePieOption);

    const incomeBarDatas = [];
    for (const income of incomeList) {
        const yearMonth = moment(income.create_time).format('YYYY年MM月');
        const ymIncome = _.find(incomeBarDatas, { yearMonth });
        if (ymIncome) {
            ymIncome.yf_price = ZhCalc.add(ymIncome.yf_price, income.yf_price);
        } else {
            incomeBarDatas.push({ yearMonth, yf_price: income.yf_price });
        }
    }
    for (const i of incomeBarDatas) {
        i.rate = ZhCalc.round(ZhCalc.div(i.yf_price, prices.income_total_price) * 100, 2);
    }
    console.log(incomeBarDatas);

    const incomeBarChart = echarts.init(document.getElementById('incomeBarChart'));
    const incomeBarOption = {
        color: ['#a27e7e','#656565','#b5c4b1','#d8caaf'],
        title : {
            text: '收入合同结算趋势'
        },
        tooltip : {
            trigger: 'axis'
        },
        calculable : true,
        legend: {
            data:['回款金额','占总金额比例']
        },
        dataZoom: [
            {show: true,start: 0, end: 100}
        ],
        xAxis : [
            {
                type : 'category',
                splitLine : {show : true},
                data : _.map(incomeBarDatas, 'yearMonth'),
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                position:'left',
                axisLabel : {
                    formatter: '{value} 元'
                },
                splitArea : {show : true}
            },
            {
                type : 'value',
                name:'占总金额比例',
                axisLabel : {
                    formatter: '{value} %'
                },
                position: 'right',
                splitArea : {show : true}
            }
        ],
        series : [
            {
                name:'回款金额',
                type:'bar',
                tooltip : {formatter: "{b}<br/>{a}：{c} %"},
                stack: '回款金额',
                data: _.map(incomeBarDatas, 'yf_price'),
            },
            {
                name:'占总金额比例',
                type:'line',
                tooltip : {trigger: 'axis',formatter: "{b}<br/>{a}：{c} %"},
                yAxisIndex: 1,
                data: _.map(incomeBarDatas, 'rate'),
            },
        ]
    };
    incomeBarChart.setOption(incomeBarOption);

    let resizeTimer = null;
    $(window).bind('resize', function () {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            echartsReset();
        }, 500);
    });
    function echartsReset() {
        expensesPieChart.resize();
        incomePieChart.resize();
        expensesBarChart.resize();
        incomeBarChart.resize();
    }

    $.subMenu({
        menu: '#sub-menu', miniMenu: '#sub-mini-menu', miniMenuList: '#mini-menu-list',
        toMenu: '#to-menu', toMiniMenu: '#to-mini-menu',
        key: 'menu.1.0.0',
        miniHint: '#sub-mini-hint', hintKey: 'menu.hint.1.0.1',
        callback: function (info) {
            if (info.mini) {
                $('.panel-title').addClass('fluid');
                $('#sub-menu').removeClass('panel-sidebar');
            } else {
                $('.panel-title').removeClass('fluid');
                $('#sub-menu').addClass('panel-sidebar');
            }
            autoFlashHeight();
        }
    });
});