技術標籤：vuejavascript視覺化css

echart是流行的視覺化工具，應用echart可以畫出很多想象不到的炫目canvas效果。筆者作為前端工程師長期從事大資料視覺化專案，對echart也有深度應用。再此前文章中也多次討論過echart的各種應用場景，本文將針對echart當中的tooltip文字做全面的表述。
echart中的tooltip是在canvas上的懸停效果的設定，位置在option下的一個屬性：

let option = {
...
	tooltip: {
		...
	}
...
}

其中的基本樣式和字型、背景等可以參考官網手冊，很簡單。本文主要討論tooltip的文字設定方式。熟悉echart的朋友們肯定都對以下幾種方式（除了第4種）都非常熟悉了：

1. 在tooltip中不設定文字顯示方式，直接用tooltip預設文字
2. 通過字串模板設定的方式
3. 通過回撥函式設定的方式
4. html片段設定的方式

本文將針對一個例項簡述前三種方式以及第四種容易被忽略或不瞭解方式進行描述。詳細程式碼讀者可以到我的git專案檢視具體程式碼：

link

本專案是筆者參考具體工作中的一個應用來複制的，也是在這個應用中運用到了html設定tooltip的方式。這裡程式碼很簡單，是一個echart桑基圖，業務邏輯已隱去，我們要看的就是懸停後的tooltip顯示效果。

tooltip預設文字

在option.js中已針對tooltip進行了基本字型及背景等樣式設定，就可以進行使用了。首先不設定具體tooltip文字回顯方式，echart會採用其預設的方式回顯。如下程式碼註釋了三種tooltip文字顯示方法，只採用預設顯示

draw () {
  // this.templateTooltip() // 模板tooltip
  // this.customTooltip() // 自定義tooltip
  // this.enrichTooltip() // html tooltip
  this.$nextTick(() => {
    let mySankey = echarts.init(document.getElementsByClassName('echart-tooltip')[0])
    mySankey.setOption(this.optionSankey)
  })
}

可以看到如下的顯示內容，echart為tooltip給定了預設展示內容為"名稱：數值"

字串模板

官網中給出了字串模板的方式，我們可以直接給tooltip中formatter一個字串，其中{}內包含如a、b、c等的模板字面值，其代表tooltip物件中的不同欄位。如我這裡的例子，{c}代表顯示該項的數值

templateTooltip () {
  this.optionSankey.tooltip.formatter = '{c}'
}

回撥函式

前兩種方式非常簡單，也可以滿足基本的視覺化效果。但是實際中，筆者遇到經常會有需求要求根據自定義的方式進行顯示。在實際專案中，基本上每個視覺化圖都很少直接會用到前兩種方式，而是運用回撥函式來定製化返回內容。具體來說，不同於前一種直接給定formatter一個字串，formatter也可以直接接受一個回撥函式來進行顯示：

customTooltip () {
  this.optionSankey.tooltip.formatter = (param) => { return `${param.name}: ${param.value}` }
},

這裡param代表當前懸停的視覺化目標項，我們取其名稱及數值可以完成一個類似於第一種tooltip預設文字內容的效果

這種方式應用範圍非常廣，我們甚至可以將未儲存於echart內部的數值也拿來參與計算來回顯。比如我們這裡需要顯示一個百分比，代表當前項佔當前桑基圖層級總數的一個百分比，比如這裡當前項所處的級別的總數是30000，這個30000顯然在業務邏輯中我們不會將它存於echart內。通常的做法我們在外面的邏輯中累加好總數，再給tooltip添加回調函式，通過param.value除以總數來回顯百分比。具體如下：

customTooltip () {
  this.optionSankey.tooltip.formatter = (param) => { return `${param.name}: ${param.value} (${(param.value * 100 / 30000).toFixed(2)}%)` }
},

效果如下：

html片段

前面三種方式，對於做過echart視覺化的小夥伴來說使用上應該是輕車熟路，但對於第四種方式，筆者在做本文這個需求的視覺化前也未曾用過。實際上，在這個視覺化之前的很多需求中，也用到了回撥函式使用br進行換行的格式化效果，然而思想上還未轉變到直接寫html上來。
實際上，在回撥函式中我們不僅可以返回文字內容，也可以直接寫html片段自定義各種tooltip顯示效果，這點其實在官網上的文件也沒有清楚地表述出來。在本例中，我簡單寫了一個html返回的回撥方式，可以看到，通過這種方式我們可以像寫前端頁面一樣來運用tooltip：

enrichTooltip () {
  this.optionSankey.tooltip.formatter = (param) => {
    if (param.dataType === 'node') {
      const txt = `<div style="width:178px;height:50px;font-size:12px;">
        <div style="height:50px;text-align:center;margin:0 10px 0 10px;">
          <div style="height:25px;line-height:25px;color:#333;">${this.splitMergeName(param.name)}</div>
          <div style="height:25px;line-height:25px;color:green">瀏覽量：${formatData(param.value)}</div>
        </div>
      <div>`
      return txt
    }
  }
},

具體效果如下：