【掘友春节迁徙小数据】简单做了一个春节迁徙数据分析地图

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

大家好，我是Psycho,一位前端初学者小白。

新年降至，各位掘友回家的车票买好了吗？

一般在这个新年很多平台都推出了年度总结的活动，例如智行火车票的年度出行总结，看完之后自己就在发想，在掘金这个优秀的内容分享社区想必集结了来自五湖四海的精英大佬们，恰逢最近有用到前端echarts库，那要不试试看做一个掘友们春节回家的迁徙可视化地图？顺便来看看最多掘友出发的城市和最到达的城市，应该有点意思。

演示地址

看效果在这里

绘制地图

从数据层面来说，迁徙的数据无非就是出发城市和到达城市。在中国地图上，我只需要拿到两个城市对应的经纬度，就可以在地图上连接起来，一个最简单的路线就出来了。

我们来试试看，用echarts绘制中国地图，首先要准备中国地图的JS文件，china.js可在我的源代码找到

引入echarts后引入china.js文件。

echarts详细配置介绍可以看这里

<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="js/china.js"></script>
复制代码

echarts的options里面的geo配置如下

geo: {
      map: "china",
      label: {
        emphasis: {
          show: true,
          color: "#fff"
        }
      },
      roam: true,
      scaleLimit: {
        max: 6,
        min: 1
      },
      //   放大我们的地图
      zoom: 1,
      itemStyle: {
        normal: {
          areaColor: "rgba(43, 196, 243, 0.42)",
          borderColor: "rgba(43, 196, 243, 1)",
          borderWidth: 1
        },
        emphasis: {
          areaColor: "#2B91B7"
        }
      }
    }
复制代码

稍微加了个背景图（网上找的），调了一下样式后，一个简单的中国地图就出来了。

绘制城市及路径

举个例子，假设我们的出发城市是西安，到达城市是东莞。

他们对应的数据如下，f_lat和f_lon对应出发城市的纬度和经度，t_lat和t_lon代表到达城市的纬度和经度。

{"fn": "西安", "f_lat": "34.263161", "f_lon": "108.948021", "tn": "东莞", "t_lat": "23.046238", "t_lon": "113.746262"}
复制代码

有了城市的经纬度，我们就可以在地图上把两个城市散点图标注出来并且通过line来进行连接。

在options.series内添加以下代码，第一个为标注城市，第二个为连线。

其中，getCityPos是获取标点城市的经纬度，convertData是进行配合绘制路线的数据转换，最后为了看上去有意思一点，我在连线上放了一个小飞机。

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;
  };
复制代码

var planePath = "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
复制代码

  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),
    }
  ];

复制代码

然后简单的效果就出来了：

其实到这里，只需要去获取掘友们往返城市的数据就可以了。但是为了更直观的展示，还是需要一点小小的统计数据。

简单统计

先通过模拟一些数据来看下效果，并且简单的对数据做个比较，计算出出发线路最多的城市和到达线路最多的城市。最终效果如下：

获取掘友们的往返城市数据

目前有两种方式来参与。

1、点击右上角我要参与，选择自己的往返城市后即可生成你的专属路线。

2、除此之外，掘友们可以在文章评论下去留下自己的往返城市，例如【成都，长沙】,后续我统一通过Python去爬取所有的评论数据进行数据同步到地图。用户评论后刷新页面即可看到自己的路线在地图上绘制出来。

最终效果

前端使用的是简单的 Vue + Echarts

后端使用的 Python + Flask + Gunicorn

最终的效果就是可以在页面上看到掘友分享的路线总数，出发线路最多的城市及对应线路数量，到达线路最多的城市及对应线路数量，在地图上还可以看到有多少人和你是同一路线，本项目我将继续完善，后续还可以看到他在掘金的昵称和头像！回家想组个队的话，那就快去掘金找TA吧！

总结

在掘金待了很久了，确实很喜欢掘金这个社区。这次正好碰上春节创意投稿的活动，就尝试将自己的想法实现出来并且在这里给大家做个简单的分享。从技术层面来说这个东西很简单，要优化改进的地方还有很多。大佬勿喷。我自己也会在后面的时间多多完善多多提升自己，也希望大家提出自己宝贵意见！

感谢掘金，也感谢各位掘友们！

最后就祝各位新年快乐！回家一路顺风！2022 闷声发大财！