小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一、openlayers

1、打开项目，安装openlayers

cnpm i -S ol

2、新建 OlMap.vue组件

<template>    
    <div id="map" ref="rootmap">   
    </div>
</template>
<script>
import "ol/ol.css"
import { Map, View } from "ol"
import mapconfig from '../config/mapconfig'
export default { 
    data() {    
        return {      
        map: null    
    };  
},  
mounted() {   
    var mapcontainer = this.$refs.rootmap;    
    this.map = new Map({      
        target: mapcontainer,      
        layers: mapconfig.streetmap(),    
        view: new View({       
            projection: "EPSG:4326",    //使用这个坐标系       
            center: [mapconfig.x,mapconfig.y],  //深圳        
            zoom: mapconfig.zoom     
        })   
    });  
}};
</script>
<style>
#map{  
    height:640px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { 
    display: none;
}
</style>

3、一些信息放置到配置文件中,src目录下新建config文件夹，建mapconfig.js\

src/config/mapconfig.js

import TileLayer from "ol/layer/Tile"
import TileArcGISRest from 'ol/source/TileArcGISRest'
import OSM from "ol/source/OSM"
import XYZ from 'ol/source/XYZ'
let maptype=2         
//0表示部署的离线瓦片地图，1表示OSM,2表示使用Arcgis在线午夜蓝地图服务
var streetmap=function(){    
    var maplayer=null;    
    switch(maptype){        
        case 0:            
            maplayer=new TileLayer({                
                source: new XYZ({                    
                                             url:'http://127.0.0.1:7080/streetmap/shenzhen/{z}/{x}/{y}.jpg'                })           
    })        
        break;       
        case 1:            
            maplayer=new TileLayer({              
                source: new OSM()           
                })        
         break;        
         case 2:           
             maplayer=new TileLayer({                
             source:new TileArcGISRest({                    url:'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'               
        })           
   })        
        break;    
}    
     return [maplayer];
}
var mapconfig={   
    x:114.064839,     //中心点经度和纬度   
    y:22.548857,    
    zoom:15,          //地图缩放级别   
    streetmap:streetmap
};
export default mapconfig

4、在父组件中使用

二、echarts

1、安装echarts依赖

npm install echarts -S

2、全局引入（main.js）

import echarts from 'echarts'Vue.prototype.$echarts = echarts

3、Echarts.vue

    注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

4、按需引入

    由于全局引入会将所有的echarts图表打包，导致体积过大。在Echarts.vue文件中，使用 require 而不是 import

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')