利用echarts展示旅行足迹

前言

一直有个环游世界的梦，周游列国，体验不同国家的人类文明，寻山访水，体验造物主大自然的伟大造化。毕竟人生不止眼前的苟且，还有诗和远方。这么多年以来，陆续走过了一些地方，每到一个地方，都让我离梦想又近了一些。虽然我知道这比起环游世界来说，还差不知道多少个山头，但是我一直在往这个梦努力，靠近。希望终有一天，我可以笑着对自己说，你做到了！

6年前，因为工作的原因，我接触过地图应用的开发，从那时起，我对地图的热爱就埋在了心底。今年年中我带爸妈旅了旅游，去了一些我没去过的地方，我好想有个地图可以让我点亮一下，记录一下我到过的新的“领土”。搜了下市面上已经存在的地图应用，都不是我想要的，唯一比较符合我的需求的是百度旅游里面的一个小功能，叫做足迹地图，但是似乎早就停止了维护，数据停留在2016年。。。

找不到趁手的工具，那就自己打造一把。是啊，为什么不自己开发一个呢？说干就干。

工程搭建

首先用 cyt-cli 快速搭建项目框架。cyt-cli地址

cyt-cli 是一款可以快速创建前端工程的脚手架，具有比较完善的webpack4配置，目前支持纯js、vue、react等语言版本。
如果没有安装 cyt-cli ，先全局安装一下：npm i -g cyt-cli。

cyt-cli create footprint
✔ fetching template ...
? please choose a template to create roject (Use arrow keys)
❯ swan-template 
  swan-vue-template 
  swan-react-template 

因为想快速做出雏形来，所以使用最简单的模版就行，选择第一个 swan-template。
等待一会，工程就搭建好了。
生成的工程目录：

|--build/ # webpack配置文件
|    |-- webpack.base.js
|    |-- webpack.dev.js
|    |-- webpack.prod.js
|--public/ # 首页模版
|    |-- index.html
|--src/
|    |-- assets/ # 静态资源，比如中国地图数据
|    |-- components/ # 项目组件
|    |       |--  foo.js
|    |       |--  bar.js
|    |-- icon/ # 字体图标
|    |-- images/ # 图片资源
|    |-- theme/ # 样式文件
|    |-- index.js # 项目入口
|--.babel.js # babel配置
|--.browserslistrc.json # 浏览器支持规则