echarts 的圖表配置非常的靈活自由，但是不熟悉的時候容易不知道怎么配置。
最近遇到一處需要自定義tooltip的內(nèi)容，小小的踩了個坑，特此記錄一下解決過程。

tooltip是什么

有的同學(xué)可能不清楚tooltip是什么，它實際上就是鼠標(biāo)移到圖表上后展示的類似數(shù)據(jù)點詳情的一個說明，就是我圖片上框出來的那個
在options配置項處于第一級目錄，與series，xAxis，yAxis同級

formatter 怎么配置?

formatter有兩種配置方式：①字符串模板 ②回調(diào)函數(shù)
個人覺得字符串模板自由度比較低，需要根據(jù)他給定的幾個模板變量例如 {a}, {b}，{c}，ozvdkddzhkzd，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等去做拼接來展示
所以我會著重講自由度更高的回調(diào)函數(shù)方式

options = {tooltip: {formatter: function() {console.log(arguments)}} }

首先我們把回調(diào)函數(shù)的參數(shù)打印出來看看

$vars: (3) ["seriesName", "name", "value"] axisDim: "x" axisId: "series00" axisIndex: 0 axisType: "xAxis.category" axisValue: "九月11號" axisValueLabel: "九月11號" color: "#3b85ff" componentIndex: 0 componentSubType: "line" componentType: "series" data: 12 dataIndex: 0 dataType: undefined marker: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3b85ff;"></span>" name: "9月11號" seriesId: "降雨量0" seriesIndex: 0 seriesName: "降雨量" seriesType: "line" value: 12

可以看到我們主要需要的屬性是在第一個參數(shù)內(nèi)，我們可以給他命名params。
params是一個數(shù)組，長度和數(shù)據(jù)項條數(shù)一致，所以如果我們有多個條目需要展示的時候需要針對這個params做個循環(huán)。
params里每一項都是一個對象，對象中的屬性說明可以參考文檔，其實這個內(nèi)容和字符串模板的模板變量是類似的，但是可讀性更高。
我們用的比較多的可能是：

params[i].data: 數(shù)據(jù)值 params[i].seriesName: 條目名 params[i].marker: 顏色點options = {tooltip: {formatter: function(params) {let str = '';params.forEach((item, idx) => {str += `${item.marker}${item.seriesName}: ${item.data}`switch (idx){case 0:str += '個';break;case 1:str += '條';break;case 2:str += '次';break;default:str += 'w(ﾟДﾟ)w'}str += idx === params.length -1? '': '<br/>'})return str}} }

說到底，無論是哪種方式，最終formatter 的值都是字符串，所以我們需要做的就是字符串的拼接，回調(diào)函數(shù)的方式的優(yōu)勢在于處理字符串更加靈活，調(diào)用屬性的方式獲取想要的值，可讀性更高。

總結(jié)

以上是生活随笔為你收集整理的echarts 图表配置tooltip 的formatter的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。