fix(图表): 增加X轴标签显示数量并移除数据采样逻辑

将X轴最多显示的标签数量从20增加到40,并移除数据采样逻辑以显示完整数据
This commit is contained in:
砂糖
2025-12-22 14:45:00 +08:00
parent ddb406533b
commit 87fb87fa4f

View File

@@ -66,7 +66,7 @@ export default {
minValue: 0,
avgValue: 0,
loading: false,
maxXAxisLabels: 20 // X轴最多显示的标签数量
maxXAxisLabels: 40 // X轴最多显示的标签数量
}
},
watch: {
@@ -156,14 +156,14 @@ export default {
this.originalChartData = rawData.map(item => parseFloat(item.value));
// 根据数据量决定是否采样
if (rawData.length > this.maxXAxisLabels) {
// 数据采样 - 均匀采样
this.sampleData(rawData);
} else {
// if (rawData.length > this.maxXAxisLabels) {
// // 数据采样 - 均匀采样
// this.sampleData(rawData);
// } else {
// 数据量适中,直接使用全部数据
this.timeStamps = this.originalTimeStamps;
this.chartData = this.originalChartData;
}
// }
// 计算统计值(基于原始数据)
if (this.originalChartData.length) {
@@ -236,21 +236,21 @@ export default {
xAxis: {
type: 'category',
boundaryGap: false,
data: this.timeStamps,
axisLine: {
lineStyle: {
color: '#d4d4d4'
}
},
axisLabel: {
color: '#666',
rotate: 45,
// 动态计算标签显示间隔
interval: (index, value) => {
// 如果数据量大于maxXAxisLabels按采样后的间隔显示
return index % Math.max(1, Math.ceil(this.timeStamps.length / this.maxXAxisLabels)) === 0;
}
},
// data: this.timeStamps,
// axisLine: {
// lineStyle: {
// color: '#d4d4d4'
// }
// },
// axisLabel: {
// color: '#666',
// rotate: 45,
// // 动态计算标签显示间隔
// interval: (index, value) => {
// // 如果数据量大于maxXAxisLabels按采样后的间隔显示
// return index % Math.max(1, Math.ceil(this.timeStamps.length / this.maxXAxisLabels)) === 0;
// }
// },
splitLine: {
show: false
}