接到一需求,echarts折線圖,鼠標放到某一條這線上,顯示這條折線的信息。
第一時間想到的是tootip,可是直接使用tootip它會根據X軸對應的拐點來顯示信息,不符合預期。
上網找了一個思路,給echarts圖表監聽一個鼠標事件,當鼠標經過線的時候觸發事件,獲取那條線的信息,然后在tootip判斷,顯示相應的內容。
this.myChart.on('mouseover', function(params) {
window.selectSeries = params.seriesName;
console.log(123)
console.log(params)
})
this.myChart.on('mouseout', function(params) {
window.selectSeries = '';
console.log(123)
console.log(params)
})
但是echarts折線圖有個坑讓我踩了,浪費了好長時間。
在echarts中折線圖的事件監聽,實際上只有接觸拐點才觸發事件,鼠標觸碰折線是不觸發事件的。
所以就把需求折中,讓鼠標觸碰拐點的時候出現提示框。
圖表的配置tootip:
tooltip: {
trigger: 'axis',
formatter:function(params){
var res = "";
for (var i =0;i<params.length;i++){
var series = params[i];
if (series.seriesName == window.selectSeries){
let date = series.data.value[0];
let year = (new Date(date)).getFullYear();
let month = (new Date(date)).getMonth() + 1;
let day = (new Date(date)).getDate();
let hour = (new Date(date)).getHours();
let minu = (new Date(date)).getMinutes();
// res = series.axisValue +"<br/>" + series.marker + series.seriesName + ":" +series.data.value[0] +"<br/>";
res = series.axisValue +":" + series.seriesName+'車次' +"<br/>" + series.marker +year+'年'+month+'月'+day+'日'+hour+'時'+minu+'分' +"<br/>";
break;
}
}
return res;
}
},