【大屏】 amap + echarts 踩坑以及避免办法

最新推荐文章于 2024-08-15 09:35:56 发布

素心2020

最新推荐文章于 2024-08-15 09:35:56 发布

阅读量2.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44683095/article/details/116974969

版权

本文主要探讨在大屏应用中使用Echarts与高德地图(Amap)集成时遇到的问题，包括layer.render无效导致的动效不同步、事件触发冲突等，并给出了相应的解决建议。

摘要由CSDN通过智能技术生成

amap + echarts 踩坑以及避免办法

大屏
踩坑
代码

大屏

html,body,#container {
margin: 0;
padding: 0;
width: 5376px;
height: 1944px;
background-color: #000;
}

踩坑

现有的echarts amap插件非官方提供，巨坑，现排雷。
在这里插入图片描述

echarts-extension-amap插件使用，存在的问题：（推荐使用这个）

layer.render无效，echart动效无法随amap的移动同步渲染，有延迟

    //layer = myChart.getModel().getComponent('amap').getLayer();
    //下面是确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步
    //layer.render = function() {
   
     //   myChart.setOption({
   
      //      series: series
      //  });
  //  }

myChart.setOption({
    animation: false});
function initMapOn() {
   
    map.on('dragging', ()=>{
   
        myChart.setOption({
   
            series: series
        });
    })
}

echarts图层和amap元素图层的事件，只能触发一个图层的事件

 // echarts-extension-amap.js插件渲染的图层，覆盖掉了amap渲染的Marks图层的光标事件
 // 大屏一般都是做展示用，很少需要click，故这个坑可以合理避免————将点击事件集中到Marks图层上。
  #container .amap-maps{
   
    >div:last-child {
   
      pointer-events: none !important;
    }
  }

echarts-amap插件使用，存在的问题：
4. 不兼容2.0版本的高德地图

//插件无升级打算。
老大：可能是人升官了，所以不升级了，就是这么现实！
我：震惊！！！我好菜，我不配！！！

echarts图层和amap元素图层的事件，只能触发一个图层的事件

代码

<script src="./util/jquery-3.6.0.min.js" charset="utf-8"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=【你的key】"></script>
<script src="./util/AmapUI.js" type="text/javascript" charset="utf-8"></script>
<script src="./util/echarts.min.js"></script>
<script src="./util/echarts-extension-amap.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="./util/echarts-amap.min.js" type="text/javascript" charset="utf-8"></script>-->

<script src="./data/markers.js" charset="utf-8"></script>
<script src="js/initEchartMap.js" charset="utf-8"></script>
<script src="./js/index.js" charset="utf-8"></script>

$(function () {
   
    // initMap();
    // initMapLayer();

    initEchartMap();
    initMapPlugin()
    initMapOn();
    drawMapMakers();
    drawEchartScatter();
    addMarkerLabelAnimate