angular - echarts webGL 加速

Question

我想在我的一个项目中使用 echarts。当我加载大约 1.000.000 个数据点时，我的图表变得非常缓慢。我知道 echarts-gl 提供 webGL 支持，但我找不到任何关于如何将它用于折线图的文档——“lineGL”不起作用。

任何人都知道如何在 apache echarts 中将 webGL 与折线图一起使用？

标签： angularecharts

Answer 1

我自己对此进行了研究，但没有 webgl 的性能，我强烈建议使用samplingand largefor series 来提高性能。

设置Symbols = "none"也极大地提高了性能。

例子：

{
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
    },
  }
}