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

2年前 (2022) 程序员胖胖胖虎阿
170 0 0

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

版权声明:程序员胖胖胖虎阿 发表于 2022年11月11日 下午9:56。
转载请注明:Echarts 实现tooltip自动显示自动播放 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...