Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）

echarts-auto-tooltip使用方法：

 //引入echarts-auto-tooltip.js后var JSQKloop;//设置轮播JSQKloop = tools.loopShowTooltip(myChart, option, {interval:2000,  // 轮播时间间隔，单位毫秒，默认为2000loopSeries: true,     //boolean类型，默认为false。//true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltipseriesIndex:0  //默认为0，指定某个系列（option中的series索引）循环显示tooltip，当loopSeries为true时，从seriesIndex系列开始执行.});

经测试，多次为同一个echarts图表设置轮播效果后会出现图表闪烁的问题，即：echarts-auto-tooltip不会覆盖之前的设置；
因此要在设置新轮播效果前，删除当前轮播，方法：

 //删除以往设置的轮播var JSQKloop;if(JSQKloop){JSQKloop.clearLoop()}

完整测试代码：

<!doctype html><meta charset="utf-8"><title>轮播测试</title><script src="js/jquery-3.2.0.min.js" charset="utf-8" type="text/javascript"></script><script src="js/echarts.min.js" charset="utf-8" type="text/javascript"></script><!-- 轮播 --><script src="js/echarts-auto-tooltip.js" charset="utf-8" type="text/javascript"></script></head>
<body><div id="testDiv" style="width: 500px;height:500px;"></div>
</body>
<script type="text/javascript">var chartDom = document.getElementById('testDiv');var myChart = echarts.init(chartDom);var option;var JSQKloop;option = {title: {text: 'Referer of a Website',subtext: 'Fake Data',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: 'Access From',type: 'pie',radius: '50%',data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};myChart.setOption(option);if(JSQKloop){JSQKloop.clearLoop()}JSQKloop = tools.loopShowTooltip(myChart, option, {loopSeries: true});</script>
</html>

Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）相关推荐

html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
ViewPager自动轮播，手指按住停止轮播
前面写了ViewPager添加指示器,无限轮播,自动轮播.但是自动轮播有一个问题就是手指按住后要停止轮播才行. 添加指示器,无限轮播,自动轮播请参考另外两篇文章: <viewpager自添加指示 ...
HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
css33d图片轮播_手把手教你用纯css3实现轮播图效果实例
首先先看demo吧,点击查看demo 一.随便说几句 css3动画效果的强大不言而喻,自它出现一直热度不减,它与js动画的优劣也一直成为前端界争论的话题,不可置疑的是css3动画的出现在一定程度上降低 ...
轮播图的实现，点击按钮切换轮播图等功能
菜单区域实现划过主菜单显示子菜单轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2. ...
html轮播图鼠标可以暂停,原装js轮播图，鼠标移入停止轮播，移出继续轮播
要求:1.点击按钮,切换图片: 2.图片能够自动轮播: 3.鼠标移入,轮播停止:移出继续轮播: 知识点:1.定时器:setInterval(): 2.鼠标移入事件:onmouseenter/onmou ...
swiper移入暂停_react中swiper注意事项及鼠标划入停止轮播
首先是实例化swiper 这里有一个注意点,就是实例化的时机如果你的swiper内容是写死的,可以在componentDidMount中实例化,但是如果你的内容是通过接口异步请求过来的,就必须在co ...
html网易云音乐图片轮播效果,Vue之网易云音乐PC版轮播图的实现
Github - program-learning-lists 最近在刷网易云音乐歌单时发现首页的轮播图很有意思,正好自己想尝试做一个PC版的网易云音乐,于是就是使用Vue去做这个demo,废话少说, ...

Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）

Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）

Echarts自动轮播插件echarts-auto-tooltip的使用（附停止轮播的方法）相关推荐

最新文章

热门文章