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

梵鸽子

于 2022-05-07 17:32:55 发布

阅读量4k

点赞数

分类专栏： echarts 文章标签：前端 echarts

本文链接：https://blog.csdn.net/qq_37401113/article/details/124634580

版权

本文介绍了一种使用vue和animejs来实现平滑动态折线图的方法，通过循环走马灯效果，避免了ECharts动态更新时由于数据波动导致的不理想视觉效果。文章详细介绍了实现步骤，包括animejs的安装和导入，以及如何在多个box中绘制和重绘折线图，以达到流畅的动态效果。

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

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

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

最开始尝试使用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({