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)
})
}