智慧指標吸附
某些互動元素在圖表中可能相對較小,因此有時使用者難以精確點擊並進行其他操作,尤其是在行動裝置上。因此,在 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
的長條圖、散佈圖等),將不會啟用吸附。