Echarts3.0 实现tooltip自动显示自动播放

来源：互联网发布：centos升级内核编辑：程序博客网时间：2024/05/23 00:10

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: index,dataIndex: index});index++;if(index > data.length) {index = 0;}}, 1000);});</script></head><body><div id="myChart"></div></body></html>

注意：dispatchAction 方法是关联到 option的tooltip项，在option里一定要配置tooltip

阅读全文

1 0