上一篇文章為大家分享了如何控制echarts的提示文字的顏色和如何自定義文字。接下來為大家分享如何自定義提示框的文字。
Echaets默認的提示框如下。
而我們要做成這種樣式。
簡單分析一下,整個提示框分為上下兩層,上層由數據名、數據值、和‘次’組成,下層是數據的時間,有趣的地方是上層和下層的css明顯不一樣。而echarts的官方文檔中并沒有這樣根據換行來改變css的屬性,因為提示框文字對于他們來說只是一條數據,但是觀察默認樣式我們可以發(fā)現(xiàn),它的數字明顯是加粗的,還有藍色小圓點,所以肯定是有方法的,如同labelde的formatter可以使用回調函數,tooltip的formatter也可以使用回調函數,我們打印一下formatter的參數params。
可以發(fā)現(xiàn)marker這條數據就是默認小圓點的數據,是html結構的字符串,猜測可以通過這種html的字符串賦予文字樣式,于是嘗試了一下,最后得到的如下的用例。
最后得出方法:通過字符串拼接span標簽和數據。在span里定義style樣式。