refactor(蒸汽曲线图表展示和数据处理): 优化y轴

- 修改了数据抽样和断点处理逻辑,提高图表性能- 优化了停电数据统计和导出功能
- 调整了图表轴设置和提示格式,提升用户体验
- 过滤了无效和负值数据,确保数据准确性

-当时间范围扩大,数据量增加时,Y轴的范围显示异常,尤其是瞬时流量和压力图表的Y轴刻度以及标题中显示的平均值都变成了非常大的负数,而温度图表则表现正常。
 这强烈暗示,在查询大数据量时,后端返回的原始数据中,针对“瞬时流量”和“压力”这两个字段,可能混入了一些表示极大负值的异常数据点(例如,字符串形式的 "-500000" 或者一个非常大的负数)。而“温度”数据则没有这类异常值。
 我们之前的修改解决了 NaN 值对平均值计算的影响,但如果原始数据本身就是一个有效的负数(即使它在业务上不合理),parseFloat 会正确转换它,isNaN 也不会将其过滤,所以它会参与平均值计算,并可能影响Echarts的Y轴自动范围判断。
 用户您调整的 oneHourMs(停电判断阈值从1小时改为2小时)本身不直接导致这个问题,但它可能会改变“停电”标记点的数量。如果停电标记点变少或没有,Echarts Y轴的最小值设定会更多地依赖其自身的自动计算逻辑 (return value.min)。若此时自动计算的 value.min 因异常数据而变得非常小(即巨大负数),问题就会显现。
 为了解决这个问题,并考虑到这些指标(瞬时流量、压力、温度)在业务上通常不应为负值,我将进行以下两处修改:
 在 processDataBreaks 函数中:修改平均值的计算逻辑。在对 fluxFlow、press、temperature这些字段计算平均值之前,我会过滤掉所有小于0的数值。这样可以确保平均值基于有效的、非负的数据进行计算。
 在 createChartOption 函数中:对于“瞬时流量”、“压力”、“温度”这三个图表,我会将Y轴的最小值 (option.yAxis.min) 强制设置为 0。这样可以确保Y轴从一个合理的基准开始,避免显示不切实际的巨大负范围。
master
zch 1 month ago
parent 6b0ca7a207
commit b5eda717e1

@ -484,7 +484,7 @@ export default {
const markPoints = []
const markAreas = []
const powerOutages = []
const oneHourMs = 60 * 60 * 1000 // 1
const oneHourMs = 2 * 60 * 60 * 1000 // 1
//
for (let i = 0; i < sortedData.length; i++) {
@ -497,7 +497,7 @@ export default {
const nextTime = new Date(sortedData[i + 1].recordTime).getTime()
const timeDiff = nextTime - currentTime
// 1
// 2
if (timeDiff > oneHourMs) {
// - 使null线
//
@ -567,7 +567,13 @@ export default {
//
const validData = processedData.filter(item => !item.isBreakPoint)
const validValues = validData.map(e => parseFloat(e[valueField]))
let validValues = validData.map(e => parseFloat(e[valueField]))
// ( NaN )
if (valueField === 'fluxFlow' || valueField === 'press' || valueField === 'temperature') {
validValues = validValues.filter(v => typeof v === 'number' && v >= 0);
}
// NaN
const validNumericValues = validValues.filter(v => !isNaN(v));
const average = validNumericValues.length > 0 ?
@ -655,6 +661,20 @@ export default {
color: '#000000'
};
// Y0
if (name === '瞬时流量' || name === '压力' || name === '温度') {
option.yAxis.min = 0;
} else {
// Echarts ()
if (dataResult.processedData.some(item => item.isBreakPoint)) {
option.yAxis.min = 0;
}
// Echartsmin
// else {
// option.yAxis.min = function(value) { return value.min; };
// }
}
//
option.tooltip.formatter = tooltipFormatter || function(params) {
const dataIndex = params[0].dataIndex;
@ -718,17 +738,6 @@ export default {
}
}];
// y0
if (!option.yAxis.min) {
option.yAxis.min = function(value) {
// 0
if (dataResult.processedData.some(item => item.isBreakPoint)) {
return 0;
}
return value.min;
};
}
return option;
},

Loading…
Cancel
Save