echarts brush刷选会重绘问题

Question

echarts brush刷选的时候，图表会重绘，怎么解决重绘问题，我看文档上的例子也不会重绘，下方为我的简易代码

export function createOption(
  dataX: string[],
  dataY: string[],
  seriesData: any[],
  begin: number,
  range: number
) {
  return {
    title: {
      text: '历史波形完整性展示',
      left: 'center',
      textStyle: {
        color: '#3FC4FF',
        fontWeight: 'bold',
        fontSize: 18
      }
    },
    grid: {
      left: 80,
      right: 50,
      top: 70,
      bottom: 80
      // borderWidth: 1,
      // borderColor: 'red',
      // height: 80
    },
    series: seriesData.map(({ name, data, color }) => ({
      name,
      data,
      type: 'heatmap',
      // 渐进式渲染时每一帧绘制图形数量
      progressive: 50000,
      // 渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。
      progressiveThreshold: 100,
      label: {
        normal: {
          show: false
        }
      },
      itemStyle: {
        color,
        emphasis: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      zlevel: -1,
      showSymbol: false
    })),
    brush: {
      seriesIndex: 'all',
      toolbox: ['lineX', 'clear'],
      // brushStyle: {
      //   color: '#0897DC'
      // },
      xAxisIndex: 0,
      brushMode: 'single',
      throttleType: 'debounce',
      throttleDelay: 300,
      z: 10000
    },
  };
}

Answer 1

在 ECharts 中，确实，当你使用 brush（刷选）功能时，图表会被重绘。这是因为 brush 功能需要在原数据的基础上创建一个新的数据集，然后根据这个新的数据集重新绘制图表。

然而，有一些方法可以尽量减少这种重绘的视觉影响。以下是一些可能的解决方案：

1. 使用 debounce 或 throttle：ECharts 的 brush 功能提供了一个 throttleType 和 throttleDelay 选项，你可以使用它们来限制 brush 操作的频率。throttleType 可以设置为 'debounce' 或 'throttle'，throttleDelay 可以设置为你希望 debounce 或 throttle 的时间间隔。这样，刷选操作就不会过于频繁，从而减少了重绘的次数。
2. 使用 progressive 渲染：在 ECharts 中，你可以设置一个图表的 progressive 属性，使得在数据量较大的情况下，可以渐进式地渲染图表。这可以减少一次性重绘的开销，提高渲染性能。
3. 优化数据：如果你的数据集非常大，那么可以考虑对数据进行一些优化，例如对数据进行采样或降维，以减少需要绘制的数据量。
4. 预计算或缓存数据：如果你知道 brush 操作可能会选择哪些数据，那么你可以预先计算或缓存这些数据，然后在 brush 操作时直接使用这些数据，而不是从原始数据中提取。

以上这些方法都可以在一定程度上减少 brush 操作时的重绘问题。然而，需要注意的是，由于 brush 功能需要创建新的数据集并重新绘制图表，所以完全避免重绘是不可能的。