vue + echarts + 百度地图 画地图散点图

更新：升级echarts5.0.1版本后，之前的操作引入百度地图发现地图并没有绘制，需要在文件引入MP的地方新增一句

import 'echarts/extension/bmap.js'

-------------------------------------------分割线---------------------------------
创建画图区域

<div id="myChart"></div>

创建js文件引入百度地图js文件, baidu-map.js

export function MP (ak) {
  const BMap = window.BMap // 这里写一句解决BMap is not defined错误
  return new Promise(function (resolve, reject) {
    if (typeof BMap !== 'undefined') {
      resolve(BMap)
      return true
    }
    window.onBMapCallback = function () {
      resolve(BMap)
    }
    let script = document.createElement('script')
    script.id = 'baiduMap'
    script.type = 'text/javascript'
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

在要画图的组件文件中mounted函数引入并调用创建的画百度地图函数

import {MP} from 'baidu-map.js'
methods: {
  drawMap(){
    let data = [
    	 {name: '海门', value: 9},
    	 {name: '鄂尔多斯', value: 12},
   	 	 {name: '招远', value: 12},
    	 {name: '舟山', value: 12},
    	 {name: '齐齐哈尔', value: 14},
    	 {name: '盐城', value: 15},
    	 {name: '赤峰', value: 16}
		]
	let geoCoordMap = {
    	'海门':[121.15,31.89],
    	'鄂尔多斯':[109.781327,39.608266],
    	'招远':[120.38,37.35],
    	'舟山':[122.207216,29.985295],
    	'齐齐哈尔':[123.97,47.33],
    	'盐城':[120.13,33.38],
    	'赤峰':[118.87,42.28]
	}
	let convertData = function (data) {
    	var res = [];
    	for (var i = 0; i < data.length; i++) {
     	   var geoCoord = geoCoordMap[data[i].name];
      	  if (geoCoord) {
       	     res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
          }
    	}
    	return res;
	}
option = {
    title: {
        text: '全国主要城市空气质量 - 百度地图',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center'
    },
    tooltip : {
        trigger: 'item'
    },
    bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true
    },
    series : [
        {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            encode: {
                value: 2
            },
            label: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            itemStyle: {
                color: 'purple'
            },
            emphasis: {
                label: {
                    show: true
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            encode: {
                value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                formatter: '{b}',
                position: 'right',
                show: true
            },
            itemStyle: {
                color: 'purple',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        }
      ]
	}
	  let mapDiv = document.getElementById('myChart')
      let myChart = echarts.init(mapDiv)
      myChart.setOption(option)


  }
},
mounted(){
  this.$nextTick(() => {
      MP(ak).then(BMap => {  //ak 是在百度地图开发者平台申请的密钥
        this.drawMap() // 画图的函数，这里复制Echarts官方的数据
      })
    })
}