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

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