在使用echarts時(shí)，默認(rèn)所有的tooltip都是垂直一列顯示，如果顯示的數(shù)據(jù)個(gè)數(shù)較多時(shí)，一列顯示就會(huì)比較長(zhǎng)。本文將介紹通過(guò)自定義tooltip來(lái)實(shí)現(xiàn)多列顯示。使用官方自帶的例子進(jìn)行示范我們先采用官

在使用echarts時(shí)，默認(rèn)所有的tooltip都是垂直一列顯示，如果顯示的數(shù)據(jù)個(gè)數(shù)較多時(shí)，一列顯示就會(huì)比較長(zhǎng)。本文將介紹通過(guò)自定義tooltip來(lái)實(shí)現(xiàn)多列顯示。

使用官方自帶的例子進(jìn)行示范

我們先采用官方提供的一個(gè)折線(xiàn)圖作為例子。在tooltip下，我們需要增加一個(gè)formatter函數(shù)，并返回帶有html標(biāo)簽的文本。注意，字符串使用的不是單引號(hào)，而是與波浪線(xiàn)同一個(gè)按鍵下的符號(hào)。

查看結(jié)果，我們可以按照指定的顏色顯示文本。

編寫(xiě)樣式以表格形式顯示數(shù)據(jù)

我們首先使用網(wǎng)頁(yè)調(diào)試工具來(lái)編寫(xiě)一個(gè)樣式，將數(shù)據(jù)以表格的形式顯示出來(lái)。每個(gè)數(shù)據(jù)前還需要有一個(gè)小圓點(diǎn)，因此我們需要增加小圓點(diǎn)的樣式。

將style及表格代碼拷貝到tooltip的formatter函數(shù)中，這樣就可以正常顯示表格了。

將模擬數(shù)據(jù)替換成實(shí)際數(shù)據(jù)

現(xiàn)在，我們需要將表格中的模擬數(shù)據(jù)換成實(shí)際的數(shù)據(jù)。我們可以通過(guò)(params)來(lái)查看params內(nèi)的內(nèi)容，可以發(fā)現(xiàn)我們想要的數(shù)據(jù)、名稱(chēng)和顏色都可以在params中找到。

將style字符拷入函數(shù)內(nèi)，并將表格數(shù)據(jù)通過(guò)代碼的形式生成。這里我們共顯示兩列，你可以根據(jù)自己的需要進(jìn)行修改。

查看示例代碼

該示例代碼已經(jīng)上傳，你可以在下面的網(wǎng)址中修改和查看。

以上便是關(guān)于如何使用echarts自定義tooltip顯示的方法介紹。通過(guò)自定義tooltip，我們可以更靈活地展示數(shù)據(jù)，并且根據(jù)需求進(jìn)行樣式的調(diào)整。希望這些內(nèi)容對(duì)你有所幫助！