ECharts IoT物联网监控平台实战

📋 项目概述

构建物联网设备监控系统，实时展示设备状态、传感器数据、地理分布等信息。

核心功能

• ✅ 设备地图：地理位置可视化
• ✅ 实时监控：多传感器数据流
• ✅ 告警系统：异常检测与通知
• ✅ 历史趋势：时序数据分析
• ✅ 3D可视化：设备模型展示

---

💻 核心实现

1. 设备地理分布图

// components/IoT/DeviceMap.tsx
import React, { useMemo } from 'react';
import * as echarts from 'echarts/core';
import { ScatterChart, EffectScatterChart } from 'echarts/charts';
import {
  GeoComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import 'echarts/map/js/china.js';
import BaseChart from '@/components/Chart/BaseChart';

echarts.use([
  ScatterChart,
  EffectScatterChart,
  GeoComponent,
  TooltipComponent,
  LegendComponent,
  VisualMapComponent,
  CanvasRenderer
]);

interface Device {
  id: string;
  name: string;
  latitude: number;
  longitude: number;
  status: 'online' | 'offline' | 'warning';
  type: string;
  temperature?: number;
  humidity?: number;
}

interface DeviceMapProps {
  devices: Device[];
  onDeviceClick?: (device: Device) => void;
}

const DeviceMap: React.FC<DeviceMapProps> = ({ devices, onDeviceClick }) => {
  const option = useMemo(() => {
    // 按状态分组
    const onlineDevices = devices.filter(d => d.status === 'online');
    const offlineDevices = devices.filter(d => d.status === 'offline');
    const warningDevices = devices.filter(d => d.status === 'warning');

    return {
      backgroundColor: '#0f1419',
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          const device = params.data;
          return `
            <div style="padding: 12px; background: rgba(0,0,0,0.8); color: #fff; border-radius: 4px;">
              <div style="font-weight: bold; margin-bottom: 8px;">${device.name}</div>
              <div>类型: ${device.type}</div>
              <div>状态: ${getStatusText(device.status)}</div>
              ${device.temperature ? `<div>温度: ${device.temperature}°C</div>` : ''}
              ${device.humidity ? `<div>湿度: ${device.humidity}%</div>` : ''}
              <div>坐标: [${device.lng}, ${device.lat}]</div>
            </div>
          `;
        }
      },
      legend: {
        orient: 'vertical',
        right: 20,
        top: 20,
        data: ['在线设备', '离线设备', '告警设备'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        roam: true,
        zoom: 1.2,
        center: [105, 38],
        label: {
          show: false
        },
        itemStyle: {
          areaColor: '#1a2332',
          borderColor: '#2c3e50',
          borderWidth: 1
        },
        emphasis: {
          itemStyle: {
            areaColor: '#2c3e50'
          }
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 100,
        inRange: {
          symbolSize: [10, 30]
        }
      },
      series: [
        {
          name: '在线设备',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: onlineDevices.map(d => ({
            name: d.name,
            value: [d.longitude, d.latitude, 1],
            ...d
          })),
          symbolSize: 12,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
            scale: 3
          },
          itemStyle: {
            color: '#52c41a',
            shadowBlur: 10,
            shadowColor: '#52c41a'
          },
          emphasis: {
            scale: true
          }
        },
        {
          name: '离线设备',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: offlineDevices.map(d => ({
            name: d.name,
            value: [d.longitude, d.latitude, 1],
            ...d
          })),
          symbolSize: 10,
          itemStyle: {
            color: '#8c8c8c',
            opacity: 0.6
          }
        },
        {
          name: '告警设备',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: warningDevices.map(d => ({
            name: d.name,
            value: [d.longitude, d.latitude, 1],
            ...d
          })),
          symbolSize: 15,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke',
            scale: 5,
            period: 3
          },
          itemStyle: {
            color: '#ff4d4f',
            shadowBlur: 20,
            shadowColor: '#ff4d4f'
          },
          emphasis: {
            scale: true
          }
        }
      ]
    };
  }, [devices]);

  const handleClick = (params: any) => {
    if (onDeviceClick && params.data) {
      onDeviceClick(params.data);
    }
  };

  return (
    <BaseChart 
      option={option} 
      height={600}
      onClick={handleClick}
    />
  );
};

function getStatusText(status: string): string {
  const map: Record<string, string> = {
    online: '🟢 在线',
    offline: '⚫ 离线',
    warning: '🔴 告警'
  };
  return map[status] || status;
}

export default DeviceMap;

---

2. 多传感器实时监控

// components/IoT/SensorDashboard.tsx
import React from 'react';
import { useRecoilValue } from 'recoil';
import { sensorDataState } from '@/atoms/sensors';
import SensorGauge from './SensorGauge';
import SensorTrend from './SensorTrend';
import styles from './SensorDashboard.module.css';

interface SensorDashboardProps {
  deviceId: string;
}

const SensorDashboard: React.FC<SensorDashboardProps> = ({ deviceId }) => {
  const sensorData = useRecoilValue(sensorDataState(deviceId));

  return (
    <div className={styles.dashboard}>
      {/* 仪表盘区域 */}
      <div className={styles.gauges}>
        <SensorGauge
          title="温度"
          value={sensorData.temperature.current}
          unit="°C"
          min={-20}
          max={80}
          thresholds={{ warning: 60, critical: 70 }}
          color="#ff6b6b"
        />
        
        <SensorGauge
          title="湿度"
          value={sensorData.humidity.current}
          unit="%"
          min={0}
          max={100}
          thresholds={{ warning: 80, critical: 90 }}
          color="#4ecdc4"
        />
        
        <SensorGauge
          title="气压"
          value={sensorData.pressure.current}
          unit="hPa"
          min={900}
          max={1100}
          thresholds={{ warning: 1050, critical: 1080 }}
          color="#45b7d1"
        />
        
        <SensorGauge
          title="风速"
          value={sensorData.windSpeed.current}
          unit="m/s"
          min={0}
          max={50}
          thresholds={{ warning: 30, critical: 40 }}
          color="#f9ca24"
        />
      </div>

      {/* 趋势图区域 */}
      <div className={styles.trends}>
        <SensorTrend
          title="温度趋势 (24小时)"
          data={sensorData.temperature.history}
          metric="temperature"
          unit="°C"
        />
        
        <SensorTrend
          title="湿度趋势 (24小时)"
          data={sensorData.humidity.history}
          metric="humidity"
          unit="%"
        />
      </div>
    </div>
  );
};

export default SensorDashboard;

---

3. 传感器仪表盘

// components/IoT/SensorGauge.tsx
import React, { useMemo } from 'react';
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import BaseChart from '@/components/Chart/BaseChart';

echarts.use([GaugeChart, CanvasRenderer]);

interface SensorGaugeProps {
  title: string;
  value: number;
  unit: string;
  min: number;
  max: number;
  thresholds: {
    warning: number;
    critical: number;
  };
  color?: string;
}

const SensorGauge: React.FC<SensorGaugeProps> = ({
  title,
  value,
  unit,
  min,
  max,
  thresholds,
  color = '#5470c6'
}) => {
  const option = useMemo(() => {
    // 根据阈值确定颜色
    let gaugeColor = color;
    if (value >= thresholds.critical) {
      gaugeColor = '#ff4d4f';
    } else if (value >= thresholds.warning) {
      gaugeColor = '#faad14';
    }

    return {
      series: [
        {
          type: 'gauge',
          min,
          max,
          startAngle: 210,
          endAngle: -30,
          radius: '90%',
          center: ['50%', '55%'],
          
          // 进度条
          progress: {
            show: true,
            width: 18,
            itemStyle: {
              color: gaugeColor
            }
          },
          
          // 指针
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-60%'],
            itemStyle: {
              color: 'auto'
            }
          },
          
          // 轴线
          axisLine: {
            lineStyle: {
              width: 18,
              color: [
                [thresholds.warning / max, '#52c41a'],
                [thresholds.critical / max, '#faad14'],
                [1, '#ff4d4f']
              ]
            }
          },
          
          // 刻度
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -35,
            length: 14,
            lineStyle: {
              color: '#fff',
              width: 3
            }
          },
          
          // 标签
          axisLabel: {
            color: '#999',
            fontSize: 12,
            distance: -20,
            formatter: (value: number) => value.toString()
          },
          
          // 标题
          title: {
            offsetCenter: [0, '-20%'],
            fontSize: 14,
            color: '#666'
          },
          
          // 数值
          detail: {
            fontSize: 24,
            offsetCenter: [0, '0%'],
            valueAnimation: true,
            formatter: (value: number) => {
              return `{value|${value.toFixed(1)}}{unit|${unit}}`;
            },
            rich: {
              value: {
                fontSize: 24,
                fontWeight: 'bold',
                color: gaugeColor
              },
              unit: {
                fontSize: 14,
                color: '#999',
                padding: [0, 0, 0, 4]
              }
            }
          },
          
          data: [
            {
              value: value,
              name: title
            }
          ]
        }
      ]
    };
  }, [title, value, unit, min, max, thresholds, color]);

  return <BaseChart option={option} height={200} />;
};

export default SensorGauge;

---

4. 3D设备模型

// components/IoT/DeviceModel3D.tsx
import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import 'echarts-gl';

interface DeviceModel3DProps {
  deviceId: string;
  type: 'sensor' | 'camera' | 'gateway';
  data: any;
}

const DeviceModel3D: React.FC<DeviceModel3DProps> = ({ deviceId, type, data }) => {
  const chartRef = useRef<HTMLDivElement>(null);
  let chart: any = null;

  useEffect(() => {
    if (!chartRef.value) return;

    chart = echarts.init(chartRef.value);

    const option = {
      backgroundColor: '#000',
      tooltip: {},
      xAxis3D: {},
      yAxis3D: {},
      zAxis3D: {},
      grid3D: {
        viewControl: {
          projection: 'orthographic',
          autoRotate: true,
          autoRotateAfterStill: 3
        }
      },
      series: [{
        type: 'surface',
        wireframe: {
          show: true
        },
        equation: {
          x: [-5, 5],
          y: [-5, 5],
          z: function (x: number, y: number) {
            return Math.sin(x) + Math.cos(y);
          }
        }
      }]
    };

    chart.setOption(option);

    return () => {
      chart?.dispose();
    };
  }, [deviceId, type]);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

export default DeviceModel3D;

---

💎 总结

本实战案例展示了IoT监控的核心功能：

1. 地理分布：设备位置可视化
2. 实时监控：多传感器数据
3. 3D建模：设备立体展示
4. 告警系统：阈值检测

适用于智慧城市、工业物联网等场景。