echarts 折線圖 拐點 搭配顯示tootip


接到一需求,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;
}
},


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM