[筆記] Vue-ECharts Tooltip 套用 RWD 避免破版的相關設定 @地瓜大的飛翔旅程

章節連結

核心觀念
程式碼
參考資料

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

核心觀念

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

程式碼

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] 
}