echarts大量数据性能优化处理

最新推荐文章于 2025-04-07 10:24:02 发布

海绵宝龙

最新推荐文章于 2025-04-07 10:24:02 发布

阅读量3k

点赞数 17

分类专栏： echarts 文章标签： echarts nginx 前端

本文链接：https://blog.csdn.net/weixin_46504400/article/details/143818520

版权

当使用 ECharts 渲染大规模数据时，可能会出现性能问题例如渲染卡顿。这通常是因为浏览器在处理大量的 DOM 节点时会变得相当缓慢。

关闭动画：ECharts默认的动画效果会消耗一些性能，对于大数据量的图表，可以尝试关闭动画。
在数据量特别大的时候，为图形应用动画可能会导致应用的卡顿，这个时候我们可以设置animation: false关闭动画。
对于数据量会动态变化的图表，我们更推荐使用animationThreshold这个配置项，当画布中图形数量超过这个阈值的时候，ECharts 会自动关闭动画来提升绘制性能。这个配置往往是一个经验值，通常 ECharts 的性能足够实时渲染上千个图形的动画（我们默认值也是给了 2000），但是如果你的图表很复杂，或者你的用户环境比较恶劣，页面中又同时会运行很多其它复杂的代码，也可以适当的下调这个值保证整个应用的流畅性。

let option = {
   
  animation: false,
  series: [
    // ...
  ]
};
echarts.setOption(option);

使用 large 模式： ECharts 在 series 中提供了一个 large选项，当数据量特别大（如超过千条数据）时，可以尝试开启 large 模式，此模式下会对绘制进行优化。

let option = {
   
  series: [
    {
   
      type: 'scatter',
      large: true,
      data: largeData,
    },
  ],
};
echarts.setOption(option);

启用进度渲染：对于特别大的数据集，我们可以启用 ECharts
的渲染进度条。这可以让用户知道渲染的进度，同时也可以避免浏览器在渲染过程中出现无响应的现象。

这需要在初始化 ECharts 实例时，将 option 中的 progressive 和 progressiveThreshold 属性设置为合适的值。在数据量大于 progressiveThreshold 时，图表会启用渐进渲染。

let option = {
   
  series: [{
   
    type: 'lines',
    data: largeData,
    // 开启渐进式渲染
    progressive: 2000,
    // 渲染阈值，大于此值则启动渐进渲染
    progressiveThreshold: 5000,
  }],
};
echarts.setOption(option);

增加滑动轴和懒加载

const option = {
   
...
dataZoom: [
    {
   
      type: 'slider',
      xAxisIndex: 0,
      filterMode: 'none'
    }
  ]
...
}

myChart.on('dataZoom', function (params) {
   
...
｝

这种方法能够很好展示部分区间的数据，但是缺点也很明显，很难看到全局的数据，而且要重复的请求和监听，这对于大屏来说无疑不太合适

数据降维或者降采样

折线图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点。

可选：


var option = {
   
  series: {
   
    type: "line",
    sampling: "lttb", // 最大程度保证采样后线条的趋势，形状和极值。
  },
};


'lttb' 采用 Largest-Triangle-Three-Bucket 算法，可以最大程度保证采样后线条的趋势，形状和极值。
'average' 取过滤点的平均值
'min' 取过滤点的最小值
'max' 取过滤点的最大值
'minmax' 取过滤点绝对值的最大极值 (从 v5.5.0 开始支持)
'sum' 取过滤点的和