CODEWITHSUNDEEP
javascriptechartsapache-echarts
Gabriel
Gabriel

Reputation: 585

Echarts - properly optimise plotting hundreds/thousands series in 2D scatter/line chart

I am trying to plot a large data set containing hundreds/thousands of series with Echarts, but the resulting plot is very slow and difficult to work with.

Here is an example code that you can try in Echarts webpage.


// 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
};

I tried using large and progressive, but they seem to work on single series and not on all series plotted.

How should I properly improve the performance of this type of chart?

Upvotes: 0

Views: 2396

Answers (1)

Matthias Mertens
Matthias Mertens

Reputation: 2551

Echarts is not made to depict huge amounts of data. I would suggest you think about the way you want to present your data. Having thousands of lines in a chart is not very clear anyways. Maybe you can do some preprocessing and show higher order features or only show partial / filtered data at a time.

That beeing said there are some minor optimizations you can include:

  1. Avoid everything that rerenders the chart at high frequency. In your given example I removed the dataZoom of type 'inside' and set the slider zooms realtime attribute to false.

  2. For line charts you can reduce the load from rerendering if you set symbol: false.

The given example only shows line series but since the title also mentions scatter series I will touch on them.

  1. Set large and largeThreshold for each series (only works for scatter). You can also set progressiveThreshold to block the UI as little as possible while rendering.

If this is all not enough there is a special kind of scatter series for large amounts of data which makes use of WebGl: ScatterGL

Upvotes: 1

Related Questions