Use echarts show travel footprint

Foreword

Has been a dream of traveling around the world, travel around the world and experience different countries of human civilization, seeking to visit the mountain water, the great good fortune to experience the Creator of nature. After all, life is more than the immediate struggling, as well as poetry and distant. Over the years, have gone through some places, every place, let me from the dream a few. Although I know that around the world than it is, there is still not know how many hills, but I have been to this dream trying to close. I hope that one day, I can smile to myself, you did it!

Six years ago, because of work reasons, I have come across a map application development, and since then, my love of the map to buried in the bottom of my heart. Middle of this year I took my parents a trip to travel, to go to some places I've never been, I want to have a map so I lit it, record what I have been to the new "territory." Search the map application under the market already exists, not what I want, the only more in line with my needs is a small function inside Baidu tourism, called the trail map, but it seems long ago stopped maintenance, data stays in 2016 year. . .

The tool can not find the extra trouble, then create their own one. Yes ah, why not develop a yourself? He went ahead.

Engineering structures

First with cyt-cliquickly build the framework of the project. cyt-cli address

cyt-cliYou can quickly create scaffolding is a front-end engineering, with a fairly complete webpack4 configuration currently supports pure js, vue, react and other languages.
If not cyt-cli, install the first global look at: 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 

Because I wanted to make quick prototype, so the easiest to use templates on the list, select first swan-template.
Wait a moment, the project build better.
Generated project directory:

|--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 # 浏览器支持规则
|--.gitignore 
|--package.json
|--postcss.config.js # postcss插件配置
|--README.md

Installation at the dependencies.

cd footprint
npm i

Map Selection

Map showing I chose echarts. echarts official website

npm i --save echarts

Application Development

My core demand is very simple, is that you can put the country I've been to, provinces, municipalities can show up on the map.
To achieve domestic provinces, develop logic is simple:

1. introductionecharts

Demand references

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';

2. The processing of user data

To seriesthe datause.

let handleData = function(rawdata) {
    rowData.forEach(item => {
        item.value = FREQUENCY[item.value]
        if (item.value !== NEVER) {
            item.label = { show: true, color: LEBEL_COLOR }
        }
        if (item.value === NEVER) {
            never.push(item);
        } else if (item.value === ONECE) {
            onece.push(item);
        } else if (item.value === AFEWTIMES) {
            afewtimes.push(item);
        } else {
            usually.push(item);
        }
    });
    series = [usually, afewtimes, onece, never].map((item, index) => {
        let temp = {
            type: 'map',
            map: mapType,
            roam: true,
            itemStyle: {
                emphasis: { label: { show: true } },
                areaColor: '#fff'
            }
        };
        temp.name = legendData[index];
        temp.data = item;
        return temp;
    })
}

handleData(userData);

3. Registrationmap

There registerMap echarts method, echarts.registerMap (mapName, geoJson, specialAreas).

- mapName：地图名称，一定要与option->series->map对应的值相同。
- geoJson：GeoJson格式的数据，具体格式见 http://geojson.org/。
- specialAreas：可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。

geoJson geographic information data, generally large, of course, get through asynchronous.

util.get('assets/china.json').then(data => {
    let chinaJson = data;
    myChart.hideLoading();
    // 注册地图
    echarts.registerMap(mapName, chinaJson, {})
})

Vector map data ECharts3 provided in version 4 is no longer available for download the service. Official website explained that "As part of the data does not meet the national" Surveying and Mapping Law "provisions." However, if not commercial, these vector data can still be used. I need to be here for https://github.com/yc111/echarts3-geojson

4. Configure option to display map

Additional configuration after registration map

// 指定图表的配置项和数据
let option = {
    color: _color,
    title: _title,
    tooltip: _tooltip,
    legend: _legend,
    visualMap: _visualMap,
    toolbox: _toolbox,
    series: series
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

Add Travis CI Continuous Integration

It took about a day, the prototype of good (feeling of a large part of the tone color map ...). I put in a project deployed on github page, but after each build, must manually deploy, too much trouble.

So I used the Travis CI to do continuous integration project, as long as the code is now a submission will be automatically deployed.

Travis specific details about the configuration, you can refer to my other article: the use of Travis CI + GitHub achieve continuous integration and automated deployment

Results preview

Preview Project Address: http://champyin.com/footprint/

Yet relatively simple and only support the province. After I put the world map, city maps and all add to the mix (after all, the people in transit, ha ha), drill down to achieve the map, and to optimize the user data set, and constantly improve it.

Project Source Address: https://github.com/yc111/footprint
welcome star. If you prefer, you can fork the project, and then build your own footprint applications.

-
welcome to reprint, please indicate the source:
https://champyin.com/2019/09/27/%E5%88%A9%E7%94%A8echarts%E5%B1%95%E7%A4%BA% E6% 97% 85% E8% A1% 8C% E8% B6% B3% E8% BF% B9 /

This article was published in sync:
use echarts show travel footprint | Nuggets