Echarts - tooltip屬性自定義設置


最近在使用echarts插件繪制動態折線圖時,發現當折線圖的一個數值較高點緊挨着一個數值為零的點,圖形會被拉扯,如圖 

網上查閱資料([https://blog.csdn.net/JsongNeu/article/details/89204002])可通過對data數組的值加0.01,然后在tooltip的顯示值中減0.01 來進行處理。資料中沒說怎么修改tooltip,因此到官網上找了個案例,嘗試修改案例的tooltip。 原來的tooltip 

tooltip: { trigger: 'axis' }

原來的顯示框:

修改后的tooltip:

tooltip: { 
  trigger: 'axis',
  formatter: function (params, ticket, callback) {
    var showHtm="";
    showHtm = params[0].axisValue + '';
    for(i=0;i<params.length;i++){
      if(i % 2 == 0){
        if(params[i].value > 100){
         showHtm += params[i].marker + params[i].seriesName + ':' + params[i].value + '&nbsp' ;
        }else{
          showHtm += params[i].marker + params[i].seriesName + ':' + params[i].value + '&nbsp&nbsp ' ;
        }
      }else{ showHtm += params[i].marker + params[i].seriesName + ':' + params[i].value+ '';
      }
    }
    return showHtm;
  }
}

參數params[0].axisValue:獲取對應x軸的值;

參數params[i].marker:在每個顯示值前添加不同顏色的圓圈,區分每條折線;

參數params[i].seriesName:獲取每條折線的名稱;

參數params[i].value:獲取每條折線的值;

修改后的顯示框:


免責聲明!

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



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