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,
symbolSize: 5,
itemStyle: {
color: '#06b6d4',
shadowBlur: 3,
shadowColor: 'rgba(6, 182, 212, 0.5)'
color: '#06b6d4'
},
data: []
}]
@@ -945,9 +943,7 @@
geoIndex: 0,
symbolSize: 6,
itemStyle: {
color: '#06b6d4',
shadowBlur: 3,
shadowColor: 'rgba(6, 182, 212, 0.5)'
color: '#06b6d4'
},
data: geoData,
zlevel: 1,
@@ -1047,14 +1043,14 @@
effect: {
show: true,
period: period,
trailLength: 0.1,
color: 'rgba(99, 102, 241, 0.8)',
symbol: 'arrow',
symbolSize: 6
trailLength: 0.05, // Shorter trail = less GPU pixels to process
color: 'rgba(99, 102, 241, 0.6)',
symbol: 'circle', // Simpler symbol than arrow
symbolSize: 4 // Smaller symbol
},
lineStyle: {
color: 'rgba(99, 102, 241, 0.3)',
width: 2,
color: 'rgba(99, 102, 241, 0.2)',
width: 1.5,
curveness: finalCurve
},
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
this.prevMaxVal = this.currentMaxVal || 0;
// Downsample if data is too dense (target ~1500 points for performance)
const MAX_POINTS = 1500;
// Downsample if data is too dense (target ~500 points for GPU performance)
const MAX_POINTS = 500;
if (data.timestamps.length > MAX_POINTS) {
const skip = Math.ceil(data.timestamps.length / MAX_POINTS);
const downsampled = { timestamps: [], rx: [], tx: [] };
@@ -112,7 +112,7 @@ class AreaChart {
animate() {
if (this.animFrame) cancelAnimationFrame(this.animFrame);
const start = performance.now();
const duration = 800;
const duration = 400; // Shorter animation = less GPU time
const step = (now) => {
const elapsed = now - start;
@@ -277,7 +277,7 @@ class AreaChart {
drawArea(ctx, values, prevValues, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
if (!values || values.length === 0) return;
const useSimple = len > 250;
const useSimple = len > 80;
const getPVal = (i) => (prevValues && i < prevValues.length) ? prevValues[i] : 0;
// Fill
@@ -407,7 +407,7 @@ class MetricChart {
animate() {
if (this.animFrame) cancelAnimationFrame(this.animFrame);
const start = performance.now();
const duration = 500;
const duration = 300; // Snappier and lighter on GPU
const step = (now) => {
const elapsed = now - start;
this.animProgress = Math.min(elapsed / duration, 1);
@@ -560,7 +560,7 @@ class MetricChart {
});
} else {
const useSimple = len > 250;
const useSimple = len > 100;
const prevVals = this.prevData ? this.prevData.values : null;
const getPVal = (i) => (prevVals && i < prevVals.length) ? prevVals[i] : 0;