echarts 大数据量 数据造成卡顿处理

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

1. 关闭动画：ECharts默认的动画效果会消耗一些性能，对于大数据量的图表，可以尝试关闭动画。

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

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

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

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

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

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

注意：这些优化方法只能在一定程度上提升性能，并不能完全解决在数据量极大的情况下的性能问题。数据量过大时还可以考虑下面的处理方式

数据进行筛选和抽样来减少渲染点数

1. 简单随机抽样

   在这个例子中，我们首先抓取所有的原始数据，然后从中随机抽取一定数量的样本。这会确保所有的数据都有相同的被选择为样本的机会。

const rawData = fetchAllData();  // 获取所有的原始数据
   const sampledData = [];
   const sampleSize = 1000;  // 设置我们想抽取的样本的数量
   
   // 循环我们想抽取的样本的数量
   for (let i = 0; i < sampleSize; i++) {
   
     // 随机地获取一个原始数据的索引
     const index = Math.floor(Math.random() * rawData.length);
     // 使用这个随机索引抽取一个样本，并添加到样本的数组
     sampledData.push(rawData[index]);
   }
   // 现在 sampledData 数组包含了我们的随机样本

方法定义

/**
 * This method is used to perform simple random sampling from the raw data.
 * @returns {Array} Sampled data