Echarts - 正确优化在 2D 散点图/折线图中绘制数百/千系列

Question

我正在尝试使用 Echarts 绘制包含数百/数千个系列的大型数据集，但生成的绘图非常慢并且难以使用。

这里是一个示例代码，您可以在 Echarts 网页中尝试。

// Generate random series

var series_array = [];

for (let i = 1; i<1000; i++){

  let data = [1,2,3,4,5,6,7].map(function(x) { return x * Math.random(); });
  
  let serie = {
    name: 'Serie'+i,
    type: 'line',
    data: data
  };
  
  series_array.push(serie);
}

// Chart options

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
    dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100
    },
    {
      start: 0,
      end: 100
    }
  ],
  series: series_array
};

我尝试使用large和progressive，但它们似乎适用于单个系列，而不是所有绘制的系列。

我应该如何正确提高此类图表的性能？

Answer 1

Echarts 并不是为了描述大量数据而设计的。我建议您考虑一下呈现数据的方式。无论如何，图表中有数千条线并不是很清楚。也许您可以进行一些预处理并显示更高阶的特征，或者一次仅显示部分/过滤后的数据。

蜜蜂说您可以包括一些小的优化：

1. 避免一切高频重新渲染图表的事情。在给定的示例中，我删除了“inside”类型的 dataZoom 并将滑块缩放 realtime 属性设置为 false。

2. 对于折线图，如果设置

   symbol: false

   ，可以减少重新渲染的负载。

给定的示例仅显示线系列，但由于标题也提到了散点系列，我将触及它们。

3. 为each系列设置large和largeThreshold（仅适用于分散）。您还可以设置 progressiveThreshold 以在渲染时尽可能少地阻塞 UI。

如果这还不够，还有一种使用 WebGl 的针对大量数据的特殊散点系列：ScatterGL