实战案例总览

学习企业级ECharts项目架构，掌握复杂可视化系统设计与实现

📊 案例列表

案例名称	技术难度	核心特性	文档链接
电商数据大屏	⭐⭐⭐⭐	实时数据、多图表联动、自适应布局	查看详情
金融K线系统	⭐⭐⭐⭐⭐	K线图、技术指标、WebSocket推送	查看详情
实时监控大屏	⭐⭐⭐⭐	动态更新、告警规则、时序数据	查看详情
智慧物流可视化	⭐⭐⭐⭐	地图轨迹、路径优化、热力图	查看详情
IoT物联网监控	⭐⭐⭐⭐	设备监控、实时数据流	查看详情
用户行为分析	⭐⭐⭐	漏斗分析、转化追踪	查看详情

---

🎯 案例1: 电商数据大屏

项目背景

某电商平台需要构建一个实时数据监控大屏，用于双十一活动期间的业务监控。

需求分析

• ✅ 实时销售数据展示(更新频率: 1秒)
• ✅ 多维度数据钻取(全国→省份→城市)
• ✅ 支持4K大屏展示(3840x2160)
• ✅ 自适应不同分辨率
• ✅ 7x24小时稳定运行

技术栈

// 核心技术
- ECharts 5.x          // 图表库
- Vue 3                // 前端框架
- WebSocket            // 实时数据推送
- CSS Grid             // 响应式布局
- Screenfull.js        // 全屏控制

核心功能

1. 全国销售地图

{
  type: 'map',
  map: 'china',
  data: provinceData,
  visualMap: {
    min: 0,
    max: 100000,
    calculable: true,
    inRange: {
      color: ['#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
    }
  }
}

2. 实时销售趋势

{
  type: 'line',
  smooth: true,
  areaStyle: {},
  data: realTimeSales,
  animationDuration: 0  // 关闭动画提升性能
}

3. 品类占比饼图

{
  type: 'pie',
  radius: ['40%', '70%'],
  roseType: 'area',
  data: categoryData
}

性能优化

// 1. 数据更新优化
chart.setOption({
  series: [{ data: newData }]
}, { replaceMerge: ['series'] });

// 2. 防抖resize
const resizeObserver = new ResizeObserver(debounce(() => {
  chart.resize();
}, 100));

// 3. 内存管理
onUnmounted(() => {
  chart.dispose();
  ws.close();
});

项目成果

• 📈 支持100万+并发访问
• ⚡ 数据延迟 < 500ms
• 🖥️ 7x24小时无故障运行
• 📱 完美适配4K/2K/1080P

详细文档: 电商数据大屏完整实现

---

💹 案例2: 金融交易系统

项目背景

为证券公司开发专业的股票交易分析系统，支持实时行情和技术指标分析。

核心功能

1. K线主图

{
  type: 'candlestick',
  data: klineData, // [open, close, low, high]
  markLine: {
    data: [
      { type: 'average', valueIndex: 0 }, // MA5
      { type: 'average', valueIndex: 0, lineStyle: { color: '#ff0' } } // MA10
    ]
  }
}

2. MACD副图

{
  type: 'bar',
  data: macdData,
  markLine: {
    symbol: 'none',
    data: [{ yAxis: 0 }]
  }
}

3. 成交量

{
  type: 'bar',
  data: volumeData,
  itemStyle: {
    color: (params) => {
      return params.value[1] > params.value[0] ? '#ef232a' : '#14b143';
    }
  }
}

技术难点

1. 实时数据推送

const ws = new WebSocket('wss://quote.example.com');

ws.onmessage = (event) => {
  const tick = JSON.parse(event.data);
  
  // 增量更新K线数据
  const lastCandle = klineData[klineData.length - 1];
  if (tick.timestamp === lastCandle.timestamp) {
    // 更新当前K线
    lastCandle[2] = Math.max(lastCandle[2], tick.price);
    lastCandle[3] = Math.min(lastCandle[3], tick.price);
    lastCandle[1] = tick.price;
  } else {
    // 新增K线
    klineData.push([tick.open, tick.price, tick.high, tick.low]);
  }
  
  chart.setOption({ series: [{ data: klineData }] });
};

2. 技术指标计算

// MA均线
function calculateMA(dayCount, data) {
  const result = [];
  for (let i = 0; i < data.length; i++) {
    if (i < dayCount - 1) {
      result.push('-');
      continue;
    }
    let sum = 0;
    for (let j = 0; j < dayCount; j++) {
      sum += data[i - j][1];
    }
    result.push(+(sum / dayCount).toFixed(2));
  }
  return result;
}

// MACD指标
function calculateMACD(data) {
  const ema12 = calculateEMA(data, 12);
  const ema26 = calculateEMA(data, 26);
  const dif = ema12.map((v, i) => v - ema26[i]);
  const dea = calculateEMA(dif.map(v => typeof v === 'number' ? v : 0), 9);
  const macd = dif.map((v, i) => (typeof v === 'number' ? v : 0) - dea[i]);
  
  return { dif, dea, macd };
}

性能优化

// 1. 数据分片加载
const pageSize = 500;
let currentPage = 0;

function loadMoreData() {
  const start = currentPage * pageSize;
  const end = start + pageSize;
  const pageData = historicalData.slice(start, end);
  
  chart.setOption({
    series: [{ data: pageData }]
  });
  
  currentPage++;
}

// 2. DataZoom懒加载
{
  dataZoom: [{
    type: 'inside',
    start: 90,  // 默认显示最近10%数据
    end: 100
  }]
}

详细文档: 金融K线系统完整实现

---

🔍 案例3: 实时监控系统

项目背景

为云服务商构建服务器性能监控平台，实时监控1000+服务器的运行状态。

核心功能

1. CPU使用率监控

{
  type: 'line',
  smooth: true,
  showSymbol: false,
  data: cpuHistory,
  areaStyle: {
    opacity: 0.3
  },
  markLine: {
    data: [
      { yAxis: 80, label: { formatter: '警告线 80%' } },
      { yAxis: 95, label: { formatter: '危险线 95%' } }
    ]
  }
}

2. 网络流量监控

{
  type: 'line',
  stack: 'Total',
  areaStyle: {},
  data: [
    { name: '入站流量', data: inboundTraffic },
    { name: '出站流量', data: outboundTraffic }
  ]
}

3. 服务健康状态

{
  type: 'gauge',
  detail: { formatter: '{value}%' },
  data: [{ value: uptime, name: '可用率' }]
}

技术架构

数据采集 → Kafka → Flink(聚合) → InfluxDB(存储) 
                                    ↓
                              WebSocket推送
                                    ↓
                              ECharts实时渲染

关键技术

1. WebSocket心跳检测

let heartbeatTimer;

function connect() {
  const ws = new WebSocket('wss://monitor.example.com');
  
  ws.onopen = () => {
    console.log('连接成功');
    
    // 发送心跳
    heartbeatTimer = setInterval(() => {
      ws.send(JSON.stringify({ type: 'ping' }));
    }, 30000);
  };
  
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    
    if (data.type === 'pong') return;
    
    // 更新图表
    updateCharts(data.metrics);
  };
  
  ws.onclose = () => {
    clearInterval(heartbeatTimer);
    setTimeout(connect, 5000); // 5秒后重连
  };
}

2. 告警规则引擎

const alertRules = [
  { metric: 'cpu', operator: '>', threshold: 90, level: 'warning' },
  { metric: 'cpu', operator: '>', threshold: 95, level: 'critical' },
  { metric: 'memory', operator: '>', threshold: 85, level: 'warning' }
];

function checkAlerts(metrics) {
  alertRules.forEach(rule => {
    const value = metrics[rule.metric];
    
    if (eval(`${value} ${rule.operator} ${rule.threshold}`)) {
      triggerAlert({
        server: metrics.serverId,
        metric: rule.metric,
        value: value,
        level: rule.level
      });
    }
  });
}

详细文档: 实时监控大屏完整实现

---

📦 案例4: 智慧物流平台

项目背景

为物流公司开发智能调度系统，实现车辆轨迹追踪和路径优化。

核心功能

1. 实时车辆位置

{
  type: 'scatter',
  coordinateSystem: 'geo',
  data: vehicles.map(v => ({
    name: v.id,
    value: [v.lng, v.lat, v.speed]
  })),
  symbolSize: 15,
  itemStyle: { color: '#1890ff' }
}

2. 配送路径规划

{
  type: 'lines',
  coordinateSystem: 'geo',
  data: routes.map(route => ({
    coords: route.path, // [[lng1, lat1], [lng2, lat2], ...]
    lineStyle: {
      color: route.status === 'delivering' ? '#52c41a' : '#faad14'
    }
  }))
}

3. 订单密度热力图

{
  type: 'heatmap',
  coordinateSystem: 'geo',
  data: orderDensity,
  pointSize: 10,
  blurSize: 20
}

详细文档: 智慧物流可视化完整实现

---

🎓 学习建议

学习顺序

1. 电商大屏 - 入门级，理解基本架构
2. 监控大屏 - 进阶级，掌握实时更新
3. 物流可视化 - 高级，学习地理信息
4. 金融K线 - 专家级，深入性能优化

---

📚 相关资源

• 性能优化指南 - 优化技巧详解
• 工程化集成 - React/Vue集成方案

开始学习第一个案例 电商数据大屏！🚀