鸿蒙跨端性能监控数据可视化看板设计与实现

实时性：秒级数据刷新，快速发现问题全面性：覆盖硬件资源到业务指标直观性：丰富的可视化图表呈现预警能力：主动发现问题而非被动处理。

qq_52190890

304人浏览 · 2025-06-16 18:08:39

qq_52190890 · 2025-06-16 18:08:39 发布

鸿蒙跨端性能监控数据可视化看板设计与实现

一、项目概述

基于HarmonyOS 5分布式能力构建的AGC（AppGallery Connect）性能监控数据可视化系统，专门针对《鸿蒙跨端U同步》中描述的多设备游戏场景，实时展示设备资源使用率、数据同步延迟等关键指标。该系统通过动态图表直观呈现分布式环境下的性能数据，帮助开发者优化跨设备协同体验。

二、核心架构设计

+---------------------+
|  数据采集层         |
|  (Data Collection)  |
+----------+----------+
           |
+----------v----------+    +---------------------+
|  数据处理中心       |<--->|  AGC性能数据服务    |
|  (Data Processor)   |    |  (AGC Service)      |
+----------+----------+    +---------------------+
           |
+----------v----------+
|  可视化展示层       |
|  (Visualization)    |
+---------------------+

三、资源数据采集模块

// 分布式性能数据采集器
public class PerformanceCollector {
    private static final String PERFORMANCE_KEY = "perf_metrics";
    private final DistributedDataManager dataManager;
    
    public PerformanceCollector(Context context) {
        this.dataManager = DistributedDataManagerFactory.getInstance()
            .createDistributedDataManager(context);
    }
    
    // 启动周期性采集
    public void startCollection(String sessionId) {
        ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();
        executor.scheduleAtFixedRate(() -> {
            PerformanceMetrics metrics = gatherMetrics();
            publishMetrics(sessionId, metrics);
        }, 0, 1, TimeUnit.SECONDS); // 每秒采集一次
    }
    
    private PerformanceMetrics gatherMetrics() {
        PerformanceMetrics metrics = new PerformanceMetrics();
        
        // CPU使用率采集
        metrics.setCpuUsage(getCpuUsage());
        
        // 内存使用情况
        metrics.setMemoryUsage(getMemoryUsage());
        
        // 网络状态
        metrics.setNetworkState(getNetworkState());
        
        // 分布式同步延迟
        metrics.setSyncLatency(getSyncLatency());
        
        return metrics;
    }
    
    private void publishMetrics(String sessionId, PerformanceMetrics metrics) {
        String json = new Gson().toJson(metrics);
        dataManager.putString(PERFORMANCE_KEY + "_" + sessionId, json);
    }
    
    // 获取CPU使用率（示例）
    private double getCpuUsage() {
        try {
            RandomAccessFile reader = new RandomAccessFile("/proc/stat", "r");
            String load = reader.readLine();
            String[] toks = load.split(" +");
            
            long idle1 = Long.parseLong(toks[4]);
            long cpu1 = Long.parseLong(toks[1]) + Long.parseLong(toks[2]) 
                      + Long.parseLong(toks[3]) + Long.parseLong(toks[4]);
            
            Thread.sleep(360);
            reader.seek(0);
            load = reader.readLine();
            reader.close();
            
            toks = load.split(" +");
            long idle2 = Long.parseLong(toks[4]);
            long cpu2 = Long.parseLong(toks[1]) + Long.parseLong(toks[2]) 
                      + Long.parseLong(toks[3]) + Long.parseLong(toks[4]);
            
            return 100.0 * ((cpu2 - cpu1) - (idle2 - idle1)) / (cpu2 - cpu1);
        } catch (Exception e) {
            return 0;
        }
    }
}

四、动态图表可视化实现

1. 实时折线图组件

public class RealtimeLineChart extends Component {
    private LineChart lineChart;
    private List<Entry> entries = new ArrayList<>();
    private int maxPoints = 60; // 显示60个数据点
    
    public RealtimeLineChart(Context context, AttrSet attrSet) {
        super(context, attrSet);
        initChart();
    }
    
    private void initChart() {
        lineChart = new LineChart(getContext());
        LineData lineData = new LineData();
        LineDataSet dataSet = new LineDataSet(entries, "性能指标");
        lineData.addDataSet(dataSet);
        lineChart.setData(lineData);
        
        // 配置图表样式
        lineChart.getDescription().setEnabled(false);
        lineChart.setDrawGridBackground(false);
        lineChart.setTouchEnabled(true);
        lineChart.setDragEnabled(true);
        lineChart.setScaleEnabled(true);
        lineChart.setPinchZoom(true);
    }
    
    public void addDataPoint(float value) {
        entries.add(new Entry(entries.size(), value));
        
        // 限制显示点数
        if (entries.size() > maxPoints) {
            entries.remove(0);
            // 更新所有点的X值
            for (int i = 0; i < entries.size(); i++) {
                entries.get(i).setX(i);
            }
        }
        
        lineChart.notifyDataSetChanged();
        lineChart.invalidate();
    }
    
    public void setMaxPoints(int max) {
        this.maxPoints = max;
    }
}

2. 多设备对比仪表盘

public class MultiDeviceDashboard extends StackLayout {
    private Map<String, DeviceChart> deviceCharts = new HashMap<>();
    private String currentSessionId;
    
    public MultiDeviceDashboard(Context context) {
        super(context);
        setOrientation(Component.VERTICAL);
    }
    
    public void startMonitoring(String sessionId) {
        this.currentSessionId = sessionId;
        
        // 注册设备加入监听
        DistributedDataManager.getInstance().registerDataChangeListener(
            "device_join_" + sessionId,
            new DataChangeListener() {
                @Override
                public void onDataChanged(String deviceId, String key, String value) {
                    addDeviceChart(deviceId);
                }
            });
        
        // 注册性能数据监听
        DistributedDataManager.getInstance().registerDataChangeListener(
            "perf_metrics_" + sessionId,
            new DataChangeListener() {
                @Override
                public void onDataChanged(String deviceId, String key, String value) {
                    PerformanceMetrics metrics = new Gson().fromJson(value, PerformanceMetrics.class);
                    updateDeviceChart(deviceId, metrics);
                }
            });
    }
    
    private void addDeviceChart(String deviceId) {
        getContext().getUITaskDispatcher().asyncDispatch(() -> {
            if (!deviceCharts.containsKey(deviceId)) {
                DeviceChart chart = new DeviceChart(getContext(), deviceId);
                deviceCharts.put(deviceId, chart);
                addComponent(chart);
            }
        });
    }
    
    private void updateDeviceChart(String deviceId, PerformanceMetrics metrics) {
        getContext().getUITaskDispatcher().asyncDispatch(() -> {
            DeviceChart chart = deviceCharts.get(deviceId);
            if (chart != null) {
                chart.updateData(metrics);
            }
        });
    }
}

class DeviceChart extends StackLayout {
    private RealtimeLineChart cpuChart;
    private RealtimeLineChart memoryChart;
    private RealtimeLineChart syncChart;
    private Text deviceNameText;
    
    public DeviceChart(Context context, String deviceId) {
        super(context);
        setOrientation(Component.VERTICAL);
        
        deviceNameText = new Text(context);
        deviceNameText.setText(deviceId);
        addComponent(deviceNameText);
        
        cpuChart = new RealtimeLineChart(context, null);
        cpuChart.setMaxPoints(30);
        addComponent(cpuChart);
        
        memoryChart = new RealtimeLineChart(context, null);
        memoryChart.setMaxPoints(30);
        addComponent(memoryChart);
        
        syncChart = new RealtimeLineChart(context, null);
        syncChart.setMaxPoints(30);
        addComponent(syncChart);
    }
    
    public void updateData(PerformanceMetrics metrics) {
        cpuChart.addDataPoint((float) metrics.getCpuUsage());
        memoryChart.addDataPoint((float) metrics.getMemoryUsage().getUsedPercent());
        syncChart.addDataPoint((float) metrics.getSyncLatency());
    }
}

五、游戏场景专项监控

public class GamePerformanceMonitor {
    private static final String GAME_PERF_KEY = "game_perf";
    private DistributedDataManager dataManager;
    
    public GamePerformanceMonitor(Context context) {
        this.dataManager = DistributedDataManagerFactory.getInstance()
            .createDistributedDataManager(context);
    }
    
    // 监控玩家数据同步性能
    public void monitorPlayerSync(String sessionId, String playerId) {
        dataManager.registerDataChangeListener(
            "player_data_" + playerId,
            new DataChangeListener() {
                private long lastUpdateTime;
                
                @Override
                public void onDataChanged(String deviceId, String key, String value) {
                    long currentTime = System.currentTimeMillis();
                    if (lastUpdateTime > 0) {
                        long latency = currentTime - lastUpdateTime;
                        reportSyncLatency(sessionId, playerId, latency);
                    }
                    lastUpdateTime = currentTime;
                }
            });
    }
    
    private void reportSyncLatency(String sessionId, String playerId, long latency) {
        GamePerfMetric metric = new GamePerfMetric();
        metric.setPlayerId(playerId);
        metric.setSyncLatency(latency);
        metric.setTimestamp(System.currentTimeMillis());
        
        dataManager.putString(
            GAME_PERF_KEY + "_" + sessionId + "_" + playerId,
            new Gson().toJson(metric)
        );
    }
    
    // 获取所有玩家同步延迟数据
    public List<GamePerfMetric> getAllPlayerMetrics(String sessionId) {
        List<String> playerIds = getSessionPlayers(sessionId);
        return playerIds.stream()
            .map(playerId -> dataManager.getString(GAME_PERF_KEY + "_" + sessionId + "_" + playerId))
            .filter(Objects::nonNull)
            .map(json -> new Gson().fromJson(json, GamePerfMetric.class))
            .collect(Collectors.toList());
    }
}

六、3D资源监控组件

public class Resource3DView extends ComponentContainer {
    private WebView webView;
    private String currentData;
    
    public Resource3DView(Context context) {
        super(context);
        init3DView();
    }
    
    private void init3DView() {
        webView = new WebView(getContext());
        addComponent(webView);
        
        // 加载3D图表库
        webView.load("file:///android_asset/echarts.html");
    }
    
    public void updateResourceData(ResourceUsageData data) {
        String jsonData = new Gson().toJson(data);
        if (!jsonData.equals(currentData)) {
            currentData = jsonData;
            String jsCode = "updateChart(" + jsonData + ");";
            webView.executeJs(jsCode);
        }
    }
}

// 示例HTML/JS部分
/*
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="echarts.min.js"></script>
    <script src="echarts-gl.min.js"></script>
</head>
<body>
    <div id="chart" style="width:100%;height:100%;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));
        var option = {
            tooltip: {},
            visualMap: {
                show: false,
                dimension: 2,
                min: 0,
                max: 100,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', 
                            '#abd9e9', '#e0f3f8', '#ffffbf', 
                            '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            xAxis3D: { type: 'value', name: 'CPU' },
            yAxis3D: { type: 'value', name: 'Memory' },
            zAxis3D: { type: 'value', name: 'Network' },
            grid3D: {
                viewControl: { autoRotate: true }
            },
            series: [{
                type: 'scatter3D',
                data: [],
                symbolSize: 12,
                itemStyle: {
                    opacity: 0.8
                }
            }]
        };
        chart.setOption(option);
        
        function updateChart(data) {
            var points = data.devices.map(function(device) {
                return [
                    device.cpuUsage,
                    device.memoryUsage,
                    device.networkUsage,
                    device.syncLatency
                ];
            });
            option.series[0].data = points;
            chart.setOption(option);
        }
    </script>
</body>
</html>
*/

七、告警与阈值配置

public class PerformanceAlert {
    private static final Map<String, Double> DEFAULT_THRESHOLDS = Map.of(
        "cpu", 90.0,
        "memory", 85.0,
        "sync_latency", 500.0
    );
    
    private Map<String, Double> thresholds;
    private AlertListener listener;
    
    public PerformanceAlert() {
        this(DEFAULT_THRESHOLDS);
    }
    
    public PerformanceAlert(Map<String, Double> customThresholds) {
        this.thresholds = new HashMap<>(customThresholds);
    }
    
    public void setAlertListener(AlertListener listener) {
        this.listener = listener;
    }
    
    public void checkMetrics(PerformanceMetrics metrics) {
        if (metrics.getCpuUsage() > thresholds.get("cpu")) {
            triggerAlert("CPU使用率过高: " + metrics.getCpuUsage() + "%");
        }
        
        if (metrics.getMemoryUsage().getUsedPercent() > thresholds.get("memory")) {
            triggerAlert("内存使用率过高: " + metrics.getMemoryUsage().getUsedPercent() + "%");
        }
        
        if (metrics.getSyncLatency() > thresholds.get("sync_latency")) {
            triggerAlert("同步延迟过高: " + metrics.getSyncLatency() + "ms");
        }
    }
    
    private void triggerAlert(String message) {
        if (listener != null) {
            listener.onAlertTriggered(message);
        }
    }
    
    public interface AlertListener {
        void onAlertTriggered(String message);
    }
}

八、集成示例

public class PerformanceMonitorAbilitySlice extends AbilitySlice {
    private MultiDeviceDashboard dashboard;
    private PerformanceCollector collector;
    private GamePerformanceMonitor gameMonitor;
    
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        
        String sessionId = intent.getStringParam("sessionId");
        
        // 初始化UI
        dashboard = new MultiDeviceDashboard(this);
        setUIContent(dashboard);
        
        // 初始化监控组件
        collector = new PerformanceCollector(this);
        collector.startCollection(sessionId);
        
        gameMonitor = new GamePerformanceMonitor(this);
        
        // 监控游戏玩家
        List<String> playerIds = getIntent().getStringArrayParam("playerIds");
        for (String playerId : playerIds) {
            gameMonitor.monitorPlayerSync(sessionId, playerId);
        }
        
        // 启动仪表盘
        dashboard.startMonitoring(sessionId);
        
        // 添加告警监听
        PerformanceAlert alert = new PerformanceAlert();
        alert.setAlertListener(message -> {
            getUITaskDispatcher().asyncDispatch(() -> {
                ToastDialog toastDialog = new ToastDialog(this);
                toastDialog.setText(message).show();
            });
        });
    }
}