智慧指標吸附
在圖表中,有些可互動的元素可能會比較小,導致使用者,尤其是在移動端上,難以準確地點選或進行其他操作。因此,在 Apache EChartsTM 5.4.0 中,我們引入了“智慧指標吸附”的概念。
從該版本開始,ECharts 預設在移動端圖表中啟用指標吸附,而在非移動端圖表中停用。
如果需要為所有平臺啟用,可以在 init 時將
opt.useCoarsePointer
設定為true
來實現;設定為false
則為所有平臺關閉。
吸附演算法
當滑鼠或觸控事件發生時,ECharts 會根據滑鼠或觸控的位置判斷是否與某個可互動元素相交。如果相交,該元素就是互動物件,這與最佳化前的邏輯相同。如果不相交,則在一定範圍內尋找一個離滑鼠或觸控位置最近的元素。
預設範圍是 44px(參見 W3C 標準),開發者可以在 init 時透過
opt.pointerSize
設定這個值。
更具體地說,ECharts 會在滑鼠或觸控位置周圍,以不同的角度和不同的半徑(在 opt.pointerSize
範圍內)進行遍歷,直到找到一個與之相交的元素。如果找到,該元素就被視為互動物件。
也就是說,如果一個元素在滑鼠或觸控位置的 opt.pointerSize
半徑範圍內,那麼最近的相交元素被視為互動物件。
效能
在實現上,我們首先判斷滑鼠或觸控位置與所有可互動元素的 AABB 包圍盒之間的相交情況,從而快速排除掉大部分不相交的元素。然後,我們對剩餘的元素進行精確的路徑相交判斷。因此,從使用者體驗的角度來看,幾乎沒有任何可感知的效能損失。
對於大資料量(即啟用了 large: true
的柱狀圖、散點圖等)的圖表系列,吸附功能不會被啟用。