zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    基础编程练习题第一波
    TYVJ 1541 八数码
    NOIP 2014 寻找道路
    NOIP2014 解方程
    POJ 3213 矩阵乘法(优化)
    POJ 1523 Tarjan求割点
    POJ 3237 树链剖分+线段树
    SPOJ 375 树链剖分
    NOIP 2012 T2 国王游戏 (贪心+高精)
    POJ 1364 差分约束
  • 原文地址:https://www.cnblogs.com/whosmeya/p/14304257.html
Copyright © 2011-2022 走看看