调整样式
This commit is contained in:
parent
cf2aadd89a
commit
5a8d76288c
@ -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;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user