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

在使用echarts時，默認所有的tooltip都是垂直一列顯示，如果顯示的數(shù)據(jù)個數(shù)較多時，一列顯示就會比較長。本文將介紹通過自定義tooltip來實現(xiàn)多列顯示。

使用官方自帶的例子進行示范

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

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

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

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

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

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

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

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

查看示例代碼

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

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