如何在Echarts圖表中實現(xiàn)鼠標移入停止?jié)L動與移出繼續(xù)滾動！示例
關于在 Echarts 圖表中實現(xiàn)鼠標移入停止?jié)L動、移出繼續(xù)滾動的問題的回答。解決方法是在代碼中添加事件監(jiān)聽器，當鼠標移入圖表時清除定時器，當鼠標移出時重新啟動定時器，從而實現(xiàn)停止和繼續(xù)滾動。
在Echarts圖表中實現(xiàn)鼠標移入時停止?jié)L動，移出時繼續(xù)滾動，可以使用Echarts提供的事件綁定方法，具體如下：
if (xData.length > 0) {
this.autoMove();
this.myChart.on('mouseover', this.stop.bind(this));
this.myChart.on('mouseout', this.goMove.bind(this));
}
this.option && this.myChart.setOption(this.option);
在使用 Echarts 進行數(shù)據(jù)可視化的開發(fā)。要實現(xiàn)當鼠標移入時停止?jié)L動，移出時繼續(xù)滾動，可以在代碼中添加一些事件監(jiān)聽器。
具體實現(xiàn)方法如下：
1、在 autoMove() 方法中，將 setInterval 返回的定時器 ID 保存到當前實例的屬性中，如 this.timechartes。
2、在 this.myChart.on('mouseover', this.stop()); 中，stop() 方法需要改為 () => { this.stop(); }，即使用箭頭函數(shù)綁定 stop 方法的作用域，否則 stop 方法將在綁定事件時被立即調(diào)用。
3、在 this.myChart.on('mouseout', this.goMove()); 中，goMove() 方法同樣需要使用箭頭函數(shù)綁定其作用域。
具體的代碼如下：
if (xData.length > 0) {
this.autoMove();
this.myChart.on('mouseover', () => { this.stop(); });
this.myChart.on('mouseout', () => { this.goMove(); });
}
this.option && this.myChart.setOption(this.option);
// 添加 stop 和 goMove 方法
stop() {
clearInterval(this.timechartes);
},
goMove() {
this.autoMove();
},
autoMove() {
this.timechartes = setInterval(() => {
if (this.option.dataZoom[0].endValue == this.addXseData.length) {
this.option.dataZoom[0].endValue = 10;
this.option.dataZoom[0].startValue = 0;
} else {
this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1;
this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1;
}
this.myChart.setOption(this.option)
}, 2000);
},
這樣就可以讓鼠標移入圖表時，定時器會被清除，圖表停止?jié)L動；當鼠標移出圖表時，定時器會重新啟動，圖表繼續(xù)滾動。
