ECharts大数据量性能优化实战

ECharts大数据量性能优化实战

引用

CSDN

1.

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

在数据可视化项目中，ECharts是一个非常强大的工具库。然而，当需要处理大量数据时，ECharts的性能可能会受到影响。本文将介绍三种优化ECharts性能的方法：使用large优化、渐进渲染（progressive）以及appendData方法。这些方法可以帮助开发者在保证数据完整性的前提下，提升图表的渲染速度和用户体验。

当ECharts需要渲染大量数据时，其性能可能会受到影响，导致渲染速度变慢。例如，当数据量达到100000条时，直接渲染可能会导致页面卡顿。下面是一个简单的示例代码：

let data = [];
for (let i = 0; i < 100000; i++) {
  let style = {};
  if (i % 2 == 0) {
    style.color = "red";
  }
  data.push({
    value: i,
    itemStyle: style,
  });
}
myEcharts = init(canvas, null, {
    width: 500,
    height: 500,
    devicePixelRatio: window.devicePixelRatio,
    locale: "ZH",
  });
  options = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: data.map((item) => item.data),
    },
    yAxis: {},
    series: [
      {
        type: "scatter",
        name: "line",
        data: data,
      },
    ],
  };

使用 large 优化

large优化是ECharts提供的一种针对大数据量的优化方案。当数据量超过设定的阈值时，ECharts会自动启用优化模式，减少不必要的渲染操作。但是，使用large优化后不能自定义设置单个数据项的样式。

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

使用渐进渲染 progressive

渐进渲染是ECharts的默认优化策略，通过分批次渲染数据来提升性能。开发者可以通过调节progressive参数来控制每批次渲染的数据量。

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

progressiveThreshold参数用于设置启用渐进式渲染的图形数量阈值。progressiveChunkMode参数则用于设置分片的方式，有以下两种模式：

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

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

使用 appendData

appendData方法允许开发者分批次添加数据，而不需要重新渲染整个图表。这在处理大数据量时非常有用，可以显著提升性能。

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();
    }
  });

appendData方法在添加完数据后，不会重新渲染整个图表，而是通过调用.resize()方法来更新视图。这与setOption方法不同，后者会重新渲染整个图表。

通过以上三种优化方法，开发者可以根据具体需求选择最适合的方案，以提升ECharts在大数据量场景下的性能表现。