echarts中,自定義tooltip提示框樣式


最近在做echarts圖表的時候,由於數據需要保留兩位小數顯示,結果桑吉圖他有個總數值是自己計算的,所以浮點數計算導致數值小數位不止兩位,就需要做處理,記錄一下踩過的坑

1.采用了formatter回調函數的方式,自己拼寫字符串,給顯示的數值做一個數據處理保留兩位小數

2.由於數據過多,導致tooptip被遮蓋,顯示不全各種問題,也同樣可以解決

tooltip: {
  trigger: 'axis',
  axisPointer: { // 坐標軸指示器,坐標軸觸發有效
    type: 'shadow' // 默認為直線,可選為:'line' | 'shadow'
  },
  enterable: true, // 鼠標是否可進入提示框浮層中
  hideDelay: 200, // 浮層隱藏的延遲
  confine: true,
  backgroundColor: 'rgba(255,255,255, 1)',
  formatter: function (params) {
    var htmlStr = '<div style="height: auto;max-height: 240px;overflow-y: auto;"><p>' + params[0].axisValue + '</p>';
    for (var i = 0; i < params.length; i++) {
      htmlStr += '<p style="color: #666;">' + params[i].marker + params[i].seriesName + ':' + params[i].value + '</p>';
    }
    htmlStr += '</div>'
    return htmlStr
  },
  extraCssText: 'box-shadow: 0 0 3px rgba(150,150,150, 0.7);',
  textStyle: {
   fontSize: 12,
   color: '#fff'
  }
 },
 legend: {
   type: 'scroll',
   orient: 'horizontal',
   left: 15,
   right: 15,
   bottom: 10,
   data: legendData,
   pageButtonPosition: 'end'
},

 


免責聲明!

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



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