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 ...
随机推荐
- js 实现边缘撞击检测动画
js 实现边缘撞击检测动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- PTA 7-3 树的遍历 (25分)
PTA 7-3 树的遍历 (25分) 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 输入格式: 输入第一行给出一个正整数N(≤30),是二叉树中结点 ...
- [啃书] 第3篇 - 结构体及其操作/浮点数&圆周率/复杂度/测试
啃书部分已单独做成Gitbook了,后续不再更新.详情访问个人网站ccoding.cn或ccbyte.github.io 前言 本篇总结自<算法笔记>2.8-2.10 正文 知识点1:结构 ...
- 菜鸡的Java笔记 第七 - java 数组
数组的基本概念 笔试中经常出现的试题或是问题 1.1 概念 数组指的是一组相关变量的集合 如果用最原始的方式定义100个变量的话没问题但是这些变量的关联实在 ...
- [atARC121D]1 or 2
对于大小为1的集合,我们可以在其中加入0 因此,枚举0的个数,那么问题即可以看作要求每一个集合大小为2 (特别的,我们允许存在$\{0,0\}$,因为这样删除这两个0显然只会减小极差) 显然此时贪心将 ...
- [atAGC045F]Division into Multiples
令$d=\gcd(a,b)$,可以发现$c|(ax+by)$等价于$lcm(c,d)|(ax+by)$,因此不妨令$c'=lcm(c,d)$,然后将$a$.$b$和$c$同时除以$d$ 接下来设$(a ...
- Elastic AMP监控.NET程序性能
什么是Elastic AMP Elastic APM 是一个应用程序性能监控系统.它可以请求的响应时间.数据库查询.对缓存的调用.外部 HTTP 请求等的详细性能信息,可以实时监控软件服务和应用程序. ...
- 探索JavaScript执行机制
前言 不论是工作还是面试,我们可能都经常会碰到需要知道代码的执行顺序的场景,所以打算花点时间彻底搞懂JavaScript的执行机制. 如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发 ...
- Atcoder Grand Contest 020 E - Encoding Subsets（记忆化搜索+复杂度分析）
Atcoder 题面传送门 & 洛谷题面传送门 首先先考虑如果没有什么子集的限制怎样计算方案数.明显就是一个区间 \(dp\),这个恰好一年前就做过类似的题目了.我们设 \(f_{l,r}\) ...
- UOJ 422 - 【集训队作业2018】小Z的礼物（Min-Max 容斥+轮廓线 dp）
题面传送门 本来说要找道轮廓线 \(dp\) 的题目刷刷来着的?然后就找到了这道题. 然鹅这个题给我最大的启发反而不在轮廓线 \(dp\),而在于让我新学会了一个玩意儿叫做 Min-Max 容斥. M ...