目前由 Apache 所進行主要維護的 Echarts ,其能夠利用的組合相當多樣,預設可提供的範本也非常多。若不喜歡預設的 Tooltip,或是要客製化顯示的資料,都可以透過 “formatter” 的參數來進行設定。
程式碼
1. 在 formatter 所撰寫的 callback function,需要先事先帶上自定義的 class ( 如 tooltip )。這樣一來,你就可以透過撰寫 CSS 的方式,來讓 Tooltip 的樣式符合你的期待
2. 承上,你可以印出由 Echarts 本身所傳入的 params,來客製化你想要的值和內容
3. 若要 Debug,請注意 Tooltip 是要滑動的圖表上的對應位置,才會觸發顯示對應內容的。因此,一次不小心觸發一堆同樣的內容是很常見的
4. 若要做到 RWD,可以在 window (瀏覽器中的 Global 物件)中,加上監聽器。並將監聽到的視窗大小傳入 Echarts Instance 中的 resize 函式即可
Demo