| ${used} | ${used_sum_price.format2Str('#,##0.######')} | ${(pay_sum_price ? ZhCalc.div(used_sum_price, pay_sum_price) * 100 : 0).toFixed(2)}% |
`;
payUsedOption.series[0].data.push({ value: used_sum_price, name: used });
}
}
pay_used_html += `| 合计 | ${pay_sum_price.format2Str('#,##0.######')} | |
`;
pay_used_html += `| 其中：小额支出 | ${small_expenses_sum_price.format2Str('#,##0.######')} | ${(pay_sum_price ? ZhCalc.div(small_expenses_sum_price, pay_sum_price) * 100 : 0).toFixed(2)}% |
`;
$('#pay_used_table').html(pay_used_html);
// 标段支出概况图表
tenderOption.xAxis[0].data = _.map(tenders, 'name');
tenderOption.dataZoom[0].start = 0;
tenderOption.dataZoom[0].end = computedPosition(tenders.length);
tenderOption.series[0].data = [];
tenderOption.series[1].data = [];
for (const t of tenders) {
const transferTenders = _.filter(transferTenderList, { tid: t.id });
const transfer_tender_price = ZhCalc.sum(_.map(transferTenders, 'hb_tp'));
const payTenders = _.filter(payList, { tid: t.id });
const pay_tender_price = ZhCalc.sum(_.map(payTenders, 'total_price'));
tenderOption.series[0].data.push(transfer_tender_price);
tenderOption.series[1].data.push(pay_tender_price);
}
tenderChart.setOption(tenderOption);
// 支出明细占比图表
payUsedChart.setOption(payUsedOption);
// 小额支出占比
paySeOption.series[0].data = [
{ value: small_expenses_sum_price, name: '小额支出' },
{ value: ZhCalc.sub(pay_sum_price, small_expenses_sum_price), name: '其他' },
];
paySeChart.setOption(paySeOption);
},
}
let resizeTimer = null;
$(window).bind('resize', function () {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
echartsReset();
}, 500);
})
function echartsReset() {
tenderChart.resize();
payUsedChart.resize();
paySeChart.resize();
}
// 计算显示滚动条长度
function computedPosition(xArrayLength) {
if (xArrayLength >= 8) {
return Math.floor(8 / xArrayLength * 100) > 100 ? 100 : Math.floor(8 / xArrayLength * 100);
// return length <= 10 ? 35 : 100 - Math.floor(35 / length * 100);
} else {
return 100;
}
}
//标段占比
const tenderChart = echarts.init(document.getElementById('jlchart3'));
const tenderOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
dataZoom: [
{
// brushSelect:false,
// zoomLock: false,
type: 'slider',
// show: true,
// realtime: true,
showdetail: false,
showDataShadow: false,
// // dataZoomIndex: 10,
start: 0,
end: 10,
height: 10,
bottom: '5%',
},
],
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisLabel: {
show: true,
interval: 0,
formatter: function(value) {
var res = value;
if(res.length > 8) {
res = res.substring(0, 7) + "..";
}
return res;
}
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '累计划拨',
type: 'bar',
emphasis: {
focus: 'series'
},
data: []
},
{
name: '累计支付',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: []
}
]
};
// tenderChart.setOption(tenderOption);
//费用明细占比//
const payUsedChart = echarts.init(document.getElementById('jlchart1'));
const payUsedOption = {
color: ['#9489fa', '#f06464', '#f7af59', '#f0da49', '#71c16f', '#2aaaef', '#5690dd', '#bd88f5', '#009db2', '#0780cf'],
//backgroundColor: '#343a40 ',
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left:'60%',
right:'20%',
top: 'middle'
},
series: [
{
name: '金额',
type: 'pie',
top:'20',
bottom:'20',
right:'40%',
radius: ['80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'right'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [],
}
]
};
// 为echarts对象加载数据
// myChart1.setOption(option1);
//小额支出概况//
var paySeChart = echarts.init(document.getElementById('jlchart2'));
var paySeOption = {
color: [ '#71c16f', '#2aaaef'],
//backgroundColor: '#343a40 ',
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left:'60%',
right: '20%',
top: 'middle'
},
series: [
{
name: '金额',
type: 'pie',
top:'20',
bottom:'20',
right:'40%',
radius: ['80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'right'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: []
}
]
};
// 为echarts对象加载数据
// myChart2.setOption(option2);
$.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();
echartsReset();
}
});
});