添加销量数据图表功能,支持显示箱数和重量变化趋势,优化数据加载和空状态提示

master
huangjinysf 2 months ago
parent 237ea80f25
commit 4247533bf1

@ -902,6 +902,28 @@ const updateCharts = () => {
const totalNumberData = historyData.value.map(item => item.total_number);
//
let salesBoxCountData = [];
if (salesData.value && salesData.value.length > 0) {
//
const salesBoxCountMap = {};
salesData.value.forEach(item => {
const date = new Date(item.date);
const dateStr = `${date.getMonth() + 1}/${date.getDate()}`;
if (!salesBoxCountMap[dateStr]) {
salesBoxCountMap[dateStr] = 0;
}
salesBoxCountMap[dateStr] += item.box_count;
});
//
salesBoxCountData = timeData.map(timeStr => {
//
const dateStr = timeStr.split(' ')[0];
return salesBoxCountMap[dateStr] || 0;
});
}
const totalNumberOption = {
title: {
text: '总箱数变化趋势',
@ -911,12 +933,24 @@ const updateCharts = () => {
}
},
tooltip: {
trigger: 'axis'
trigger: 'axis',
formatter: function(params) {
let result = params[0].name + '<br/>';
params.forEach(param => {
result += `${param.seriesName}: ${param.value} 箱<br/>`;
});
return result;
}
},
legend: {
data: ['生产箱数', '销量箱数'],
top: 30
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: 60,
containLabel: true
},
xAxis: {
@ -930,17 +964,29 @@ const updateCharts = () => {
type: 'value',
name: '箱数'
},
series: [{
data: totalNumberData,
type: 'line',
smooth: true,
itemStyle: {
color: '#409EFF'
series: [
{
name: '生产箱数',
data: totalNumberData,
type: 'line',
smooth: true,
itemStyle: {
color: '#409EFF'
},
areaStyle: {
opacity: 0.3
}
},
areaStyle: {
opacity: 0.3
{
name: '销量箱数',
data: salesBoxCountData,
type: 'line',
smooth: true,
itemStyle: {
color: '#E6A23C'
}
}
}]
]
};
totalNumberChart.setOption(totalNumberOption, true); // true
}
@ -954,6 +1000,28 @@ const updateCharts = () => {
const totalNetWeightData = historyData.value.map(item => item.total_net_weight);
//
let salesWeightData = [];
if (salesData.value && salesData.value.length > 0) {
//
const salesWeightMap = {};
salesData.value.forEach(item => {
const date = new Date(item.date);
const dateStr = `${date.getMonth() + 1}/${date.getDate()}`;
if (!salesWeightMap[dateStr]) {
salesWeightMap[dateStr] = 0;
}
salesWeightMap[dateStr] += item.weight;
});
//
salesWeightData = timeData.map(timeStr => {
//
const dateStr = timeStr.split(' ')[0];
return salesWeightMap[dateStr] || 0;
});
}
const totalNetWeightOption = {
title: {
text: '总净重变化趋势',
@ -965,14 +1033,22 @@ const updateCharts = () => {
tooltip: {
trigger: 'axis',
formatter: function(params) {
return params[0].name + '<br/>' +
params[0].seriesName + ': ' + params[0].value + 'kg';
let result = params[0].name + '<br/>';
params.forEach(param => {
result += `${param.seriesName}: ${param.value} kg<br/>`;
});
return result;
}
},
legend: {
data: ['生产净重', '销量净重'],
top: 30
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: 60,
containLabel: true
},
xAxis: {
@ -986,18 +1062,29 @@ const updateCharts = () => {
type: 'value',
name: '重量(kg)'
},
series: [{
name: '总净重',
data: totalNetWeightData,
type: 'line',
smooth: true,
itemStyle: {
color: '#67C23A'
series: [
{
name: '生产净重',
data: totalNetWeightData,
type: 'line',
smooth: true,
itemStyle: {
color: '#67C23A'
},
areaStyle: {
opacity: 0.3
}
},
areaStyle: {
opacity: 0.3
{
name: '销量净重',
data: salesWeightData,
type: 'line',
smooth: true,
itemStyle: {
color: '#F56C6C'
}
}
}]
]
};
totalNetWeightChart.setOption(totalNetWeightOption, true); // true
}
@ -1011,6 +1098,28 @@ const updateCharts = () => {
const totalGrossWeightData = historyData.value.map(item => item.total_gross_weight);
//
let salesWeightData = [];
if (salesData.value && salesData.value.length > 0) {
//
const salesWeightMap = {};
salesData.value.forEach(item => {
const date = new Date(item.date);
const dateStr = `${date.getMonth() + 1}/${date.getDate()}`;
if (!salesWeightMap[dateStr]) {
salesWeightMap[dateStr] = 0;
}
salesWeightMap[dateStr] += item.weight;
});
//
salesWeightData = timeData.map(timeStr => {
//
const dateStr = timeStr.split(' ')[0];
return salesWeightMap[dateStr] || 0;
});
}
const totalGrossWeightOption = {
title: {
text: '总毛重变化趋势',
@ -1022,14 +1131,22 @@ const updateCharts = () => {
tooltip: {
trigger: 'axis',
formatter: function(params) {
return params[0].name + '<br/>' +
params[0].seriesName + ': ' + params[0].value + 'kg';
let result = params[0].name + '<br/>';
params.forEach(param => {
result += `${param.seriesName}: ${param.value} kg<br/>`;
});
return result;
}
},
legend: {
data: ['生产毛重', '销量重量'],
top: 30
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: 60,
containLabel: true
},
xAxis: {
@ -1043,18 +1160,29 @@ const updateCharts = () => {
type: 'value',
name: '重量(kg)'
},
series: [{
name: '总毛重',
data: totalGrossWeightData,
type: 'line',
smooth: true,
itemStyle: {
color: '#E6A23C'
series: [
{
name: '生产毛重',
data: totalGrossWeightData,
type: 'line',
smooth: true,
itemStyle: {
color: '#E6A23C'
},
areaStyle: {
opacity: 0.3
}
},
areaStyle: {
opacity: 0.3
{
name: '销量重量',
data: salesWeightData,
type: 'line',
smooth: true,
itemStyle: {
color: '#F56C6C'
}
}
}]
]
};
totalGrossWeightChart.setOption(totalGrossWeightOption, true); // true
}

Loading…
Cancel
Save