echarts 圖表配置tooltip 的formatter

ECharts 的圖表配置非常的靈活自由，但是不熟悉的時(shí)候容易不知道怎么配置。

最近遇到一處需要自定義tooltip的內(nèi)容，小小的踩了個(gè)坑，特此記錄一下解決過程。

tooltip是什么

有的同學(xué)可能不清楚tooltip是什么，它實(shí)際上就是鼠標(biāo)移到圖表上后展示的類似數(shù)據(jù)點(diǎn)詳情的一個(gè)說明，就是我圖片上框出來的那個(gè)

在options配置項(xiàng)處于第一級(jí)目錄，與series，xAxis，yAxis同級(jí)

formatter 怎么配置?

formatter有兩種配置方式：①字符串模板 ②回調(diào)函數(shù)

個(gè)人覺得字符串模板自由度比較低，需要根據(jù)他給定的幾個(gè)模板變量例如 {a}, {b}，{c}，i220yau，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等去做拼接來展示

所以我會(huì)著重講自由度更高的回調(diào)函數(shù)方式

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

1

2

3

4

5

6

7

8

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

$vars: (3) ["seriesName", "name", "value"] axisDim: "x" axisId: "series00" axisIndex: 0 axisType: "xAxis.category" axisValue: "九月11號(hào)" axisValueLabel: "九月11號(hào)" color: "#3b85ff" componentIndex: 0 componentSubType: "line" componentType: "series" data: 12 dataIndex: 0 dataType: undefined marker: "" name: "9月11號(hào)" seriesId: "降雨量0" seriesIndex: 0 seriesName: "降雨量" seriesType: "line" value: 12

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

可以看到我們主要需要的屬性是在第一個(gè)參數(shù)內(nèi)，我們可以給他命名params。

params是一個(gè)數(shù)組，長(zhǎng)度和數(shù)據(jù)項(xiàng)條數(shù)一致，所以如果我們有多個(gè)條目需要展示的時(shí)候需要針對(duì)這個(gè)params做個(gè)循環(huán)。

params里每一項(xiàng)都是一個(gè)對(duì)象，對(duì)象中的屬性說明可以參考文檔，其實(shí)這個(gè)內(nèi)容和字符串模板的模板變量是類似的，但是可讀性更高。

我們用的比較多的可能是：

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。