vue+animejs循环走马灯实现平滑动态折线图

前言：不是最优解，仅仅提供一种实现思路。

目标：需要实现一个平滑流畅的动态折线图

最开始尝试使用ECharts动态更新实现，实际数据由于波动较大，在动态更新数据重新绘制的过程中，人眼捕捉到的变化效果并不理性。

所以尝试了其他的方式。长连接获取的数据渲染后延迟显示。

这里用到了animejs循环走马灯

1、npm install animejs

2、import anime from "animejs/lib/anime.js";

<div class="cell">
    <div class="roll">
        <div id="channel11" class="box"></div>
        <div id="channel12" class="box"></div>
        <div id="channel13" class="box"></div>
     </div>
</div>

mounted() {
    var xTrans = [];
    anime.set(".box", {
      translateX: function (el, i, l) {
        xTrans[i] = { x: i * 1600 };
        return i * 1600;//一屏的宽度
      },
    });
    anime({