vue+echarts+bmap绘制散点图

基于echarts的中国地图散点图在上篇博客中已经写过了，这篇博客主要写一下基于扩展的百度地图为地图绘制的方法
1.在main.js注册echarts
2.在页面引入bmap.js

import 'echarts/extension/bmap/bmap.js'

3.单纯的引入bmap，浏览器会报错 BMap is not defined，参考了很多博客，发现需要单独写一个js文件，进行异步操作，

export function MP(ak) {
  return new Promise(function (resolve, reject) {
    window.onload = function () {
      resolve(BMap)
    }
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=init";
    script.onerror = reject;
    document.head.appendChild(script);
  })
}

然后在所需的页面引入

import {MP} from './baidu-map.js'

4.在mounted里面执行

 this.$nextTick(() => {
        let _this = this
        MP(你申请的百度ak).then(BMap => {
          document.getElementById('myChart').style.height = window.screen.availHeight * 0.9 + 'px'
          this.$nextTick(() => {
            this.drawLine()
          })
          window.addEventListener('resize', () => {
            this.$echarts.init(document.getElementById('myChart')).resize()
          })
        })
      })

5.前期准备工作完成之后，绘制散点图就与上一篇博客类似了，只需把option.geo换成

bmap: {
            // 百度地图中心经纬度
            center: [119.222119, 36.717958],
            // 百度地图缩放
            zoom: 14,
            // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
            roam: true,
            min: 12,
            max: 18
          },

把依赖的坐标系改为bmap

coordinateSystem: 'bmap',