vue-echarts 拖動地圖後重置數據散點顯示錯位

vue-echarts: v5.0.0

問題描述

原始地圖:

拖動地圖後重置散點數據,散點被重置到原始位置,地圖位置沒變,顯示錯位:

原因

代碼裏使用 computed 生成的 options ,每次生成的都是新的 options

vue-echarts 源碼中監聽 options 變化,然後調用 this.chart.setOption(val, val !== oldVal),相當於 setOption 的第二個參數固定傳 true

setOption 的第二個參數: “是否不跟之前設置的 option 進行合併,默認爲 false,即合併。”

options 裏地圖 geo 未初始化(保持拖動後的位置),series 散點被初始化,導致散點和地圖錯位。

解決方案

始終維護同一個 options。

不使用 computed ,地圖首次加載時生成 options ,修改數據時使用 options.server.xx.xx ,保持 options 是同一個引用,vue-echarts 會使用合併的方式重新渲染地圖。

注意 如果可縮放,縮放後修改數據依然會發生錯位,可以使用 clear 先清空地圖。

總結

  • vue-echarts 監聽 options ,通過對比新舊 options 設置 setOption 的第二個參數,即是否和之前 option 合併。
  • options.geo 地圖不受 setOption 第二個參數影響。

whosmeya.com

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章