ECharts 結合 Vue 一同使用時，若你配合 RWD 使用，要注意其 Tooltip 的位置能否配合視窗大小來調整位置，否則會導致縮放時跑版。
核心觀念
因為 RWD 縮放時，圖表所在的 <div> 寬度會一直有變動。所以 Tooltip 的位置，得以滑鼠游標位置為基準點，去判斷 tooltip 的寬度和 <div> 上側、左側的距離，這樣才能避免破版。
程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
position: function (point, params, dom, rect, size) { // 参考座標系：外層 div 的左上角為原點，往右為 x 軸正向，往下 為 y 軸正向 let x = 0 let y = 0 // 當前游標位置 const pointX = point[0] const pointY = point[1] // 提示框大小 const boxWidth = size.contentSize[0] const boxHeight = size.contentSize[1; // boxWidth > pointX 代表游標左邊放不下提示框 boxWidth > pointX ? x = 5 : x = pointX - boxWidth; // boxHeight > pointY 代表游標上邊放不下提示框 boxHeight > pointY ? y = 5 : y = pointY - boxHeight return [x, y] } |
參考資料
1. Echarts提示框（tooltip）位置设置
2. echarts tooltip 文字过长 ，折行显示
