上一篇文章為大家分享了如何控制echarts的提示文字的顏色和如何自定義文字。接下來(lái)為大家分享如何自定義提示框的文字。

       Echaets默認(rèn)的提示框如下。

       而我們要做成這種樣式。

       簡(jiǎn)單分析一下，整個(gè)提示框分為上下兩層，上層由數(shù)據(jù)名、數(shù)據(jù)值、和‘次’組成，下層是數(shù)據(jù)的時(shí)間，有趣的地方是上層和下層的css明顯不一樣。而echarts的官方文檔中并沒(méi)有這樣根據(jù)換行來(lái)改變css的屬性，因?yàn)樘崾究蛭淖謱?duì)于他們來(lái)說(shuō)只是一條數(shù)據(jù)，但是觀(guān)察默認(rèn)樣式我們可以發(fā)現(xiàn)，它的數(shù)字明顯是加粗的，還有藍(lán)色小圓點(diǎn)，所以肯定是有方法的，如同labelde的formatter可以使用回調(diào)函數(shù)，tooltip的formatter也可以使用回調(diào)函數(shù)，我們打印一下formatter的參數(shù)params。

       可以發(fā)現(xiàn)marker這條數(shù)據(jù)就是默認(rèn)小圓點(diǎn)的數(shù)據(jù)，是html結(jié)構(gòu)的字符串，猜測(cè)可以通過(guò)這種html的字符串賦予文字樣式，于是嘗試了一下，最后得到的如下的用例。

       最后得出方法：通過(guò)字符串拼接span標(biāo)簽和數(shù)據(jù)。在span里定義style樣式。