elementUI中引入echaert地图展示

1、在index.html中引入百度秘钥

<script src="http://api.map.baidu.com/api?v=3.0&ak=申请的key"></script>

2、在webpack的配置文件中设置外部扩展：
　  如果是Vue-cli2，在build/webpack.base.conf.js中加入以下代码：

　  

module.exports = {
    ......
    //externals属性：防止将某些import的包package打包到bundle中，而是在runtime运行时再去从外部获取这些external dependencies扩展依赖
    externals:{
        'BMap': 'BMap',
        'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
     }
}

  如果是Vue-cli3，在vue.config.js中加入以下代码：

  

module.exports = {
    ......
    configureWebpack:{
        externals:{
              'BMap': 'BMap',
              'BMap_Symbol_SHAPE_POINT':'BMap_Symbol_SHAPE_POINT'
        }
    }
}

3、npm安装echarts：

npm install echarts --save

4、如果是在全局引入：在main.js中加入以下代码：

　 

import echarts from "echarts";
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
Vue.prototype.$echarts = echarts;

5、在需要的组件中引入扩展插件：

　　

require('echarts/extension/bmap/bmap')

6、实现效果图：