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自动显示自动播放的更多相关文章

  1. Echarts中tooltip解决显示指定数据

    今天开发中遇到一个问题,echarts图表触摸x轴触发tooltip会将x轴上所有的数据展示出来,但是有些场合只需要展示某些数据就可以,并不需要全部展示,如下图: 这里警戒线因为需要开关,所以使用填充 ...

  2. css3控制标题字数超出的部分自动显示为“...”省略号

    css3功能强大,可以让超出指定宽度的部分自动显示为"..." 代码如下 display:block;text-overflow:ellipsis;white-space:nowr ...

  3. 自动显示隐藏布局的listView

    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示 ...

  4. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

  5. 如何给wordpress首页自动显示文章内容的第一个图片

    敏捷个人手机应用中使用到的数据来源于wordpress中,因为自己写的页面,所以可以自己写代码获取文章内容的第一个图片作为文章缩略图来显示,这样用户看到首页时图文并茂,感觉会好一些. 现在后台简单的使 ...

  6. gdb调试，自动显示多个变量的值

    调试程序的时候有时候要一行监控多个变量的值, 可以这样写: p {var1, var2, var3} 要跟踪程序自动显示,可以使用display display {var1, var2, var3}要 ...

  7. winedt设置自动显示行号[latex]

    options--preferences--appearance 在show line numbers for modes下面的文本框里添加;Tex 这样新建或者打开tex文件的时候就自动显示行号了( ...

  8. DataGridView设置不自动显示数据库中未绑定的列

    项目中将从数据库查出来的数据绑定到DataGridView,但是不想显示所有的字段.此功能可以通过sql语句控制查出来的字段数目,但是DataGridView有属性可以控制不显示未绑定的数据,从UI层 ...

  9. 应用emailAutoComplete.js来自动显示邮箱后缀列表

    我们经常有邮箱的人都特别清楚,在输入我们的邮箱时,会自动显示出邮箱后缀列表,这个用户体验是不错的. 操作据悉——当我们输入文字时,会自动有个邮箱后缀名的列表.      而我这边的代码是,应用jque ...

随机推荐

  1. 解决create-react-app 后 npm start or yarn start 中出现 的webpack版本问题

    解决create-react-app 后 npm start or yarn start 中出现 的webpack版本问题 错误提示信息 There might be a problem with t ...

  2. 用 python 解决线性代数中的矩阵运算

    用 python 解决线性代数中的矩阵运算 矩阵叉乘 矩阵求逆 矩阵转置 假定AX=B,求解未知矩阵X 矩阵的行列式值|matrix| 未完待续..... import sys from PyQt5. ...

  3. python nose测试框架全面介绍十四 --- nose中的只跑上次失败用例

    玩过一段时间nose的朋友,一定会发现nose中有一个--failed的功能,官方解释为: --failed Run the tests that failed in the last test ru ...

  4. docker容器运行java后台程序，存到数据库的时间差一天的问题

    主要原因是docker容器中的时间用的是标准时间,不是用的宿主机的时间. 修改方法: docker run -e TZ="Asia/Shanghai" -d -p 80:80 -- ...

  5. [atAGC054D]ox

    对于两个字符串$s$和$t$(保证其中每一种字符个数相同),定义$s$和$t$的相对逆序对数为$s$得到$t$的最少交换次数,显然同种字符相对顺序保持不变,因此即依次编号后的逆序对数 问题不妨看作构造 ...

  6. [bzoj3170]松鼠聚会

    这个距离就是切比雪夫距离,有一个神奇的东西是说将(x,y)变成(x+y,x-y),然后就是曼哈顿距离,因此转化后对x坐标和y坐标分别统计排序和求和(求前缀和预处理+二分) 1 #include< ...

  7. html+css第三篇

    css reset 原则: 但凡是浏览默认的样式,都不要使用. body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;} ol,ul{margi ...

  8. 程序员需要达到什么水平才能顺利拿到 20k 无压力？

        程序员要拿到20k,应该达到什么水平? 1 熟悉增删改查技能,熟悉项目开发相关流程和技能. 2 能解决基本问题,分布式或比较深的问题,太难的不会不要紧,但常规的应该有项目经验. 3 简历好看些 ...

  9. 通过Rainbond的团队管理去管理已有的组织架构

    针对于多团队管理我先列举几个小问题,看看大家有没有共鸣,我们在刚刚接触并使用Rainbond的时候,仅仅创建一个团队,里面创建一大堆应用,看起来特别乱,进行管理的时候呢,也会非常麻烦,尤其是当团队需要 ...

  10. 快速入门上手Markdown

    第一次接触Markdown是写代码初期看很多大佬的github,他们的项目一定会有一份文件叫Readme.md的文件 他们由一些简单美观的符号和汉字字母组成,编译之后成为一篇简单直观的文档 深入了解之 ...