[笔记] 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 基本设置


按赞加入粉丝团

延伸阅读