CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

进一步优化

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-07 00:29:46 +08:00
parent 09887b52d0
commit f169dd4267
2 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/js/app.js
View File

@@ -845,9 +845,7 @@
geoIndex: 0, geoIndex: 0,
symbolSize: 5, symbolSize: 5,
itemStyle: { itemStyle: {
color: '#06b6d4', color: '#06b6d4'
shadowBlur: 3,
shadowColor: 'rgba(6, 182, 212, 0.5)'
}, },
data: [] data: []
}] }]
@@ -945,9 +943,7 @@
geoIndex: 0, geoIndex: 0,
symbolSize: 6, symbolSize: 6,
itemStyle: { itemStyle: {
color: '#06b6d4', color: '#06b6d4'
shadowBlur: 3,
shadowColor: 'rgba(6, 182, 212, 0.5)'
}, },
data: geoData, data: geoData,
zlevel: 1, zlevel: 1,
@@ -1047,14 +1043,14 @@
effect: { effect: {
show: true, show: true,
period: period, period: period,
trailLength: 0.1, trailLength: 0.05, // Shorter trail = less GPU pixels to process
color: 'rgba(99, 102, 241, 0.8)', color: 'rgba(99, 102, 241, 0.6)',
symbol: 'arrow', symbol: 'circle', // Simpler symbol than arrow
symbolSize: 6 symbolSize: 4 // Smaller symbol
}, },
lineStyle: { lineStyle: {
color: 'rgba(99, 102, 241, 0.3)', color: 'rgba(99, 102, 241, 0.2)',
width: 2, width: 1.5,
curveness: finalCurve curveness: finalCurve
}, },
progressive: 50, // Progressive rendering for GPU offload progressive: 50, // Progressive rendering for GPU offload

12
public/js/chart.js
View File

@@ -64,8 +64,8 @@ class AreaChart {
// Smoothly transition max value context too // Smoothly transition max value context too
this.prevMaxVal = this.currentMaxVal || 0; this.prevMaxVal = this.currentMaxVal || 0;
// Downsample if data is too dense (target ~1500 points for performance) // Downsample if data is too dense (target ~500 points for GPU performance)
const MAX_POINTS = 1500; const MAX_POINTS = 500;
if (data.timestamps.length > MAX_POINTS) { if (data.timestamps.length > MAX_POINTS) {
const skip = Math.ceil(data.timestamps.length / MAX_POINTS); const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
const downsampled = { timestamps: [], rx: [], tx: [] }; const downsampled = { timestamps: [], rx: [], tx: [] };
@@ -112,7 +112,7 @@ class AreaChart {
animate() { animate() {
if (this.animFrame) cancelAnimationFrame(this.animFrame); if (this.animFrame) cancelAnimationFrame(this.animFrame);
const start = performance.now(); const start = performance.now();
const duration = 800; const duration = 400; // Shorter animation = less GPU time
const step = (now) => { const step = (now) => {
const elapsed = now - start; const elapsed = now - start;
@@ -277,7 +277,7 @@ class AreaChart {
drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) { drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
if (!values || values.length === 0) return; if (!values || values.length === 0) return;
const useSimple = len > 250; const useSimple = len > 80;
const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0; const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0;
// Fill // Fill
@@ -407,7 +407,7 @@ class MetricChart {
animate() { animate() {
if (this.animFrame) cancelAnimationFrame(this.animFrame); if (this.animFrame) cancelAnimationFrame(this.animFrame);
const start = performance.now(); const start = performance.now();
const duration = 500; const duration = 300; // Snappier and lighter on GPU
const step = (now) => { const step = (now) => {
const elapsed = now - start; const elapsed = now - start;
this.animProgress = Math.min(elapsed / duration, 1); this.animProgress = Math.min(elapsed / duration, 1);
@@ -560,7 +560,7 @@ class MetricChart {
}); });
} else { } else {
const useSimple = len > 250; const useSimple = len > 100;
const prevVals = this.prevData ? this.prevData.values : null; const prevVals = this.prevData ? this.prevData.values : null;
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0; const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;