[筆記] Vue-ECharts Tooltip 套用 RWD 避免破版的相關設定

章節連結

ECharts 結合 Vue 一同使用時,若你配合 RWD 使用,要注意其 Tooltip 的位置能否配合視窗大小來調整位置,否則會導致縮放時跑版。
vue.js logo vue


核心觀念

因為 RWD 縮放時,圖表所在的 <div> 寬度會一直有變動。所以 Tooltip 的位置,得以滑鼠游標位置為基準點,去判斷 tooltip 的寬度和 <div> 上側、左側的距離,這樣才能避免破版。

程式碼


參考資料

1. Echarts提示框(tooltip)位置设置
2. echarts tooltip 文字过长 ,折行显示

按讚加入粉絲團

延伸閱讀