1.安装Echarts

npm i echarts -S ||npm install echarts --save

 

 

官网教程： https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

2.安装element-ui

npm i element-ui -S

 

官网教程：https://element.eleme.cn/#/zh-CN/component/installation

3.安装百度地图

首先要去申请百度地图的密钥

官网步骤：http://lbs.baidu.com/index.php?title=jspopular3.0/guide/getkey

完成前两步后：

 填写申请信息后就可以得到ak了：

 完成后就去vue项目中应用地图

可以查考官网的教程，一步一步很详细：

http://lbs.baidu.com/index.php?title=jspopular3.0/guide/show

但是官网的步骤是原始的代码结构，不适合VUE，所以我又去找了一下资料，找到一位博客：

https://blog.csdn.net/liub37/article/details/83750164

4.使用百度地图

先在api或者其他文件里面创建一个js文件
map.js

export function map(ak) {
  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.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)
  })
}

再在你需要使用的vue里面引用
import {map} from '../api/map'

//定义
  data() {
        return {
          mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
          myMap: null
        };
      },
  mounted() {
        this.initMap()
      },
      methods: {
        initMap() {
          map('你的ak')
            .then(() => {
              // 百度地图API功能
              this.myMap = new BMap.Map(this.mapId) // 创建Map实例
              this.myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
              //添加地图类型控件
              this.myMap.addControl(
                new BMap.MapTypeControl({
                  mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                })
              )
              this.myMap.setCurrentCity('北京') // 设置地图显示的城市 此项是必须设置的
              this.myMap.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
            })
            .catch(err => {
              console.log('地图加载失败')
            })
        },
      }

最后再
<template>
  <div>
    <div class="mapdiv" :id="mapId"></div>
  </div>
</template>

效果图：