How to Copy Echarts Map Examples to Local vueCLI Project (Commissioning Operation)

(4) Copy the Echarts map case to the local vueCLI project to debug and run


Note: ① Use $.get to get related local variables, you need to use self instead of this. And you need to download and import JQuery dependencies.


② Baidu map download and ak introduction.



//under main.js file


1. import BaiduMap from ‘vue-baidu-map’

2. Vue.use(BaiduMap, {

ak:’your ak’



3. import * as echarts from “echarts” // The introduction method of echarts5.

4. Vue.prototype.$echarts = echorts




//Specific case under .vue file


1. import ‘echarts/extension/bmap/bmap’ //Introduce Baidu Map

2. import { loadBMap } from ‘../map.js’ //Import map.js file

3. var $ = require(‘jquery’); //jquery import



//Create a new map.js file in the same folder as the main.js file.


export function loadBMap(ak) {

return new Promise(function(resolve, reject) {

if (typeof BMap !== ‘undefined’) {


return true


window.onBMapCallback = function() {



let script = document.createElement(‘script’)

script.type = ‘text/javascript’

script.src =

‘’+ ak +’&__ec_v__=20190126&callback=onBMapCallback’

script.onerror = reject


Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *