【案例学习】Echarts地图案例本地调试

Echarts官网中地图案例：

案例1：GEO SVG Map；

案例2：Draw Polygon on Map。（使用到百度地图AK）

**********************************************

使用工具与软件：VSCode + VueCLI + Echarts。

************************************************************************

Echarts官网中地图案例在vueCLI项目中的调试步骤有四：

1. 使用VSCode创建VueCLI项目;

2. 使用npm安装Echarts依赖;

3. 在VueCLI项目中引用Echarts;(最重要)

4. Echarts地图案例复制到本地vueCLI项目中调试运行。

---

 （1）使用VSCode创建VueCLI项目

        由于可以搜csdn上相关的技术博客，所以这里不做介绍。注：创建项目名称时，避免出现大写字母。如：VueCLI项目命名为 vuemap。

（2）使用npm安装Echarts依赖

        其中，需要在vuemap项目下，使用npm安装Echarts依赖的命令如下所示：

npm install echarts --save  


//指定版本安装echarts
npm install echarts@x.x.x --save
 

        注：验证是否安装成功的方法——查看vuemap项目下的package.json文件。如，若存在echarts版本号则说明安装成功。这里安装的echarts5版本，非echarts4版本！

 （3）在VueCLI项目中引用Echarts 

        注：echarts4 和echarts5 的引入方式不一致。但都存在2种模式的引入方式。

1. import echarts from 'echarts' 
//echarts4 的引入方式
******************************************
2. echarts5 的引入方式：
   a. import * as echarts from "echarts"   
// ESmodule模式引入方式

   b. var echarts = require('echarts'); //echart5版本的
// CommonJS模式引入方式

// 其中，按需引入：import * as echarts from 'echarts/lib/echarts'

       方法一：全局方式引用echarts。

        ① 在main.js 文件添加命令

 1. import * as echarts from "echarts" 或 var echarts = require('echarts'); 

 2. Vue.prototype.$echarts = echarts //简写形式

// Object.defineProperties(Vue.prototype, {
//   $echarts: { get: () => echarts }
// });

           ② 在案例vue文件中使用命令 this.$echarts 进行调用。

this.自定义全局变量 = this.$echarts.init(document.getElementById('id名称')); 

       方法二：局部方式引用echarts。

        ①  在案例vue文件中的<script></script>中，添加echarts的引用后，直接使用 echarts 进行调用。

<script>
  import * as echarts from "echarts"  
 //var echarts = require('echarts'); 
  export default {
   name:'xxx',
   props:{},
   data () {
      return {
        myChart:null,
      };
   },
   mounted() {
    this.myChart = echarts.init(document.getElementById('id名称'));
  },
</script>

 （4）Echarts地图案例复制到本地vueCLI项目中调试运行

        注：① 利用$.get获取相关的局变量，需使用self代替this。且需下载JQuery依赖并引入。

                ② 百度地图的下载与ak引入。

 
//在main.js文件下

1. import BaiduMap from 'vue-baidu-map' 
2. Vue.use(BaiduMap, {
  ak:'你的ak'
});

3. import * as echarts from "echarts"   // echarts5的引入方式。
4. Vue.prototype.$echarts = echarts 

**********************************************

//具体案例.vue文件下

1. import 'echarts/extension/bmap/bmap'  //引入百度地图
2. import { loadBMap } from '../map.js'  //引入map.js文件
3. var $ = require('jquery');  //jquery引入

***********************************************
//新建 map.js文件，与main.js文件处于同一文件夹。

export function loadBMap(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 +'&__ec_v__=20190126&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}