阅读 249

vue2.x+vue-cli3.0地图demo踩过的坑

一、前言

1、背景

最近在做数据可视化的学习,从网上找了一下,没有相关的学习资料,打算结合自己的摸索和学习,记录一下踩过的坑,便于后续查阅以及供大家参考学习。

2、版本包

nodejs:12.14.0

vue:2.6.10

vue-cli:3.0.1

echarts:4.6.0

二、地图项目实战

1、项目初始化 打开cmd命令窗口,进入本地某个路径下,运行vue create vue-map命令,即可初始化一个vue项目。用vscode打开项目,目录如下所示:

然后根据命令行中的提示,运行cd vue-map命令,进入vue-map项目路径下,最后运行npm run serve,然后在浏览器中即可看到项目首页。

2、创建地图组件

在组件的div中填写中国地图四个字。

在app.vue中引入EchartsMap

然后打开浏览器即可看到界面已经被渲染了。

3、安装依赖包

(1)安装echarts

(2)安装axios

(3)导echarts和axios包

(4)创建生命周期钩子和函数

4、axios请求数据

特别说明:

(1)vue-cli 2.x静态json文件是直接放在static路径下的,而vue-cli 3.x在项目创建时,没有static文件夹,静态文件是放在public文件夹下,所以地图文件的json数据需要放在public文件夹下面,所以在vue-cli 3.x中请求数据的路径如下所示:

vue-cli 2.x下的数据请求方式如下:

(2)vue-cli 3.x的首页是:localhost:8080/public/index.html,在浏览器中输入localhost:8080或者localhost:8080/public/index.html是一样的,所以根路径为index.html的路径。

vue-cli 2.x工程目录,根目录是index.html文件所在目录。

(3)在vue-cli 2.x中可以直接写console.log(),而vue-cli 3.x中需要window.console.log()。 打印的数据如下所示:

5、配置地图样式 label:用于显示各个省或市等的名字 itemStyle:用于设置每个多边形(比如省市等)的样式

data:部分可以先不用,等使用visualMap组件时,需要在数据中加入其它维度给 visualMap 组件用来映射到颜色等其它图形属性。

6、设置地图自适应尺寸

在 mapChart方法中的最后添加以下代码即可。

7、窗口尺寸设置

默认情况,index.html的height的高度为0,所以必须要设置index.html中的height,不然会看到程序无错误,而没有地图显示。

首先在index.html中添加height信息。

然后在组件EchartMap.vue中添加height信息

8、地图项目页面显示如下: