echarts webGL acceleration

Question

I want to use echarts in one of my projects. When I load around 1.000.000 data points my chart gets very slow. I know that echarts-gl provides webGL support but I couldn´t find any documentation on how to use it for e.g. line charts - 'lineGL' doesn´t work.

Anyone has a clue on how to use webGL with line charts in apache echarts?

Answer 1

Looking into this myself, but without webgl for performance, I highly suggest using sampling and large for series to improve performance.

Settings Symbols = "none" also hugely increases performance.

Example:

{
animation: false,
xAxis: {
    type: 'time',
    silent: false,
    splitLine: {
        show: false
    },
    splitArea: {
        show: false
    }
},
yAxis: {
    type: 'value',
    splitArea: {
      show: false
    }
},
dataZoom: [
  {
      type: 'slider',
      show: true,
      xAxisIndex: [0],     
  },
  {
      type: 'inside',
      xAxisIndex: [0],
  },
],
tooltip:{
  
  trigger: "axis",
  axisPointer: {
    type: 'shadow'
  },

},
series: [{
  type: 'line',
  data: randomPoints(500000, 0),
  sampling: 'average',
  large: true,
  showSymbol: false,
  lineStyle:{
    width:1.25,
  },
  animation: false,
  emphasis:{
    lineStyle:{
      width:1.25
    }
  },
  silent: true,
},
{
  type: 'line',
  data: randomPoints(500000, -200000),
  sampling: 'average', 
  large: true,
  showSymbol: false,
  lineStyle:{
    width:1.25,
  },
  animation: false,
  silent: true,
  emphasis:{
    lineStyle:{
      width:1.25
    },
  }
}

Answer 2

I don't think they support webgl for every type of chart. You can find information here: https://echarts.apache.org/en/option-gl.html

That code is coming from here: https://github.com/ecomfe/echarts-gl

If you check the example gallery, all the final plots,mainly earth/globe and 3d related, are the ones that accept (actually require) webgl.