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

本文介绍了一种使用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({
   
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值