上一篇文章為大家分享了如何控制echarts的提示文字的顏色和如何自定義文字。接下來為大家分享如何自定義提示框的文字。
Echaets默認(rèn)的提示框如下。
而我們要做成這種樣式。
簡單分析一下，整個提示框分為上下兩層，上層由數(shù)據(jù)名、數(shù)據(jù)值、和‘次’組成，下層是數(shù)據(jù)的時間，有趣的地方是上層和下層的css明顯不一樣。而echarts的官方文檔中并沒有這樣根據(jù)換行來改變css的屬性，因?yàn)樘崾究蛭淖謱τ谒麄儊碚f只是一條數(shù)據(jù)，但是觀察默認(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)的字符串，猜測可以通過這種html的字符串賦予文字樣式，于是嘗試了一下，最后得到的如下的用例。
最后得出方法：通過字符串拼接span標(biāo)簽和數(shù)據(jù)。在span里定義style樣式。
開啟了相對路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟(jì)南建站手術(shù)移動護(hù)理系統(tǒng)詳細(xì)流程(千佛山醫(yī)院版）")
開啟了相對路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟(jì)南建站手術(shù)移動護(hù)理系統(tǒng)")
開啟了相對路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對路徑（在關(guān)閉開發(fā)者模式后不顯示這句話） "濟(jì)南建站紅寶書智慧黨建平臺")
