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 第二個參數影響。