echarts中要做到自动播放的功能,首先是要实现能缩放的功能,而缩放的功能是由配置项dataZoom来控制的,而dataZoom中分为inside和slider,分别是内置的控制器和外部的控制器,内置的控制器就是在坐标轴内通过鼠标滑动,滚轮或者手指滑动来控制,而slider这是在坐标轴外加一个滚动条来控制坐标轴的缩放

dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: start,
end: end
}, {
type: 'slider',
fillerColor: '#4d6b82',
height: 7,
bottom: 10,
xAxisIndex: 0,
start: 1,
end: 10,
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',//进度的两头的圆大小
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 1,//进度的两头的圆的阴影
shadowOffsetY: 1
}
}
],

以上是实现内部缩放和外部滚动条的,但是还没有实现自动播放

通过计时器来调整滚动的位置来控制播放

setInterval(() => {
if (end < 100) {
myChart.setOption({
dataZoom: {
start: start++,
end: end++
}
})
} else {
start = 0
end = 20
}
}, 300)

没300毫秒向后播放百分之一,当播放到最后的时候重置为零就重新播放了

echarts自动播放图形的更多相关文章

  1. 树莓派USB存储设备自动挂载并通过脚本实现自动拷贝,自动播放视频,脚本自动升级等功能

    需求:首先需要树莓派自动挂载USB设备,然后扫描USB指定目录下文件,将相关文件拷贝至树莓派指定目录,然后通过omxplayer循环播放新拷贝文件视频 1. 树莓派实现USB存储设备自动挂载 树莓派U ...

  2. jQuery可自动播放动画焦点图插件Koala

    Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...

  3. 微信的audio无法自动播放的问题

    一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...

  4. android audio无法自动播放

    audio无法在android4.4+和ios6以上的版本自动播放,因为他们出于安全考虑,做了限制.必须用户自己手工点击才能播放,程序是控制不了播放的. 整死我了,整整搞了2天,查不出所以然,原来就这 ...

  5. iOS下Audio自动播放(Autoplay)音乐

    前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...

  6. 新版微信h5视频自动播放

    微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { ...

  7. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  8. 【转】一种解决h5页面背景音乐不能自动播放的方案

    原文:http://www.cnblogs.com/wmhuang/p/5452259.html --------------------------------------------------- ...

  9. iOS - 如何自动播放H5中的音频

    场景:iOS端设备,App页面跳转到H5产品介绍,背景音乐无法播放.(为什么不能自动播放,因该是iPhone人性化设定吧~) 加载H5用UIWebView空间: 代码: CGRect rect = s ...

随机推荐

  1. Shell命令行提示定制

    /******************************************************************************* * Shell命令行提示定制 * 说明 ...

  2. NOTIC: [8] Trying to get property of non-object

      NOTIC: [8] Trying to get property of non-object /home/wwwroot/qwsd/Application/Admin/Controller/Pr ...

  3. SNF快速开发平台2019-用户安全控制-权限管理模型实践-权限都在这里

    1.1    是否保存密码 勾选记住密码后,再次开启程序用户密码不需要再次输入,直接显示在密码输入框内,方便快捷. 图 4.1‑1 记住密码的登录页面框 1.2    是否自动登录 勾选自动登录后,再 ...

  4. vue---父子组件之间的通信【props,$refs、$emit】

    在用vue进行项目开发的时候,父子组件之间的通信是经常被用到的,下面就来具体说说父子组件通信的三种方式: 父组件: <template> <div> <h1>我是父 ...

  5. ES技巧

    2, 统计字段b的不同值的数量 {"size":0,"aggs":{"distinct_colors":{"cardinality ...

  6. Centos7下的文件压缩

    [root@web01 ~]# yum provides zip 已加载插件:fastestmirror Loading mirror speeds from cached hostfile * ba ...

  7. invalid argument (errno: 22)

    socket通信示例中,当accept客户端时,经常报这个错误. 并且是第一次没有问题,第二次或后面几次都会出现如下问题, 错误码为22, 错误描述为invalid argument. 问题解决如下: ...

  8. word 条件多项式公式对齐

    条件多项式公式对齐 觉得有用的话,欢迎一起讨论相互学习~Follow Me 对于使用word编写具有多个多项式的公式时,经常会有所偏移 最不优雅的方式就是使用逗号进行分隔和排版使其公式上下对齐 第二种 ...

  9. WEB程序设计 第7版

    WEB程序设计 第7版   D11章基础知识1.1internet简介1.1.1起源1.1.2internet的含义1.1.3ip地址1.1.4域名1.2万维网1.2.1起源1.2.2web还是int ...

  10. linux服务器之间文件传输

    有时候我们会遇到,把一个服务器上的文件夹,传到另一个服务器 我们需要先把文件夹打包成 tar.gz,这种格式在任何linux版本上都能压缩/解压 #解压命令 tar -zxvf xxx.tar.gz ...