Echarts中使用Draw Polygon on Map地图等(史上最详细)

项目需要接入这样的图
1.引入echarts等,就不用多说了.
2.copy代码
3.我们会发现浏览器报错,
⑴第一种错误

[Vue warn]: Error in nextTick: "TypeError: api.coord is not a function"

在echarts中搜索api,然后打印,找到这个coord方法

然后在项目代码中打印这个api

然后看接着找问题,看配置代码时发现

这几个属性在配置手册中查不到信息,通过百度得知,还需要引入百度地图的ak接口.
然后注册百度地图AK(自行百度方法),提醒一下一定要选择浏览器端

然后找到我们的index.html加上下面的代码(ak后面填你注册的ak)

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

接下来我们回到地图的页面,如果下的是echarts的完整包的话直接引入bmap

import 'echarts/extension/bmap/bmap'

然后就可以正常的出来图了
如果还有报echarts为undifine的错,可能是下面的错误

解决方法是

如果还有什么问题,欢迎下方留言
关于控制地图放大缩小

myChart.on('finished', () => { //设置倍数
      // 从echarts对象中获取bmap对象
      var bmap = myChart.getModel().getComponent('bmap').getBMap();
      // 设置最小缩放值
      bmap.setMinZoom(5);
      // 设置最大缩放值
      bmap.setMaxZoom(6);
      // 缩放结束后的事件
      bmap.addEventListener('zoomend', function () {
          // 打印出当前缩放值
          console.log("打印当前倍数", bmap.getZoom());
      })
  })

不知道自己百度地图是啥版本的打开node_modules文件夹,找到echarts包然后如图.妈个鸡的之前看抄别人代码是https//api.我这个2.0版本只支持http,虽然不影响使用,一直报错,真整蒙了.