echarts 的 formatter用法

前言：formatter格式化方法。使用formatter調用自定義的數據，把內容通過處理讓變成我們想要的樣子。

比如，echarts數據顯示是這樣的（bug：部分內容被隱藏掉了，顯示太長，不美觀）

這種情況，只能自己去寫顯示的樣式了。顯示的樣式怎么寫呢？

先看看echarts的文檔：tooltip：提示框組件的設置（顯示動態數據的半透明框）

formatter 的用法：

tooltip : {
   formatter: function (params) {
     // do some thing 
     return  “名稱：” +params.name
  }
}

 

params 數據如下：（不知道params是什么的，打多幾個斷點，打印下數據就知道了）

我的代碼：

 tooltip: {
          formatter: function(a) {
            let list = []
            let listItem = ''
            for (var i = 0; i < a.length; i++) {
              list.push(
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                  a[i].color +
                  ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:70px; display:inline-block;">' +
                  a[i].seriesName +
                  '</span>&nbsp&nbsp功效：' +
                  a[i].value[0] +
                  '&nbsp&nbsp專利數量：' +
                  a[i].value[1] +
                  '&nbsp&nbsp數量：' +
                  a[i].value[2]
              )
            }
            listItem = list.join('<br>')
            return '<div class="showBox">' + listItem + '</div>'
          }
        }

效果如下：

下一篇：X軸斜體顯示