Echarts自动轮播插件echarts-auto-tooltip的使用(附停止轮播的方法)
echarts-auto-tooltip使用方法:
//引入echarts-auto-tooltip.js后
var JSQKloop;
//设置轮播
JSQKloop = tools.loopShowTooltip(myChart, option, {
interval:2000, // 轮播时间间隔,单位毫秒,默认为2000
loopSeries: true, //boolean类型,默认为false。
//true表示循环所有series的tooltip,false则显示指定seriesIndex的tooltip
seriesIndex: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>