功能:tooltip轮播时,dataZoom也同步轮播,并且鼠标放上去之后,停止轮播;鼠标移出后重新触发轮播;封装成一个函数,直接用就行,代码如下:
/*myChart:创建的图表实例startValue:dataZoom的起始值endValue:dataZoom的末尾值dataLength:x轴数据的长度
*/autoPlay(myChart, startValue, endValue, dataLength) {let that = this;this.timer = null;function play(startValue, endValue, dataLength) {let diffValue = endValue - startValue;let tooltipIndex = 0;if (startValue != 0 && endValue != dataLength - 1) {tooltipIndex = startValue + Math.floor((diffValue + 1) / 2) + 1;} else if (startValue != 0 && endValue == dataLength - 1) {tooltipIndex = 0;startValue = 0;endValue = startValue + diffValue;let timer2 = setTimeout(() => {clearTimeout(timer2);myChart.dispatchAction({type: 'dataZoom',startValue: startValue,endValue: endValue,});}, 2000)}that.timer = setInterval(() => {if (tooltipIndex > Math.floor((diffValue + 1) / 2)) {startValue += 1;endValue += 1;if (tooltipIndex > dataLength - 1) {startValue = 0;endValue = startValue + diffValue;tooltipIndex = 0;}if (endValue < dataLength) {myChart.dispatchAction({type: 'dataZoom',startValue: startValue,endValue: endValue,});}}if (that.timer1) {clearTimeout(that.timer1);that.timer1 = null;}that.timer1 = setTimeout(() => {myChart.dispatchAction({type: 'showTip',seriesIndex: 0,dataIndex: tooltipIndex,});tooltipIndex += 1;}, 100);}, 2000);}play(startValue, endValue, dataLength);myChart.getDom().onmouseover = () => {clearInterval(this.timer);this.timer = null;};myChart.getDom().onmouseout = () => {let start = myChart.getOption().dataZoom[0].startValue;let end = myChart.getOption().dataZoom[0].endValue;play(start, end, dataLength);};},
效果如下: