ECharts 5：大量数据点的展示

Question

我正在开发一个基于 Apache ECharts 的应用程序，该应用程序应该在折线图中显示大量数据点。 很可能有数百万个数据点。 X 轴表示时间，Y 轴表示值。 未使用“xAxis->data”选项。 该系列配置如下：

let option = {
    series: [
        type: 'line',
        data: [[time1, value1], [time2, value2], ...]
    ]
}

只要视口 (DataZoom) 缩放并且显示少于 4000 个点， 那么图表的左/右滚动和缩放就可以顺利进行。

但是，如果缩小并且图表必须显示超过 10,000 个数据点，那么它就会开始变得缓慢。

通常情况下，缩小得越远，需要的数据点就越少， 以有意义的方式显示图表。 由于数据点的数量当前没有变化，因此系统过载。

为了始终保持图表的流畅性和性能， 建议“稀疏”数据，例如通过使用 Ramer-Douglas-Peucker 算法： https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93Peucker_algorithm

现在回答我的问题：

1. Echarts 是否提供了这方面的任何功能来以某种方式动态减少可见数据量？ 例如。通过某种过滤机制？

如果没有，那么方法可能是将一组精简的数据传递给 Echarts。 因此 ECharts 可以/应该持续处理 2,000 - 5,000 个数据点， 无论您放大还是缩小。

这种情况下，ECharts系列数据在缩放和滚动时应该被替换， 这样这 2,000 - 5,000 个数据点始终用于特定时间范围。

2. 现在的问题是，是否有实施此类操作的最佳方法的示例？ 这变得很棘手，因为您不仅需要在滚动/缩放时一次又一次地设置数据点， 但想必还必须一次又一次地重新配置 DataZoom。

理想情况下，DataZoom 滑块应考虑整个时间范围， 这样用户在滚动和缩放时不会注意到任何事情， 数据在后台不断变化。

Answer 1

1. 对于系列类型

   'line'

   ，存在一个属性sampling，它可以满足您的要求。我不知道它的表现如何。

---

2. 如果我们将示例限制为 x 轴的滑块，我将执行以下操作：

• 创建一个隐形助手

  xAxis

  (

  show: false

  )
• 将轴

  type

  设置为

  'category'

  并用一些能够很好地代表xAxis的数据填充它
• 根据 dataZoom 事件计算新数据

示例：

const data = [[0,150], [1,230], [2,224], [3,218], [4,135], [5,147], [6,260]];

option = {
  dataset: [
    {source: data}
  ],
  xAxis: [
    {type: 'value'},
    {
      type: 'category',
      show: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: {
    type: 'value'
  },
  dataZoom: {type: 'slider', xAxisIndex: 1, realtime: false},
  series: [
    {
      type: 'line'
    }
  ]
};

myChart.on('dataZoom', function(params) {
  // do your computation and replace dataset
  
  const startIndex = Math.floor(params.start * 0.01 * 7);
  const endIndex = Math.floor(params.end * 0.01 * 7);
  
  const newData = data.slice(startIndex, endIndex);
  
  myChart.setOption({dataset: [{source: newData}]});
});