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