Echarts 实现tooltip自动显示自动播放

最新推荐文章于 2024-10-30 09:23:01 发布

早晨阳光一般暖

最新推荐文章于 2024-10-30 09:23:01 发布

阅读量1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.youkuaiyun.com/LZY_1993/article/details/78630805

echarts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ECharts的dispatchAction方法实现数据点的动态提示效果。通过设置定时器结合dispatchAction，可以依次显示每个数据点的提示信息，形成动态播放的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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