vue-echarts绘制百度地图的流程与问题

        在Vue开发中，想要使用echarts绘制一个百度地图，在实现过程中，遇到几个坑，在此记录一下。

实现流程

1. 安装vue-echarts 和echarts

npm i -S vue-echarts echarts

2. 注册组件

import ECharts from 'echarts'
import VueECharts from 'vue-echarts/components/ECharts.vue'

Vue.prototype.$echarts = ECharts
Vue.component('v-chart', VueECharts)

3. 引入百度地图js库

        在index.html中添加百度地图需要的js库

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>

4. 编写容器组件

<template>
  <vue-echarts :options="options" />
</template>

<script>
  import 'echarts/extension/bmap/bmap'

  export default {
    data() {
      return {
        options: {}
      }
    },
    mounted() {
      this.options = {
        bmap: {
          key: 'G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb',
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: false
        }
      }
  }
</script>

<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

遇到的问题总结

        1. 一定要引入echarts的bmap扩展，否则将不能识别bmap属性

import 'echarts/extension/bmap/bmap'

        2. 百度地图要选择2.0版本，1.0版本将会报错：BMap api is not loaded。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<!--不可用-->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script> -->

        3. 注册echarts和vue-echarts组件后，如果是按照下面代码引入vue-echarts，地图会一直显示不出来：

import VueECharts from 'vue-echarts'

        因为vue-echarts本身也包含了一个echarts.js，这个vue-echarts中的echarts对象与工程中引用到的echarts库中的echarts对象并不是同一个，所以需要修改成下面的：

import VueECharts from 'vue-echarts/components/ECharts.vue'

        此时的ECharts.vue 才会引用工程 node_modules 目录下的 echarts。重启代码，就可以正确加载出地图了。