智慧指標吸附

在圖表中,有些可互動的元素可能會比較小,導致使用者,尤其是在移動端上,難以準確地點選或進行其他操作。因此,在 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 的柱狀圖、散點圖等)的圖表系列,吸附功能不會被啟用。

貢獻者 在 GitHub 上編輯此頁

Oviliaplainheart