$(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();
}
});
});