实时监控系统

实时监控系统的核心需求

实时监控系统需要满足数据高频更新、可视化展示、异常预警等核心功能。系统通常需要对接各类传感器、日志文件或API接口，以秒级甚至毫秒级频率获取数据。例如工业生产线上温度传感器每秒上传10次数据，服务器监控系统每分钟采集CPU负载指标。

数据延迟必须控制在合理范围内，一般要求从数据产生到展示在仪表盘上的时间差不超过3秒。对于金融交易类系统，这个要求可能更高，需要达到500毫秒以内。

ECharts在实时监控中的优势

ECharts作为百度开源的JavaScript可视化库，特别适合构建实时监控界面。其动态数据更新能力通过setOption方法实现，可以高效刷新图表而不需要重新渲染整个DOM结构。对比D3.js等底层库，ECharts的API更简洁，内置的时间轴、数据区域缩放等组件可直接用于监控场景。

// 基础实时折线图示例
let chart = echarts.init(document.getElementById('main'));
let option = {
  xAxis: { type: 'time' },
  yAxis: { type: 'value' },
  series: [{
    data: [],
    type: 'line',
    smooth: true
  }]
};
chart.setOption(option);

// 模拟实时数据更新
setInterval(() => {
  let newData = {
    name: new Date(),
    value: [new Date(), Math.random() * 100]
  };
  option.series[0].data.push(newData);
  // 保持最近100个数据点
  if(option.series[0].data.length > 100) {
    option.series[0].data.shift();
  }
  chart.setOption(option);
}, 500);

数据通信方案设计

实时监控系统通常采用以下通信方案组合：

1. WebSocket：用于高频数据传输，建立全双工通信通道
2. Server-Sent Events (SSE)：适用于服务器单向推送场景
3. 长轮询：兼容性最好的降级方案

// WebSocket连接示例
const socket = new WebSocket('wss://monitor.example.com/ws');

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  updateDashboard(data);
};

function updateDashboard(payload) {
  // 处理不同类型的数据更新
  switch(payload.type) {
    case 'cpu':
      cpuChart.setOption({
        series: [{ data: payload.values }]
      });
      break;
    case 'memory':
      memoryGauge.setOption({
        series: [{ data: [{ value: payload.usage }]}]
      });
  }
}

性能优化策略

大数据量场景下需要特别注意渲染性能：

1. 数据采样：对历史数据采用降采样算法，如LTTB(Largest-Triangle-Three-Buckets)
2. 渲染控制：使用throttle限制更新频率
3. Web Worker：将数据处理移出主线程

// 使用LTTB算法采样
function downsample(data, threshold) {
  if (data.length <= threshold) return data;
  
  const sampled = [];
  const bucketSize = data.length / threshold;
  let a = 0;
  
  for (let i = 0; i < threshold; i++) {
    const bucketStart = Math.floor(i * bucketSize);
    const bucketEnd = Math.min(Math.floor((i + 1) * bucketSize), data.length - 1);
    
    let maxArea = -1;
    let selectedPoint;
    
    for (let j = bucketStart + 1; j < bucketEnd; j++) {
      const area = calculateTriangleArea(
        data[a], data[j], data[bucketEnd]
      );
      if (area > maxArea) {
        maxArea = area;
        selectedPoint = data[j];
      }
    }
    
    sampled.push(selectedPoint || data[bucketEnd]);
    a = bucketEnd;
  }
  
  return sampled;
}

异常检测与预警

实时监控系统需要内置智能检测算法：

1. 阈值告警：静态规则配置
2. 动态基线：基于历史数据自动计算合理范围
3. 机器学习：使用孤立森林等算法检测异常点

// 动态基线计算示例
function calculateBaseline(historyData) {
  const values = historyData.map(d => d.value);
  const mean = values.reduce((a,b) => a + b, 0) / values.length;
  const stdDev = Math.sqrt(
    values.reduce((sq, n) => sq + Math.pow(n - mean, 2), 0) / values.length
  );
  
  return {
    upper: mean + 3 * stdDev,
    lower: mean - 3 * stdDev,
    current: values[values.length - 1]
  };
}

// 预警判断
function checkAlert(baseline) {
  if (baseline.current > baseline.upper) {
    showAlert('数值超过上限阈值');
  } else if (baseline.current < baseline.lower) {
    showAlert('数值低于下限阈值');
  }
}

多视图协同分析

复杂系统需要多图表联动：

1. 使用connect方法建立图表关联
2. 实现刷选（brush）操作跨视图筛选
3. 共享数据状态管理

// 图表联动示例
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

// 建立联动
echarts.connect([chart1, chart2]);

// 共享时间范围
chart1.on('dataZoom', (params) => {
  const option = chart1.getOption();
  const startValue = option.dataZoom[0].startValue;
  const endValue = option.dataZoom[0].endValue;
  
  chart2.dispatchAction({
    type: 'dataZoom',
    startValue: startValue,
    endValue: endValue
  });
});

移动端适配方案

移动设备上的监控界面需要特殊处理：

1. 响应式布局：使用resize事件自动调整图表尺寸
2. 触摸优化：启用手势缩放和平移
3. 性能调优：减少渲染数据点数量

// 响应式处理
window.addEventListener('resize', () => {
  chart.resize();
});

// 移动端配置选项
const mobileOptions = {
  dataZoom: [{
    type: 'inside',
    filterMode: 'filter',
    zoomOnMouseWheel: false,
    moveOnMouseMove: true
  }],
  tooltip: {
    position: function(pos, params, dom, rect, size) {
      return [pos[0], 10];
    }
  }
};

数据持久化与回溯

监控系统需要记录历史数据用于事后分析：

1. 前端本地存储：IndexedDB存储近期数据
2. 截图保存：使用getDataURL导出图表状态
3. 时间旅行：实现历史数据回放功能

// 使用IndexedDB存储数据
const dbRequest = indexedDB.open('MonitorDB', 1);

dbRequest.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('metrics', { keyPath: 'timestamp' });
};

function saveData(timestamp, metric, value) {
  const transaction = db.transaction(['metrics'], 'readwrite');
  const store = transaction.objectStore('metrics');
  store.put({ timestamp, metric, value });
}

// 历史回放功能
function playHistory(startTime, endTime) {
  const range = IDBKeyRange.bound(startTime, endTime);
  const request = store.getAll(range);
  
  request.onsuccess = (event) => {
    const data = event.target.result;
    animateData(data);
  };
}

主题与样式定制

企业级监控系统通常需要品牌化定制：

1. 颜色主题：通过theme对象配置
2. 暗黑模式：动态切换主题配色
3. 自定义组件：扩展ECharts原生功能

// 自定义主题
const customTheme = {
  color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9'],
  backgroundColor: '#f5f5f5',
  textStyle: {
    fontFamily: 'Arial, sans-serif'
  }
};
echarts.registerTheme('corporate', customTheme);

// 动态切换暗黑模式
function toggleDarkMode() {
  const isDark = document.body.classList.toggle('dark-mode');
  chart.setOption({
    backgroundColor: isDark ? '#222' : '#fff',
    textStyle: { color: isDark ? '#eee' : '#333' }
  });
}

安全与权限控制

生产环境监控系统需要考虑：

1. 数据加密：WebSocket使用wss协议
2. 访问控制：基于角色的视图过滤
3. 操作审计：记录关键配置变更

// 权限敏感配置
function setupRoleBasedView(userRole) {
  const options = {
    toolbox: {
      show: userRole === 'admin',
      feature: {
        saveAsImage: userRole === 'admin',
        dataView: userRole === 'analyst'
      }
    }
  };
  chart.setOption(options);
}

// 敏感操作审计
function logAction(action) {
  fetch('/api/audit', {
    method: 'POST',
    body: JSON.stringify({
      user: currentUser,
      action: action,
      timestamp: new Date()
    })
  });
}