PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

Hi, I’m Psycho, a front-end beginner.

Have you bought your tickets home for the New Year?

In general, many platforms have launched annual summary activities in this New Year, such as the annual travel summary of Zhihang train ticket. After reading it, I thought that the excellent content sharing community of Nuggets must gather elites from all over the world, which is also useful to the front end echarts library recently. How about a visual map of the migration of friends heading home for Spring Festival? It would be interesting to take a look at the most popular cities to visit.

Demo address

Look at the effect here

map

From the perspective of data, migration data is nothing more than departure city and arrival city. On the map of China, I just need to get the longitude and latitude of two cities, and then I can connect them on the map, and the easiest route comes out.

Let’s try to use Echarts to draw a map of China, first of all to prepare a map of China JS file, China.js can be found in my source code

Introduce the China.js file after introducing echarts.

Echarts configuration details can be found here

<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="js/china.js"></script>
Copy the code

The geo configuration in echarts options is as follows

geo: {
      map: "china".label: {
        emphasis: {
          show: true.color: "#fff"}},roam: true.scaleLimit: {
        max: 6.min: 1
      },
      // Zoom in on our map
      zoom: 1.itemStyle: {
        normal: {
          areaColor: "Rgba (43, 196, 243, 0.42)".borderColor: "rgba(43, 196, 243, 1)".borderWidth: 1
        },
        emphasis: {
          areaColor: "#2B91B7"}}}Copy the code

Add a little background image (found online), adjust the style, and a simple map of China comes out.

Map cities and paths

For example, suppose our departure city is Xi ‘an and our arrival city is Dongguan.

Their corresponding data are as follows: F_LAT and F_LON correspond to the latitude and longitude of the starting city, and T_LAT and t_LON represent the latitude and longitude of the arriving city.

{"fn": "Xi 'an"."f_lat": "34.263161"."f_lon": "108.948021"."tn": "Dongguan"."t_lat": "23.046238"."t_lon": "113.746262"}
Copy the code

Given the latitude and longitude of the cities, we can mark the two scatter plots on the map and connect them by line.

Add the following code to options.series, the first for the labeled city and the second for the line.

Among them, getCityPos is to get the longitude and latitude of the punctuation city, and convertData is to convert the data with the drawing route. Finally, to make it more interesting, I put a small plane on the line.

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[0]].var toCoord = geoCoordMap[dataItem[1]].if (fromCoord && toCoord) {
        res.push({
          fromName: dataItem[0].toName: dataItem[1].coords: [fromCoord, toCoord],
          value: origin.filter(i= > i.fn === dataItem[0] && i.tn === dataItem[1]).length }); }}return res;
  };
Copy the code
var planePath = "Path: / / M1705.06, 1318.313 v - 89.254-319.9-221.799 l c0.521 l0.073-208.063-84.662-26.629-121.796-63.961 - c - 37.332-0.305-121.491 64.482, 36.829, 63.961 and 121.491 l0.073, 208.063 l - 319.9, 221.799 v89.254 l12.238 l330.343-157.288, 241.308 l - 134.449, 92.931 l0.531, 42 . 034 l175. 125-42.917 l175.125 l0.531 42.917-42.034 l - 134.449-92.931 L1705.06 l12.238-241.308, 1318.313 z";
Copy the code
  var series = [
    {
      name: 'city'.type: 'scatter'.coordinateSystem: 'geo'.data: getCityPos(finalList),
      symbolSize: 8.showEffectOn: 'render'.rippleEffect: {
        brushType: 'stroke',},itemStyle: {
        color: '#fff',},hoverAnimation: true.zlevel: 1}, {type: "lines".zlevel: 2.symbol: ["none"."arrow"].symbolSize: 10.effect: {
        show: true.period: 6.trailLength: 0.symbol: planePath,
        symbolSize: 15
      },
      lineStyle: {
        normal: {
          color: '#fff'.width: 1.opacity: 0.6.curveness: 0.2}},data: convertData(finalList),
    }
  ];

Copy the code

Then the simple effect comes out:

In fact, at this point, you just need to get the data of diggers going to and from the city. But in order to visualize this, we need a little bit of statistics.

Simple statistics

First, we simulate some data to see the effect, and simply compare the data to calculate the cities with the most starting routes and the cities with the most arriving routes. The final effect is as follows:

Get your friends’ round-trip city data

There are two ways to get involved.

1. Click “I want to participate” in the upper right corner and select your own route to and from the city.

2. In addition, digg friends can leave their round-trip cities in the comments of the article, such as [Chengdu, Changsha]. Subsequently, I will crawl all the comment data through Python for data synchronization to the map. Users refresh the page after commenting to see their route plotted on a map.

The final result

The front end uses simple Vue + Echarts

Python + Flask + Gunicorn for the back end

The final effect is can see on the page to dig friends share total route, starting line most populous city and the corresponding line number, reach the line most populous city and the corresponding line number, you can also see on the map: how many people are you the same route, this project I will continue to improve, the follow-up can also see his head is in Denver’s nickname and! If you want to form a team at home, go to the Nuggets and find him.

conclusion

Been around the Nuggets a long time and really like the nuggets community. This time happened to be the Spring Festival creative contribution activity, I tried to realize my ideas and here to do a simple share. From a technical point of view, this thing is very simple, and there are a lot of improvements to be made. Don’t spray big guy. I will improve myself in the later time, and I hope you can put forward your valuable opinions!

Thank you for digging gold, also thank you digging friends!

Happy New Year to you all! Have a nice trip home! 2022 Muffled sound makes a fortune!