[筆記] ECharts 客製化 Tooltip

章節連結

目前由 Apache 所進行主要維護的 Echarts ,其能夠利用的組合相當多樣,預設可提供的範本也非常多。若不喜歡預設的 Tooltip,或是要客製化顯示的資料,都可以透過 “formatter” 的參數來進行設定。
apache echarts logo


程式碼

1. 在 formatter 所撰寫的 callback function,需要先事先帶上自定義的 class ( 如 tooltip )。這樣一來,你就可以透過撰寫 CSS 的方式,來讓 Tooltip 的樣式符合你的期待
2. 承上,你可以印出由 Echarts 本身所傳入的 params,來客製化你想要的值和內容
3. 若要 Debug,請注意 Tooltip 是要滑動的圖表上的對應位置,才會觸發顯示對應內容的。因此,一次不小心觸發一堆同樣的內容是很常見的
4. 若要做到 RWD,可以在 window (瀏覽器中的 Global 物件)中,加上監聽器。並將監聽到的視窗大小傳入 Echarts Instance 中的 resize 函式即可

Demo


 

參考連結

1. echart 中 tooltip 基本设置

按讚加入粉絲團

延伸閱讀