echarts折线图大数据量一次性展示卡顿的解决方案_echarts数据量大该如何优化

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

刚刚好echart里用附带的lttb算法

图形没有太大的改变，但是渲染速度快了很多，图里的锯齿信息对我们来说没有太多的必要，信息感觉可以在减少点，echart好像也没有提供对应的参数设置，因此在信息处理时加上了LTTB算法，10分钟为一个桶，(LTTD算法可以动态的计算桶数量，但是效果差距不大并且还增大了不小的开销)

lttba(array) {
    // 数据形式[['00:00:00',123]]
    const bucket = 600; // 每个桶点数量
    const avgArray = [[...array[0], 0]]; // 储存均值的数组,第一个点以及坐标先存
    const resAry = [array[0]]; // 最终数组

    let left = 1;
    let sum = 0;
    // 计算每个桶均值
    for (let i = 1; i<array.length; i++) {
      sum += array[i][1];
      // 每个桶均值和坐标点
      if (i % bucket === 0) {
        let avgT = Math.floor((left + i) / 2); // 中点坐标
        avgArray.push([array[avgT][0], Math.round(sum / bucket), avgT]);
        sum = 0;
        left = i;
      } else if (i === array.length - 1) {
        // 最后一个点
        sum -= array[i][1];
        let avgT = Math.floor((left + i - 1) / 2); // 中点坐标
        avgArray.push([array[avgT][0], Math.round(sum / bucket), avgT]);
        avgArray.push([...array[i], i]);
      }
    }

    // 找出每个桶的最大三角点
    for (let i = 1; i<avgArray.length - 1; i++) {
      const tleft = (i - 1) \* bucket + 1;
      const tright = tleft + bucket - 1;
      resAry.push(
        ...this.lttbb(
          array,
          tleft,
          tright > array.length - 1 ? (array.length - 1) : tright,
          resAry[i - 1],
          avgArray[i + 1]
        )
      );
    }
    resAry.push(avgArray[avgArray.length - 1]);
    return resAry;
  },
  /\*\* 最大三角桶
 \*@param array 原始数据数组
 \*@param left 左侧点
 \*@param right 右侧点
 \*@param avglast 上一个桶的点
 \*@param avgnext 下一个桶的均值点
 \*/
  lttbb(array, left, right, avglast, avgnext) {
    let max = -1;
    let maxIndex = left;
    for (let i = left; i < right; i++) {
        if(!array[i])console.log(i)
      // 计算三角形面积公式 x1 \* y2 - x1 \* y3 + x2 \* y3 - y1 \* x2 + x3 \* y1 - x2 \* y2
      let s = avglast[2] \* array[i][1] - avglast[2] \* avgnext[1];
      s += avgnext[1] \* i - avglast[1] \* i;
      s += avgnext[2] \* avglast[1] - array[i][1] \* i;
      s = Math.abs(s);
      if (max < s) {
        s = max;
        maxIndex = i;
      }
    }
    return [array[maxIndex]];
  },

最后效果图

lttb的算法建议参考echart的lttb来写，这里是根据原理直接写的可能还有很多可优化

这又引发另一个问题，因为实际上这样抹除了很多店，导致了图基本已经不能触发echart的tooltip了
考虑下选择了x轴的指示标来作为替代品

      xAxis: {
        type: "category",
        boundaryGap: false,
        axisPointer:{
          status:'show',
          snap: false,
          label:{
            show:true,
            fontSize:18,
            margin:20,
            formatter:(value={value:'00'})=>{
              const s = value['value']
              const s1 = (generalData.timeData3 as any)[s]
              return `${s} 模拟数据:${s1}`
            }


![img](https://img-blog.csdnimg.cn/img_convert/99f9625012b9b878bfcd2a7907295afd.png)
![img](https://img-blog.csdnimg.cn/img_convert/7e303ae08fff4c4bf58f31e900a0b886.png)
![img](https://img-blog.csdnimg.cn/img_convert/69a651f331cef451db36af2b40a289ec.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**

学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**