1、业务背景

  图形实时从后台获取数据,让图形从最右边出现,每隔一秒向左移一位,当最左边的数据移到Y轴时,最左边的数据移出屏幕,最右边增加一个数。实现一个从右往左动画的效果

2、先看下项目中的demo解决实例

  让数据从最右边出,不重复说了,利用数组的length特性

mounted(){
this.series.length =
this.fetchData();
}

  其次就是对数据的处理:当数组长度大于设定的固定值时,删除数组的第一个元素;然后将获取到的值push到数组

fetchData(){
this.timer = setInterval(_ => {
getMonitorApi().then((res) => {
if(res.status === 200){
if(this.series.length > 50){
this.series.shift()
}
this.series.push(res.data.series.data)
this.xData = res.data.xData
this.drawLine()
}
})
},2000)
},

3、解决方案思路

(1)首先第一步考虑的是,获取到这个series的data数组:

var data= option.series[].data;//获取数组  

(2)其次是做一个定时器,随机生成一个随机数,push到数组,并且删除数组的第一个元素:

    window.setInterval(function(){
data.shift();
var randomNum=parseInt(Math.random()*)
data.push(randomNum);
},);

(3)然后是写一个刷新的函数,并把新的数据绑定到ECharts中:

    function refreshData(){
var option = myChart.getOption();//获取页面的option
option.series[].data = data;//设置新的数据
myChart.setOption(option);//绑定到ECharts
}

(4)最后在定时器里调用刷新函数,使数据产生移动效果

    window.setInterval(function(){
data.shift();
var randomNum=parseInt(Math.random()*)
data.push(randomNum);
console.log(data);
refreshData();
},);

  补充:因为固定数组里面只有固定的显示个数,所以删除第一个,push加入最后一个,这样就产生了移动的效果

Echarts动画效果:实现数据左右移动的更多相关文章

  1. vue中如何使用echarts,使用axios获取数据

    1==>首先准备一个容器 <div id="echartContainer" style="width:400px; height:400px"&g ...

  2. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  3. [MISSAJJ原创] UITableViewCell移动及翻转出现的3D动画效果[58同城cell移动效果]

    2015-11-20 很喜欢在安静的状态, 听着音乐,敲着键盘, 和代码们浓情对话, 每一份代码的积累, 都让自己觉得很充实快乐!Y(^_^)Y. 看到58同城app的cell有动画移动出现的特效,很 ...

  4. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  5. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  6. 运动曲线提升CSS动画效果

    原文链接 译文\译者鞠大宝 先有UI动画,然后才会有好的UI动画.好的动画会让人惊叹“哇哦!”——因为页面看上去很流畅.很漂亮,最重要的是,自然,一点都不会让人觉得不和谐或者僵硬死板.如果你经常逛Dr ...

  7. [51单片机] TFT2.4彩屏3 [自制动画效果-滑块+吊钩]

    >_<:引脚和前面几个连接一样,这里做了一个实用的动画效果,模拟起重机的2维视图. #ifndef __ILI9325_H__ #define __ILI9325_H__ void ILI ...

  8. iOS开发笔记7:Text、UI交互细节、两个动画效果等

    Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中 ...

  9. 如何使用SVG生成超酷的页面预加载素描动画效果

    在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...

随机推荐

  1. 在Docker中自定义Jenkins镜像

    一. 构建Jenkins slave. 1. 构建镜像需要三个步骤: (1) 创建Dockerfile (2) 构建镜像 (3)在master上改变agent的配置 2. 以下是创建一个服务Pytho ...

  2. 基于Ubuntu系统搭建以太坊go-ethereum源码的开发环境

    第一.先安装geth的CLI环境sudo apt-get install geth,这个很重要 第二.下载源代码 git clone https://github.com/ethereum/go-et ...

  3. JAVA编程思想读书笔记(三)--RTTI

    接上篇JAVA编程思想读书笔记(二) 第十一章 运行期类型判定 No1: 对于作为程序一部分的每个类,它们都有一个Class对象.换言之,每次写一个新类时,同时也会创建一个Class对象(更恰当的说, ...

  4. GIT修改邮箱

    git报错-->! [remote rejected] master -> master (push declined due to email privacy restrictions) ...

  5. 首次使用ideal构建maven项目web

    如附件 链接:https://pan.baidu.com/s/1oH-9VfIKnLPjVt-tOH7fZw 提取码:7s5t

  6. linux——(6)vim与vi

    概念:vi与vim的区别 vi是一款老式的文字处理软件,不过现在依然广泛使用,所有的UnixLike系统都会内置vi文本编辑器. vim可以看出vi的升级版,不过vi更像是一个程序开发工具,功能也比v ...

  7. Eclipse酷炫项目、最新趋势介绍

    作为Eclipse基金组织的执行董事,我需要经常审阅每一个新提交的Eclipse项目协议书.作为Eclipse的一分子,我很乐意与加入我们团队的新开发人员互动.这也是我工作中的乐趣之一.2013年,我 ...

  8. [CodeForces-708E]Student's Camp

    题目大意: 一个n*m的墙,被吹k天风,每块靠边的砖都有p的概率被吹掉. 如果上下两行没有直接相连的地方,我们则认为这一堵墙已经倒塌. 问最后墙不倒塌的概率(模意义). 思路: 动态规划. 用f[i] ...

  9. Java(静态)变量和(静态)代码块的执行顺序

    本文讨论Java中(静态)变量.(静态)代码块的执行顺序 首先创建3个类: 1.Foo类,用于打印变量 public class Foo { public Foo(String word) { Sys ...

  10. Miller_rabin算法+Pollard_rho算法 POJ 1811 Prime Test

    POJ 1811 Prime Test Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 32534   Accepted: 8 ...