为什么echarts加载很慢

ECharts 加载很慢，通常由资源、数据、渲染、使用方式几类原因导致。下面按常见程度给你梳理，并给出对应优化建议。

一、资源加载慢（最常见）

1. 引入的是完整版 echarts

• echarts.min.js 完整包约 1MB+，网络差时很慢。
• ✅ 优化：
  • 使用 按需引入（tree-shaking）

  import * as echarts from 'echarts/core'
  import { BarChart } from 'echarts/charts'
  import { GridComponent } from 'echarts/components'
  

  • 或用 CDN + gzip

  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  

2. 没做缓存 / 没开 gzip

• 服务器未开启 gzip / brotli
• ✅ 优化：
  • 开启服务端压缩
  • 设置长缓存（Cache-Control）

二、数据量太大

1. 数据点过多（几万～上百万）

• line / scatter 很容易卡
• ✅ 优化：
  • 使用 sampling: 'lttb'

  series: [{
    type: 'line',
    sampling: 'lttb'
  }]
  

  • 降采样（后端聚合）
  • 使用 large: true

  series: [{
    type: 'scatter',
    large: true,
    largeThreshold: 2000
  }]
  

三、渲染方式问题

1. 使用 SVG 渲染大量数据

• SVG 适合少量数据，大量数据慢
• ✅ 优化：

  echarts.init(dom, null, { renderer: 'canvas' })
  

2. 频繁 setOption

• 每次 setOption 都重绘
• ✅ 优化：
  • 使用 setOption(option, true) 谨慎
  • 数据更新用 notMerge: false
  • 用 appendData（流数据）

四、DOM / 页面问题

1. 容器尺寸异常

• 宽高为 0 或频繁 resize
• ✅ 优化：
  • 保证容器有固定宽高
  • 防抖 resize

  window.addEventListener('resize', debounce(() => chart.resize()))
  

2. 同时渲染太多图表

• 一个页面 10+ 图表
• ✅ 优化：
  • 懒加载（滚动到可视区再 init）
  • 分页 / tab 切换

五、后端 / 接口慢

• 接口返回慢 → 图表自然慢
• ✅ 优化：
  • 接口分页
  • 前端 loading
  • 后端预聚合

快速自查清单 ✅

1. 是否用了完整版 echarts？
2. 数据是否 > 1万条？
3. 是否用 canvas？
4. 是否频繁 setOption？
5. 接口是否慢？

如果你愿意，可以告诉我：

• 用的 echarts 版本
• 图表 类型（line / bar / map）
• 数据 大概量级
• 是 首屏慢 还是 更新慢

我可以直接帮你给出针对性优化方案或代码示例。