fix(图表): 增加X轴标签显示数量并移除数据采样逻辑
将X轴最多显示的标签数量从20增加到40,并移除数据采样逻辑以显示完整数据
This commit is contained in:
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user