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