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、實現效果圖：