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 第二个参数影响。