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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM