Echarts与百度地图结合使用的实践总结

在项目中,常常会涉及到地图相关的比较炫,相对复杂的效果实现需求,这个时候,将echarts与百度地图结合使用,就势在必行了。以下是自己在实践过程中遇到问题的简要总结:

如:已经创建了一个echarts实例,var myChart = echarts.init(document.getElementById('allmap'));且进行了相关参数的设置,myChart.setOption(option);
1.通过echarts实例获取地图实例的方法

  • var bmap = myChart.getModel().getComponent('bmap').getBMap();
  • 获取到的百度地图对象bmap适用于所有的百度地图的接口。
  • 如,设置地图的最大最小缩放级别:
    bmap.setMinZoom(5);
    bmap.setMaxZoom(6);

2.对bmap进行相关设置操作,但无效的原因及解决办法

  • 问题原因查找的思路:
    1)排除其他代码干扰因素,去官网示例中进行操作,看是否有效。
    2)若有效,比较自己的代码与官网示例的差异,锁定可能存在问题的部分,进行问题排查
  • 解决方法:当数据是通过ajax异步请求得到时,重新执行了myChart.setOption(option)的设置语句,此时,需要重新通过该实例myChart去获取地图对象bmap并进行相关的设置操作。

3.数据定时刷新,即定时进行myChart.setOption(option)的设置时,地图也进行了重载,导致出现了地图一闪一闪的抖动,影响使用的原因及解决方法

  • 问题原因查找的思路:同上面的问题2
  • 解决方法:myChart.setOption(option,true)去掉该设置语句中的第二个参数true,加上该参数,会导致重绘

4.在页面定时刷新的过程中,数据不断堆叠,效果堆叠,最后页面地图无法显示,页面崩溃的原因及解决方法

  • 问题原因查找的思路:起初,用到了myChart.clear()方法,起到了一定的作用,但是仍然效果不佳。
    实际上,在查找bug原因时,一定要充分利用浏览器的js断点调试,来查看代码的执行情况,从而明确定位到bug原因,而不能是,单纯地从效果着手解决问题。
  • 解决方法:在每次myChart.setOption(option)时,需要清空series,否则就是不停地往series里面push数据。

5.点击页面中的DOM节点,如tab选项卡,对应切换地图效果渲染的实现方法

  • 点击切换tab选项卡,对应切换legend的选中状态
option.legend.selected = {
    '第一项': false,
    '第二项': false,
    '第三项': false
};
option.legend.selected[selecteditem] = true;

6.本地运行ok,集成到项目里面,引用文件内报错的原因及解决方案

  • 本地调试ok之后,集成到项目里面,引用的文件报错,对于这种问题,基本上是写的代码的问题,而不是引用文件的问题,所以,着手点应该是集成前后的代码差异,本次的问题原因最后确定是后添加的一个容错处理return导致的。

7.文件引用的问题

  • 根据需要,引用echarts对应的js文件,比如需要散点图,则echarts.common.min.js就不够用了,所以引用的是echarts.min.js
  • 同时,还需要引用bmap.min.js,来完成echart的地图部分的功能。
原文地址:https://www.cnblogs.com/chaoyueqi/p/9830403.html