$(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}
{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}
{a}:{c} %"}, stack: '结算金额', data: _.map(expensesBarDatas, 'yf_price'), }, { name:'占总金额比例', type:'line', tooltip : {trigger: 'axis',formatter: "{b}
{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}
{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}
{a}:{c} %"}, stack: '回款金额', data: _.map(incomeBarDatas, 'yf_price'), }, { name:'占总金额比例', type:'line', tooltip : {trigger: 'axis',formatter: "{b}
{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(); } }); });