一 vue 引入echarts
官网提供步骤: http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
1.npm安装
npm install echarts --save
2. // main.js 引入echarts
import echartsfrom 'echarts'
Vue.prototype.$echarts = echarts;
3.map.vue
二.vue 使用高德地图
vue安装vue-amap
npm安装
npm install vue-amap --save
CDN
目前可通过unpkg.com/vue-amap获取最新版本的资源。
main.js引入vue-amap
// 引入高德地图
import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
key: 'c573541ee962147adc05c894114ba8ea',//刚刚开发者申请哪里的key
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
});
3.组件里调用高德地图
需要注意:一定要设置宽高,不然地图不会显示。或者给外面套一个div,给div设置宽高也行。
image.png