ECharts大数据量渲染性能优化指南

ECharts大数据量渲染性能优化指南

引用

CSDN

1.

https://blog.csdn.net/m0_74019046/article/details/139276507

当ECharts需要处理大量数据时，性能优化变得尤为重要。本文将介绍三种有效的优化方案：使用large优化、渐进渲染（progressive）以及appendData方法。通过这些技术手段，可以显著提升ECharts在大数据量场景下的渲染性能。

使用large优化

当数据量过大时，ECharts的渲染速度会明显下降。为了解决这个问题，ECharts提供了large优化选项。启用large优化后，ECharts会自动进行一些性能优化，但需要注意的是，此时将无法自定义设置单个数据项的样式。

largeThreshold参数

largeThreshold参数用于设置开启绘制优化的阈值。当数据量超过这个阈值时，ECharts会自动启用优化策略。

series: [
  {
    large: true,
    largeThreshold: 2000, // 在2000时开启优化
    type: "scatter",
    name: "line",
    data: data,
  },
],

使用渐进渲染（progressive）

渐进渲染是ECharts默认开启的一种优化策略，通过分批次渲染数据来提升性能。开发者可以通过调整相关参数来优化渲染效果。

progressive参数

progressive参数用于设置每一帧绘制的图形数量。合理设置这个参数可以平衡渲染速度和视觉效果。

series: [
  {
    progressive: 5000,
    type: "scatter",
    name: "line",
    data: data,
  },
],

progressiveThreshold参数

progressiveThreshold参数用于设置启用渐进式渲染的图形数量阈值。当数据量超过这个阈值时，ECharts会自动启用渐进渲染。

progressiveChunkMode参数

progressiveChunkMode参数用于设置分片渲染的模式，有两种可选值：

• sequential：按照数据的顺序分片。缺点是渲染过程不自然。
• mod：取模分片，即每个片段中的点会遍布于整个数据，从而能够视觉上均匀得渲染。

series: [
  {
    progressive: 5000,
    progressiveChunkMode: "mod",
    type: "scatter",
    name: "line",
    data: data,
  },
],

使用appendData

appendData方法允许在不重新渲染整个图表的情况下，动态添加数据。这对于需要实时更新数据的场景非常有用。

appendData与resize

使用appendData添加数据后，不会触发整个图表的重新渲染。如果需要重新渲染，可以调用resize()方法。而setOption方法则会触发整个图表的重新渲染。

let data = [];
let data1 = [];
let now = 0;
let current = 0;
for (let i = 0; i < 100000; i++) {
  if (now < 5000) {
    data1.push({
      value: i,
    });
    now++;
  } else {
    data.push(data1);
    data1 = [];
    now = 0;
  }
}

series: [
  {
    progressive: 5000,
    progressiveChunkMode: "mod",
    type: "scatter",
    name: "line",
    data: data[0],
  },
],

myEcharts.on("finished", () => {
  current++;
  if (current < data.length) {
    myEcharts.appendData({
      seriesIndex: 0,
      data: data[current],
    });
    myEcharts.resize();
  }
});