vue中引入百度地图

import * as echarts from '../../node_modules/echarts';
require('../../node_modules/echarts/extension/bmap/bmap');

<div id="mapContainer" class="mapContainer"></div>

drawChinaMap() {
        var myChart = echarts.init(document.getElementById('mapContainer'));
        var option;
        option = {
          backgroundColor: 'transparent',
          title: {
            text: '',
            subtext: '',
            sublink: '',
            left: 'center',
            textStyle: {
              color: '#5555ff'
            }
          },
          geo:{
            show:true,
                roam: true, //是否允许鼠标滚动放大，缩小
                map:'china',
                label: {  //图形上的文本标签，可用于说明图形的一些数据信息
                    show:true,  //是否显示文本
                    color:'#CCC',  //文本颜色
                },
                itemStyle: { //地图区域的多边形 图形样式。 默认样试。
                    areaColor: '#323c48', //地图区域的颜色。
                    borderColor: '#111', //边框线
                },
                emphasis:{ //高亮状态下的多边形和标签样式。
                    label:{ //文本
                        color: '#ADA',
                    },
                    itemStyle:{ //区域
                        areaColor: '#F60'
                    }
                },
            },
          tooltip: {
            trigger: 'item',
            formatter(data) {
              return "<div>设备名:" + data.name + "</div><div>" + data.value[2] + "</div><div>" +
                data.value[3] + "</div><div>" + data.value[4] + "</div>"
            }
          },
          bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
          },
          series: [{
              name: '在线设备',
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: this.dataOn,
              encode: {
                value: 2
              },
              symbolSize: function(val) {
                return 5;
              },
              label: {
                formatter: '{b}',
                position: 'right'
              },
              itemStyle: {
                color: '#64c800'
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {

              name: '离线设备',
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: this.dataOut,
              encode: {
                value: 2
              },
              symbolSize: function(val) {
                return 5;
              },
              label: {
                formatter: '{b}',
                position: 'right'
              },
              itemStyle: {
                color: '#bdbdbd'
              },
              emphasis: {
                label: {
                  show: true
                }
              }

            },
            {

              name: '报警设备',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: this.dataWaring,
              showEffectOn: 'render',
                    rippleEffect: {
                      brushType: 'stroke'
                    },
              encode: {
                value: 2
              },
              symbolSize: function(val) {
                return 15;
              },
              label: {
                formatter: '{b}',
                position: 'right'
              },
              itemStyle: {
                color: '#f70000'
              },
              emphasis: {
                label: {
                  show: true
                }
              }

            },
          ]
        };
        myChart.setOption(option);
      },