Flutter-Charts_painter大数据量绘制性能优化-数据收敛

本文链接：https://blog.csdn.net/clmd_ld/article/details/129064874

文章介绍了如何针对Flutter的Charts_painter库在处理大量数据时的性能问题进行优化。通过数据收敛策略，将每20个数据点压缩为最大值和最小值，降低了数据量，同时保持数据特征。这种方法有效地减少了GPU渲染压力，提高了折线图的绘制性能。文章还展示了优化前后的效果对比，并表达了对异步渲染解决方案的兴趣。

摘要由CSDN通过智能技术生成

Flutter-Charts_painter大数据量绘制性能优化-数据收敛

1、背景介绍

HRV测量仪器上传的数据，每秒有250个数据，业务上需要测量180秒，预计有3w-5w个数据点需要绘制到折线图上去。Charts_painter绘制这么大的数据是时候会有些卡顿，所以需要进行性能优化。

优化方向有两个：1、缩减数据量 2、组件异步渲染。

Flutter暂时不支持异步离屏渲染，所以我们的只能进行数据量缩减

2、优化方式 - 数据收敛

方案：

每20个数据点收敛成两个，保留最大值和最小值两个数据点，这样数据就收敛了10倍，并且保留数据特征
需要判断20个数据点的走向趋势。通过最大值和最小值在原数据中的索引下标位置，确定谁在前谁在后

  static List<double> handleBMData(List<double> source) {
    List<double> reslutList = [];
    List<double> partList = [];
    source.asMap().forEach((key, value) {
      partList.add(value);
      if ((key + 1) % 20 == 0) {
        double maxValue = partList.reduce(math.max);
        double minValue = partList.reduce(math.min);
        int maxIndex = partList.indexWhere((element) => element == maxValue);
        int minIndex = partList.indexWhere((element) => element == minValue);

        // int maxStep = math.min(maxIndex, 9 - maxIndex);
        // int minStep = math.min(minIndex, 9 - minIndex);
        // if (maxStep > minStep) {
        //   reslutList.add(maxValue);
        // } else if (maxStep < minStep) {
        //   reslutList.add(minValue);
        // } else {
        //   if (maxIndex >= minIndex) {
        //     reslutList.add(maxValue);
        //   } else {
        //     reslutList.add(minValue);
        //   }
        // }

        if (maxIndex > minIndex) {
          reslutList.addAll([minValue, maxValue]);
        } else {
          reslutList.addAll([maxValue, minValue]);
        }

        partList = [];
      }
    });
    return reslutList;
  }