调整样式

This commit is contained in:
Flow 2025-07-18 16:12:45 +08:00
parent cf2aadd89a
commit 5a8d76288c

View File

@ -1640,6 +1640,27 @@
function renderTrendChart() { function renderTrendChart() {
const chart = echarts.init(document.getElementById('trend-chart')); const chart = echarts.init(document.getElementById('trend-chart'));
// 计算Y轴最大值向上取整到合适的倍数
const getYAxisMax = (arr, step = 20) => {
if (!arr || arr.length === 0) return step === 20 ? 200 : 120;
const validValues = arr.filter(v => v != null && !isNaN(v));
if (validValues.length === 0) return step === 20 ? 200 : 120;
const max = Math.max(...validValues);
return Math.ceil(max / step) * step;
};
// 提取有效的血压和心率数据
const systolicValues = chartDataTable.map(item => item.systolic);
const diastolicValues = chartDataTable.map(item => item.diastolic);
const heartRateValues = chartDataTable.map(item => item.heartRate);
// 计算血压数据的最大值(收缩压和舒张压合并考虑)
const bpValues = [...systolicValues, ...diastolicValues];
const bpMaxValue = getYAxisMax(bpValues, 20);
// 计算心率数据的最大值
const hrMaxValue = getYAxisMax(heartRateValues, 10);
// 完全参考analysis.vue的实现使用value类型的X轴显示精确时间位置 // 完全参考analysis.vue的实现使用value类型的X轴显示精确时间位置
const createBloodPressureXAxis = () => { const createBloodPressureXAxis = () => {
if (chartDataTable.length === 0) return { xAxisTicks: [], xAxisLabels: [], seriesMap: {} }; if (chartDataTable.length === 0) return { xAxisTicks: [], xAxisLabels: [], seriesMap: {} };
@ -1706,35 +1727,43 @@
// 计算夜间遮罩区域每一天的22点到次日8点使用时间戳方式 // 计算夜间遮罩区域每一天的22点到次日8点使用时间戳方式
const calculateNightAreas = () => { const calculateNightAreas = () => {
const nightAreas = []; const nightAreas = [];
const startTime = new Date(Math.min(...chartDataTable.map(item => new Date(item.originalTime).getTime()))); if (!chartDataTable || chartDataTable.length === 0) return nightAreas;
const endTime = new Date(Math.max(...chartDataTable.map(item => new Date(item.originalTime).getTime())));
// 从第一天开始循环,为每一天生成夜间区域 const times = chartDataTable.map(item => new Date(item.originalTime).getTime());
const startTime = Math.min(...times);
const endTime = Math.max(...times);
// 取起始日期的前一天
let currentDate = new Date(startTime); let currentDate = new Date(startTime);
currentDate.setHours(0, 0, 0, 0); // 设置为当天0点 currentDate.setDate(currentDate.getDate() - 1);
currentDate.setHours(0, 0, 0, 0);
while (currentDate <= endTime) { // 终止日期的后一天
// 当天22点 const lastDate = new Date(endTime);
lastDate.setDate(lastDate.getDate() + 1);
lastDate.setHours(0, 0, 0, 0);
while (currentDate <= lastDate) {
// 夜间开始当天22:00
const nightStart = new Date(currentDate); const nightStart = new Date(currentDate);
nightStart.setHours(22, 0, 0, 0); nightStart.setHours(22, 0, 0, 0);
// 次日8点 // 夜间结束次日08:00
const nightEnd = new Date(currentDate); const nightEnd = new Date(currentDate);
nightEnd.setDate(nightEnd.getDate() + 1); nightEnd.setDate(nightEnd.getDate() + 1);
nightEnd.setHours(8, 0, 0, 0); nightEnd.setHours(8, 0, 0, 0);
// 只有当夜间时段与数据时间范围有交集时才添加 // 只要遮罩区间和数据区间有交集就添加
if (nightStart <= endTime && nightEnd >= startTime) { if (nightEnd > startTime && nightStart < endTime) {
nightAreas.push([ nightAreas.push([
{ xAxis: Math.max(nightStart.getTime(), startTime.getTime()) }, { xAxis: Math.max(nightStart.getTime(), startTime) },
{ xAxis: Math.min(nightEnd.getTime(), endTime.getTime()) } { xAxis: Math.min(nightEnd.getTime(), endTime) }
]); ]);
} }
// 移动到下一天 // 下一天
currentDate.setDate(currentDate.getDate() + 1); currentDate.setDate(currentDate.getDate() + 1);
} }
return nightAreas; return nightAreas;
}; };
const nightAreas = calculateNightAreas(); const nightAreas = calculateNightAreas();
@ -1824,10 +1853,13 @@
{ {
type: 'value', type: 'value',
name: 'mmHg', name: 'mmHg',
nameTextStyle: {
color: '#000' // 设置为黑色
},
position: 'left', position: 'left',
min: 0, min: 0,
max: 200, max: bpMaxValue,
interval: 20, interval: Math.max(10, Math.round(bpMaxValue / 10)),
axisLabel: { axisLabel: {
color: '#666' color: '#666'
}, },
@ -1847,10 +1879,18 @@
{ {
type: 'value', type: 'value',
name: '次/分', name: '次/分',
nameTextStyle: {
color: '#000' // 设置为黑色
},
position: 'right', position: 'right',
min: 50, min: (() => {
max: 120, const validHRValues = heartRateValues.filter(v => v != null && !isNaN(v));
interval: 10, if (validHRValues.length === 0) return 50;
const minHR = Math.min(...validHRValues);
return Math.max(0, Math.floor(minHR / 10) * 10 - 10);
})(),
max: hrMaxValue,
interval: Math.max(5, Math.round(hrMaxValue / 10)),
axisLabel: { axisLabel: {
color: '#666' color: '#666'
}, },
@ -2467,7 +2507,7 @@
function getNighttimeData() { function getNighttimeData() {
return chartDataTable.filter(item => { return chartDataTable.filter(item => {
const hour = new Date(item.originalTime).getHours(); const hour = new Date(item.originalTime).getHours();
return hour < 6 || hour >= 22; return hour < 8 || hour >= 22;
}); });
} }