Echarts 实现tooltip自动显示自动播放
1.其实这个很容易实现，一个 dispatchAction 方法就解决问题；但是博主在未实现该功能时是花了大力气，各种百度，各种搜；
很难找到简单粗暴的例子，大多数随便回一句你的问题就没下文；
废话太多了...
上图片
上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
background-color: gray;
}
#myChart {
width: 80%;
height: 70%;
position: fixed;
top: 15%;
left: 10%;
}
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="echarts3.2.2/echarts.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var XIdx = [];
var data = [54, 86, 46, 45, 77, 96, 89, 88, 23, 38,
3, 66, 98, 43, 73, 76, 44, 16, 21, 14,
71, 8, 61, 65, 1, 68, 33, 69, 49, 24
];
for(var i = 1; i <= data.length; i++) {
XIdx.push(i);
}
var option = {
backgroundColor: 'white',
grid: {
top: 20,
left: 20,
right: 20,
bottom: 20,
containLabel: true //轴上的数值
},
xAxis: {
type: 'category',
data: XIdx
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: [{
name: '人',
type: 'line',
data: data
}]
};
var myChart = echarts.init(document.getElementById("myChart"));
myChart.setOption(option);
var index = 0; //播放所在下标
var mTime = setInterval(function() {
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
index++;
if(index > data.length) {
index = 0;
}
}, 1000);
});
</script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>
注意：dispatchAction 方法是关联到 option的tooltip项，在option里一定要配置tooltip
原文链接：https://blog.csdn.net/LZY_1993/article/details/78630805
Echarts 实现tooltip自动显示自动播放的更多相关文章
- Echarts中tooltip解决显示指定数据
今天开发中遇到一个问题,echarts图表触摸x轴触发tooltip会将x轴上所有的数据展示出来,但是有些场合只需要展示某些数据就可以,并不需要全部展示,如下图: 这里警戒线因为需要开关,所以使用填充 ...
- css3控制标题字数超出的部分自动显示为“...”省略号
css3功能强大,可以让超出指定宽度的部分自动显示为"..." 代码如下 display:block;text-overflow:ellipsis;white-space:nowr ...
- 自动显示隐藏布局的listView
借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示 ...
- video自动全屏播放
video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...
- 如何给wordpress首页自动显示文章内容的第一个图片
敏捷个人手机应用中使用到的数据来源于wordpress中,因为自己写的页面,所以可以自己写代码获取文章内容的第一个图片作为文章缩略图来显示,这样用户看到首页时图文并茂,感觉会好一些. 现在后台简单的使 ...
- gdb调试，自动显示多个变量的值
调试程序的时候有时候要一行监控多个变量的值, 可以这样写: p {var1, var2, var3} 要跟踪程序自动显示,可以使用display display {var1, var2, var3}要 ...
- winedt设置自动显示行号[latex]
options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...
- DataGridView设置不自动显示数据库中未绑定的列
项目中将从数据库查出来的数据绑定到DataGridView,但是不想显示所有的字段.此功能可以通过sql语句控制查出来的字段数目,但是DataGridView有属性可以控制不显示未绑定的数据,从UI层 ...
- 应用emailAutoComplete.js来自动显示邮箱后缀列表
我们经常有邮箱的人都特别清楚,在输入我们的邮箱时,会自动显示出邮箱后缀列表,这个用户体验是不错的. 操作据悉——当我们输入文字时,会自动有个邮箱后缀名的列表. 而我这边的代码是,应用jque ...
随机推荐
- DASCTF 安恒七月赛wp
web Ezfileinclude 首页一张图片,看src就可以看出文件包含 验证了时间戳 尝试用php://filter 读源码读不到,以为只能读.jpg,然后用../路径穿越有waf 最后居然一直 ...
- pytest框架+conftest.py配置公共数据的准备和清理
1.pytest介绍:1.自动发现测试模块和测试方法 2.断言使用 assert+表达式即可 3.可以设置会话级.模块级.类级.函数级的fixture 数据准备+清理工作 4.丰富的插件库,==all ...
- php 递推 递归
思想:如何利用数学模式,来解决对应的需求问题,然后利用代码实现对应的数据模型(逻辑) 算法:使用代码实现对应的数学模型,从而解决对应的业务问题 递推算法是一种简单的算法,级通过已知条件,利用特定关系得 ...
- 用Docker搭建RabbitMq的普通集群和镜像集群
普通集群:多个节点组成的普通集群,消息随机发送到其中一个节点的队列上,其他节点仅保留元数据,各个节点仅有相同的元数据,即队列结构.消费者消费消息时,会从各个节点拉取消息,如果保存消息的节点故障,则无法 ...
- [gym102798F]Skeleton Dynamization
考虑对于第$i$层$x$与第$i+1$层所对应的点$y$,点$p$在前$i$层中当且仅当$p$到$x$比$p$到$y$距离小 由此,考虑枚举第一层的一个点以及对应到第二层的边,通过bfs就可以确定第一 ...
- CSS动画--让div动起来
CSS动画 今天在写代码时候,遇到了css动画效果如何实现的问题,经过查阅和实践,总结出一下结论. transition transition 指定动画变化的对应属性 以及动画的执行时间. 例如:tr ...
- Windows快捷键及cmd打开方式
Windows快捷键 win+e 打开我的电脑 win+r 打开运行 ctrl+z 撤销 shift+del 彻底删除 alt+F4 关闭窗口 ctrl+c 复制 ctrl+a 全选 ctrl+x 剪 ...
- 联盛德 HLK-W806 (五): W801开发板上手报告
目录 联盛德 HLK-W806 (一): Ubuntu20.04下的开发环境配置, 编译和烧录说明 联盛德 HLK-W806 (二): Win10下的开发环境配置, 编译和烧录说明 联盛德 HLK-W ...
- 【Perl】如何安装Bioperl模块？
目录 失败尝试一:使用cpanm 失败尝试二:使用CPAN 成功尝试:直接conda安装bioperl 没有尝试:源码安装bioperl 生信软件绕不过Perl,Perl绕不过Bioperl.而Bio ...
- python的包与模块
win +R d